Feature/383 abstract archive

components/organisms/Archive/Archive.js

@@ -0,0 +1,75 @@
+import Button from '@/components/atoms/Button'
+import Card from '@/components/molecules/Card'
+import {archivePropTypes} from '@/functions/getPagePropTypes'
+import getArchivePosts from '@/functions/next-api/wordpress/archive/getArchivePosts'
+import {useRef, useState} from 'react'
+
+/**
+ * Render the Archive component.
+ *
+ * @author WebDevStudios
+ * @param {object} props            The component attributes as props.
+ * @param {Array}  props.posts      Array of post data from WordPress.
+ * @param {object} props.pagination Archive pagination data from WordPress.
+ * @param {string} props.postType   WP post type.
+ * @return {Element}                The Archive component.
+ */
+export default function Archive({posts, pagination, postType}) {
+  // Track all posts, including initial posts and additionally loaded pages.
+  const [allPosts, setAllPosts] = useState(posts)
+
+  // Track "load more" button state.
+  const [loadingMore, setLoadingMore] = useState(false)
+
+  // Track current pagination object.
+  const paginationRef = useRef(pagination)
+
+  /**
+   * Load more posts for archive.
+   */
+  async function loadPosts() {
+    setLoadingMore(true)
+
+    const newPosts = await getArchivePosts(
+      postType,
+      paginationRef.current?.endCursor
+    )
+
+    setAllPosts([...allPosts, ...(newPosts?.posts ?? [])])
+
+    // Update pagination ref.
+    paginationRef.current = newPosts?.pagination
+
+    setLoadingMore(false)
+  }
+
+  if (!allPosts || !allPosts.length) {
+    return <p>No posts found.</p>
+  }
+
+  return (
+    <>
+      <div className="grid lg:grid-cols-2 gap-12">
+        {allPosts.map((post, index) => (
+          <Card
+            key={index}
+            title={post?.title}
+            url={post?.uri}
+            body={post?.excerpt}
+          />
+        ))}
+      </div>
+
+      <Button
+        onClick={loadPosts}
+        text={loadingMore ? 'Loading...' : 'Load More'}
+        type="secondary"
+        disabled={!paginationRef.current?.hasNextPage || loadingMore}
+      />
+    </>
+  )
+}
+
+Archive.propTypes = {
+  ...archivePropTypes
+}

components/organisms/Archive/Archive.stories.mdx

@@ -0,0 +1,74 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import Archive from './'
+
+<Meta title="Components/Molecules/Archive" component={Archive} />
+
+# Component
+
+Use this to display a post type archive.
+
+<Canvas>
+  <Story name="Component">
+    <Archive
+      post={{
+        seo: {
+          breadcrumbs: [],
+          canonical: 'https://nextjswp.test/blog',
+          title: 'Post Archive - Next.js WordPress Starter',
+          metaDesc: '',
+          metaRobotsNofollow: 'follow',
+          metaRobotsNoindex: 'index',
+          opengraphAuthor: '',
+          opengraphModifiedTime: '2021-01-04T23:00:34+00:00',
+          opengraphPublishedTime: '',
+          opengraphImage: {},
+          siteTitle: 'Next.js WordPress Starter',
+          siteDescription:
+            'Our starter for headless WordPress projects. View the Github repo and read the wiki to learn more.',
+          social: {}
+        }
+      }}
+      posts={[
+        {
+          databaseId: 437,
+          date: '2021-04-23T16:40:39',
+          slug: 'lorem-ipsum-3',
+          uri: '/blog/lorem-ipsum-3/',
+          title: 'Lorem Ipsum 3',
+          status: 'publish',
+          excerpt:
+            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [&hellip;]</p>\n',
+          featuredImage: null
+        },
+        {
+          databaseId: 434,
+          date: '2021-04-23T16:38:30',
+          slug: 'lorem-ipsum-2',
+          uri: '/blog/lorem-ipsum-2/',
+          title: 'Lorem Ipsum 2',
+          status: 'publish',
+          excerpt:
+            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [&hellip;]</p>\n',
+          featuredImage: null
+        },
+        {
+          databaseId: 431,
+          date: '2021-04-23T16:38:14',
+          slug: 'lorem-ipsum-1',
+          uri: '/blog/lorem-ipsum-1/',
+          title: 'Lorem Ipsum 1',
+          status: 'publish',
+          excerpt:
+            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [&hellip;]</p>\n',
+          featuredImage: null
+        }
+      ]}
+      pagination={{
+        startCursor: 'abc123',
+        endCursor: 'xyz890',
+        hasNextPage: true,
+        hasPreviousPage: false
+      }}
+    />
+  </Story>
+</Canvas>

components/organisms/Archive/index.js

@@ -0,0 +1 @@
+export {default} from './Archive'

components/organisms/Header/Header.js

@@ -9,7 +9,7 @@ import styles from './Header.module.css'
 // TODO: Create Storybook for this component.
 
 /**
- * Render the ImageGallery component.
+ * Render the Header component.
  *
  * @author WebDevStudios
  * @return {Element} The Header component.

pages/blog/[[...slug]].js

@@ -1,16 +1,13 @@
 import Breadcrumbs from '@/components/atoms/Breadcrumbs'
-import Button from '@/components/atoms/Button'
 import Container from '@/components/atoms/Container'
 import RichText from '@/components/atoms/RichText'
 import Layout from '@/components/common/Layout'
 import Blocks from '@/components/molecules/Blocks'
-import Card from '@/components/molecules/Card'
 import Comments from '@/components/molecules/Comments'
+import Archive from '@/components/organisms/Archive'
 import getPagePropTypes from '@/functions/getPagePropTypes'
-import getArchivePosts from '@/functions/next-api/wordpress/archive/getArchivePosts'
 import getPostTypeStaticPaths from '@/functions/wordpress/postTypes/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeStaticProps'
-import {useRef, useState} from 'react'
 
 // Define route post type.
 const postType = 'post'
@@ -27,60 +24,11 @@ const postType = 'post'
  * @return {Element}                 The BlogPost component.
  */
 export default function BlogPost({post, archive, posts, pagination}) {
-  // Track all posts, including initial posts and additionally loaded pages.
-  const [allPosts, setAllPosts] = useState(posts)
-
-  // Track "load more" button state.
-  const [loadingMore, setLoadingMore] = useState(false)
-
-  // Track current pagination object.
-  const paginationRef = useRef(pagination)
-
-  /**
-   * Load more posts for archive.
-   */
-  async function loadPosts() {
-    setLoadingMore(true)
-
-    const newPosts = await getArchivePosts(
-      postType,
-      paginationRef.current?.endCursor
-    )
-
-    setAllPosts([...allPosts, ...(newPosts?.posts ?? [])])
-
-    // Update pagination ref.
-    paginationRef.current = newPosts?.pagination
-
-    setLoadingMore(false)
-  }
-
-  // Check for post archive.
-  // TODO create generic archive component and move this check to `_app.js`.
   if (archive) {
     return (
       <Layout seo={{...post?.seo}}>
         <Container>
-          {!allPosts || !allPosts.length ? (
-            <p>No posts found.</p>
-          ) : (
-            <div className="grid lg:grid-cols-2 gap-12">
-              {allPosts.map((post, index) => (
-                <Card
-                  key={index}
-                  title={post?.title}
-                  url={post?.uri}
-                  body={post?.excerpt}
-                />
-              ))}
-            </div>
-          )}
-          <Button
-            onClick={loadPosts}
-            text={loadingMore ? 'Loading...' : 'Load More'}
-            type="secondary"
-            disabled={!paginationRef.current?.hasNextPage || loadingMore}
-          />
+          <Archive posts={posts} postType={postType} pagination={pagination} />
         </Container>
       </Layout>
     )

pages/team/[[...slug]].js

@@ -1,15 +1,12 @@
 import Breadcrumbs from '@/components/atoms/Breadcrumbs'
-import Button from '@/components/atoms/Button'
 import Container from '@/components/atoms/Container'
 import RichText from '@/components/atoms/RichText'
 import Layout from '@/components/common/Layout'
 import Blocks from '@/components/molecules/Blocks'
-import Card from '@/components/molecules/Card'
+import Archive from '@/components/organisms/Archive'
 import getPagePropTypes from '@/functions/getPagePropTypes'
-import getArchivePosts from '@/functions/next-api/wordpress/archive/getArchivePosts'
 import getPostTypeStaticPaths from '@/functions/wordpress/postTypes/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeStaticProps'
-import {useRef, useState} from 'react'
 
 // Define route post type.
 const postType = 'team'
@@ -26,60 +23,11 @@ const postType = 'team'
  * @return {Element}                 The Team component.
  */
 export default function Team({post, archive, posts, pagination}) {
-  // Track all posts, including initial posts and additionally loaded pages.
-  const [allPosts, setAllPosts] = useState(posts)
-
-  // Track "load more" button state.
-  const [loadingMore, setLoadingMore] = useState(false)
-
-  // Track current pagination object.
-  const paginationRef = useRef(pagination)
-
-  /**
-   * Load more posts for archive.
-   */
-  async function loadPosts() {
-    setLoadingMore(true)
-
-    const newPosts = await getArchivePosts(
-      postType,
-      paginationRef.current?.endCursor
-    )
-
-    setAllPosts([...allPosts, ...(newPosts?.posts ?? [])])
-
-    // Update pagination ref.
-    paginationRef.current = newPosts?.pagination
-
-    setLoadingMore(false)
-  }
-
-  // Check for post archive.
-  // TODO create generic archive component and move this check to `_app.js`.
   if (archive) {
     return (
       <Layout seo={{...post?.seo}}>
-        <Container className="container py-20">
-          {!allPosts || !allPosts.length ? (
-            <p>No posts found.</p>
-          ) : (
-            <div className="grid lg:grid-cols-2 gap-12">
-              {allPosts.map((post, index) => (
-                <Card
-                  key={index}
-                  title={post?.title}
-                  url={post?.uri}
-                  body={post?.excerpt}
-                />
-              ))}
-            </div>
-          )}
-          <Button
-            onClick={loadPosts}
-            text={loadingMore ? 'Loading...' : 'Load More'}
-            type="secondary"
-            disabled={!paginationRef.current?.hasNextPage || loadingMore}
-          />
+        <Container>
+          <Archive posts={posts} postType={postType} pagination={pagination} />
         </Container>
       </Layout>
     )