Add ability to set fields in an issue in redux

src/actions/index.js

@@ -45,3 +45,9 @@ export const commitIssue = dispatch => {
       })
   })
 }
+
+export const changeField = (key, value) => ({
+  type: 'UPDATE_ISSUE',
+  key,
+  value,
+})

src/components/MeetingTable.js

@@ -1,29 +1,68 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { changeField } from '../actions'
+import { selectDraftIssue } from '../selectors/issues'
 import styles from '../css/MeetingTable'
 
-const MeetingTable = () => (
-  <div className={styles.meetingTable}>
-    <div className={styles.meetingRows}>
-      <label htmlFor='MettingPoint' className={styles.meetingLabels}>
-        Meeting point
-      </label>
-      <input className='form-control' />
-    </div>
-    <div className={styles.meetingRows}>
-      <label htmlFor='ShortDesc' className={styles.meetingLabels}>
-        {' '}
-        Short Desc{' '}
-      </label>
-      <textarea className='form-control' />
-    </div>
-    <div className={styles.meetingRows}>
-      <label htmlFor='NumVotes' className={styles.meetingLabels}>
-        {' '}
-        Num of votes reqd{' '}
-      </label>
-      <input />
-    </div>
-  </div>
-)
+class _MeetingTable extends PureComponent {
+  onChangeNumVotes = event => {
+    this.props.changeField('numVotes', event.currentTarget.value)
+  }
+
+  onChangeDescription = event => {
+    this.props.changeField('description', event.currentTarget.value)
+  }
+
+  onChangeLabel = event => {
+    this.props.changeField('label', event.currentTarget.value)
+  }
+
+  render() {
+    return (
+      <div className={styles.meetingTable}>
+        <div className={styles.meetingRows}>
+          <label htmlFor='ShortDesc' className={styles.meetingLabels}>
+            {' '}
+            Issue label{' '}
+          </label>
+          <textarea
+            className='form-control'
+            value={this.props.draftIssue.get('label')}
+            onChange={this.onChangeLabel}
+          />
+        </div>
+        <div className={styles.meetingRows}>
+          <label htmlFor='MettingPoint' className={styles.meetingLabels}>
+            Issue description
+          </label>
+          <input
+            className='form-control'
+            value={this.props.draftIssue.get('description')}
+            onChange={this.onChangeDescription}
+          />
+        </div>
+        <div className={styles.meetingRows}>
+          <label htmlFor='NumVotes' className={styles.meetingLabels}>
+            {' '}
+            Num of votes reqd{' '}
+          </label>
+          <input
+            value={this.props.draftIssue.get('numVotes')}
+            onChange={this.onChangeNumVotes}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+const MeetingTable = connect(
+  state => ({
+    draftIssue: selectDraftIssue(state),
+  }),
+  dispatch => ({
+    changeField: (field, value) => dispatch(changeField(field, value)),
+  })
+)(_MeetingTable)
 
 export default MeetingTable

src/reducers/issues.js

@@ -17,7 +17,12 @@ const updaters = new Map([
 
 const INITIAL_STATE = fromJS({
   committed: [],
-  draft: {},
+  draft: {
+    numVotes: 0,
+    description: '',
+    label: '',
+    date: '',
+  },
 })
 
 export default (state = INITIAL_STATE, action) => {

src/selectors/issues.js

@@ -9,3 +9,7 @@ export const selectCurrentIssue = createSelector(
   selectLocation,
   (issues, location) => issues.get(location.payload.issueId)
 )
+
+export const selectDraftIssue = createSelector(selectIssues, issues =>
+  issues.get('draft')
+)