feat: remove useState and persist it in the store

Light-it-labs · Oct 9, 2024 · d7defb5 · d7defb5
1 parent b6d56f1
commit d7defb5
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 35 deletions.
diff --git a/apps/eo_web/src/components/ThankYou.tsx b/apps/eo_web/src/components/ThankYou.tsx
@@ -38,12 +38,7 @@ export const ThankYou = ({
   const { mutate } = useMutation({
     mutationFn: mutationFunction,
     mutationKey: mutationKey,
-    onSuccess: () => {
-      setIsLoading(false);
-      resetProfilingStore();
-      resetSurveyStore();
-    },
-    onError: () => {
+    onSettled: () => {
       setIsLoading(false);
       resetSurveyStore();
       resetProfilingStore();

diff --git a/apps/eo_web/src/screens/Cancer/CancerSurveyThankYou.tsx b/apps/eo_web/src/screens/Cancer/CancerSurveyThankYou.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 
 import { useApi } from "~/api/useApi";
@@ -34,8 +33,6 @@ const flowsWithSmallFooter: FlowType[] = [
 export const CancerSurveyThankYou = () => {
   const { flow, email, phase, channel } = useSurveyStore();
 
-  const [flowState] = useState(flow);
-
   const [searchParams] = useSearchParams();
   const submission_id = searchParams.get("submission_id") ?? "";
 
@@ -57,10 +54,10 @@ export const CancerSurveyThankYou = () => {
           channel: channel as Channel,
         }}
       />
-      <HowEOWorks flow={flowState} />
-      <FAQs flow={flowState} />
-      {flowsWithSmallFooter.includes(flowState) ? (
-        <Footer flow={flowState} />
+      <HowEOWorks flow={flow} />
+      <FAQs flow={flow} />
+      {flowsWithSmallFooter.includes(flow) ? (
+        <Footer flow={flow} />
       ) : (
         <FooterFull />
       )}

diff --git a/apps/eo_web/src/screens/ProfilingThankYou.tsx b/apps/eo_web/src/screens/ProfilingThankYou.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useApi } from "~/api/useApi";
@@ -42,20 +42,17 @@ const flowsWithSmallFooter: FlowType[] = [
 export const ProfilingThankYou = () => {
   const { flow, account, usePayment, channel } = useProfilingStore();
 
-  const [flowState] = useState(flow);
-  const [usePaymentState] = useState(usePayment);
-
   const [searchParams] = useSearchParams();
   const submission_id = searchParams.get("submission_id") ?? "";
   const navigate = useNavigate();
 
   const { checkoutComplete } = useApi();
 
   useEffect(() => {
-    if (!submission_id && usePaymentState && !account.email) {
+    if (!submission_id && usePayment) {
       navigate(ROUTES.userRolSelector);
     }
-  }, [account.email, navigate, submission_id, usePaymentState]);
+  }, [navigate, submission_id, usePayment]);
 
   const goToWebApp = () => {
     window.location.href = WEB_APP_URL;
@@ -82,11 +79,11 @@ export const ProfilingThankYou = () => {
         </span>
       </ThankYou>
 
-      <HowEOWorks flow={flowState} />
-      <FAQs flow={flowState} />
+      <HowEOWorks flow={flow} />
+      <FAQs flow={flow} />
       <EOInYourInbox />
-      {flowsWithSmallFooter.includes(flowState) ? (
-        <Footer flow={flowState} />
+      {flowsWithSmallFooter.includes(flow) ? (
+        <Footer flow={flow} />
       ) : (
         <FooterFull />
       )}

diff --git a/apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx b/apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 
 import { useApi } from "~/api/useApi";
@@ -16,8 +15,6 @@ const flowsWithSmallFooter: FlowType[] = [Flows.mass_retirees];
 export const SeniorSurveyThankYou = () => {
   const { flow, email, phase, channel } = useSurveyStore();
 
-  const [flowState] = useState(flow);
-
   const [searchParams] = useSearchParams();
   const submission_id = searchParams.get("submission_id") ?? "";
 
@@ -39,14 +36,11 @@ export const SeniorSurveyThankYou = () => {
           channel: channel as Channel,
         }}
       />
-      <HowEOWorks />
-      <FAQs />
-      <FooterFull />
-
-      <HowEOWorks flow={flowState} />
-      <FAQs flow={flowState} />
-      {flowsWithSmallFooter.includes(flowState) ? (
-        <Footer flow={flowState} />
+
+      <HowEOWorks flow={flow} />
+      <FAQs flow={flow} />
+      {flowsWithSmallFooter.includes(flow) ? (
+        <Footer flow={flow} />
       ) : (
         <FooterFull />
       )}

diff --git a/apps/eo_web/src/stores/useProfilingStore.ts b/apps/eo_web/src/stores/useProfilingStore.ts
@@ -120,7 +120,14 @@ export const useProfilingStore = create<ProfilingStore>()(
         set({ usePayment });
       },
       resetProfilingStore: () => {
-        set({ ...get(), ...defaultState });
+        const currentState: ProfilingStore = get();
+        set({
+          ...currentState,
+          ...defaultState,
+          // We don't remove the flow and usePayment because it's needed to render components and they aren't PHI
+          flow: currentState.flow,
+          usePayment: currentState.usePayment,
+        });
       },
       setOrigin: (origin: string) => {
         set({ origin });

diff --git a/apps/eo_web/src/stores/useSurveyStore.tsx b/apps/eo_web/src/stores/useSurveyStore.tsx
@@ -37,6 +37,7 @@ export const useSurveyStore = create<SurveyStorageState>()(
       setPhase: (phase: string) => set({ phase }),
       setFlow: (flow: FlowType) => set({ flow }),
       reset: () => {
+        // We don't remove the flow because it's needed to render components and they aren't PHI
         set({ ...initialState, flow: _get().flow });
       },
     }),