[#26] Add pagination to surveys wip

liamstevens111 · Mar 15, 2023 · 7212a64 · 7212a64
1 parent 7b9bc4a
commit 7212a64
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 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,14 @@ function SurveyList({ surveys }: SurveyListProps) {
         spaceBetween={100}
         pagination={{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }}
         slidesPerView={1}
+        onReachEnd={onPageChange}
+        rebuildOnUpdate={true}
       >
         {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
@@ -9,10 +9,16 @@ import SurveyList from '../../components/SurveyList';
 const HomeScreen = (): JSX.Element => {
   const [loaded, setLoaded] = useState(false);
   const [surveys, setSurveys] = useState<Survey[]>([]);
+  const [surveyPage, setSurveyPage] = useState(1);
+
+  const handlePageChange = () => {
+    console.log('page change');
+    setSurveyPage(surveyPage + 1);
+  };
 
   useEffect(() => {
     const fetchSurveys = async () => {
-      const surveyResponse = await SurveyAdapter.list();
+      const surveyResponse = await SurveyAdapter.list(surveyPage);
 
       const surveyData: SurveyResponse = await surveyResponse.data;
 
@@ -33,7 +39,7 @@ const HomeScreen = (): JSX.Element => {
       setLoaded(true);
     };
     fetchSurveys();
-  }, []);
+  }, [surveyPage]);
 
   if (!loaded) {
     return <h3 data-test-id="loading-surveys">Loading Surveys</h3>;
@@ -47,7 +53,7 @@ const HomeScreen = (): JSX.Element => {
       </div>
 
       <div className="w-screen max-w-3xl">
-        <SurveyList surveys={surveys} />
+        <SurveyList surveys={surveys} onPageChange={handlePageChange} />
       </div>
     </section>
   );