Clean up, decoupling progress item from list's implementation

packages/bookbuilder/src/Chapter/ProgressItemButton.js

@@ -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
 }

packages/bookbuilder/src/Chapter/ProgressItemButton.md

-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}
 />
 ```

packages/bookbuilder/src/Chapter/ProgressList_new.js

 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>