Merge branch 'master' into develop (#106)

* Added pagination lib

* Added 0-1 pages check

Co-authored-by: = <=>

apps/blueprints/src/components/Pagination.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import { Box, BoxProps, Button } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
+import ReactPaginate from "react-paginate";
+import { FaEllipsisH, FaAngleDoubleLeft, FaAngleDoubleRight } from "react-icons/fa";
+import styled from "@emotion/styled";
 
 interface PaginationProps {
   page: number;
@@ -9,32 +11,95 @@ interface PaginationProps {
   totalItems?: number;
 }
 
-const PaginationLink: React.FC<PaginationProps> = ({ page }) => {
+export const Pagination: React.FC<BoxProps & PaginationProps> = ({
+  page,
+  totalPages = 0,
+  totalItems = 0,
+}) => {
   const router = useRouter();
-  const query: Record<string, string> = { ...router.query, page: page.toString() };
+
-  const href =
+  const handlePageChange = ({ selected }: { selected: number }) => {
-    "/?" +
+    const query: Record<string, string> = { ...router.query, page: String(selected + 1) };
-    Object.keys(query)
+    const href = `/?${Object.keys(query)
       .map((key) => `${key}=${query[key]}`)
-      .join("&");
+      .join("&")}`;
+    router.push(href);
+  };
 
   return (
-    <Link href={href} passHref>
+    <StyledPagination>
-      <Button as="a" size="sm" color="black" css={{ marginRight: "1rem" }}>
+      {totalPages > 1 && (
-        {page}
+        <ReactPaginate
-      </Button>
+          initialPage={page}
-    </Link>
+          pageRangeDisplayed={4}
+          marginPagesDisplayed={2}
+          pageCount={totalPages}
+          onPageChange={handlePageChange}
+          previousLabel={<FaAngleDoubleLeft />}
+          nextLabel={<FaAngleDoubleRight />}
+          breakLabel={<FaEllipsisH />}
+        />
+      )}
+
+      {totalItems ? <Box>{totalItems} total items</Box> : null}
+    </StyledPagination>
   );
 };
 
-export const Pagination: React.FC<BoxProps & PaginationProps> = ({
+const StyledPagination = styled(Box)`
-  page,
+  ul {
-  totalPages,
+    display: flex;
-  totalItems,
+    flex-wrap: wrap;
-}) => (
+    list-style: none;
-  <Box>
+
-    {page > 1 && <PaginationLink page={page - 1} />}
+    li {
-    {!totalPages || (page + 1 <= totalPages && <PaginationLink page={page + 1} />)}
+      a {
-    {totalItems ? <Box css={{ marginTop: "15px" }}>{totalItems} total items</Box> : null}
+        display: inline-flex;
-  </Box>
+        justify-content: center;
-);
+        text-align: center;
+        padding: 10px 12px;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 100%;
+        height: 36px;
+        width: 36px;
+        outline: none;
+        margin: 0 8px 8px 0;
+        cursor: pointer;
+        outline: none;
+      }
+
+      &:not(.break) a {
+        color: #000;
+        box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
+          inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
+          0 0 4px 0 #000;
+        background-color: #8e8e8e;
+
+        &:hover {
+          color: #000;
+          text-decoration: none;
+          outline: 0;
+          box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
+            inset 0 9px 2px -8px #fff, inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000,
+            inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
+          background-color: #e39827;
+          filter: drop-shadow(0 0 2px #f9b44b);
+        }
+      }
+
+      &.selected a {
+        position: relative;
+        padding-top: 12px;
+        padding-bottom: 8px;
+        box-shadow: inset 0 10px 2px -8px #000, inset 0 9px 2px -8px #000,
+          inset 8px 0 4px -8px #563a10, inset 8px 0 4px -8px #563a10, inset -8px 0 4px -8px #563a10,
+          inset -8px 0 4px -8px #563a10, inset 0 9px 2px -8px #563a10, inset 0 -9px 2px -8px #563a10,
+          inset 0 -8.5px 0 -8px #563a10, 0 0 4px 0 #000;
+        background-color: #f1be64;
+        filter: none;
+        outline: 0;
+      }
+    }
+  }
+`;

package.json

@@ -61,6 +61,7 @@
     "react-map-interaction": "file:.yalc/react-map-interaction",
     "react-markdown": "5.0.3",
     "react-multi-select-component": "4.0.0",
+    "react-paginate": "7.1.2",
     "react-simplemde-editor": "4.1.3",
     "sharp": "0.28.1",
     "ws": "7.4.4"
@@ -92,6 +93,7 @@
     "@types/puppeteer": "5.4.3",
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.3",
+    "@types/react-paginate": "6.2.1",
     "@types/sharp": "0.28.0",
     "@types/ws": "7.4.1",
     "@typescript-eslint/eslint-plugin": "4.21.0",

yarn.lock

@@ -4472,6 +4472,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-paginate@6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@types/react-paginate/-/react-paginate-6.2.1.tgz#2329088d78010ea49661559c8467a24ecd942784"
+  integrity sha512-+q8k1N0WzbMyOCsIEH/p5D6/KQD8dXYLzfvSvriYn//94icd2sqhAL2rWXkgwGvqHGCSTU9AoHtsWCJxPfquUQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.9.52"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.52.tgz#c46c72d1a1d8d9d666f4dd2066c0e22600ccfde1"
@@ -13630,7 +13637,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -13971,6 +13978,13 @@ react-multi-select-component@4.0.0:
   resolved "https://registry.yarnpkg.com/react-multi-select-component/-/react-multi-select-component-4.0.0.tgz#51b68a79aec3b72e0dcb1d7947b9c71ba4aff77f"
   integrity sha512-JcMoqy68KN8cSE7JopbLwVWXftkhBuHHwKtPCmkdQHFW8yyC+GaNxqmuStYJuNByPOIrwo+fj+Bin0GAQ0d1dA==
 
+react-paginate@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-7.1.2.tgz#3a94f36a774f9d2e82b877e30474a16088b00a4d"
+  integrity sha512-yAl7taPNIUegS5b6kdNvEMh7iu9T3spuzOCUw+BB0ScTLaC4dfSl686Kl+rVCvkOr67qcbi6T8+tpo4hEVCC1Q==
+  dependencies:
+    prop-types "^15.6.1"
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"