Merge branch 'staging' into feature/33-post-archive-page-redirect

Author: ravewebdev

.eslintrc.js

@@ -16,23 +16,46 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
-    'prettier'
+    'prettier',
+    'plugin:jsdoc/recommended'
   ],
   settings: {
     react: {
       version: 'detect'
+    },
+    jsdoc: {
+      tagNamePreference: {
+        returns: 'return'
+      }
     }
   },
-  plugins: ['react', 'react-hooks', 'jsx-a11y', 'prettier'],
+  plugins: ['react', 'react-hooks', 'jsx-a11y', 'prettier', 'jsdoc'],
   rules: {
+    'func-style': ['error', 'declaration'],
+    'jsdoc/check-indentation': 'warn',
+    'jsdoc/check-line-alignment': ['warn', 'always'],
+    'jsdoc/require-param': [
+      'warn',
+      {
+        checkRestProperty: true,
+        unnamedRootBase: ['props']
+      }
+    ],
+    'jsdoc/check-values': [
+      'warn',
+      {
+        allowedAuthors: ['WebDevStudios']
+      }
+    ],
     'jsx-a11y/anchor-is-valid': 'off',
+    'no-console': ['error', {allow: ['warn', 'error']}],
+    'prettier/prettier': 'error',
     'react/react-in-jsx-scope': 'off',
     'react/jsx-filename-extension': [
-      1,
+      'warn',
       {
         extensions: ['.js', '.jsx']
       }
-    ],
-    'prettier/prettier': 'error'
+    ]
   }
 }

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "csstools.postcss",
+    "silvenon.mdx",
+    "stylelint.vscode-stylelint",
+    "snipsnapdev.snipsnap-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  // Enable format with prettier on save, configure import organizing.
+  "editor.formatOnSave": true,
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+
+  // This will get emmet working in JSX.
+  "emmet.includeLanguages": {
+    "javascript": "javascriptreact"
+  }
+}

.vscode/snipsnap.code-snippets

@@ -0,0 +1,33 @@
+import algoliasearch from 'algoliasearch/lite'
+import getEnvVar from '@/functions/getEnvVar'
+
+// Define env vars.
+export const algoliaIndexName = getEnvVar('ALGOLIA_INDEX_NAME', true)
+export const algoliaSearchKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_KEY
+export const algoliaAppId = process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID
+
+const algoliaClient = algoliasearch(algoliaAppId, algoliaSearchKey)
+
+export const searchClient = {
+  search(requests) {
+    if (requests.every(({params}) => !params.query)) {
+      return Promise.resolve({
+        results: requests.map(() => ({
+          hits: [],
+          nbHits: 0,
+          nbPages: 0,
+          page: 0,
+          processingTimeMS: 0
+        }))
+      })
+    }
+
+    return algoliaClient.search(requests)
+  }
+}
+
+export const searchResultsClient = {
+  search(requests) {
+    return algoliaClient.search(requests)
+  }
+}

api/algolia/connector.js

@@ -10,9 +10,9 @@ export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
  * Init Apollo and merge with initial state.
  *
  * @author WebDevStudios
- * @param  {Object} apolloClient Apollo client instance.
- * @param  {mixed}  initialState The initial state of things.
- * @return {Object}              Apollo client instance.
+ * @param {object} apolloClient Apollo client instance.
+ * @param {*}      initialState The initial state of things.
+ * @return {object}             Apollo client instance.
  */
 export function initializeApollo(apolloClient, initialState = null) {
   // If a page has Next.js data fetching methods that
@@ -43,9 +43,9 @@ export function initializeApollo(apolloClient, initialState = null) {
  * Pass down Apollo state to page props.
  *
  * @author WebDevStudios
- * @param  {Object} client    Apollo  Client props.
- * @param  {Object} pageProps Props from getStaticProps().
- * @return {Object}           Updated page props.
+ * @param {object} client    Apollo  Client props.
+ * @param {object} pageProps Props from getStaticProps().
+ * @return {object}          Updated page props.
  */
 export function addApolloState(client, pageProps) {
   if (pageProps?.props) {
@@ -59,8 +59,8 @@ export function addApolloState(client, pageProps) {
  * Only update when the cache value has changed.
  *
  * @author WebDevStudios
- * @param  {Object} pageProps Props from getStaticProps().
- * @return {Object}           WP Apollo client instance.
+ * @param {object} pageProps Props from getStaticProps().
+ * @return {object}          WP Apollo client instance.
  */
 export function useApollo(pageProps) {
   const state = pageProps[APOLLO_STATE_PROP_NAME]

api/apolloConfig.js

@@ -0,0 +1,48 @@
+import {ApolloClient, InMemoryCache} from '@apollo/client'
+import {initializeApollo} from '../apolloConfig'
+import {RestLink} from 'apollo-link-rest'
+
+let feApolloClient
+
+// Define Frontend API endpoint.
+const restLink = new RestLink({
+  uri: '/api'
+})
+
+/**
+ * Create a basic Apollo client for connecting to Frontend API.
+ *
+ * @see https://www.apollographql.com/docs/react/api/core/ApolloClient/
+ *
+ * @author WebDevStudios
+ * @return {object} Apollo client instance.
+ */
+export function createFeApolloClient() {
+  return new ApolloClient({
+    ssrMode: false,
+    link: restLink,
+    cache: new InMemoryCache()
+  })
+}
+
+/**
+ * Init Apollo for Frontend API and merge with initial state.
+ *
+ * @author WebDevStudios
+ * @param {*} initialState Initial Apollo state.
+ * @return {object}        Frontend Apollo client instance.
+ */
+export function initializeFeApollo(initialState = null) {
+  // Only run one instance of the Apollo client.
+  const _apolloClient = feApolloClient ?? createFeApolloClient()
+
+  const newApolloClient = initializeApollo(_apolloClient, initialState)
+
+  // For SSG and SSR always create a new Apollo Client.
+  if (typeof window === 'undefined') return newApolloClient
+
+  // Create the Apollo Client once in the client.
+  if (!feApolloClient) feApolloClient = newApolloClient
+
+  return newApolloClient
+}

api/frontend/connector.js

@@ -0,0 +1,45 @@
+import queryArchivePosts from './queryArchivePosts'
+import {initializeFeApollo} from '../../connector'
+
+/**
+ * Retrieve next page of posts for post type archive.
+ *
+ * @author WebDevStudios
+ * @param {string} postType WP post type.
+ * @param {string} cursor   Start cursor for pagination.
+ * @param {string} orderBy  Order by: field.
+ * @param {string} order    Order by: direction.
+ * @return {object}         Archive post and pagination data or error object.
+ */
+export default async function getArchivePosts(
+  postType,
+  cursor = null,
+  orderBy = 'DATE',
+  order = 'DESC'
+) {
+  const apolloClient = initializeFeApollo()
+
+  return apolloClient
+    .query({
+      query: queryArchivePosts,
+      variables: {
+        postType,
+        cursor,
+        orderBy,
+        order
+      }
+    })
+    .then(
+      (response) =>
+        response?.data?.archive ?? {
+          error: true,
+          errorMessage: `An error occurred while trying to retrieve data for ${postType} archive.`
+        }
+    )
+    .catch((error) => {
+      return {
+        error: true,
+        errorMessage: error.message
+      }
+    })
+}

api/frontend/wp/archive/getArchivePosts.js

@@ -0,0 +1,24 @@
+import {gql} from '@apollo/client'
+import {wpDataEndpoints} from '@/api/wordpress/connector'
+
+// Query: retrieve archive posts by post type.
+const queryArchivePosts = gql`
+  query GET_ARCHIVE_POSTS(
+    $postType: String!
+    $cursor: String!
+    $orderBy: String = DATE
+    $order: String = DESC
+  ) {
+    archive(
+      postType: $postType
+      cursor: $cursor
+      orderBy: $orderBy
+      order: $order
+    ) @rest(type: "Archive", path: "${wpDataEndpoints.archive}?{args}") {
+      pagination
+      posts
+    }
+  }
+`
+
+export default queryArchivePosts

api/frontend/wp/archive/queryArchivePosts.js

@@ -1,18 +1,24 @@
 import {initializeWpApollo} from '../connector'
 import queryPostsArchive from '../posts/queryPostsArchive'
 import {postTypes} from './postTypes'
+import queryEventsArchive from '../events/queryEventsArchive'
+import queryCareersArchive from '../careers/queryCareersArchive'
+import queryServicesArchive from '../services/queryServicesArchive'
+import queryTeamsArchive from '../teams/queryTeamsArchive'
+import queryPortfoliosArchive from '../portfolios/queryPortfoliosArchive'
+import queryTestimonialsArchive from '../testimonials/queryTestimonialsArchive'
 
 /**
  * Retrieve post archive.
  *
  * @author WebDevStudios
- * @param  {string} postType WP post type.
- * @param  {string} orderBy  Order by: field.
- * @param  {string} order    Order by: direction.
- * @param  {string} cursor   Start/end cursor for pagination.
- * @param  {bool}   getNext  Whether to retrieve next set of posts (true) or previous set (false).
- * @param  {number} perPage  Number of posts per page.
- * @return {Object}          Object containing Apollo client instance and post archive data or error object.
+ * @param {string}  postType WP post type.
+ * @param {string}  orderBy  Order by: field.
+ * @param {string}  order    Order by: direction.
+ * @param {string}  cursor   Start/end cursor for pagination.
+ * @param {boolean} getNext  Whether to retrieve next set of posts (true) or previous set (false).
+ * @param {number}  perPage  Number of posts per page.
+ * @return {object}          Object containing Apollo client instance and post archive data or error object.
  */
 export default async function getPostTypeArchive(
   postType,
@@ -24,7 +30,13 @@ export default async function getPostTypeArchive(
 ) {
   // Define single post query based on post type.
   const postTypeQuery = {
-    post: queryPostsArchive
+    career: queryCareersArchive,
+    event: queryEventsArchive,
+    portfolio: queryPortfoliosArchive,
+    post: queryPostsArchive,
+    service: queryServicesArchive,
+    team: queryTeamsArchive,
+    testimonial: queryTestimonialsArchive
   }
 
   // Retrieve post type query.
@@ -36,6 +48,8 @@ export default async function getPostTypeArchive(
   // Set up return object.
   const response = {
     apolloClient,
+    posts: null,
+    pagination: null,
     error: false,
     errorMessage: null
   }
@@ -60,27 +74,29 @@ export default async function getPostTypeArchive(
   }
 
   // Execute query.
-  response.posts = await apolloClient
+  await apolloClient
     .query({query, variables})
-    .then((posts) => {
+    .then((archive) => {
       const pluralType = postTypes[postType] ?? postType
+      const data = archive?.data?.[pluralType] ?? null
 
       // Set error props if data not found.
-      if (!posts?.data?.[pluralType]?.edges) {
+      if (!data?.edges || !data?.pageInfo) {
         response.error = true
         response.errorMessage = `An error occurred while trying to retrieve data for ${pluralType} archive.`
 
         return null
       }
 
       // Flatten posts array to include inner node post data.
-      return posts.data[pluralType].edges.map((post) => post.node)
+      response.posts = data.edges.map((post) => post.node)
+
+      // Extract pagination data.
+      response.pagination = data.pageInfo
     })
     .catch((error) => {
       response.error = true
       response.errorMessage = error.message
-
-      return null
     })
 
   return response