feat(frontend): pagination

amir-kedis · May 11, 2024 · 2c2bd98 · 2c2bd98
1 parent 701e850
commit 2c2bd98
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 3 deletions.
diff --git a/mistermeow/app/src/meowapp/src/Home.tsx b/mistermeow/app/src/meowapp/src/Home.tsx
@@ -23,7 +23,7 @@ function Home() {
 
   return (
     <div
-      className={` ${theme} flex flex-col bg-home text-primary h-screen font-inter fill-current`}
+      className={` ${theme} flex flex-col bg-home text-mprimary h-screen font-inter fill-current`}
     >
       <div className="flex-grow flex flex-col justify-center items-center">
         <Banner />

diff --git a/mistermeow/app/src/meowapp/src/SRP.tsx b/mistermeow/app/src/meowapp/src/SRP.tsx
@@ -7,6 +7,7 @@ import { fetchResults } from "./utils/results-api.tsx";
 import CatIcon from "./assets/icons/CatIcon.tsx";
 import { Link, useLoaderData, useNavigate, Form } from "react-router-dom";
 import { Results } from "./utils/results-api.tsx";
+import SRPPagination from "./components/SRPPagination.tsx";
 
 export async function loader({
   params = { query: "", page: 1 },
@@ -52,7 +53,7 @@ function SRP() {
 
   return (
     <div
-      className={` ${theme} flex flex-col bg-home text-primary min-h-screen font-inter fill-current`}
+      className={` ${theme} flex flex-col bg-home text-mprimary min-h-screen font-inter fill-current`}
     >
       <nav className="flex pt-4 pb-4 border-searchBorder border-b">
         <div className="container flex gap-3">
@@ -115,6 +116,12 @@ function SRP() {
                     </a>
                   </div>
                 ))}
+                <SRPPagination
+                  page={Number(page)}
+                  query={query}
+                  resultsCount={data.count}
+                  setPage={setPage}
+                />
               </div>
               <div>
                 <div className="flex sticky top-6 flex-col gap-2 rounded-xl bg-search border p-4 drop-shadow-sm shadow-searchShadow">
@@ -138,6 +145,7 @@ function SRP() {
           </div>
         )}
       </div>
+
       <Footer />
     </div>
   );

diff --git a/mistermeow/app/src/meowapp/src/components/SRPPagination.tsx b/mistermeow/app/src/meowapp/src/components/SRPPagination.tsx
@@ -0,0 +1,74 @@
+import { Link, useNavigate } from "react-router-dom";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+export interface SRPPaginationProps {
+  resultsCount: number;
+  page: number;
+  query: string;
+  setPage: (page: number) => void;
+}
+
+export default function SRPPagination({
+  resultsCount,
+  page,
+  query,
+  setPage,
+}: SRPPaginationProps) {
+  const navigate = useNavigate();
+
+  const numberOfPages = Math.ceil(resultsCount / 20); // FIXME: Hardcoded 20 change later
+  console.log("Number of pages", numberOfPages);
+
+  let showPages = [
+    page > 1 ? page - 1 : -1,
+    page,
+    page < numberOfPages ? page + 1 : numberOfPages,
+  ];
+
+  return (
+    <div className="p-4">
+      <Pagination>
+        <PaginationContent>
+          {page > 1 && (
+            <PaginationItem onClick={() => setPage(page - 1)}>
+              <Link to={`/search/${query}/${page - 1}`}>
+                <PaginationPrevious />
+              </Link>
+            </PaginationItem>
+          )}
+
+          {showPages
+            .filter((sPage) => sPage > 0)
+            .map((sPage) => (
+              <PaginationItem key={sPage} onClick={() => setPage(sPage)}>
+                <Link to={`/search/${query}/${sPage}`}>
+                  <PaginationLink isActive={sPage == page ? true : false}>
+                    {sPage}
+                  </PaginationLink>
+                </Link>
+              </PaginationItem>
+            ))}
+
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+
+          <PaginationItem onClick={() => setPage(page + 1)}>
+            <Link to={`/search/${query}/${page + 1}`}>
+              <PaginationNext />
+            </Link>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+}
diff --git a/mistermeow/app/src/meowapp/tailwind.config.js b/mistermeow/app/src/meowapp/tailwind.config.js
@@ -6,7 +6,7 @@ const generateColorClass = (variable) => {
 };
 
 const textColor = {
-  primary: generateColorClass("primary-txt"),
+  mprimary: generateColorClass("primary-txt"),
   logo: generateColorClass("primary-txt"),
   logoCaption: generateColorClass("secondary-txt"),
   nav: generateColorClass("bottom-nav-txt"),
@@ -36,6 +36,39 @@ const colors = {
   searchShadow: generateColorClass("search-bar-shadow"),
   icon: generateColorClass("icon-color"),
   "sr-tag": generateColorClass("tag-primary"),
+  border: "hsl(var(--border))",
+  input: "hsl(var(--input))",
+  ring: "hsl(var(--ring))",
+  background: "hsl(var(--background))",
+  foreground: "hsl(var(--foreground))",
+  primary: {
+    DEFAULT: "hsl(var(--primary))",
+    foreground: "hsl(var(--primary-foreground))",
+  },
+  secondary: {
+    DEFAULT: "hsl(var(--secondary))",
+    foreground: "hsl(var(--secondary-foreground))",
+  },
+  destructive: {
+    DEFAULT: "hsl(var(--destructive))",
+    foreground: "hsl(var(--destructive-foreground))",
+  },
+  muted: {
+    DEFAULT: "hsl(var(--muted))",
+    foreground: "hsl(var(--muted-foreground))",
+  },
+  accent: {
+    DEFAULT: "hsl(var(--accent))",
+    foreground: "hsl(var(--accent-foreground))",
+  },
+  popover: {
+    DEFAULT: "hsl(var(--popover))",
+    foreground: "hsl(var(--popover-foreground))",
+  },
+  card: {
+    DEFAULT: "hsl(var(--card))",
+    foreground: "hsl(var(--card-foreground))",
+  },
 };
 
 const fontFamily = {
@@ -56,6 +89,13 @@ module.exports = {
   ],
   prefix: "",
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       textColor,
       backgroundColor,