From 95856605c446fe1c293e1e1e76896fd6925cac66 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Tue, 17 Dec 2024 22:18:59 +0000
Subject: [PATCH] Refactor changeCheckbox function

---
 .../components/Checklist/Public/Public.tsx    | 35 +++++++++++--------
 .../components/Checklist/Public/helpers.ts    | 24 ++++++++++---
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
index e5e2c499cb..2e5a08ded6 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
@@ -26,8 +26,8 @@ import { Props } from "../types";
 import { AutoAnsweredChecklist } from "./AutoAnsweredChecklist";
 import {
   getInitialExpandedGroups,
-  toggleCheckbox,
   toggleInArray,
+  toggleNonExclusiveCheckbox,
 } from "./helpers";
 
 export enum ChecklistLayout {
@@ -85,6 +85,11 @@ const VisibleChecklist: React.FC<Props> = (props) => {
     }),
   });
 
+  const setCheckedFieldValue = (optionIds: string[]) => {
+    const sortedCheckedIds = sortCheckedIds(optionIds);
+    formik.setFieldValue("checked", sortedCheckedIds);
+  };
+
   const initialExpandedGroups = getInitialExpandedGroups(
     groupedOptions,
     previouslySubmittedData
@@ -112,25 +117,27 @@ const VisibleChecklist: React.FC<Props> = (props) => {
   const exclusiveOptionIsChecked =
     exclusiveOrOption && formik.values.checked.includes(exclusiveOrOption.id);
 
+  const toggleExclusiveCheckbox = (checkboxId: string) => {
+    return exclusiveOptionIsChecked ? [] : [checkboxId];
+  };
+
   const changeCheckbox = (id: string) => () => {
-    const currentIds = formik.values.checked;
-    let newCheckedIds;
+    const currentCheckedIds = formik.values.checked;
+
     const currentCheckboxIsExclusiveOption =
       exclusiveOrOption && id === exclusiveOrOption.id;
 
     if (currentCheckboxIsExclusiveOption) {
-      newCheckedIds = exclusiveOptionIsChecked ? [] : [id];
-    } else if (exclusiveOrOption) {
-      newCheckedIds = toggleCheckbox(id, currentIds);
-      const onlyNonExclusiveOptions = newCheckedIds.filter(
-        (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id
-      );
-      newCheckedIds = onlyNonExclusiveOptions;
-    } else {
-      newCheckedIds = toggleCheckbox(id, currentIds);
+      const newCheckedIds = toggleExclusiveCheckbox(id);
+      setCheckedFieldValue(newCheckedIds);
+      return;
     }
-    const sortedCheckedIds = sortCheckedIds(newCheckedIds);
-    formik.setFieldValue("checked", sortedCheckedIds);
+    const newCheckedIds = toggleNonExclusiveCheckbox(
+      id,
+      currentCheckedIds,
+      exclusiveOrOption
+    );
+    setCheckedFieldValue(newCheckedIds);
   };
 
   return (
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
index b60aa45153..d057c281a3 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
@@ -11,30 +11,30 @@ export function toggleInArray<T>(value: T, arr: Array<T>): Array<T> {
 
 export function groupHasOptionSelected(
   group: Group<Option>,
-  answers: string[],
+  answers: string[]
 ) {
   return group.children.some((child) => answers.some((id) => child.id === id));
 }
 
 export function getInitialExpandedGroups(
   groupedOptions?: Array<Group<Option>>,
-  previouslySubmittedData?: Store.UserData,
+  previouslySubmittedData?: Store.UserData
 ) {
   return (groupedOptions ?? ([] as Group<Option>[])).reduce(
     (acc, group, index) =>
       groupHasOptionSelected(group, previouslySubmittedData?.answers ?? [])
         ? [...acc, index]
         : acc,
-    [] as number[],
+    [] as number[]
   );
 }
 
 export const toggleCheckbox = (
   thisCheckboxId: string,
-  currentlyCheckedOptionIds: string[],
+  currentlyCheckedOptionIds: string[]
 ) => {
   const toggleOff = currentlyCheckedOptionIds.filter(
-    (id) => id !== thisCheckboxId,
+    (id) => id !== thisCheckboxId
   );
 
   const toggleOn = [...currentlyCheckedOptionIds, thisCheckboxId];
@@ -43,3 +43,17 @@ export const toggleCheckbox = (
     ? toggleOff
     : toggleOn;
 };
+
+export const toggleNonExclusiveCheckbox = (
+  thisCheckboxId: string,
+  currentlyCheckedOptionIds: string[],
+  exclusiveOrOption: Option
+) => {
+  const newCheckedOptionIds = toggleCheckbox(
+    thisCheckboxId,
+    currentlyCheckedOptionIds
+  );
+  return newCheckedOptionIds.filter(
+    (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id
+  );
+};