diff --git a/src/components/Epochs.js b/src/components/Epochs.js index 90eddf5..383f97d 100644 --- a/src/components/Epochs.js +++ b/src/components/Epochs.js @@ -2,15 +2,16 @@ import React from 'react'; import './Epochs.scss'; import SoundChangeSuite from './SoundChangeSuite'; +import { render } from 'react-dom'; -const Epochs = props => { +const Epochs = ({epochs, dispatch}) => { - const addEpoch = (e, props) => { + const addEpoch = e => { e.preventDefault() - let index = props.epochs.length + 1; - props.dispatch({ + let index = epochs.length + 1; + dispatch({ type: 'ADD_EPOCH', value: {name: `Epoch ${index}`} }) @@ -18,7 +19,7 @@ const Epochs = props => { const removeEpoch = (e, epochName) => { e.preventDefault() - props.dispatch({ + dispatch({ type: 'REMOVE_EPOCH', value: {name: epochName} }); @@ -30,24 +31,25 @@ const Epochs = props => { index: epochIndex, changes: epoch.changes } - props.dispatch({ + dispatch({ type: "SET_EPOCH", value: dispatchValue }) } + const renderEpochs = () => epochs.map((epoch, index) => ( + + )) + return (

Sound Change Epochs

- {props.epochs - ? props.epochs.map((epoch, idx) => { - return }) - : <>} -
addEpoch(e, props)}> + { epochs ? renderEpochs() : <> } + addEpoch(e)}>
diff --git a/src/components/Features.js b/src/components/Features.js index 658d810..e136ea6 100644 --- a/src/components/Features.js +++ b/src/components/Features.js @@ -5,24 +5,24 @@ import './Features.scss'; import type { featureAction } from '../reducers/reducer.features'; const parsePhonesFromFeatureObject = featureObject => { + const getProperty = property => object => object[property] const getFeatureMap = (featureObject) => { return Object.keys(featureObject).map(feature => { - const plusPhones = featureObject[feature].positive.map(phone => phone.grapheme).join('|'); - const minusPhones = featureObject[feature].negative.map(phone => phone.grapheme).join('|'); + const plusPhones = featureObject[feature].positive.map(getProperty('grapheme')).join(' / '); + const minusPhones = featureObject[feature].negative.map(getProperty('grapheme')).join(' / '); return {[feature]: {plus: plusPhones, minus: minusPhones}} }) } const getFeatureMapJSX = (featureMap) => { return featureMap.map((feature, index) => { - const featureName = Object.keys(feature) - const plusPhones = feature[featureName].plus; - const minusPhones = feature[featureName].minus; + const featureName = Object.keys(feature); + const { plus, minus } = feature[featureName]; return (
  • - {`[+ ${featureName}] = ${plusPhones}`} - {`[- ${featureName}] = ${minusPhones}`} + {`[+ ${featureName}] = ${plus}`} + {`[- ${featureName}] = ${minus}`}
  • ) }) @@ -33,51 +33,34 @@ const parsePhonesFromFeatureObject = featureObject => { return featureMapJSX; } -const buildReducerAction = (e, newPositivePhones, newNegativePhones, feature): featureAction => { - e.preventDefault(); - const positivePhones = [] - newPositivePhones !== '' - ? newPositivePhones.split('/').forEach(phone => positivePhones.push(phone.trim())) - : positivePhones.push('') - - const negativePhones = [] - newNegativePhones !== '' - ? newNegativePhones.split('/').forEach(phone => negativePhones.push(phone.trim())) - : negativePhones.push('') +const parseNewPhones = somePhones => { + if (somePhones === '') return ['']; + return somePhones.split('/').map(phone => phone.trim()); +} - return { +const handleClickDispatch = e => dispatchFunction => actionBuilder => actionParameters => { + e.preventDefault(); + return dispatchFunction(actionBuilder(actionParameters)); +} + +const buildAddFeatureAction = ([newPositivePhones, newNegativePhones, feature]): featureAction => ( + { type: "ADD_FEATURE", value: { - positivePhones, - negativePhones, + positivePhones: parseNewPhones(newPositivePhones), + negativePhones: parseNewPhones(newNegativePhones), feature } } -} +) -const getPhonemesFromFeatureSubmission = (props, newPhonemes, feature) => { - let newPhonemeObject = newPhonemes.split('/').reduce((phonemeObject, newPhoneme) => { - newPhoneme = newPhoneme.trim(); - phonemeObject = phonemeObject[newPhoneme] - ? {...phonemeObject, [newPhoneme]: [...phonemeObject[newPhoneme], feature]} - : {...phonemeObject, [newPhoneme]: [feature]} - return phonemeObject; - }, {...props.phonemes}) - return newPhonemeObject; -} - -const Features = (props) => { +const Features = ({ phones, features, dispatch }) => { const [feature, setFeature] = useState('aspirated') const [ newPositivePhones, setNewPositivePhones ] = useState('tʰ / pʰ / kʰ'); const [ newNegativePhones, setNewNegativePhones ] = useState('t / p / k'); const newFeaturesSubmit = e => { e.preventDefault(); - - // let newPhonemeObject = getPhonemesFromFeatureSubmission(props, newPhonemes, feature); - // props.setPhonemes(newPhonemeObject); - // if (!props.features || !props.features.includes(feature)) props.setFeatures([...props.features, feature]) - setFeature(''); setNewPositivePhones(''); setNewNegativePhones(''); @@ -89,7 +72,7 @@ const Features = (props) => {

    Phonetic Features

    @@ -116,7 +99,7 @@ const Features = (props) => { props.dispatch(buildReducerAction(e, newPositivePhones, newNegativePhones, feature))} + onClick={e => handleClickDispatch(e)(dispatch)(buildAddFeatureAction)([newPositivePhones, newNegativePhones, feature])} value="Add feature" >
    diff --git a/src/components/Options.js b/src/components/Options.js index 30997ef..2d7c059 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -6,13 +6,12 @@ const Options = ({ options, dispatch }) => { const [ load, setLoad ] = useState(''); const handleRadioChange = e => { - const option = e.target.name; - const setValue = e.target.id; + const { name, id } = e.target.name; dispatch({ type: 'SET_OPTIONS', value: { - option, - setValue + option: name, + setValue: id } }); } diff --git a/src/components/ProtoLang.js b/src/components/ProtoLang.js index f65886f..36d8bec 100644 --- a/src/components/ProtoLang.js +++ b/src/components/ProtoLang.js @@ -1,7 +1,16 @@ import React from 'react'; import './ProtoLang.scss'; -const ProtoLang = (props) => { +const ProtoLang = ({ lexicon, dispatch }) => { + const getProperty = property => object => object[property]; + + const renderLexicon = () => { + if (!lexicon) return ''; + // Code for optionally rendering epoch name with lexeme + // `\t#${lexeme.epoch.name}` + lexicon.map(getProperty('lexeme')).join('\n'); + } + return (

    Proto Language Lexicon

    @@ -10,14 +19,14 @@ const ProtoLang = (props) => {