new cards

dOrgTech · Nov 25, 2023 · 84fda53 · 84fda53
1 parent a533b27
commit 84fda53
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 71 deletions.
diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
@@ -1,24 +1,11 @@
 import { styled, Grid, Theme, Typography, Link, useTheme, useMediaQuery } from "@material-ui/core"
-import { createTheme } from "@material-ui/core/styles"
-import hexToRgba from "hex-to-rgba"
-import { startCase } from "lodash"
 import React from "react"
 import { EnvKey, getEnv } from "services/config"
 import ReactHtmlParser from "react-html-parser"
 import { useProposals } from "services/services/dao/hooks/useProposals"
 import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
-
-const SectionNames = styled(Grid)(({ theme }: { theme: Theme }) => ({
-  width: "55%",
-
-  ["@media (max-width:1030px)"]: {
-    width: "50%"
-  },
-
-  ["@media (max-width:960px)"]: {
-    width: "99%"
-  }
-}))
+import { usePolls } from "modules/lite/explorer/hooks/usePolls"
+import dayjs from "dayjs"
 
 const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
   "background": theme.palette.primary.main,
@@ -35,7 +22,9 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
   "maxHeight": 282,
 
   ["@media (max-width:760px)"]: {
-    maxWidth: "86vw"
+    maxWidth: "86vw",
+    padding: "17px 24px",
+    minWidth: "inherit"
   },
 
   "&:hover": {
@@ -90,44 +79,6 @@ const DescriptionText = styled(Typography)({
   "maxHeight": 60
 })
 
-const NumberText = styled(Typography)({
-  fontSize: "28px",
-  fontWeight: 300,
-
-  ["@media (max-width:1335px)"]: {
-    fontSize: "26px",
-    lineHeight: 1.2,
-    borderBottom: "7px solid transparent"
-  },
-
-  ["@media (max-width:1155px)"]: {
-    fontSize: "23px",
-    borderBottom: "9.5px solid transparent"
-  },
-
-  ["@media (max-width:960px)"]: {
-    fontSize: "26px",
-    borderBottom: "6px solid transparent"
-  }
-})
-
-const VotingAddressesText = styled(Typography)({
-  fontSize: "19px",
-  fontWeight: 300,
-
-  ["@media (max-width:1335px)"]: {
-    fontSize: "17px"
-  },
-
-  ["@media (max-width:1155px)"]: {
-    fontSize: "15.7px"
-  },
-
-  ["@media (max-width:960px)"]: {
-    fontSize: "17px"
-  }
-})
-
 const ItemText = styled(Typography)({
   fontWeight: 600,
   fontSize: 16,
@@ -173,11 +124,21 @@ export const DAOItem: React.FC<{
       : `lite/dao/${dao.id}`
 
   const { data: activeProposals } = useProposals(dao.id, ProposalStatus.ACTIVE)
+  const { data: polls } = usePolls(dao.id)
+  const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
+
+  const getTotalActiveProposals = () => {
+    if (daoType === "lite") {
+      return activeLiteProposals?.length
+    } else {
+      return (activeProposals ? activeProposals?.length : 0) + (activeLiteProposals ? activeLiteProposals?.length : 0)
+    }
+  }
 
   return (
     <Link underline="none" href={daoHref}>
-      <Container container justifyContent="space-between" alignItems="center">
-        <Grid container direction="row" justifyContent="space-between">
+      <Container container justifyContent="space-between">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
           <Grid item xs={7} md={9}>
             <NameText color="textPrimary">{dao.name}</NameText>
           </Grid>
@@ -200,7 +161,8 @@ export const DAOItem: React.FC<{
             <SymbolText>{dao.votingAddressesCount}</SymbolText>
           </Grid>
           <Grid xs={3} container item direction="column">
-            <ItemText color="textPrimary">Active {"\n"}Proposals</ItemText> <SymbolText>{"-"}</SymbolText>
+            <ItemText color="textPrimary">Active {"\n"}Proposals</ItemText>
+            <SymbolText>{getTotalActiveProposals()}</SymbolText>
           </Grid>
         </Grid>
       </Container>

diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx
@@ -76,18 +76,19 @@ const Search = styled(Grid)({
 
 const DAOItemGrid = styled(Grid)({
   gap: "30px",
+  minHeight: "50vh",
   justifyContent: "space-between",
   ["@media (max-width: 1155px)"]: {
     gap: "32px"
   },
 
   ["@media (max-width:960px)"]: {
-    gap: "14px"
+    gap: "20px"
   },
 
   ["@media (max-width:830px)"]: {
     width: "86vw",
-    gap: "12px"
+    gap: "20px"
   }
 })
 
@@ -116,8 +117,6 @@ export const DAOList: React.FC = () => {
   const { network, account, tezos } = useTezos()
   const { data: daos, isLoading } = useAllDAOs(network)
 
-  console.log(daos)
-
   const theme = useTheme()
   const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("mobile"))
@@ -188,11 +187,11 @@ export const DAOList: React.FC = () => {
             (formattedDao.symbol && formattedDao.symbol.toLowerCase().includes(searchText.toLowerCase()))
         )
       }
-      return formattedDAOs
+      return formattedDAOs.filter(dao => dao.votingAddresses.includes(account))
     }
 
     return []
-  }, [daos, searchText])
+  }, [daos, searchText, account])
 
   const filterDAOs = (filter: string) => {
     setSearchText(filter.trim())
@@ -314,14 +313,14 @@ export const DAOList: React.FC = () => {
               <DAOItemGrid container justifyContent={isMobileSmall ? "center" : "flex-start"}>
                 {!account ? (
                   <ConnectMessage />
+                ) : myDAOs.length > 0 ? (
+                  myDAOs.map((dao, i) => (
+                    <DAOItemCard key={`mine-${i}`} item>
+                      <DAOItem dao={dao} />
+                    </DAOItemCard>
+                  ))
                 ) : (
-                  myDAOs
-                    .filter(dao => dao.votingAddresses.includes(account))
-                    .map((dao, i) => (
-                      <DAOItemCard key={`mine-${i}`} item>
-                        <DAOItem dao={dao} />
-                      </DAOItemCard>
-                    ))
+                  <Typography color="textPrimary">You have not joined any DAO</Typography>
                 )}
               </DAOItemGrid>
             </TabPanel>

diff --git a/src/modules/lite/creator/index.tsx b/src/modules/lite/creator/index.tsx
@@ -313,7 +313,6 @@ const CommunityForm = ({ submitForm, values, setFieldValue, errors, touched, set
                     padding={10}
                     value={getIn(values, "description")}
                     onValueChange={(newValue: string) => {
-                      console.log(newValue)
                       setFieldValue("description", newValue)
                     }}
                     highlight={code => highlight(code, grammar, "javascript")}