From 32d0447e46791b75d4d0bd8721d50cc873aec050 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Wed, 15 Mar 2023 19:32:09 +0700
Subject: [PATCH] [#26] Add pagination to surveys wip

---
 src/adapters/surveyAdapter.ts       |  4 ++--
 src/components/SurveyList/index.tsx | 13 ++++++-------
 src/screens/Home/index.tsx          | 28 ++++++++++++++++++----------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/adapters/surveyAdapter.ts b/src/adapters/surveyAdapter.ts
index d98001d..6e9a782 100644
--- a/src/adapters/surveyAdapter.ts
+++ b/src/adapters/surveyAdapter.ts
@@ -60,8 +60,8 @@ class SurveyAdapter extends BaseAdapter {
     return this.prototype.getRequest('me', {});
   }
 
-  static list() {
-    return this.prototype.getRequest('surveys', {});
+  static list(page: number) {
+    return this.prototype.getRequest(`surveys?page[number]=${page}`, {});
   }
 }
 
diff --git a/src/components/SurveyList/index.tsx b/src/components/SurveyList/index.tsx
index d264c03..8916bfb 100644
--- a/src/components/SurveyList/index.tsx
+++ b/src/components/SurveyList/index.tsx
@@ -6,9 +6,9 @@ import 'swiper/swiper-bundle.min.css';
 import SurveyComponent from 'components/Survey';
 import { Survey } from 'types/Survey';
 
-type SurveyListProps = { surveys: Survey[] };
+type SurveyListProps = { surveys: Survey[]; onPageChange: any };
 
-function SurveyList({ surveys }: SurveyListProps) {
+function SurveyList({ surveys, onPageChange }: SurveyListProps) {
   return (
     <>
       <Swiper
@@ -18,14 +18,13 @@ function SurveyList({ surveys }: SurveyListProps) {
         spaceBetween={100}
         pagination={{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }}
         slidesPerView={1}
+        onReachEnd={onPageChange}
       >
         {surveys.map((survey) => {
           return (
-            <>
-              <SwiperSlide key={survey.id}>
-                <SurveyComponent {...survey} />
-              </SwiperSlide>
-            </>
+            <SwiperSlide key={survey.id}>
+              <SurveyComponent {...survey} />
+            </SwiperSlide>
           );
         })}
       </Swiper>
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index 486abde..c9ef353 100644
--- a/src/screens/Home/index.tsx
+++ b/src/screens/Home/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 import SurveyAdapter from 'adapters/surveyAdapter';
 import { Survey } from 'types/Survey';
@@ -7,12 +7,18 @@ import { SurveyResponse } from 'types/SurveyResponse';
 import SurveyList from '../../components/SurveyList';
 
 const HomeScreen = (): JSX.Element => {
-  const [loaded, setLoaded] = useState(false);
+  const [surveyPage, setSurveyPage] = useState(1);
   const [surveys, setSurveys] = useState<Survey[]>([]);
 
+  const loading = useRef(false);
+
+  const handlePageChange = () => {
+    setSurveyPage(surveyPage + 1);
+  };
+
   useEffect(() => {
     const fetchSurveys = async () => {
-      const surveyResponse = await SurveyAdapter.list();
+      const surveyResponse = await SurveyAdapter.list(surveyPage);
 
       const surveyData: SurveyResponse = await surveyResponse.data;
 
@@ -28,14 +34,16 @@ const HomeScreen = (): JSX.Element => {
         });
       });
 
-      setSurveys(parsedSurveys);
-
-      setLoaded(true);
+      setSurveys((existingSurveys) => [...existingSurveys, ...parsedSurveys]);
+      loading.current = false;
     };
-    fetchSurveys();
-  }, []);
+    if (!loading.current) {
+      loading.current = true;
+      fetchSurveys();
+    }
+  }, [surveyPage]);
 
-  if (!loaded) {
+  if (surveys.length === 0) {
     return <h3 data-test-id="loading-surveys">Loading Surveys</h3>;
   }
 
@@ -47,7 +55,7 @@ const HomeScreen = (): JSX.Element => {
       </div>
 
       <div className="w-screen max-w-3xl">
-        <SurveyList surveys={surveys} />
+        <SurveyList surveys={surveys} onPageChange={handlePageChange} />
       </div>
     </section>
   );