add useRequiredActionAcknowledgements

Author: TheSonOfThomp

packages/wizard/src/demo/RequiredActions.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { Checkbox } from '@leafygreen-ui/checkbox';
 import { css } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Body, Description, H3, Link } from '@leafygreen-ui/typography';
 
-import { useWizardStepContext } from '../';
-
+import { useRequiredActionAcknowledgements } from './hooks/useRequiredActionAcknowledgements';
 import {
   ApplicationsCard,
   ClustersCard,
@@ -40,17 +39,8 @@ const sectionDividerStyles = css`
 `;
 
 export const RequiredActions = () => {
-  const { setAcknowledged } = useWizardStepContext();
-
-  const [checkbox1, setCheckbox1] = useState(false);
-  const [checkbox2, setCheckbox2] = useState(false);
-  const [checkbox3, setCheckbox3] = useState(false);
-
-  // TODO: reducer. Update the wizard step's acknowledged state when all checkboxes are checked
-  useEffect(() => {
-    const allChecked = checkbox1 && checkbox2 && checkbox3;
-    setAcknowledged(allChecked);
-  }, [checkbox1, checkbox2, checkbox3, setAcknowledged]);
+  const { acknowledgementsState, setAcknowledgementState } =
+    useRequiredActionAcknowledgements();
 
   return (
     <>
@@ -81,24 +71,24 @@ export const RequiredActions = () => {
           label="Permanently deletes all project data, including clusters, configurations, services, app services and triggers, and data across Atlas, which cannot be recovered."
           description="All project data including clusters, configurations, services, backup snapshots, app data, search indexes, federated database access, and Stream Processors will be permanently deleted. Deleted data cannot be recovered."
           bold
-          checked={checkbox1}
-          onChange={e => setCheckbox1(e.target.checked)}
+          checked={acknowledgementsState[0]}
+          onChange={e => setAcknowledgementState(0, e.target.checked)}
         />
 
         <Checkbox
           label="Overrides Termination Protection, deletes archives, backup snapshots, Stream Processors, and Connections, stops all data processing."
           description="Termination Protection will be disabled for all clusters. While archive data in object storage will remain recoverable for up to 5 days, online archives and backup snapshots will be deleted immediately. Stream Processors and Connections will be permanently deleted. Data processing will stop immediately."
           bold
-          checked={checkbox2}
-          onChange={e => setCheckbox2(e.target.checked)}
+          checked={acknowledgementsState[1]}
+          onChange={e => setAcknowledgementState(1, e.target.checked)}
         />
 
         <Checkbox
           label="Revokes access to federated databases, disables communication with Atlas clusters, and may disrupt application functionality."
           description="Access to federated database instances for dependent applications or services will be revoked, and communication between my application and the Atlas cluster or services will be disabled, which may cause functionality disruptions. I confirm that I have taken necessary measures to ensure uninterrupted access and mitigate impact."
           bold
-          checked={checkbox3}
-          onChange={e => setCheckbox3(e.target.checked)}
+          checked={acknowledgementsState[2]}
+          onChange={e => setAcknowledgementState(2, e.target.checked)}
         />
       </div>
     </>

packages/wizard/src/demo/hooks/useRequiredActionAcknowledgements.ts

@@ -0,0 +1,44 @@
+import { Reducer, useReducer } from 'react';
+
+import { useWizardStepContext } from '../../WizardStep';
+
+export type RequiredActionsAcknowledgementsState = [boolean, boolean, boolean];
+
+export interface RequiredActionsAcknowledgementsAction {
+  index: 0 | 1 | 2;
+  value: boolean;
+}
+
+export const useRequiredActionAcknowledgements = () => {
+  const { isAcknowledged, setAcknowledged } = useWizardStepContext();
+
+  const [acknowledgementsState, dispatch] = useReducer<
+    Reducer<
+      RequiredActionsAcknowledgementsState,
+      RequiredActionsAcknowledgementsAction
+    >
+  >(
+    (state, action) => {
+      const newState: RequiredActionsAcknowledgementsState = [...state];
+      newState[action.index] = action.value;
+
+      if (newState.every(Boolean)) {
+        setAcknowledged(true);
+      } else {
+        setAcknowledged(false);
+      }
+
+      return newState;
+    },
+    [false, false, false],
+  );
+
+  const setAcknowledgementState = (index: 0 | 1 | 2, value: boolean) =>
+    dispatch({ index, value });
+
+  return {
+    acknowledgementsState,
+    setAcknowledgementState,
+    isAcknowledged,
+  };
+};