Implement logic to set the unit color from a ColorPicker

src/features/unitInfo/UnitInfo/UnitInfo.jsx

@@ -7,7 +7,7 @@ import {
 } from "semantic-ui-react";
 
 import {selectUnitInfo} from "../unitInfoSelectors";
-import {updateUnitInfo} from "../unitInfoActions";
+import {updateUnitInfo, setUnitColor} from "../unitInfoActions";
 import {showColorPicker} from "common/components/ColorPicker/colorPickerActions";
 import {getValueFromEvent} from "common/utils/clientUtils";
 
@@ -49,7 +49,9 @@ class UnitInfo extends Component {
     }
 
     onColorClicked = () => {
-        this.props.showColorPicker(this.props.unitInfo.color);
+        const onColorPickedAction = setUnitColor();
+
+        this.props.showColorPicker(this.props.unitInfo.color, onColorPickedAction);
     }
 
 

src/features/unitInfo/unitInfoActions.js

@@ -1,8 +1,18 @@
-import {UNIT_INFO_UPDATE} from "./unitInfoConstants";
+import {
+    UNIT_INFO_UPDATE,
+    UNIT_INFO_SET_COLOR,
+} from "./unitInfoConstants";
 
 export function updateUnitInfo(values) {
     return {
         type : UNIT_INFO_UPDATE,
         payload : values,
     };
+}
+
+export function setUnitColor(color) {
+    return {
+        type : UNIT_INFO_SET_COLOR,
+        payload : {color}
+    };
 }

src/features/unitInfo/unitInfoConstants.js

@@ -1 +1,2 @@
-export const UNIT_INFO_UPDATE = "UNIT_INFO_UPDATE";
+export const UNIT_INFO_UPDATE = "UNIT_INFO_UPDATE";
+export const UNIT_INFO_SET_COLOR = "UNIT_INFO_SET_COLOR";

src/features/unitInfo/unitInfoReducer.js

@@ -1,7 +1,10 @@
 import {createReducer} from "common/utils/reducerUtils";
 
 import {DATA_LOADED} from "features/tools/toolConstants";
-import {UNIT_INFO_UPDATE} from "./unitInfoConstants";
+import {
+    UNIT_INFO_UPDATE,
+    UNIT_INFO_SET_COLOR,
+} from "./unitInfoConstants";
 
 const initialState = {
     name : "N/A",
@@ -22,7 +25,17 @@ function updateUnitInfo(state, payload) {
     };
 }
 
+function setUnitColor(state, payload) {
+    const {color} = payload;
+
+    return {
+        ...state,
+        color
+    };
+}
+
 export default createReducer(initialState, {
     [DATA_LOADED] : dataLoaded,
     [UNIT_INFO_UPDATE] : updateUnitInfo,
+    [UNIT_INFO_SET_COLOR] : setUnitColor,
 });