fix(app): changed passportHasCacaoError from func to boolean value, f…

…ixed error message setState loop (passportxyz#1144) changed passportHasCacaoError from func to boolean value fixed warning message render loop
jennifertrin · Apr 20, 2023 · 1fff094 · 1fff094
1 parent 33209e0
commit 1fff094
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 18 deletions.
diff --git a/app/__test-fixtures__/contextTestHelpers.tsx b/app/__test-fixtures__/contextTestHelpers.tsx
@@ -223,7 +223,7 @@ export const makeTestCeramicContext = (initialState?: Partial<CeramicContextStat
     handleDeleteStamps: jest.fn(),
     handleCheckRefreshPassport: () => Promise.resolve(true),
     expiredProviders: [],
-    passportHasCacaoError: () => false,
+    passportHasCacaoError: false,
     cancelCeramicConnection: jest.fn(),
     ...initialState,
   };

diff --git a/app/__tests__/components/RefreshModal.test.tsx b/app/__tests__/components/RefreshModal.test.tsx
@@ -36,7 +36,7 @@ describe("RefreshStampModal", () => {
       mockUserContext,
       {
         ...mockCeramicContext,
-        passportHasCacaoError: () => true,
+        passportHasCacaoError: true,
       },
       <RefreshStampModal isOpen={true} onClose={jest.fn()} />
     );
@@ -50,7 +50,7 @@ describe("RefreshStampModal", () => {
       mockUserContext,
       {
         ...mockCeramicContext,
-        passportHasCacaoError: () => true,
+        passportHasCacaoError: true,
       },
       <RefreshStampModal isOpen={true} onClose={jest.fn()} />
     );
@@ -64,7 +64,7 @@ describe("RefreshStampModal", () => {
       mockUserContext,
       {
         ...mockCeramicContext,
-        passportHasCacaoError: () => true,
+        passportHasCacaoError: true,
       },
       <RefreshStampModal isOpen={true} onClose={jest.fn()} />
     );

diff --git a/app/__tests__/pages/Dashboard.test.tsx b/app/__tests__/pages/Dashboard.test.tsx
@@ -275,7 +275,7 @@ describe("when a user clicks on the Passport logo", () => {
       mockUserContext,
       {
         ...mockCeramicContext,
-        passportHasCacaoError: () => true,
+        passportHasCacaoError: true,
       },
       <Router>
         <Dashboard />
@@ -293,7 +293,7 @@ describe("when a user clicks on the Passport logo", () => {
       mockUserContext,
       {
         ...mockCeramicContext,
-        passportHasCacaoError: () => true,
+        passportHasCacaoError: true,
       },
       <Router>
         <Dashboard />

diff --git a/app/components/PlatformCard.tsx b/app/components/PlatformCard.tsx
@@ -65,7 +65,7 @@ export const PlatformCard = ({
     onClose: onCloseRemoveStampModal,
   } = useDisclosure();
 
-  const disabled = passportHasCacaoError();
+  const disabled = passportHasCacaoError;
 
   // hide platforms based on filter
   const stampFilters = filter?.length && typeof filter === "string" ? getStampProviderFilters(filter) : false;

diff --git a/app/context/ceramicContext.tsx b/app/context/ceramicContext.tsx
@@ -40,6 +40,7 @@ import { PlatformProps } from "../components/GenericPlatform";
 
 // -- Trusted IAM servers DID
 const IAM_ISSUER_DID = process.env.NEXT_PUBLIC_PASSPORT_IAM_ISSUER_DID || "";
+const CACAO_ERROR_STATUSES: PassportLoadStatus[] = ["PassportCacaoError", "StampCacaoError"];
 
 export interface CeramicContextState {
   passport: Passport | undefined | false;
@@ -53,7 +54,7 @@ export interface CeramicContextState {
   cancelCeramicConnection: () => void;
   userDid: string | undefined;
   expiredProviders: PROVIDER_ID[];
-  passportHasCacaoError: () => boolean;
+  passportHasCacaoError: boolean;
   passportLoadResponse?: PassportLoadResponse;
 }
 
@@ -460,7 +461,7 @@ const startingState: CeramicContextState = {
   handleAddStamps: async () => {},
   handleDeleteStamps: async () => {},
   handleCheckRefreshPassport: async () => false,
-  passportHasCacaoError: () => false,
+  passportHasCacaoError: false,
   cancelCeramicConnection: () => {},
   userDid: undefined,
   expiredProviders: [],
@@ -480,6 +481,7 @@ export const CeramicContextProvider = ({ children }: { children: any }) => {
   const [userDid, setUserDid] = useState<string | undefined>();
   const [expiredProviders, setExpiredProviders] = useState<PROVIDER_ID[]>([]);
   const [passportLoadResponse, setPassportLoadResponse] = useState<PassportLoadResponse | undefined>();
+  const [passportHasCacaoError, setPassportHasCacaoError] = useState<boolean>(false);
   const [viewerConnection] = useViewerConnection();
   const [database, setDatabase] = useState<PassportDatabase | undefined>(undefined);
 
@@ -611,6 +613,8 @@ export const CeramicContextProvider = ({ children }: { children: any }) => {
     }
 
     setPassportLoadResponse({ passport, status, errorDetails });
+    setPassportHasCacaoError(CACAO_ERROR_STATUSES.includes(status));
+
     return passportToReturn;
   };
 
@@ -802,12 +806,6 @@ export const CeramicContextProvider = ({ children }: { children: any }) => {
     setAllProviderState(startingAllProvidersState);
   };
 
-  const passportHasCacaoError = (): boolean => {
-    const errorStatuses: PassportLoadStatus[] = ["PassportCacaoError", "StampCacaoError"];
-    if (passportLoadResponse) return errorStatuses.includes(passportLoadResponse.status);
-    else return false;
-  };
-
   const stateMemo = useMemo(
     () => ({
       passport,

diff --git a/app/pages/Dashboard.tsx b/app/pages/Dashboard.tsx
@@ -85,7 +85,7 @@ export default function Dashboard() {
   }, [isLoadingPassport]);
 
   useEffect(() => {
-    if (passportHasCacaoError()) {
+    if (passportHasCacaoError) {
       setUserWarning({
         name: "cacaoError",
         content: (
@@ -102,7 +102,7 @@ export default function Dashboard() {
     } else if (userWarning?.name === "cacaoError") {
       setUserWarning();
     }
-  });
+  }, [passportHasCacaoError]);
 
   useEffect(() => {
     if (expiredProviders.length > 0) {
@@ -123,7 +123,7 @@ export default function Dashboard() {
     } else if (userWarning?.name === "expiredStamp") {
       setUserWarning();
     }
-  });
+  }, [expiredProviders]);
 
   const retryModal = (
     <Modal isOpen={retryModalIsOpen} onClose={onRetryModalClose}>