diff --git a/src/hooks/useFetchCrowdfunds.tsx b/src/hooks/useFetchCrowdfunds.tsx index de665a7..53ba1f1 100644 --- a/src/hooks/useFetchCrowdfunds.tsx +++ b/src/hooks/useFetchCrowdfunds.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { addToHashMap, + removeFromHashMap, upsertCrowdfunds, Crowdfund, } from "../state/features/crowdfundSlice"; @@ -48,8 +49,11 @@ export const useFetchCrowdfunds = () => { identifier, content, }); - - dispatch(addToHashMap(res)); + if (res?.isValid) { + dispatch(addToHashMap(res)); + } else { + dispatch(removeFromHashMap(identifier)); + } }; const getCrowdfunds = React.useCallback(async () => { diff --git a/src/pages/Home/CrowdfundList.tsx b/src/pages/Home/CrowdfundList.tsx index 3a03a28..2dcec15 100644 --- a/src/pages/Home/CrowdfundList.tsx +++ b/src/pages/Home/CrowdfundList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useSelector } from "react-redux"; import { RootState } from "../../state/store"; @@ -84,13 +84,17 @@ export const CrowdfundList = () => { } }, [getCrowdfundHandlerMount, globalCrowdfunds]); + const filteredCrowdfunds = useMemo(() => { + return crowdfunds.filter((crowdfund: Crowdfund) => hashMapCrowdfunds[crowdfund.id]?.isValid); + }, [crowdfunds, hashMapCrowdfunds]); + return ( Most Recent Q-Funds - {crowdfunds.map((crowdfund: Crowdfund) => { + {filteredCrowdfunds.map((crowdfund: Crowdfund) => { const existingCrowdfund = hashMapCrowdfunds[crowdfund.id]; let hasHash = false; let crowdfundObj = crowdfund;