Commit a7717463 authored by Alexandros Georgantas's avatar Alexandros Georgantas
Browse files

Clean up, decoupling progress item from list's implementation

parent 679627bc
......@@ -4,13 +4,11 @@ import classNames from 'classnames'
import classes from './ProgressItemButton.local.scss'
import Button from '../atoms/Button'
const ProgressItemButton = ({ id, disabled, update, index, values }) => {
let icon
const currentValue = values[index]
const ProgressItemButton = ({ disabled, update, value }) => {
const handleProgressItemClick = () => {
if (disabled) return
update(id, index)
update(value)
}
return (
......@@ -20,15 +18,14 @@ const ProgressItemButton = ({ id, disabled, update, index, values }) => {
)}
onClick={handleProgressItemClick}
disabled={disabled}
value={currentValue}
value={value}
/>
)
}
ProgressItemButton.propTypes = {
index: PropTypes.number.isRequired,
id: PropTypes.string.isRequired,
values: PropTypes.arrayOf(PropTypes.string).isRequired,
id: PropTypes.string,
value: PropTypes.string.isRequired,
disabled: PropTypes.bool,
update: PropTypes.func.isRequired
}
......
Progress Item
Progress Item Button
```js
const data =
{
index: 0,
id: 'style',
values:['To Style', 'Styling', 'Styled']
value:'To Style'
};
const update = (id, index) => {
console.log('haha')
const update = (value) => {
console.log('value', value)
};
<ProgressItemButton
index={data.index}
id={data.id}
values={data.values}
withIcon
value={data.value}
disabled
showModal
update={update}
/>
```
import PropTypes from 'prop-types'
import React from 'react'
import classnames from 'classnames'
import { map, includes, uniqueId } from 'lodash'
import { map, includes, uniqueId, forEach, indexOf } from 'lodash'
import classes from './ProgressList_new.local.scss'
import ProgressItemButton from './ProgressItemButton'
......@@ -47,9 +47,23 @@ const ProgressList = ({ chapter, roles, modalContainer, update }) => {
update(patch)
}
const handleUpdate = (type, index) => {
const findProgressItem = (value) => {
let type
let index
forEach(progressValues, (values, key)=>{
let found = indexOf(values, value)
if(found !== -1) {
type = key
index = found
}
})
return {type: type, index:index}
}
const handleUpdate = (value) => {
if (isAdmin || isProductionEditor) {
patchAction(type, index)
const progressItem = findProgressItem(value)
patchAction(progressItem.type, progressItem.index)
}
toggleModal()
}
......@@ -57,7 +71,8 @@ const ProgressList = ({ chapter, roles, modalContainer, update }) => {
const toggleModal = () => {}
const progressItems = map(progressValues, (value, key) => {
let delimiter
let delimiter
const currentValueIndex = chapter.progress[key]
if (key !== lastItem) {
delimiter = (
......@@ -68,11 +83,9 @@ const ProgressList = ({ chapter, roles, modalContainer, update }) => {
return (
<div className={classes.itemContainer} key={uniqueId()}>
<ProgressItemButton
id={key}
disabled={!canAct(key)}
update={handleUpdate}
index={chapter.progress[key]}
values={value}
value={value[currentValueIndex]}
/>
{delimiter}
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment