[#26] Add pagination to surveys wip

liamstevens111 · Mar 16, 2023 · 254cd38 · 254cd38
1 parent 7b9bc4a
commit 254cd38
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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>
   );