From 633b6611937e89e25a3a60cdedce5d5dee80979c Mon Sep 17 00:00:00 2001 From: fabiolalombardim <37227394+fabiolalombardim@users.noreply.github.com> Date: Thu, 19 Oct 2023 19:32:18 +0200 Subject: [PATCH 1/2] pagination working using react-paginate (#693) --- package.json | 4 +- src/modules/explorer/pages/DAOList/index.tsx | 97 ++++++++++++------- src/modules/explorer/pages/DAOList/styles.css | 37 +++++++ yarn.lock | 16 ++- 4 files changed, 118 insertions(+), 36 deletions(-) create mode 100644 src/modules/explorer/pages/DAOList/styles.css diff --git a/package.json b/package.json index 4e88811b..57352315 100644 --- 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" ] } -} \ No newline at end of file +} diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx index 3eecc5f3..cd9434c5 100644 --- 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 ( <> @@ -248,6 +263,20 @@ export const DAOList: React.FC = () => { ) : null )} + + + {isLoading ? ( @@ -261,7 +290,7 @@ export const DAOList: React.FC = () => { {!account ? ( ) : ( - currentDAOs + myDAOs .filter(dao => dao.votingAddresses.includes(account)) .map((dao, i) => ( diff --git a/src/modules/explorer/pages/DAOList/styles.css b/src/modules/explorer/pages/DAOList/styles.css new file mode 100644 index 00000000..d786ca8d --- /dev/null +++ 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 index cf05ccc6..220ed879 100644 --- 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" From b9d2bb49d91e588e6d1330e9cf240b532069c672 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sat, 21 Oct 2023 20:44:26 +0200 Subject: [PATCH 2/2] fix favicon --- public/favicon.ico | Bin 3870 -> 510 bytes public/index.html | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..93c359295d7ad020b114341d55810c1f7a7332c4 100644 GIT binary patch literal 510 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/public/index.html b/public/index.html index c4cff8eb..355540ea 100644 --- a/public/index.html +++ b/public/index.html @@ -4,9 +4,9 @@ - + - +