updated demo_module

.gitignore

@@ -9,6 +9,9 @@
 # production
 /build
 
+# documentation
+/ code_docu
+
 # misc
 .DS_Store
 .env

src/css/style.css

@@ -185,3 +185,18 @@ button {
   max-height: 100%;
   overflow-y: scroll;
 }
+/** Forms */
+form * {
+  padding: 0.2em 0.6em;
+  margin: 0.2em 0.3em;
+}
+form button {
+  background: #f0d1d1;
+  border: 1px solid #cc8a8a;
+  border-bottom: 3px solid #cc8a8a;
+}
+form input,
+form textbox,
+form select {
+  border: 1px solid #cc8a8a;
+}

src/css/style.styl

@@ -59,4 +59,15 @@
 .scrollable
   max-height 100%
   overflow-y scroll
-  
+  
+/** Forms */
+form
+  *
+    padding 0.2em 0.6em
+    margin 0.2em 0.3em
+  button
+    background #F0D1D1
+    border 1px solid #CC8A8A
+    border-bottom 3px solid #CC8A8A
+  input, textbox, select
+    border 1px solid #CC8A8A

src/demo_module/components/DemoEditPrimary.js

@@ -9,7 +9,10 @@ class DemoEditPrimary extends React.Component {
   }
 
   handleChange (event) {
-    this.props.actions.updatePrimary(event.target.id, {[event.target.name]: event.target.value})
+    const { actions } = this.props
+    const { id, name, value } = event.target
+    const passedValue = (name === 'active') ? (value === 'active') : value
+    actions.updatePrimary(id, {[name]: passedValue})
   }
 
   handleSubmit (event) {
@@ -17,9 +20,9 @@ class DemoEditPrimary extends React.Component {
     // Save values in database.
   }
 
-	render () {
+  render () {
     const { primary } = this.props
-		return (
+    return (
       <div>
         <form onSubmit={this.handleSubmit}>
           <input type='text' id={primary.id} name='name' ref={input => { this.name = input }} value={primary.name} onChange={this.handleChange} />
@@ -30,11 +33,11 @@ class DemoEditPrimary extends React.Component {
           <button type='submit'>Save</button>
         </form>
         {primary.secondary.map((secondary, key) => (
-          <DemoEditSecondary key={key} secondary={secondary} updateSecondary={this.props.actions.updateSecondary} />
+          <DemoEditSecondary key={key} primaryKey={primary.id} secondary={secondary} updateSecondary={this.props.actions.updateSecondary} />
         ))}
       </div>
     )
-	}
+  }
 }
 
-export default DemoEditPrimary
+export default DemoEditPrimary

src/demo_module/components/DemoEditSecondary.js

@@ -8,7 +8,9 @@ class DemoEditSecondary extends React.Component {
   }
 
   handleChange (event) {
-    this.props.updateSecondary(event.target.id, {[event.target.name]: event.target.value})
+    const { updateSecondary, primaryKey } = this.props
+    const { id, name, value } = event.target
+    updateSecondary(primaryKey, id, {[name]: value})
   }
 
   handleSubmit (event) {

src/demo_module/components/DemoModule.js

@@ -10,7 +10,6 @@ class DemoModule extends React.Component {
       <div className='app-main'>
         <div className='app-content'>
           <p>The state and action creators are propagated to the main module</p>
-          <p>{JSON.stringify(state)}</p>
           <button onClick={actions.loadSamples}>This button loads sample data.</button>
           {state.map((primary, key) => (
             <DemoEditPrimary key={key} primary={primary} actions={actions} />

src/demo_module/state.js

@@ -90,10 +90,6 @@ export function reducer (state = [], action) {
   console.log(`Entering demo_module root reducer.`, state, action, idx)
   if (action.type.match(/SECONDARY/)) {
     idx = state.findIndex(elem => { return (action.primaryId === elem.id) })
-    // leave immediately, if no idx was found (operations on secondary not valid if there's no primary)
-    if (idx < 0) {
-      return state
-    }
     console.log(`Using secondary reducer.`)
     const subState = state[idx].secondary
     const reducedState = secondaryReducer(subState, action)
@@ -101,13 +97,14 @@ export function reducer (state = [], action) {
     console.log('Leaving demo_module root reducer', subState, reducedState, nextState)
     return nextState
   }
+  idx = state.findIndex(elem => { return (action.id === elem.id) })
   switch (action.type) {
     case actionTypes.CREATE_PRIMARY:
       nextState = [ ...state, action.data ]
       console.log('Creating primary', state, nextState)
       return nextState
     case actionTypes.UPDATE_PRIMARY:
-      nextState = [ ...state.slice(0, idx), action.data, ...state.slice(idx + 1) ]
+      nextState = [ ...state.slice(0, idx), { ...state[idx], ...action.data }, ...state.slice(idx + 1) ]
       console.log('Updating primary', state, nextState)
       return nextState
     case actionTypes.REMOVE_PRIMARY:
@@ -137,7 +134,7 @@ function secondaryReducer (state = [], action) {
       console.log(`Creating secondary.`, state, nextState)
       return nextState
     case actionTypes.UPDATE_SECONDARY:
-      nextState = [ ...state.slice(0, idx), action.data, ...state.slice(idx + 1) ]
+      nextState = [ ...state.slice(0, idx), { ...state[idx], ...action.data }, ...state.slice(idx + 1) ]
       console.log(`Updating secondary.`, idx, state, nextState)
       return nextState
     case actionTypes.REMOVE_SECONDARY: