From c1587da72ce58bec8be507de8654547cb76b31bd Mon Sep 17 00:00:00 2001
From: Kendree Chen <kendree.chen@gmail.com>
Date: Wed, 17 Jul 2024 17:20:24 -0400
Subject: [PATCH] temp pagination

---
 package-lock.json      |  27 +++++++++--
 package.json           |   1 +
 src/pages/Discover.tsx | 108 +++++++++++++++++++++++++++++++++++++----
 3 files changed, 123 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9b442e4..db97c81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^9.0.1",
+        "react-paginate": "^8.2.0",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4",
         "react-share": "^5.1.0"
@@ -8955,8 +8956,7 @@
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-markdown": {
       "version": "9.0.1",
@@ -8983,6 +8983,18 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-paginate": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
+      "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -17350,8 +17362,7 @@
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "react-markdown": {
       "version": "9.0.1",
@@ -17370,6 +17381,14 @@
         "vfile": "^6.0.0"
       }
     },
+    "react-paginate": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
+      "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
+      "requires": {
+        "prop-types": "^15"
+      }
+    },
     "react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/package.json b/package.json
index 7588301..c0129cf 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
+    "react-paginate": "^8.2.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
     "react-share": "^5.1.0"
diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
index 0f81df1..814c898 100644
--- a/src/pages/Discover.tsx
+++ b/src/pages/Discover.tsx
@@ -8,18 +8,28 @@ import {
   IonCardTitle,
   IonChip,
   IonContent,
+  IonFabButton,
   IonIcon,
+  IonInfiniteScrollContent,
   IonItemDivider,
   IonLabel,
   IonSearchbar,
+  IonSegmentButton,
   IonText,
 } from "@ionic/react";
 import {
+  arrowBack,
+  arrowForward,
+  chevronBackOutline,
+  chevronForwardOutline,
   closeOutline,
   flag,
   informationCircleOutline,
   play,
 } from "ionicons/icons";
+import ReactDOM from 'react-dom';
+import ReactPaginate from 'react-paginate';
+
 const token = import.meta.env.VITE_STRAPY_TOKEN;
 const apiKey = import.meta.env.VITE_ELEVEN_LABS_API_KEY;
 
@@ -55,10 +65,13 @@ const Discover: React.FC = () => {
   ]);
   const [usedVoices, setUsedVoices] = useState<any>([]);
   const [filteredArticles, setFilteredArticles] = useState<any>([]);
+  const [pageArticles, setPageArticles] = useState<any>([]);
   const [searchText, setSearchText] = useState("");
+  const [pages, setPages] = useState<number[]>([]);
+  const [page, setPage] = useState(0);
+  const entriesPerPage = 1;
 
   useEffect(() => {
-    // fetch from localhost:1337/api/articles
     fetch(`${import.meta.env.VITE_STRAPI_URL}/api/articles?populate=*`, {
       method: "GET",
       headers: {
@@ -173,7 +186,6 @@ const Discover: React.FC = () => {
     const filteredArticles = articles.filter((article: any) =>
       article.attributes.title.toLowerCase().includes(searchText.toLowerCase())
     );
-    setFilteredArticles(filteredArticles);
     console.log(filteredArticles);
   }, [searchText]);
 
@@ -193,6 +205,13 @@ const Discover: React.FC = () => {
     }
   }, [filters]);
 
+  useEffect(() => {
+    const numPages = Math.ceil(filteredArticles.length / entriesPerPage);
+    setPages([...Array(numPages).keys()]);
+    setPage(Math.max(0, Math.min(page, numPages - 1)));
+    setPageArticles(filteredArticles.slice((page) * entriesPerPage, Math.min((page) * entriesPerPage + entriesPerPage, filteredArticles.length)));
+  } , [page, filteredArticles]);
+
   const handleVoiceChange = (event: any) => {
     setSelectedVoiceId(event.target.value);
   };
@@ -220,7 +239,7 @@ const Discover: React.FC = () => {
         className="pt-48"
         style={{
           background:
-            "linear-gradient(180deg, #FFF 26.5%, #FD9390 87.5%, #FB4B45 100%)",
+            "linear-gradient(180deg, #FFF 26.5%, #FD9390 87.5%, #FB4B45 100%)"
         }}
       >
         <div>
@@ -336,9 +355,9 @@ const Discover: React.FC = () => {
             </div>
           </div>
           <div className="container mx-auto grid gap-5 auto-cols-min sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr items-stretch justify-center p-4 center">
-            {filteredArticles &&
-              filteredArticles.length > 0 &&
-              filteredArticles.map((article: any, index: number) => (
+            {pageArticles &&
+              pageArticles.length > 0 &&
+              pageArticles.map((article: any, index: number) => (
                 <div key={index}>
                   <IonicCard
                     id={article.id}
@@ -359,11 +378,82 @@ const Discover: React.FC = () => {
                 </div>
               ))}
           </div>
-          <div
+          <div style = {{width: "fit-content", borderRadius: "2rem", margin: "auto", paddingLeft: "1rem", paddingRight:"1rem", paddingTop: "1rem"}}>
+          <div className = "container"
             style={{
-              height: 100,
+              display: "flex",
+              justifyContent: "center",
+              margin: "auto",
+              width: "fit-content",
             }}
-          />
+          >
+             <IonFabButton
+              onClick={() => {
+                setPage(0);
+              }}
+              color = "transparent"
+              size = "small"
+              style = {{ color: "white", "--box-shadow" : "none", margin: "0.2rem"}}
+            >
+              <IonIcon icon = {chevronBackOutline} style = {{marginRight:"-0.75rem"}}/><IonIcon icon = {chevronBackOutline}/>
+            </IonFabButton>
+            <IonFabButton
+              onClick={() => {
+                setPage(page - 1);
+              }}
+              color = "transparent"
+              size = "small"
+              style = {{ color: "white", "--box-shadow" : "none", margin: "0.2rem"}}
+            >
+              <IonIcon icon = {chevronBackOutline} />
+            </IonFabButton>
+            <IonButton shape = "round"
+              color = "transparent"
+              size = "small"
+              style = {{ color: "white", "--box-shadow" : "none", margin: "0.2rem"}}
+            >
+              <IonText>
+                Page {page + 1} of {pages.length}
+              </IonText>
+            </IonButton>
+            <IonFabButton
+              onClick={() => {
+                setPage(page + 1);
+              }}
+              color = "transparent"
+              size = "small"
+              style = {{ color: "white", "--box-shadow" : "none", margin: "0.2rem"}}
+            >
+              <IonIcon icon = {chevronForwardOutline}/>
+            </IonFabButton>
+            <IonFabButton
+              onClick={() => {
+                setPage(pages[pages.length - 1]);
+              }}
+              color = "transparent"
+              size = "small"
+              style = {{ color: "white", "--box-shadow" : "none", margin: "0.2rem"}}
+            >
+              <IonIcon icon = {chevronForwardOutline}/><IonIcon icon = {chevronForwardOutline} style = {{marginLeft:"-0.75rem"}}/>
+            </IonFabButton>
+          </div>
+          </div>
+          <div style = {{display: "flex", flexWrap: "wrap", justifyContent: "center", padding: "0", maxWidth: "fit-content", margin: "auto", borderRadius: "2rem"}}>
+              {pages.map((pageNumber) => (
+                <div>
+                  <IonFabButton
+                    size = "small"
+                    color = { page === pageNumber ? "light" : "transparent" }
+                    onClick={() => {
+                      setPage(pageNumber);
+                    }}
+                    style = {{ color: "white", "--box-shadow" : "none", "--border-color": "white", "--border-style":"solid", "--border-width":"1px", margin: "0.2rem"}}
+                  >
+                    {pageNumber + 1}
+                  </IonFabButton>
+                </div>
+              ))}
+            </div>
         </div>
       </div>
     </>