From f77a9f7dd128bf3bac263539d3f4e82a5c941d45 Mon Sep 17 00:00:00 2001
From: Ruan Eloy <ruanr18@gmail.com>
Date: Wed, 26 Jul 2023 22:24:18 -0300
Subject: [PATCH] add pagination

---
 src/hooks/useJobs.js       | 16 +++++++++++++---
 src/lib/graphql/queries.js | 19 ++++++++++++-------
 src/pages/HomePage.js      | 18 ++++++++++++++++--
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useJobs.js b/src/hooks/useJobs.js
index 8c33a65..739dad5 100644
--- a/src/hooks/useJobs.js
+++ b/src/hooks/useJobs.js
@@ -1,8 +1,18 @@
 import { useQuery } from "@apollo/client";
 import { GET_JOBS } from "../lib/graphql/queries";
 
-export default function useJobs() {
-  const {loading, data} = useQuery(GET_JOBS, {fetchPolicy: 'network-only'});
+export default function useJobs(limit, offset) {
+  const {loading, data} = useQuery(
+    GET_JOBS,
+    {
+      variables: { limit, offset },
+      fetchPolicy: 'network-only',
+    }
+    );
 
-  return {loading, jobs: data?.jobs};
+  return {
+    loading, 
+    jobs: data?.jobs.items, 
+    totalCount: data?.jobs.totalCount || 0
+  };
 }
\ No newline at end of file
diff --git a/src/lib/graphql/queries.js b/src/lib/graphql/queries.js
index df9f405..3cee413 100644
--- a/src/lib/graphql/queries.js
+++ b/src/lib/graphql/queries.js
@@ -37,15 +37,20 @@ const jobDetailFragment = gql`
 `;
 
 export const GET_JOBS = gql`
-  query {
-    jobs {
-      company {
+  query Jobs($limit: Int, $offset: Int) {
+    jobs(limit: $limit, offset: $offset) {
+      items {
+        company {
+          description
+          id
+          name
+        }
+        date
+        description
+        title
         id
-        name
       }
-      title
-      id
-      date
+      totalCount
     }
   }
 `;
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 28125bb..2653dd4 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,15 +1,29 @@
+import { useState } from 'react';
 import JobList from '../components/JobList';
 import useJobs from '../hooks/useJobs';
+import PaginationBar from '../components/PaginationBar';
 
+const JOBS_PER_PAGE = 5;
 function HomePage() {
-  const { loading, jobs } = useJobs();
+  const [page, setPage] = useState(1)
+  const { loading, jobs, totalCount } = useJobs(JOBS_PER_PAGE, (page - 1) * JOBS_PER_PAGE);
+  const totalPages = Math.ceil(totalCount / JOBS_PER_PAGE);
+
+  if(loading) {
+    return <h1>Loading...</h1>
+  }
 
   return (
     <div>
       <h1 className="title">
         Job Board
       </h1>
-      {loading ? <h1>Loading...</h1> : <JobList jobs={jobs} />}
+      <PaginationBar 
+        currentPage={page} 
+        totalPages={totalPages} 
+        onPageChange={setPage}
+      />
+      <JobList jobs={jobs} />
     </div>
   );
 }