From cc0af155e0f159a11f8fd5793d46bba09790bd83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20DOREAU?= <remi.d45@gmail.com>
Date: Wed, 16 Sep 2020 16:28:41 +0200
Subject: [PATCH] refactor(core): add immer + action renaming

---
 packages/core/package.json                    |  1 +
 .../components/CheckboxTree/CheckboxTree.tsx  | 79 ++++++-------------
 yarn.lock                                     |  5 ++
 3 files changed, 31 insertions(+), 54 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 7e9932bdc1..b2d55bc6fe 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -39,6 +39,7 @@
     "@types/react-sparklines": "^1.7.0",
     "classnames": "^2.2.6",
     "clsx": "^1.1.0",
+    "immer": "^7.0.9",
     "lodash": "^4.17.15",
     "material-table": "1.68.0",
     "prop-types": "^15.7.2",
diff --git a/packages/core/src/components/CheckboxTree/CheckboxTree.tsx b/packages/core/src/components/CheckboxTree/CheckboxTree.tsx
index 31fefda204..ed0da051c5 100644
--- a/packages/core/src/components/CheckboxTree/CheckboxTree.tsx
+++ b/packages/core/src/components/CheckboxTree/CheckboxTree.tsx
@@ -26,6 +26,7 @@ import {
 } from '@material-ui/core';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
+import produce from 'immer';
 
 type IndexedObject<T> = {
   [key: string]: T;
@@ -110,18 +111,7 @@ type checkOptionPayload = {
 type Action =
   | { type: 'checkOption'; payload: checkOptionPayload }
   | { type: 'checkCategory'; payload: string }
-  | { type: 'openCategory'; payload: string };
-
-const checkAllOptions = (
-  arr: Option[],
-  isChecked: boolean,
-): IndexedObject<Option> =>
-  arr.reduce((accumulator, el) => {
-    return {
-      ...accumulator,
-      [el.label]: { ...el, isChecked },
-    };
-  }, {});
+  | { type: 'toggleCategory'; payload: string };
 
 const reducer = (
   state: IndexedObject<SubCategoryWithIndexedOptions>,
@@ -129,49 +119,30 @@ const reducer = (
 ) => {
   switch (action.type) {
     case 'checkOption': {
-      const newOptions = {
-        ...state[action.payload.subCategoryLabel].options,
-        [action.payload.optionLabel]: {
-          ...state[action.payload.subCategoryLabel].options[
-            action.payload.optionLabel
-          ],
-          isChecked: !state[action.payload.subCategoryLabel].options[
-            action.payload.optionLabel
-          ].isChecked,
-        },
-      };
-
-      return {
-        ...state,
-        [action.payload.subCategoryLabel]: {
-          ...state[action.payload.subCategoryLabel],
-          isChecked: Object.values(newOptions).every(
-            option => option.isChecked,
-          ),
-          options: newOptions,
-        },
-      };
+      return produce(state, newState => {
+        const category = newState[action.payload.subCategoryLabel];
+        const option = category.options[action.payload.optionLabel];
+        option.isChecked = !option.isChecked;
+        category.isChecked = Object.values(category.options).every(
+          o => o.isChecked,
+        );
+      });
     }
     case 'checkCategory':
-      return {
-        ...state,
-        [action.payload]: {
-          ...state[action.payload],
-          isChecked: !state[action.payload].isChecked,
-          options: checkAllOptions(
-            Object.values(state[action.payload].options),
-            !state[action.payload].isChecked,
-          ),
-        },
-      };
-    case 'openCategory':
-      return {
-        ...state,
-        [action.payload]: {
-          ...state[action.payload],
-          isOpen: !state[action.payload].isOpen,
-        },
-      };
+      return produce(state, newState => {
+        const category = newState[action.payload];
+        const options = category.options;
+        category.isChecked = !category.isChecked;
+        // eslint-disable-next-line guard-for-in
+        for (const option in options) {
+          options[option].isChecked = category.isChecked;
+        }
+      });
+    case 'toggleCategory':
+      return produce(state, newState => {
+        const category = newState[action.payload];
+        category.isOpen = !category.isOpen;
+      });
     default:
       return state;
   }
@@ -206,7 +177,7 @@ export const CheckboxTree = (props: CheckboxTreeProps) => {
 
   const handleOpen = (event: any, value: any) => {
     event.stopPropagation();
-    dispatch({ type: 'openCategory', payload: value });
+    dispatch({ type: 'toggleCategory', payload: value });
   };
 
   useEffect(() => {
diff --git a/yarn.lock b/yarn.lock
index 449148e487..8d06ce3096 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11749,6 +11749,11 @@ immer@1.10.0:
   resolved "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immer@^7.0.9:
+  version "7.0.9"
+  resolved "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e"
+  integrity sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A==
+
 immutable@>=3.8.2, immutable@^3.8.1, immutable@^3.8.2, immutable@^3.x.x:
   version "3.8.2"
   resolved "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"