Fix proposal list items title (#91)

* fix: ipfs error bug on the proposal list screen * fix: ipfs data error * fix: added max count
bgd-labs · May 27, 2024 · 194428c · 194428c · github-actions · May 27, 2024
1 parent 22509b4
commit 194428c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/src/proposals/components/proposalList/ActiveProposalListItem.tsx b/src/proposals/components/proposalList/ActiveProposalListItem.tsx
@@ -5,8 +5,8 @@ import {
 } from '@bgd-labs/aave-governance-ui-helpers';
 import { WalletType } from '@bgd-labs/frontend-web3-utils';
 import { Box, useTheme } from '@mui/system';
-import React, { useState } from 'react';
-import { zeroAddress } from 'viem';
+import React, { useEffect, useState } from 'react';
+import { Hex, zeroAddress } from 'viem';
 
 import { useStore } from '../../../store/ZustandStoreProvider';
 import { Link } from '../../../ui';
@@ -43,9 +43,34 @@ export function ActiveProposalListItem({
   const isRendered = useStore((state) => state.isRendered);
   const appClients = useStore((state) => state.appClients);
   const ipfsDataErrors = useStore((state) => state.ipfsDataErrors);
+  const ipfsData = useStore((state) => state.ipfsData);
+  const getIpfsData = useStore((state) => state.getIpfsData);
   let activeWallet = useStore((state) => state.activeWallet);
 
+  const proposal = proposalData.proposal;
+  const loading = proposalData.loading;
+  const balanceLoading = proposalData.balanceLoading;
+
   const [isClicked, setIsClicked] = useState(false);
+  const [isIPFSError, setIsIpfsError] = useState(
+    ipfsDataErrors[proposal.data.ipfsHash] && !ipfsData[proposal.data.ipfsHash],
+  );
+  const [ipfsErrorCount, setIpfsErrorCount] = useState(0);
+
+  const MAX_COUNT = 5;
+
+  useEffect(() => {
+    setIsIpfsError(
+      ipfsDataErrors[proposal.data.ipfsHash] &&
+        !ipfsData[proposal.data.ipfsHash],
+    );
+    if (isIPFSError && ipfsErrorCount <= MAX_COUNT) {
+      setTimeout(async () => {
+        getIpfsData([proposal.data.id], proposal.data.ipfsHash as Hex);
+        setIpfsErrorCount(ipfsErrorCount + 1);
+      }, 1000);
+    }
+  }, [ipfsErrorCount, isIPFSError, Object.keys(ipfsDataErrors).length]);
 
   if (isForHelpModal) {
     activeWallet = {
@@ -59,10 +84,6 @@ export function ActiveProposalListItem({
     };
   }
 
-  const proposal = proposalData.proposal;
-  const loading = proposalData.loading;
-  const balanceLoading = proposalData.balanceLoading;
-
   const {
     stateTimestamp,
     estimatedState,
@@ -126,7 +147,7 @@ export function ActiveProposalListItem({
       <Box
         component={isForHelpModal ? Box : Link}
         href={
-          ipfsDataErrors[proposal.data.ipfsHash]
+          isIPFSError
             ? ROUTES.proposalWithoutIpfs(proposal.data.id)
             : ROUTES.proposal(proposal.data.id, proposal.data.ipfsHash)
         }
@@ -193,8 +214,10 @@ export function ActiveProposalListItem({
                           ? `${theme.palette.$text} !important`
                           : theme.palette.$text,
                       }}>
-                      {ipfsDataErrors[proposal.data.ipfsHash] ? (
-                        ipfsDataErrors[proposal.data.ipfsHash]
+                      {isIPFSError && ipfsErrorCount > MAX_COUNT ? (
+                        'Ipfs getting error'
+                      ) : isIPFSError ? (
+                        <CustomSkeleton width={250} height={24} />
                       ) : proposal.data.title ===
                         `Proposal #${proposal.data.id}` ? (
                         <CustomSkeleton width={250} height={24} />

diff --git a/src/proposals/store/proposalsSlice.ts b/src/proposals/store/proposalsSlice.ts
@@ -102,7 +102,11 @@ export interface IProposalsSlice {
 
   ipfsData: Record<string, ProposalMetadata>;
   ipfsDataErrors: Record<string, string>;
-  setIpfsDataErrors: (ipfsHash: string, text?: string) => void;
+  setIpfsDataErrors: (
+    ipfsHash: string,
+    text?: string,
+    remove?: boolean,
+  ) => void;
   setIpfsData: (hash: string, data: ProposalMetadata) => void;
   getIpfsData: (ids: number[], hash?: Hex) => Promise<void>;
 
@@ -459,13 +463,23 @@ export const createProposalsSlice: StoreSlice<
 
   ipfsData: {},
   ipfsDataErrors: {},
-  setIpfsDataErrors: (ipfsHash, text) => {
-    set((state) =>
-      produce(state, (draft) => {
-        draft.ipfsDataErrors[ipfsHash] =
-          text === '' ? '' : text || texts.other.fetchFromIpfsError;
-      }),
-    );
+  setIpfsDataErrors: (ipfsHash, text, remove) => {
+    if (remove) {
+      set((state) =>
+        produce(state, (draft) => {
+          if (!!draft.ipfsDataErrors[ipfsHash]) {
+            delete draft.ipfsDataErrors[ipfsHash];
+          }
+        }),
+      );
+    } else {
+      set((state) =>
+        produce(state, (draft) => {
+          draft.ipfsDataErrors[ipfsHash] =
+            text === '' ? '' : text || texts.other.fetchFromIpfsError;
+        }),
+      );
+    }
   },
   setIpfsData: (hash, data) => {
     if (!get().ipfsData[hash]) {
@@ -507,6 +521,8 @@ export const createProposalsSlice: StoreSlice<
         );
 
         if (ipfsData) {
+          get().setIpfsDataErrors(hash, '', true);
+
           set((state) =>
             produce(state, (draft) => {
               draft.ipfsData[hash] = ipfsData;