Fix modal close error in lite dao and proposal fetching

Signed-off-by: Manank Patni <[email protected]>
dOrgTech · Sep 20, 2023 · 17f7882 · 17f7882
1 parent 4dda3a6
commit 17f7882
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 51 deletions.
diff --git a/src/modules/explorer/components/DAOStatsRow.tsx b/src/modules/explorer/components/DAOStatsRow.tsx
@@ -124,7 +124,7 @@ export const DAOStatsRow: React.FC = () => {
   const isExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
   const { data: activeProposals } = useProposals(daoId, ProposalStatus.ACTIVE)
   const { hours, minutes, days } = useTimeLeftInCycle()
-  const polls = usePolls(data?.liteDAOData?._id)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
   const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
 
   const amountLocked = useMemo(() => {
@@ -226,7 +226,7 @@ export const DAOStatsRow: React.FC = () => {
                 <Grid item>
                   <ProposalInfoTitle color="secondary">Active Proposals</ProposalInfoTitle>
                   <LargeNumber color="textPrimary">
-                    {Number(activeProposals?.length) + Number(activeLiteProposals.length)}
+                    {Number(activeProposals?.length) + Number(activeLiteProposals?.length)}
                   </LargeNumber>
                 </Grid>
               </Grid>

diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
@@ -31,7 +31,7 @@ interface Props {
   title: string
   showFooter?: boolean
   rightItem?: (proposal: Proposal) => React.ReactElement
-  liteProposals: Poll[]
+  liteProposals: Poll[] | undefined
 }
 
 export const ProposalsList: React.FC<Props> = ({

diff --git a/src/modules/explorer/pages/DAO/index.tsx b/src/modules/explorer/pages/DAO/index.tsx
@@ -97,7 +97,7 @@ export const DAO: React.FC = () => {
   const { data: activeProposals } = useProposals(daoId, ProposalStatus.ACTIVE)
   const { data: executableProposals } = useProposals(daoId, ProposalStatus.EXECUTABLE)
   const { data: expiredProposals } = useProposals(daoId, ProposalStatus.EXPIRED)
-  const polls = usePolls(data?.liteDAOData?._id)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
   const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
 
   const [openDialog, setOpenDialog] = useState(false)

diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx
@@ -213,7 +213,7 @@ export const Proposals: React.FC = () => {
     }
   }, [data, dropAllExpired, expiredProposals])
 
-  const polls = usePolls(data?.liteDAOData?._id)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
   const id = data?.liteDAOData?._id
 
   const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
@@ -338,7 +338,7 @@ export const Proposals: React.FC = () => {
           <AllProposalsList title={"On-Chain"} currentLevel={cycleInfo.currentLevel} proposals={proposals} />
         )}
         <ProposalActionsDialog open={openDialog} handleClose={handleCloseModal} />
-        {polls.length > 0 ? <ProposalList polls={polls} id={id} daoId={daoId} /> : null}
+        {polls && polls.length > 0 ? <ProposalList polls={polls} id={id} daoId={daoId} /> : null}
 
         {proposals?.length === 0 && polls?.length === 0 ? (
           <Typography style={{ width: "inherit" }} color="textPrimary">

diff --git a/src/modules/explorer/pages/User/index.tsx b/src/modules/explorer/pages/User/index.tsx
@@ -109,7 +109,7 @@ export const User: React.FC = () => {
   const { data: executedProposals } = useProposals(daoId, ProposalStatus.EXECUTED)
   const { data: droppedProposals } = useProposals(daoId, ProposalStatus.DROPPED)
   const { mutate: unstakeFromAllProposals } = useUnstakeFromAllProposals()
-  const polls = usePolls(data?.liteDAOData?._id)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
   const pollsPosted = polls?.filter(p => p.author === account)
 
   const { data: isTokenDelegationSupported } = useTokenDelegationSupported(data?.data.token.contract)

diff --git a/src/modules/lite/explorer/components/ProposalList.tsx b/src/modules/lite/explorer/components/ProposalList.tsx
@@ -50,7 +50,7 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
 }) => {
   const communityId = id?.toString()
   const openNotification = useNotification()
-  const [communityPolls, setCommunityPolls] = useState<Poll[]>()
+  const [communityPolls, setCommunityPolls] = useState<Poll[]>(polls)
   const [isFilter, setIsFilter] = useState(false)
   const [isFilterByStatus, setIsFilterByStatus] = useState(1)
   const [statusFilter, setStatusFilter] = useState("")

diff --git a/src/modules/lite/explorer/hooks/usePolls.tsx b/src/modules/lite/explorer/hooks/usePolls.tsx
@@ -5,53 +5,60 @@ import { useNotification } from "modules/common/hooks/useNotification"
 import { isProposalActive } from "services/lite/utils"
 import { ProposalStatus } from "../components/ProposalTableRowStatusBadge"
 import { EnvKey, getEnv } from "services/config"
+import { useQuery } from "react-query"
 
 export const usePolls = (id: any) => {
-  const [polls, setPolls] = useState<Poll[]>([])
   const openNotification = useNotification()
 
-  useEffect(() => {
-    async function fetchPoll() {
-      await fetch(`${getEnv(EnvKey.REACT_APP_LITE_API_URL)}/polls/${id}/list`).then(async response => {
-        if (!response.ok) {
-          const data = await response.json()
-          openNotification({
-            message: data.message,
-            autoHideDuration: 2000,
-            variant: "error"
-          })
-          return
-        }
-
-        const communityPolls: Poll[] = await response.json()
-        if (!communityPolls) {
-          return
-        }
+  const { data, ...rest } = useQuery(
+    ["proposals", id],
+    async () => {
+      const response = await fetch(`${getEnv(EnvKey.REACT_APP_LITE_API_URL)}/polls/${id}/list`)
 
-        communityPolls.map(community => {
-          community.timeFormatted = isProposalActive(Number(community.endTime))
-          community.isActive = !community.timeFormatted.includes("ago") ? ProposalStatus.ACTIVE : ProposalStatus.CLOSED
-        })
-
-        communityPolls.forEach(async poll => {
-          if (poll) {
-            await fetch(`${getEnv(EnvKey.REACT_APP_LITE_API_URL)}/choices/${poll._id}/votes`).then(async response => {
-              if (!response.ok) {
-                return
-              }
-              const records: number = await response.json()
-              poll.votes = records
-              return
-            })
-          }
+      if (!response.ok) {
+        const data = await response.json()
+        openNotification({
+          message: data.message,
+          autoHideDuration: 2000,
+          variant: "error"
         })
+        return
+      }
 
-        setPolls(communityPolls)
+      const communityPolls: Poll[] = await response.json()
+      if (!communityPolls) {
         return
+      }
+
+      communityPolls.map(community => {
+        community.timeFormatted = isProposalActive(Number(community.endTime))
+        community.isActive = !community.timeFormatted.includes("ago") ? ProposalStatus.ACTIVE : ProposalStatus.CLOSED
+      })
+
+      communityPolls.forEach(async poll => {
+        if (poll) {
+          await fetch(`${getEnv(EnvKey.REACT_APP_LITE_API_URL)}/choices/${poll._id}/votes`).then(async response => {
+            if (!response.ok) {
+              return
+            }
+            const records: number = await response.json()
+            poll.votes = records
+            return
+          })
+        }
       })
+
+      return communityPolls
+    },
+    {
+      refetchInterval: 30000,
+      enabled: !!id,
+      refetchOnMount: "always"
     }
-    fetchPoll()
-    return
-  }, [id])
-  return polls
+  )
+
+  return {
+    data,
+    ...rest
+  }
 }
diff --git a/src/modules/lite/explorer/pages/CommunityDetails/index.tsx b/src/modules/lite/explorer/pages/CommunityDetails/index.tsx
@@ -44,7 +44,7 @@ const PageContainer = styled("div")({
 export const CommunityDetails: React.FC<{ id: string }> = ({ id }) => {
   const [isUpdated, setIsUpdated] = useState(1)
   const community = useCommunity(id, isUpdated)
-  const polls = usePolls(id)
+  const { data: polls } = usePolls(id)
 
   return (
     <PageContainer>
@@ -53,7 +53,7 @@ export const CommunityDetails: React.FC<{ id: string }> = ({ id }) => {
           <DaoCardDetail community={community} setIsUpdated={setIsUpdated} />
         </CommunityDetailsContainer>
         <CommunityDetailsContainer container justifyContent="center" item xs={12} lg={8} md={8}>
-          {polls.length > 0 ? (
+          {polls && polls.length > 0 ? (
             <ProposalList polls={polls} id={id} />
           ) : (
             <Typography style={{ width: "inherit" }} color="textPrimary">

diff --git a/src/modules/lite/explorer/pages/CreateProposal/index.tsx b/src/modules/lite/explorer/pages/CreateProposal/index.tsx
@@ -584,7 +584,7 @@ export const ProposalCreator: React.FC<{ id?: string; onClose?: any }> = props =
     startTime: dayjs().toISOString(),
     endTime: "",
     daoID: "",
-    author: account,
+    author: "",
     votingStrategy: 0,
     endTimeDays: null,
     endTimeHours: null,
@@ -603,6 +603,7 @@ export const ProposalCreator: React.FC<{ id?: string; onClose?: any }> = props =
         data.daoID = id
         data.startTime = String(dayjs().valueOf())
         data.endTime = calculateEndTime(values.endTimeDays!, values.endTimeHours!, values.endTimeMinutes!)
+        data.author = account
 
         const { signature, payloadBytes } = await getSignature(account, wallet, JSON.stringify(data))
         const publicKey = (await wallet?.client.getActiveAccount())?.publicKey
@@ -624,7 +625,9 @@ export const ProposalCreator: React.FC<{ id?: string; onClose?: any }> = props =
             variant: "success"
           })
           setIsLoading(false)
-          props.onClose()
+          if (props?.onClose) {
+            props?.onClose()
+          }
           daoId
             ? navigate.push(`/explorer/dao/${daoId}/proposals`)
             : navigate.push(`/explorer/lite/dao/${id}/community`)
@@ -638,6 +641,7 @@ export const ProposalCreator: React.FC<{ id?: string; onClose?: any }> = props =
           return
         }
       } catch (error) {
+        console.log("error: ", error)
         openNotification({
           message: "Proposal could not be created",
           autoHideDuration: 3000,