diff --git a/src/components/Epochs.js b/src/components/Epochs.js index 4378621..66f8e5f 100644 --- a/src/components/Epochs.js +++ b/src/components/Epochs.js @@ -3,23 +3,32 @@ import './Epochs.scss'; import SoundChangeSuite from './SoundChangeSuite'; -const addEpoch = (e, props) => { - e.preventDefault() - let index = props.epochs.length + 1; - props.setEpochs([...props.epochs, {name: `epoch ${index}`, changes:['[+ feature]>[- feature]/_#']}]) -} const Epochs = props => { + + const addEpoch = (e, props) => { + e.preventDefault() + let index = props.epochs.length + 1; + props.setEpochs([...props.epochs, {name: `epoch ${index}`, changes:['[+ feature]>[- feature]/_#']}]) + } + const removeEpoch = (e, epochName) => { e.preventDefault() let newEpochs = props.epochs.filter(epoch => epoch.name !== epochName); props.setEpochs(newEpochs) } + + const updateEpoch = (epoch, epochIndex) => { + let updatedEpochs = [...props.epochs] + updatedEpochs[epochIndex] = epoch + props.setEpochs(updatedEpochs) + } + return (

Sound Change Epochs

- {props.epochs ? props.epochs.map((epoch, idx) => ) : <>} + {props.epochs ? props.epochs.map((epoch, idx) => ) : <>}
addEpoch(e, props)}>
diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js index 279b542..59abeef 100644 --- a/src/components/SoundChangeSuite.js +++ b/src/components/SoundChangeSuite.js @@ -4,14 +4,37 @@ import './SoundChangeSuite.scss'; const SoundChangeSuite = props => { const [ epoch, setEpoch ] = useState(props.epoch ? props.epoch : {name:'', changes:['']}); + const changeHandler = (e,cb) => { + cb(e); + props.updateEpoch(epoch, props.epochIndex); + } + return (

{epoch.name}

- - + +
props.removeEpoch(e, epoch.name)}>