feat: add a context to manage pagination

src/App.tsx

@@ -6,7 +6,6 @@ import {
   DatePicker,
   DatePickerProps,
   Layout,
-  Pagination,
   Row,
   Select,
 } from 'antd'
@@ -21,6 +20,7 @@ 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";
+import Footer from "./components/Footer";
 
 const LeagueOption: React.FC<{ image: string; name: string }> = ({
   image,
@@ -39,7 +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 {state, actions} = useContext(PaginationContext);
+  const { state, actions} = useContext(PaginationContext)
   const leagueOptions = [
     {label: 'Nation', options: [
         {
@@ -85,7 +85,6 @@ const App: React.FC = () => {
     setLeague(value)
   }
   return (
-      <PaginationProvider>
     <Layout>
       <Layout.Content style={{ height: 580 }}>
         <Row>
@@ -114,12 +113,8 @@ const App: React.FC = () => {
           />
         </Row>
       </Layout.Content>
-        <Layout.Footer style={{textAlign: 'center', padding: 0}}>
-            <Pagination defaultCurrent={state.currentPage} total={state.totalCount}
-                        pageSize={12} onChange={page => {actions.setCurrentPage(page)}}/>
-        </Layout.Footer>
+        <Footer />
     </Layout>
-      </PaginationProvider>
   )
 }
 

src/components/DashBoard.tsx

@@ -11,21 +11,20 @@ interface Props {
 
 export const DashBoard: React.FC<Props> = ({ date, league }) => {
   const { isLoading, error, data } = useScoreBoardData(date, league)
-  const {state, actions} = useContext(PaginationContext)
+  const { state, actions} = useContext(PaginationContext)
 
   useEffect(() => {
+    actions.setCurrentPage(1)
+    actions.setTotalCount(data?.events.length)
     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 {
+    } else if (typeof data?.events !== 'undefined') {
       actions.setCurrentPage(1)
       actions.setTotalCount(data?.events.length)
+      console.log('test')
     }
   }, [data, error])
 
@@ -42,9 +41,11 @@ export const DashBoard: React.FC<Props> = ({ date, league }) => {
   return (
     <>
       {data?.events.map((event, i) => (
+          i >= (state.currentPage-1)*12 && i < state.currentPage*12 ?
         <Col span={6} key={i}>
           <ScoreCard status={event.status} competitions={event.competitions} />
         </Col>
+              : null
       ))}
     </>
   )

src/components/Footer.tsx

@@ -0,0 +1,15 @@
+import {Layout, Pagination} from "antd";
+import React, {useContext} from "react";
+import {PaginationContext} from "../contexts";
+
+const Footer: React.FC = () => {
+    const { state, actions} = useContext(PaginationContext)
+    return (
+        <Layout.Footer style={{textAlign: 'center', padding: 0}}>
+            <Pagination defaultCurrent={state.currentPage} total={state.totalCount}
+                        pageSize={12} onChange={page => {actions.setCurrentPage(page)}}/>
+        </Layout.Footer>
+    )
+}
+
+export default Footer

src/index.tsx

@@ -9,6 +9,7 @@ import {
   QueryClientConfig,
   QueryClientProvider,
 } from '@tanstack/react-query'
+import {PaginationProvider} from "./contexts";
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
@@ -27,7 +28,9 @@ const queryClient = new QueryClient(config)
 
 root.render(
   <QueryClientProvider client={queryClient}>
-    <App />
+    <PaginationProvider>
+      <App />
+    </PaginationProvider>
     <ReactQueryDevtools initialIsOpen={false} />
   </QueryClientProvider>,
 )