doc: (#276) using pagination component for post pagination

wpengine · Jun 17, 2021 · 7890fd4 · 7890fd4
1 parent 8b20df6
commit 7890fd4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 25 deletions.
diff --git a/examples/next/getting-started/src/components/Pagination.tsx b/examples/next/getting-started/src/components/Pagination.tsx
@@ -27,26 +27,24 @@ function PreviousPageNavigation(props: PreviousPageNavigationProps) {
 
 interface PaginationProps {
   pageInfo: any;
+  basePath: string;
 }
 
-export default function Pagination(props: PaginationProps) {
-  const router = useRouter();
-  const basePath = router.asPath.split('/').slice(0, 3).join('/');
-
-  let previousPageUrl = `${basePath}/before/${props.pageInfo?.startCursor}`;
-  let nextPageUrl = `${basePath}/after/${props.pageInfo?.endCursor}`;
+export default function Pagination({ pageInfo, basePath }: PaginationProps) {
+  let previousPageUrl = `${basePath}/before/${pageInfo?.startCursor}`;
+  let nextPageUrl = `${basePath}/after/${pageInfo?.endCursor}`;
 
   return (
     <nav className="pagination" aria-label="Pagination">
       <div className="wrap">
         <ul>
-          {props.pageInfo.hasPreviousPage && (
+          {pageInfo.hasPreviousPage && (
             <li className="pagination-previous">
               <PreviousPageNavigation href={previousPageUrl} />
             </li>
           )}
 
-          {props.pageInfo.hasNextPage && (
+          {pageInfo.hasNextPage && (
             <li className="pagination-next">
               <NextPageNavigation href={nextPageUrl} />
             </li>

diff --git a/examples/next/getting-started/src/pages/posts/index.tsx b/examples/next/getting-started/src/pages/posts/index.tsx
@@ -1,5 +1,5 @@
 import { getNextStaticProps, client } from '@wpengine/headless-next';
-import { Footer, Header, Posts } from 'components';
+import { Footer, Header, Pagination, Posts } from 'components';
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -14,14 +14,13 @@ export default function Page() {
   const { postSlug, postCursor } = query;
   const { usePosts, useGeneralSettings, useQuery } = client();
   const generalSettings = useGeneralSettings();
-  const isAfter = postSlug === 'after';
+  const isBefore = postSlug === 'before';
   const posts = usePosts({
-    after: isAfter ? (postCursor as string) : undefined,
-    before: !isAfter ? (postCursor as string) : undefined,
-    first: isAfter ? 1 : undefined,
-    last: !isAfter ? 1 : undefined,
+    after: !isBefore ? (postCursor as string) : undefined,
+    before: isBefore ? (postCursor as string) : undefined,
+    first: !isBefore ? 6 : undefined,
+    last: isBefore ? 6 : undefined,
   });
-  const { hasNextPage, hasPreviousPage, startCursor, endCursor } = posts.pageInfo;
 
   if (useQuery().$state.isLoading) {
     return <>Loading...</>;
@@ -49,16 +48,7 @@ export default function Page() {
           postTitleLevel="h3"
           id={styles.post_list}
         />
-        {hasPreviousPage === true && (
-          <Link href={`/posts/before/${startCursor}`}>
-            <a href={`/posts/before/${startCursor}`}>Previous</a>
-          </Link>
-        )}
-        {hasNextPage === true && (
-          <Link href={`/posts/after/${endCursor}`}>
-            <a href={`/posts/after/${endCursor}`}>Next</a>
-          </Link>
-        )}
+        <Pagination pageInfo={posts.pageInfo} basePath="/posts" />
       </main>
 
       <Footer copyrightHolder={generalSettings.title} />