From 7c5bf7dbfad33f49a7d21c273b6dc1482dc8ea64 Mon Sep 17 00:00:00 2001
From: dustinusey <dustinusey@me.com>
Date: Sat, 3 Feb 2024 00:06:44 -0600
Subject: [PATCH] added pagination functionality

---
 src/App.jsx                        |  3 +
 src/Components/ProjectTable.jsx    | 58 +++++++++++-------
 src/Components/StatusDropdown.jsx  |  2 +-
 src/Components/TablePagination.jsx | 95 ++++++++++++++++--------------
 4 files changed, 90 insertions(+), 68 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c3064fc..727d0ae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ export default function App() {
   const [loading, isLoading] = useState(false);
   const [currentProject, setCurrentProject] = useState("");
   const [projects, setProjects] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
 
   // initially sets theme in LS to false
   useEffect(() => {
@@ -30,6 +31,8 @@ export default function App() {
         setCurrentProject,
         projects,
         setProjects,
+        currentPage,
+        setCurrentPage,
       }}
     >
       <ProjectTable />
diff --git a/src/Components/ProjectTable.jsx b/src/Components/ProjectTable.jsx
index 03b01c0..d59ceaf 100644
--- a/src/Components/ProjectTable.jsx
+++ b/src/Components/ProjectTable.jsx
@@ -1,6 +1,6 @@
 import { createClient } from "@supabase/supabase-js";
 import axios from "axios";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { AppState } from "../App";
 import Alert from "./Alerts/Alert";
 import Project from "./Project";
@@ -15,8 +15,17 @@ const supabase = createClient(
 );
 
 export default function ProjectTable() {
-  const { theme, alert, setAlert, loading, isLoading, projects, setProjects } =
-    useContext(AppState);
+  const {
+    theme,
+    alert,
+    loading,
+    isLoading,
+    projects,
+    setProjects,
+    currentPage,
+    setCurrentPage,
+    setAlert,
+  } = useContext(AppState);
 
   useEffect(() => {
     fetchProjects();
@@ -31,6 +40,8 @@ export default function ProjectTable() {
   async function getProjects() {
     isLoading(true);
     const { data } = await supabase.from("projects").select();
+
+    setCurrentPage(1);
     return data;
   }
 
@@ -46,7 +57,7 @@ export default function ProjectTable() {
         messages: [
           {
             role: "user",
-            content: `I want to you to return a JSON object of an array named 'frontendProjects' of random, quick, beginner friendly frontend project ideas. ONLY return a JSON object. Please exclude any of these projects: Pomodoro timers, calculators, or any of these: ${projects.map(
+            content: `I want to you to return a JSON object of an array named 'frontendProjects' of random, quick, beginner friendly frontend project ideas. ONLY return a JSON object. Please exclude any of these projects: Portfolio websites, Pomodoro timers, calculators, calendars or any of these: ${projects.map(
               (proj) => proj.name
             )}`,
           },
@@ -134,24 +145,27 @@ export default function ProjectTable() {
 
               {/* table body */}
               <tbody>
-                {projects.map((project) => {
-                  const id = project.id.toString();
-                  const date = new Date(project.created_at);
-                  const formattedDate = `${date.toLocaleString("default", {
-                    month: "long",
-                  })} ${date.getDate()}, ${date.getFullYear()}`;
-                  return (
-                    <Project
-                      key={project.id}
-                      id={id}
-                      project={project}
-                      projectName={project.name}
-                      createdAt={formattedDate}
-                      status={project.status}
-                      github={project.github_url}
-                    />
-                  );
-                })}
+                {/* only render the projects based off the currentPage and only wanting to show 5 per page */}
+                {projects
+                  .slice((currentPage - 1) * 5, currentPage * 5)
+                  .map((project) => {
+                    const id = project.id.toString();
+                    const date = new Date(project.created_at);
+                    const formattedDate = `${date.toLocaleString("default", {
+                      month: "long",
+                    })} ${date.getDate()}, ${date.getFullYear()}`;
+                    return (
+                      <Project
+                        key={project.id}
+                        id={id}
+                        project={project}
+                        projectName={project.name}
+                        createdAt={formattedDate}
+                        status={project.status}
+                        github={project.github_url}
+                      />
+                    );
+                  })}
               </tbody>
             </table>
           </div>
diff --git a/src/Components/StatusDropdown.jsx b/src/Components/StatusDropdown.jsx
index 9bef18f..d294623 100644
--- a/src/Components/StatusDropdown.jsx
+++ b/src/Components/StatusDropdown.jsx
@@ -30,7 +30,7 @@ export default function StatusDropdown(props) {
         >
           {props.status === "abandoned" ? "Abandoned" : "Completed"}
 
-          {props.stats === "abandoned" ? (
+          {props.status === "abandoned" ? (
             <svg
               className="w-2.5 h-2.5 ms-3"
               aria-hidden="true"
diff --git a/src/Components/TablePagination.jsx b/src/Components/TablePagination.jsx
index d2be444..f53849c 100644
--- a/src/Components/TablePagination.jsx
+++ b/src/Components/TablePagination.jsx
@@ -1,4 +1,16 @@
+import { useContext } from "react";
+import { AppState } from "../App";
+
 export default function TablePagination() {
+  const { projects, setCurrentPage, currentPage } = useContext(AppState);
+
+  const pagination = {
+    currentPage: 1,
+    totalPages: projects.length / 5,
+    totalItems: projects.length - 1,
+    itemsPerPage: 5,
+  };
+
   return (
     <nav
       className="flex item-center justify-center p-10"
@@ -6,10 +18,14 @@ export default function TablePagination() {
     >
       <ul className="flex items-center -space-x-px h-10 text-base">
         {/* previous arrow */}
-        <li>
+        <li
+          onClick={() => {
+            currentPage > 1 && setCurrentPage(currentPage - 1);
+          }}
+        >
           <a
             href="#"
-            className="duration-300 mr-3 flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
+            className="duration-300 mr-3 flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white  rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
           >
             <span className="sr-only">Previous</span>
             <svg
@@ -29,53 +45,42 @@ export default function TablePagination() {
             </svg>
           </a>
         </li>
-        <li>
-          <a
-            href="#"
-            className="duration-300 m-0.5 rounded-lg z-10 flex items-center justify-center px-4 h-10 leading-tight text-sky-600 border border-sky-300 bg-sky-50 hover:bg-sky-100 hover:text-sky-700 dark:border-gray-900 dark:bg-gray-900 dark:text-sky-400"
-          >
-            1
-          </a>
-        </li>
-        <li>
-          <a
-            href="#"
-            className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
-          >
-            2
-          </a>
-        </li>
-        <li>
-          <a
-            href="#"
-            aria-current="page"
-            className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
-          >
-            3
-          </a>
-        </li>
-        <li>
-          <a
-            href="#"
-            className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
-          >
-            4
-          </a>
-        </li>
-        <li>
-          <a
-            href="#"
-            className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
-          >
-            5
-          </a>
-        </li>
+
+        {/* page numbers */}
+        {projects.map((project, index) => {
+          if (index % pagination.itemsPerPage === 0) {
+            return (
+              <li
+                onClick={() =>
+                  setCurrentPage(index / pagination.itemsPerPage + 1)
+                }
+                key={index}
+              >
+                <a
+                  href="#"
+                  className={
+                    currentPage === index / pagination.itemsPerPage + 1
+                      ? "cursor-default duration-300 flex items-center justify-center px-4 h-10 leading-tight text-white bg-slate-400 bg-opacity-50 rounded-lg  hover:text-white dark:bg-gray-900   dark:text-white  dark:hover:text-white mx-0.5"
+                      : "duration-300 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white  rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-opacity-50 dark:bg-gray-800  dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white mx-0.5"
+                  }
+                >
+                  {index / pagination.itemsPerPage + 1}
+                </a>
+              </li>
+            );
+          }
+        })}
 
         {/* next arrow */}
-        <li>
+        <li
+          onClick={() => {
+            currentPage < pagination.totalPages &&
+              setCurrentPage(currentPage + 1);
+          }}
+        >
           <a
             href="#"
-            className="duration-300 ml-3 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-lg  hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
+            className="duration-300 ml-3 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white  rounded-lg  hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
           >
             <span className="sr-only">Next</span>
             <svg