feat: add a context to manage pagination

KimJoonSeo · Dec 4, 2023 · 53b9e36 · 53b9e36
1 parent ae120bb
commit 53b9e36
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, {useContext, useState} from 'react'
 import './App.css'
 import {
   Avatar,
@@ -20,6 +20,7 @@ import seriea from './resources/images/seriea.png'
 import ligue1 from './resources/images/ligue1.png'
 import europa from './resources/images/europa.png'
 import conference from './resources/images/conference.png'
+import {PaginationContext, PaginationProvider} from "./contexts";
 
 const LeagueOption: React.FC<{ image: string; name: string }> = ({
   image,
@@ -38,8 +39,7 @@ const LeagueOption: React.FC<{ image: string; name: string }> = ({
 const App: React.FC = () => {
   const [date, setDate] = useState<dayjs.Dayjs>(dayjs())
   const [league, setLeague] = useState<string>('eng.1')
-  const [page, setPage] = useState<number>(1)
-  const [total, setTotal] = useState<number>(26)
+  const {state, actions} = useContext(PaginationContext);
   const leagueOptions = [
     {label: 'Nation', options: [
         {
@@ -85,6 +85,7 @@ const App: React.FC = () => {
     setLeague(value)
   }
   return (
+      <PaginationProvider>
     <Layout>
       <Layout.Content style={{ height: 580 }}>
         <Row>
@@ -114,9 +115,11 @@ const App: React.FC = () => {
         </Row>
       </Layout.Content>
         <Layout.Footer style={{textAlign: 'center', padding: 0}}>
-            <Pagination defaultCurrent={page} total={total} pageSize={12}/>
+            <Pagination defaultCurrent={state.currentPage} total={state.totalCount}
+                        pageSize={12} onChange={page => {actions.setCurrentPage(page)}}/>
         </Layout.Footer>
     </Layout>
+      </PaginationProvider>
   )
 }
 

diff --git a/src/components/DashBoard.tsx b/src/components/DashBoard.tsx
@@ -1,7 +1,8 @@
 import { useScoreBoardData } from '../hooks'
 import { Col, Space, Spin } from 'antd'
-import React, { useEffect } from 'react'
+import React, {useContext, useEffect} from 'react'
 import { showMessage, ScoreCard } from './'
+import {PaginationContext} from "../contexts";
 
 interface Props {
   date: string
@@ -10,12 +11,21 @@ interface Props {
 
 export const DashBoard: React.FC<Props> = ({ date, league }) => {
   const { isLoading, error, data } = useScoreBoardData(date, league)
+  const {state, actions} = useContext(PaginationContext)
+
   useEffect(() => {
     if (error) {
+      actions.setCurrentPage(1)
+      actions.setTotalCount(1)
       showMessage('error', 'An error has occurred while fetching data.')
     }
     if (data?.events.length === 0) {
+      actions.setCurrentPage(1)
+      actions.setTotalCount(1)
       showMessage('info', 'No game today!')
+    } else {
+      actions.setCurrentPage(1)
+      actions.setTotalCount(data?.events.length)
     }
   }, [data, error])