Fix dependency array bug

Concordium · Aug 9, 2023 · f109bb5 · f109bb5
1 parent 4841537
commit f109bb5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/.../browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialCard.stories.tsx b/.../browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialCard.stories.tsx
@@ -47,6 +47,7 @@ const schema: VerifiableCredentialSchema = {
                             description: 'Graduation date',
                         },
                     },
+                    required: [],
                 },
             },
             required: ['id', 'degreeType', 'degreeName', 'graduationDate'],

diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialHooks.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialHooks.tsx
@@ -115,7 +115,7 @@ export function useCredentialMetadata(credential: VerifiableCredential) {
  * @param dataFetcher the function that fetches updated data
  */
 export function useFetchingEffect<T>(
-    credentials: VerifiableCredential[] | undefined,
+    credentials: AsyncWrapper<VerifiableCredential[]>,
     storedData: AsyncWrapper<Record<string, T>>,
     setStoredData: (update: Record<string, T>) => Promise<void>,
     dataFetcher: (
@@ -131,8 +131,8 @@ export function useFetchingEffect<T>(
         let isCancelled = false;
         const abortControllers: AbortController[] = [];
 
-        if (credentials && !storedData.loading) {
-            dataFetcher(credentials, client, abortControllers, storedData.value).then((result) => {
+        if (!credentials.loading && credentials.value.length !== 0 && !storedData.loading) {
+            dataFetcher(credentials.value, client, abortControllers, storedData.value).then((result) => {
                 if (!isCancelled && result.updateReceived) {
                     setStoredData(result.data);
                 }
@@ -143,5 +143,5 @@ export function useFetchingEffect<T>(
             isCancelled = true;
             abortControllers.forEach((controller) => controller.abort());
         };
-    }, [storedData.loading, credentials, client]);
+    }, [storedData.loading, credentials.loading]);
 }
diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialList.tsx b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialList.tsx
@@ -19,13 +19,22 @@ import {
 } from './VerifiableCredentialHooks';
 import { VerifiableCredentialCard } from './VerifiableCredentialCard';
 
+/**
+ * Component to display while loading verifiable credentials from storage.
+ */
+function LoadingVerifiableCredentials() {
+    return <div className="verifiable-credential-list" />;
+}
+
 /**
  * Component to display when there are no verifiable credentials in the wallet.
  */
 function NoVerifiableCredentials() {
     return (
-        <div className="flex-column align-center h-full">
-            <p className="m-t-20 m-h-30">You do not have any verifiable credentials in your wallet.</p>
+        <div className="verifiable-credential-list">
+            <div className="flex-column align-center h-full">
+                <p className="m-t-20 m-h-30">You do not have any verifiable credentials in your wallet.</p>
+            </div>
         </div>
     );
 }
@@ -95,7 +104,10 @@ export default function VerifiableCredentialList() {
         getChangesToCredentialSchemas
     );
 
-    if (!verifiableCredentials || !verifiableCredentials.length) {
+    if (verifiableCredentials.loading) {
+        return <LoadingVerifiableCredentials />;
+    }
+    if (verifiableCredentials.value.length === 0) {
         return <NoVerifiableCredentials />;
     }
 
@@ -112,7 +124,7 @@ export default function VerifiableCredentialList() {
 
     return (
         <div className="verifiable-credential-list">
-            {verifiableCredentials.map((credential) => {
+            {verifiableCredentials.value.map((credential) => {
                 return (
                     <VerifiableCredentialCardWithStatusFromChain
                         key={credential.id}

diff --git a/packages/browser-wallet/src/popup/store/verifiable-credential.ts b/packages/browser-wallet/src/popup/store/verifiable-credential.ts
@@ -2,9 +2,10 @@ import { ChromeStorageKey, VerifiableCredential, VerifiableCredentialSchema } fr
 import { VerifiableCredentialMetadata } from '@shared/utils/verifiable-credential-helpers';
 import { atomWithChromeStorage } from './utils';
 
-export const storedVerifiableCredentialsAtom = atomWithChromeStorage<VerifiableCredential[] | undefined>(
+export const storedVerifiableCredentialsAtom = atomWithChromeStorage<VerifiableCredential[]>(
     ChromeStorageKey.VerifiableCredentials,
-    []
+    [],
+    true
 );
 
 export const storedVerifiableCredentialSchemasAtom = atomWithChromeStorage<Record<string, VerifiableCredentialSchema>>(