Merge pull request #108 from poap-xyz/release/v1.6.8

Release v1.6.8
poap-xyz · Sep 27, 2023 · 6dd22fb · 6dd22fb
2 parents 2ac6ac0 + 1b49032
commit 6dd22fb
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poap-xyz/poap-family",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "author": {
     "name": "POAP",
     "url": "https://poap.xyz"

diff --git a/src/components/ButtonLink.js b/src/components/ButtonLink.js
@@ -1,8 +1,12 @@
 import '../styles/button-link.css'
 
-function ButtonLink({ title, onClick, className, children }) {
+function ButtonLink({ title, onClick, className, disabled, children }) {
   return (
-    <button className={`button-link${className ? ` ${className}` : ''}`} onClick={onClick}>
+    <button
+      className={`button-link${className ? ` ${className}` : ''}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
       <span title={title} className="button-link-content">{children}</span>
     </button>
   )

diff --git a/src/components/LastEvents.js b/src/components/LastEvents.js
@@ -1,15 +1,33 @@
 import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { getLastEvents } from '../loaders/api'
 import CachedEventList from './CachedEventList'
 import Card from './Card'
 import Loading from './Loading'
 import ErrorMessage from './ErrorMessage'
 import Pagination from './Pagination'
 import ButtonRefresh from './ButtonRefresh'
+import Button from './Button'
+import ButtonLink from './ButtonLink'
 import '../styles/last-events.css'
 
-function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, showRefresh = false }) {
+const DEFAULT_PAGE = 1
+const DEFAULT_PER_PAGE = 8
+const DEFAULT_MORE_QTY = 8
+
+function LastEvents({
+  currentPage = DEFAULT_PAGE,
+  perPage = DEFAULT_PER_PAGE,
+  onPageChange = (page, qty) => {},
+  showRefresh = false,
+  showMore = false,
+  maxPages = 0,
+  moreQty = DEFAULT_MORE_QTY,
+  showPerPage = false,
+}) {
+  const navigate = useNavigate()
   const [page, setPage] = useState(currentPage)
+  const [qty, setQty] = useState(perPage)
   const [pages, setPages] = useState(0)
   const [total, setTotal] = useState(null)
   const [loading, setLoading] = useState(false)
@@ -23,6 +41,13 @@ function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, sho
     [currentPage]
   )
 
+  useEffect(
+    () => {
+      setQty(perPage)
+    },
+    [perPage]
+  )
+
   useEffect(
     () => {
       setLoading(true)
@@ -32,6 +57,7 @@ function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, sho
             setPages(response.pages)
             setTotal(response.total)
             setCachedEvents(response.lastEvents)
+            setError(null)
 
             if (response.total === 0 || response.pages === 0) {
               setError(new Error('Empty'))
@@ -44,6 +70,7 @@ function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, sho
           error.reason = err
           console.error(err)
           setError(error)
+          setCachedEvents([])
           setLoading(false)
         }
       )
@@ -65,6 +92,7 @@ function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, sho
                     setPages(response.pages)
                     setTotal(response.total)
                     setCachedEvents(response.lastEvents)
+                    setError(null)
 
                     if (response.total === 0 || response.pages === 0) {
                       setError(new Error('Empty'))
@@ -77,20 +105,45 @@ function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, sho
                   error.reason = err
                   console.error(err)
                   setError(error)
+                  setCachedEvents([])
                   setLoading(false)
                 }
               )
             }}
           />
         )}
         {loading && <Loading />}
+        {!loading && showPerPage && (
+          <div className="per-page">
+            <span className="label">Per page</span>:{' '}
+            <ButtonLink
+              onClick={() => {
+                setQty(10)
+                onPageChange(1, 10)
+              }}
+              disabled={qty === 10}
+            >
+              10
+            </ButtonLink>
+            <span className="divisor">&mdash;</span>
+            <ButtonLink
+              onClick={() => {
+                setQty(10)
+                onPageChange(1, 100)
+              }}
+              disabled={qty === 100}
+            >
+              100
+            </ButtonLink>
+          </div>
+        )}
         {cachedEvents.length > 0 && !loading && (
           <CachedEventList
             cachedEvents={cachedEvents}
             showClear={false}
           />
         )}
-        {error &&
+        {error && !loading &&
           <ErrorMessage style={{ marginTop: '1rem' }}>
             <span title={error.reason ? `${error.reason}` : undefined}>
               {error.message ?? 'Unknown error'}
@@ -100,13 +153,24 @@ function LastEvents({ currentPage = 1, onPageChange = (page) => {}, qty = 3, sho
         {pages > 1 && !loading && (
           <Pagination
             page={page}
-            pages={pages}
+            pages={maxPages > 0 && maxPages < pages ? maxPages : pages}
             total={total}
             onPage={(newPage) => {
               setPage(newPage)
               onPageChange(newPage)
             }}
-          />
+          >
+            {maxPages > 0 && showMore && (
+              <Button
+                onClick={() => {
+                  navigate(`/last?page=${Math.trunc(page * qty / moreQty + 1)}&qty=${moreQty}`)
+                }}
+                secondary={true}
+              >
+                More
+              </Button>
+            )}
+          </Pagination>
         )}
       </Card>
     </div>

diff --git a/src/components/Pagination.js b/src/components/Pagination.js
@@ -7,6 +7,7 @@ function Pagination({
   pages,
   total,
   onPage = (newPage) => {},
+  children,
 }) {
   const items = []
   const elements = []
@@ -72,6 +73,7 @@ function Pagination({
   return (
     <div className="pagination">
       {elements}
+      {children}
     </div>
   )
 }

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -29,8 +29,11 @@ function Home() {
       <div className="drop-lists">
         {settings && settings.showLastEvents && (
           <LastEvents
-            qty={3}
+            perPage={3}
             showRefresh={true}
+            showMore={true}
+            maxPages={3}
+            moreQty={10}
           />
         )}
       </div>

diff --git a/src/pages/Last.js b/src/pages/Last.js
@@ -5,10 +5,16 @@ import ButtonLink from '../components/ButtonLink'
 import LastEvents from '../components/LastEvents'
 import Page from '../components/Page'
 
+const DEFAULT_PAGE = 1
+const DEFAULT_PER_PAGE = 8
+
 function Last() {
   const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
   const { setTitle } = useContext(HTMLContext)
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const currentPage = searchParams.has('page') ? parseInt(searchParams.get('page')) : DEFAULT_PAGE
+  const perPage = searchParams.has('qty') ? parseInt(searchParams.get('qty')) : DEFAULT_PER_PAGE
 
   useEffect(
     () => {
@@ -17,16 +23,38 @@ function Last() {
     [setTitle]
   )
 
-  const changePage = (page) => {
-    setSearchParams({ page })
+  useEffect(
+    () => {
+      if (!searchParams.has('page')) {
+        if (perPage !== DEFAULT_PER_PAGE) {
+          setSearchParams({ page: currentPage, qty: perPage })
+        } else {
+          setSearchParams({ page: currentPage })
+        }
+      }
+    },
+    [currentPage, perPage, searchParams, setSearchParams]
+  )
+
+  const changePage = (page, qty) => {
+    if (qty && qty !== DEFAULT_PER_PAGE) {
+      setSearchParams({ page, qty })
+    } else {
+      if (perPage !== DEFAULT_PER_PAGE) {
+        setSearchParams({ page, qty: perPage })
+      } else {
+        setSearchParams({ page })
+      }
+    }
   }
 
   return (
     <Page>
       <LastEvents
-        currentPage={searchParams.has('page') ? parseInt(searchParams.get('page')) : 1}
+        currentPage={currentPage}
         onPageChange={changePage}
-        qty={8}
+        perPage={perPage}
+        showPerPage={true}
       />
       <div className="footer">
         <ButtonLink onClick={() => navigate('/')}>back</ButtonLink>

diff --git a/src/styles/button-link.css b/src/styles/button-link.css
@@ -8,3 +8,12 @@
 .button-link:hover {
   text-decoration: underline;
 }
+
+.button-link[disabled] {
+  color: black;
+  cursor: default;
+}
+
+.button-link[disabled]:hover {
+  text-decoration: none;
+}
diff --git a/src/styles/last-events.css b/src/styles/last-events.css
@@ -7,3 +7,13 @@
   top: 1rem;
   right: 2rem;
 }
+
+.last-events .per-page {
+  text-align: right;
+}
+
+.last-events .per-page .label {
+  text-transform: lowercase;
+  font-size: 80%;
+  vertical-align: middle;
+}
diff --git a/src/styles/pagination.css b/src/styles/pagination.css
@@ -3,4 +3,5 @@
   justify-content: center;
   align-items: center;
   gap: .5rem;
+  margin-top: .5rem;
 }