add pagination

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
+  };
 }

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
     }
   }
 `;

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>
   );
 }