Skip to content

Commit

Permalink
Refactor AccomodationFieldGroup to remove useEffect()
Browse files Browse the repository at this point in the history
  • Loading branch information
bartacc committed Jul 29, 2024
1 parent 6225e87 commit 8f34ff1
Showing 1 changed file with 18 additions and 98 deletions.
116 changes: 18 additions & 98 deletions app/client/components/register/AccomodationFieldGroup.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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} />
</>
);
};

0 comments on commit 8f34ff1

Please sign in to comment.