Implement initial change handling for UnitInfo

Converted UnitInfo into a class component
Added "name" props to inputs
Added change handler for the affiliation field

src/features/unitInfo/UnitInfo.jsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, {Component} from "react";
 import {connect} from "react-redux";
 import {Form, Dropdown, Segment} from "semantic-ui-react";
 
 import {selectUnitInfo} from "./unitInfoSelectors";
-
+import {updateUnitInfo} from "./unitInfoActions";
 
 const FACTIONS = [
     {value : "cc", text : "Capellan Confederation"},
@@ -19,29 +19,48 @@ const mapState = (state) => ({
     unitInfo : selectUnitInfo(state),
 });
 
-
-const UnitInfo = ({unitInfo = {}}) => {
-    const {name, affiliation} = unitInfo;
-
-    return (
-        <Segment attached="bottom">
-            <Form size="large">
-                <Form.Field name="name" width={6} >
-                    <label>Unit Name</label>
-                    <input placeholder="Name" value={name}/>
-                </Form.Field>
-                <Form.Field name="affiliation" width={6}>
-                    <label>Affiliation</label>
-                    <Dropdown
-                        selection
-                        options={FACTIONS}
-                        value={affiliation}
-                    />
-                </Form.Field>
-            </Form>
-        </Segment>
-    );
+const actions = {
+    updateUnitInfo,
 };
 
+class UnitInfo extends Component {
+    onAffiliationChanged = (e, result) => {
+        const {name, value} = result;
+
+        const newValues = { [name] : value};
+        this.props.updateUnitInfo(newValues);
+    }
+
+    render() {
+        const {unitInfo = {}} = this.props;
+        const {name, affiliation} = unitInfo;
+
+        return (
+            <Segment attached="bottom">
+                <Form size="large">
+                    <Form.Field name="name" width={6} >
+                        <label>Unit Name</label>
+                        <input
+                            placeholder="Name"
+                            name="name"
+                            value={name}
+                        />
+                    </Form.Field>
+                    <Form.Field name="affiliation" width={6}>
+                        <label>Affiliation</label>
+                        <Dropdown
+                            name="affiliation"
+                            selection
+                            options={FACTIONS}
+                            value={affiliation}
+                            onChange={this.onAffiliationChanged}
+                        />
+                    </Form.Field>
+                </Form>
+            </Segment>
+        );
+    }
+}
+
 
-export default connect(mapState)(UnitInfo);
+export default connect(mapState, actions)(UnitInfo);