From 8f34ff19ecf94da31f3bfad315e531cb25b0e558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Szczeci=C5=84ski?=
 <bartosz.szczecinski@protonmail.com>
Date: Mon, 29 Jul 2024 17:46:39 +0200
Subject: [PATCH] Refactor AccomodationFieldGroup to remove useEffect()

---
 .../register/AccomodationFieldGroup.tsx       | 116 +++---------------
 1 file changed, 18 insertions(+), 98 deletions(-)

diff --git a/app/client/components/register/AccomodationFieldGroup.tsx b/app/client/components/register/AccomodationFieldGroup.tsx
index 2ed265fc..f71ce827 100644
--- a/app/client/components/register/AccomodationFieldGroup.tsx
+++ b/app/client/components/register/AccomodationFieldGroup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useState } from "react";
 import { WidgetHandler } from "reactivated/dist/forms";
 import { DjangoFormsWidgetsCheckboxInput } from "reactivated/dist/generated";
 import { BasicFormField } from "../forms/BasicFormField";
@@ -9,120 +9,40 @@ interface AccomodationFieldGroupProps {
   breakfastField: WidgetHandler<DjangoFormsWidgetsCheckboxInput>;
 }
 
-interface GroupState {
-  accomodation: {
-    checked: boolean;
-  };
-  breakfast: {
-    disabled: boolean;
-    checked: boolean;
-  };
-  dinner: {
-    disabled: boolean;
-    checked: boolean;
-  };
-}
-
-interface GroupAction {
-  fieldName: string;
-  newValue: boolean;
-}
-
 export const AccomodationFieldGroup = ({
   dinnerField,
   accomodationField,
   breakfastField,
 }: AccomodationFieldGroupProps) => {
-  const reducer = (state: GroupState, action: GroupAction): GroupState => {
-    const { fieldName, newValue } = action;
-
-    switch (fieldName) {
-      case dinnerField.name:
-        return {
-          ...state,
-          dinner: {
-            ...state.dinner,
-            checked: newValue,
-          },
-        };
-
-      case accomodationField.name:
-        return {
-          accomodation: {
-            checked: newValue,
-          },
-          breakfast: {
-            disabled: !newValue,
-            checked: newValue,
-          },
-          dinner: {
-            disabled: !newValue,
-            checked: newValue,
-          },
-        };
-
-      case breakfastField.name:
-        return {
-          ...state,
-          breakfast: {
-            ...state.breakfast,
-            checked: newValue,
-          },
-        };
-      default:
-        return state;
-    }
-  };
-
-  const [groupState, dispatch] = useReducer(reducer, {
-    accomodation: {
-      checked: accomodationField.value,
-    },
-    breakfast: {
-      disabled: breakfastField.disabled || !accomodationField.value,
-      checked: breakfastField.value,
-    },
-    dinner: {
-      disabled: dinnerField.disabled || !accomodationField.value,
-      checked: dinnerField.value,
-    },
-  });
+  const [breakfastDisabled, setBreakfastDisabled] = useState(
+    breakfastField.disabled || !accomodationField.value,
+  );
 
-  useEffect(() => {
-    // Synchronize checkboxes managed by this component
-    // with Reactivated's form state, so that the form state
-    // is visible in parent component correctly.
-    dinnerField.handler(groupState.dinner.checked);
-    accomodationField.handler(groupState.accomodation.checked);
-    breakfastField.handler(groupState.breakfast.checked);
-  }, [groupState]);
+  const [dinnerDisabled, setDinnerDisabled] = useState(
+    dinnerField.disabled || !accomodationField.value,
+  );
 
-  const onCheckboxChange = (
+  const onAccomodationChange = (
     field: WidgetHandler<DjangoFormsWidgetsCheckboxInput>,
     value: boolean,
   ) => {
-    dispatch({ fieldName: field.name, newValue: value });
+    dinnerField.handler(value);
+    setDinnerDisabled(!value);
+
+    breakfastField.handler(value);
+    setBreakfastDisabled(!value);
+
+    field.handler(value);
   };
 
   return (
     <>
-      <BasicFormField
-        field={dinnerField}
-        disabled={groupState.dinner.disabled}
-        checked={groupState.dinner.checked}
-        onCheckboxChange={onCheckboxChange}
-      />
+      <BasicFormField field={dinnerField} disabled={dinnerDisabled} />
       <BasicFormField
         field={accomodationField}
-        checked={groupState.accomodation.checked}
-        onCheckboxChange={onCheckboxChange}
-      />
-      <BasicFormField
-        field={breakfastField}
-        disabled={groupState.breakfast.disabled}
-        checked={groupState.breakfast.checked}
-        onCheckboxChange={onCheckboxChange}
+        onCheckboxChange={onAccomodationChange}
       />
+      <BasicFormField field={breakfastField} disabled={breakfastDisabled} />
     </>
   );
 };