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 ( <> {surveys.map((survey) => { return ( - <> - - - - + + + ); })} 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([]); + 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

Loading Surveys

; } @@ -47,7 +55,7 @@ const HomeScreen = (): JSX.Element => {
- +
);