Merge pull request #127 from enBloc-org/#107/pagination-nav-redesign

#107/pagination nav redesign

Author: nichgalzin

src/components/PaginationNav/PaginationNav.css

@@ -2,6 +2,8 @@
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  margin-left: 50%;
+  margin: 0 auto;
   margin-top: 10px;
+  margin-bottom: -10px;
+  width: 150px;
 }

src/components/PaginationNav/PaginationNav.tsx

@@ -22,19 +22,19 @@ export default function PaginationNav({
   return (
     <div className="pagination-nav">
       <button
-        className="button--secondary"
+        className="button--secondary text-md"
         onClick={navigateToPrevious}
         disabled={pageNumber === 1}
       >
-        previous
+        {"<<<"}
       </button>
-      <p className="bold">{`${pageNumber} of ${pageCount}`}</p>
+      <p className="bold text-lg">{`${pageNumber} of ${pageCount}`}</p>
       <button
-        className="button--secondary"
+        className="button--secondary text-md"
         onClick={navigateToNext}
         disabled={pageNumber === pageCount}
       >
-        next
+        {">>>"}
       </button>
     </div>
   )

src/components/page-components/FavouritesPage/FavouritesPage.tsx

@@ -43,9 +43,13 @@ export default function FavouritesPage() {
 
     if (error) return showBoundary(error)
 
-    setFavouritesList(previous =>
-      previous.filter(favourite => favourite.id !== givenId)
+    const newFavourites = favouritesList.filter(
+      favourite => favourite.id !== givenId
     )
+    if (newFavourites.length === 0)
+      setPageNumber(previous => previous - 1)
+
+    setFavouritesList(newFavourites)
   }
 
   useEffect(() => {
@@ -95,14 +99,14 @@ export default function FavouritesPage() {
       })
 
       if (popupError) return showBoundary(popupError)
-      if (meta.pagination.pageCount !== 1)
+      if (meta.pagination.pageCount !== pageCount)
         setPageCount(meta.pagination.pageCount)
 
       setFavouritesList(popupData)
     }
 
     getFavourites()
-  }, [setFavouritesList, pageNumber])
+  }, [setFavouritesList, pageNumber, favouritesList.length % 6 === 0])
 
   return (
     <div className="favourites-page page">