From 90ed9df902527ba3203bfd2dd6b452576c299b37 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Mon, 26 Apr 2021 11:10:15 -0600
Subject: [PATCH 1/6] Fix jsdoc desc

---
 components/organisms/Header/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/Header/Header.js b/components/organisms/Header/Header.js
index 9c7aabfad..4aae51782 100644
--- a/components/organisms/Header/Header.js
+++ b/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.

From 54f66ad5443e96bb6070e85c9cb4b26d52ca6cda Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Mon, 26 Apr 2021 11:16:10 -0600
Subject: [PATCH 2/6] Create Archive component

---
 components/organisms/Archive/Archive.js | 80 +++++++++++++++++++++++++
 components/organisms/Archive/index.js   |  1 +
 2 files changed, 81 insertions(+)
 create mode 100644 components/organisms/Archive/Archive.js
 create mode 100644 components/organisms/Archive/index.js

diff --git a/components/organisms/Archive/Archive.js b/components/organisms/Archive/Archive.js
new file mode 100644
index 000000000..97e89692a
--- /dev/null
+++ b/components/organisms/Archive/Archive.js
@@ -0,0 +1,80 @@
+import Button from '@/components/atoms/Button'
+import Container from '@/components/atoms/Container'
+import Layout from '@/components/common/Layout'
+import Card from '@/components/molecules/Card'
+import getPagePropTypes 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 {object} props.post       Post data from WordPress.
+ * @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.
+ * @param
+ * @return {Element}                The Archive component.
+ */
+export default function Archive({post, 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)
+  }
+
+  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}
+        />
+      </Container>
+    </Layout>
+  )
+}
+
+Archive.propTypes = {
+  ...getPagePropTypes('post')
+}
diff --git a/components/organisms/Archive/index.js b/components/organisms/Archive/index.js
new file mode 100644
index 000000000..c03d73cab
--- /dev/null
+++ b/components/organisms/Archive/index.js
@@ -0,0 +1 @@
+export {default} from './Archive'

From 8a9fbb13f1cf05d135738f7c1cf2402bab85fa37 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Mon, 26 Apr 2021 12:45:18 -0600
Subject: [PATCH 3/6] Add Archive story

---
 .../organisms/Archive/Archive.stories.mdx     | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 components/organisms/Archive/Archive.stories.mdx

diff --git a/components/organisms/Archive/Archive.stories.mdx b/components/organisms/Archive/Archive.stories.mdx
new file mode 100644
index 000000000..365652eca
--- /dev/null
+++ b/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>

From 5fd028be4a34635b20193f7b6363269d80a83fa0 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Mon, 26 Apr 2021 12:53:14 -0600
Subject: [PATCH 4/6] Remove layout/container wrap from Archive

---
 components/organisms/Archive/Archive.js | 56 +++++++++++--------------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/components/organisms/Archive/Archive.js b/components/organisms/Archive/Archive.js
index 97e89692a..7c0cb3b82 100644
--- a/components/organisms/Archive/Archive.js
+++ b/components/organisms/Archive/Archive.js
@@ -1,8 +1,6 @@
 import Button from '@/components/atoms/Button'
-import Container from '@/components/atoms/Container'
-import Layout from '@/components/common/Layout'
 import Card from '@/components/molecules/Card'
-import getPagePropTypes from '@/functions/getPagePropTypes'
+import {archivePropTypes} from '@/functions/getPagePropTypes'
 import getArchivePosts from '@/functions/next-api/wordpress/archive/getArchivePosts'
 import {useRef, useState} from 'react'
 
@@ -11,14 +9,12 @@ import {useRef, useState} from 'react'
  *
  * @author WebDevStudios
  * @param {object} props            The component attributes as props.
- * @param {object} props.post       Post data from WordPress.
  * @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.
- * @param
  * @return {Element}                The Archive component.
  */
-export default function Archive({post, posts, pagination, postType}) {
+export default function Archive({posts, pagination, postType}) {
   // Track all posts, including initial posts and additionally loaded pages.
   const [allPosts, setAllPosts] = useState(posts)
 
@@ -48,33 +44,31 @@ export default function Archive({post, posts, pagination, postType}) {
   }
 
   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}
-        />
-      </Container>
-    </Layout>
+    <>
+      {!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.propTypes = {
-  ...getPagePropTypes('post')
+  ...archivePropTypes
 }

From 0f09264a49b50b4b9e8017080a73aaf3462f2b4f Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Mon, 26 Apr 2021 12:53:43 -0600
Subject: [PATCH 5/6] Use early return instead of ternary

---
 components/organisms/Archive/Archive.js | 29 +++++++++++++------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/organisms/Archive/Archive.js b/components/organisms/Archive/Archive.js
index 7c0cb3b82..d7c4680db 100644
--- a/components/organisms/Archive/Archive.js
+++ b/components/organisms/Archive/Archive.js
@@ -43,22 +43,23 @@ export default function Archive({posts, pagination, postType}) {
     setLoadingMore(false)
   }
 
+  if (!allPosts || !allPosts.length) {
+    return <p>No posts found.</p>
+  }
+
   return (
     <>
-      {!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>
-      )}
+      <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'}

From b86ffbd8a04be607bc1c10bb7feba6a8cbf6341d Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Mon, 26 Apr 2021 14:51:12 -0600
Subject: [PATCH 6/6] Use Archive component on posts, team

---
 pages/blog/[[...slug]].js | 56 ++-----------------------------------
 pages/team/[[...slug]].js | 58 ++-------------------------------------
 2 files changed, 5 insertions(+), 109 deletions(-)

diff --git a/pages/blog/[[...slug]].js b/pages/blog/[[...slug]].js
index 3ddccebf2..ba1dabfa5 100644
--- a/pages/blog/[[...slug]].js
+++ b/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>
     )
diff --git a/pages/team/[[...slug]].js b/pages/team/[[...slug]].js
index 3066d84fe..c34b1b428 100644
--- a/pages/team/[[...slug]].js
+++ b/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>
     )