pagination working using react-paginate (#693)

dOrgTech · Oct 19, 2023 · 633b661 · 633b661
1 parent 94e414b
commit 633b661
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@taquito/tzip16": "^17.3.1",
     "@types/mixpanel-browser": "^2.35.7",
     "@types/prismjs": "^1.26.0",
+    "@types/react-paginate": "^7.1.2",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/valid-url": "^1.0.4",
     "assert": "^2.0.0",
@@ -64,6 +65,7 @@
     "react-hook-form": "^7.15.4",
     "react-html-parser": "^2.0.2",
     "react-markdown": "^8.0.0",
+    "react-paginate": "^8.2.0",
     "react-query": "^3.13.0",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.4.3",
@@ -133,4 +135,4 @@
       "yarn lint:check"
     ]
   }
-}
+}
diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx
@@ -11,13 +11,15 @@ import {
 } from "@material-ui/core"
 import { Navbar } from "../../components/Toolbar"
 import { TabPanel } from "modules/explorer/components/TabPanel"
-import React, { useEffect, useMemo, useState } from "react"
+import React, { useMemo, useState } from "react"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { useAllDAOs } from "services/services/dao/hooks/useAllDAOs"
 import { ConnectMessage } from "./components/ConnectMessage"
 import { DAOItem } from "./components/DAOItem"
 import { SearchInput } from "./components/Searchbar"
 import { MainButton } from "../../../common/MainButton"
+import ReactPaginate from "react-paginate"
+import "./styles.css"
 
 const PageContainer = styled("div")(({ theme }) => ({
   width: "1000px",
@@ -81,38 +83,6 @@ const DAOItemCard = styled(Grid)({
   }
 })
 
-const BannerContainer = styled(Grid)(({ theme }) => ({
-  background: theme.palette.primary.main,
-  padding: "30px 48px",
-  borderRadius: 8,
-  display: "inline-block",
-  [theme.breakpoints.down("md")]: {
-    padding: "28px 38px"
-  }
-}))
-
-const LinkText = styled(Typography)(({ theme }) => ({
-  fontSize: 18,
-  fontWeight: 200,
-  lineHeight: "146.3%",
-  cursor: "default",
-  [theme.breakpoints.down("sm")]: {
-    fontSize: 16
-  },
-  [theme.breakpoints.down("xs")]: {
-    fontSize: 13
-  }
-}))
-
-const ExternalLink = styled(Typography)({
-  "display": "inline",
-  "cursor": "pointer",
-  "fontWeight": 200,
-  "&:hover": {
-    textDecoration: "underline"
-  }
-})
-
 export const DAOList: React.FC = () => {
   const { network, account, tezos } = useTezos()
   const { data: daos, isLoading } = useAllDAOs(network)
@@ -123,6 +93,10 @@ export const DAOList: React.FC = () => {
 
   const [searchText, setSearchText] = useState("")
   const [selectedTab, setSelectedTab] = React.useState(0)
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const [offset, setOffset] = useState(0)
+  const pageCount = Math.ceil(daos ? daos.length / 16 : 0)
 
   const currentDAOs = useMemo(() => {
     if (daos) {
@@ -149,6 +123,38 @@ export const DAOList: React.FC = () => {
         )
       }
 
+      const slice = formattedDAOs.slice(offset, offset + 16)
+
+      return slice
+    }
+
+    return []
+  }, [daos, searchText, offset])
+
+  const myDAOs = useMemo(() => {
+    if (daos) {
+      const formattedDAOs = daos
+        .map(dao => ({
+          id: dao.address,
+          name: dao.name,
+          symbol: dao.token.symbol,
+          votingAddresses: dao.ledgers ? dao.ledgers.map(l => l.holder.address) : [],
+          votingAddressesCount:
+            dao.dao_type.name === "lite" ? dao.votingAddressesCount : dao.ledgers ? dao.ledgers?.length : 0,
+          dao_type: {
+            name: dao.dao_type.name
+          },
+          allowPublicAccess: dao.dao_type.name === "lite" ? dao.allowPublicAccess : true
+        }))
+        .sort((a, b) => b.votingAddresses.length - a.votingAddresses.length)
+
+      if (searchText) {
+        return formattedDAOs.filter(
+          formattedDao =>
+            (formattedDao.name && formattedDao.name.toLowerCase().includes(searchText.toLowerCase())) ||
+            (formattedDao.symbol && formattedDao.symbol.toLowerCase().includes(searchText.toLowerCase()))
+        )
+      }
       return formattedDAOs
     }
 
@@ -163,6 +169,15 @@ export const DAOList: React.FC = () => {
     setSelectedTab(newValue)
   }
 
+  // Invoke when user click to request another page.
+  const handlePageClick = (event: { selected: number }) => {
+    if (daos) {
+      const newOffset = (event.selected * 16) % daos.length
+      setOffset(newOffset)
+      setCurrentPage(event.selected)
+    }
+  }
+
   return (
     <>
       <Navbar disableMobileMenu />
@@ -248,6 +263,20 @@ export const DAOList: React.FC = () => {
                     </DAOItemCard>
                   ) : null
                 )}
+                <Grid container direction="row" justifyContent="flex-end">
+                  <ReactPaginate
+                    previousLabel={"<"}
+                    breakLabel="..."
+                    nextLabel=">"
+                    onPageChange={handlePageClick}
+                    pageRangeDisplayed={2}
+                    pageCount={pageCount}
+                    renderOnZeroPageCount={null}
+                    containerClassName={"pagination"}
+                    activeClassName={"active"}
+                    forcePage={currentPage}
+                  />
+                </Grid>
 
                 {isLoading ? (
                   <Grid item>
@@ -261,7 +290,7 @@ export const DAOList: React.FC = () => {
                 {!account ? (
                   <ConnectMessage />
                 ) : (
-                  currentDAOs
+                  myDAOs
                     .filter(dao => dao.votingAddresses.includes(account))
                     .map((dao, i) => (
                       <DAOItemCard key={`mine-${i}`} item>

diff --git a/src/modules/explorer/pages/DAOList/styles.css b/src/modules/explorer/pages/DAOList/styles.css
@@ -0,0 +1,37 @@
+.pagination {
+  display: flex;
+  list-style: none;
+  outline: none;
+  font-family: "Roboto Mono";
+}
+.pagination > .active > a {
+  background-color: rgba(129, 254, 183, 0.2);
+  color: rgba(129, 254, 183, 1);
+}
+.pagination > li > a {
+  border: none;
+  padding: 5px 10px;
+  outline: none;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  background-color: rgba(129, 254, 183, 0.2);
+  border-color: none;
+  outline: none;
+}
+.pagination > li > a,
+.pagination > li > span {
+  color: #fff;
+}
+.pagination > li:first-child > a,
+.pagination > li:first-child > span,
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+  border-radius: unset;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3199,6 +3199,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-paginate@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-paginate/-/react-paginate-7.1.2.tgz#3554a04a664612fa5f796ed6f1eedbadce8e3a0f"
+  integrity sha512-5wDaAo3J4fEoGSYxNDZ9XRufuNoxCKG8OMEYBHmXvbKpJudyg+dkJxDh8wNPbIngZYV3ULTvXXrq+7dUiRt0EQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.6", "@types/react-router-dom@^5.3.0":
   version "5.3.3"
   resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz"
@@ -10845,7 +10852,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15, prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11128,6 +11135,13 @@ react-markdown@^8.0.0:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-paginate@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-8.2.0.tgz#947c3dcb444a6c16c1bcf8361871aa135baa3dcd"
+  integrity sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==
+  dependencies:
+    prop-types "^15"
+
 react-query@^3.13.0:
   version "3.39.3"
   resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz"