Merge pull request #118 from WebDevStudios/feature/33-previews

Feature/33 previews

Author: Greg Rickaby

api/wordpress/_global/getPostTypeArchive.js

@@ -14,38 +14,31 @@ import getMenus from '../menus/getMenus'
 export const archiveSeo = {
   career: {
     title: 'Careers',
-    description: '',
-    route: 'careers'
+    description: ''
   },
   event: {
     title: 'Events',
-    description: '',
-    route: 'events'
+    description: ''
   },
   portfolio: {
     title: 'Portfolio',
-    description: '',
-    route: 'portfolio'
+    description: ''
   },
   post: {
     title: 'Blog',
-    description: '',
-    route: 'blog'
+    description: ''
   },
   service: {
     title: 'Services',
-    description: '',
-    route: 'service'
+    description: ''
   },
   team: {
     title: 'Team Members',
-    description: '',
-    route: 'team'
+    description: ''
   },
   testimonial: {
     title: 'Testimonials',
-    description: '',
-    route: 'testimonial'
+    description: ''
   }
 }
 
@@ -126,7 +119,7 @@ export default async function getPostTypeArchive(
       // Retrieve default SEO data.
       response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
 
-      const pluralType = postTypes[postType] ?? postType
+      const pluralType = postTypes[postType]?.pluralName ?? postType
       const data = archiveData?.[pluralType] ?? null
 
       // Set error props if data not found.
@@ -147,7 +140,7 @@ export default async function getPostTypeArchive(
             ? {
                 ...homepageSettings.postsPage.seo,
                 canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
-                  archiveSeo?.[postType]?.route
+                  postTypes?.[postType]?.route
                 }`
               }
             : {
@@ -156,7 +149,7 @@ export default async function getPostTypeArchive(
                 }`,
                 metaDesc: archiveSeo?.[postType]?.description,
                 canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
-                  archiveSeo?.[postType]?.route
+                  postTypes?.[postType]?.route
                 }`,
                 metaRobotsNofollow: 'follow',
                 metaRobotsNoindex: 'index'

api/wordpress/_global/getPostTypeById.js

@@ -1,5 +1,5 @@
 import queryPostById from '../posts/queryPostById'
-import {initializeWpApollo} from '../connector'
+import {initializeWpApollo, createWpApolloClient} from '../connector'
 import queryPageById from '../pages/queryPageById'
 import {isHierarchicalPostType} from './postTypes'
 import formatBlockData from '@/functions/formatBlockData'
@@ -19,9 +19,15 @@ import getMenus from '../menus/getMenus'
  * @param {string}          postType WP post type.
  * @param {number | string} id       Post identifier.
  * @param {string}          idType   Type of ID.
+ * @param {string}          preview  Whether query is for a regular post view (null), a preview check (basic), or full post preview (full).
  * @return {object}                  Object containing Apollo client instance and post data or error object.
  */
-export default async function getPostTypeById(postType, id, idType = 'SLUG') {
+export default async function getPostTypeById(
+  postType,
+  id,
+  idType = 'SLUG',
+  preview = null
+) {
   // Define single post query based on post type.
   const postTypeQuery = {
     career: queryCareerById,
@@ -44,7 +50,9 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
   const query = postTypeQuery?.[postType] ?? null
 
   // Get/create Apollo instance.
-  const apolloClient = initializeWpApollo()
+  const apolloClient = preview
+    ? createWpApolloClient(true)
+    : initializeWpApollo()
 
   // Set up return object.
   const response = {
@@ -93,11 +101,11 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
         slug: id
       }
 
-      // Handle blocks.
-      if (!post || !post?.blocksJSON) {
+      if ('basic' === preview || !post || !post?.blocksJSON) {
         return post
       }
 
+      // Handle blocks.
       newPost.blocks = await formatBlockData(
         JSON.parse(newPost.blocksJSON) ?? []
       )

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -15,7 +15,7 @@ export default async function getPostTypeStaticPaths(postType) {
   }
 
   // Retrieve post type plural name.
-  const pluralName = postTypes[postType]
+  const pluralName = postTypes[postType].pluralName
 
   // Check if post type is hierarchical.
   const isHierarchical = isHierarchicalPostType(postType)

api/wordpress/_global/getPostTypeStaticProps.js

@@ -8,15 +8,17 @@ import getFrontendPage, {frontendPageSeo} from './getFrontendPage'
  * Retrieve static props by post type.
  *
  * @author WebDevStudios
- * @param {string} params   Post params (e.g., slug).
- * @param {string} postType Post Type.
- * @return {object}         Object containing post props and revalidate setting.
+ * @param {string}  params      Post params (e.g., slug).
+ * @param {string}  postType    Post Type.
+ * @param {boolean} preview     Whether requesting preview of post.
+ * @param {object}  previewData Post preview data.
+ * @return {object}             Object containing post props and revalidate setting.
  */
 export default async function getPostTypeStaticProps(
   params,
-  postType
-  // preview = false, // TODO - add preview handling.
-  // previewData = null
+  postType,
+  preview = false,
+  previewData = null
 ) {
   // Set revalidate length (seconds).
   const revalidate = 60 * 5
@@ -28,7 +30,7 @@ export default async function getPostTypeStaticProps(
     }
   }
 
-  // Check for Frontend-only routes.
+  /* -- Handle Frontend-only routes. -- */
   if (Object.keys(frontendPageSeo).includes(postType)) {
     const {apolloClient, ...routeData} = await getFrontendPage(postType)
 
@@ -41,7 +43,7 @@ export default async function getPostTypeStaticProps(
     })
   }
 
-  // Check for dynamic archive display.
+  /* -- Handle dynamic archive display. -- */
   if (!Object.keys(params).length) {
     const {apolloClient, ...archiveData} = await getPostTypeArchive(postType)
 
@@ -56,24 +58,43 @@ export default async function getPostTypeStaticProps(
     })
   }
 
+  /* -- Handle individual posts. -- */
+
   // Handle catch-all routes.
   const slug = Array.isArray(params.slug) ? params.slug.join('/') : params.slug
 
+  // Get post identifier (ID or slug).
+  const postId = Number.isInteger(Number(slug)) ? Number(slug) : slug
+
+  // Check if preview mode is active and valid for current post (preview and post IDs or slugs match).
+  const isCurrentPostPreview =
+    preview &&
+    (postId === previewData?.post?.id || postId === previewData?.post?.slug)
+
+  // Check if viewing a draft post.
+  const isDraft = isCurrentPostPreview && 'draft' === previewData?.post?.status
+
+  // Set query variables.
+  const id = isDraft ? previewData.post.id : slug
+  const idType = isDraft ? 'DATABASE_ID' : 'SLUG'
+
   // Retrieve post data.
   const {apolloClient, error, ...postData} = await getPostTypeById(
     postType,
-    slug
+    id,
+    idType,
+    isCurrentPostPreview ? 'full' : null
   )
 
   const props = {
     ...postData,
     ...sharedProps,
-    error
+    error,
+    preview: isCurrentPostPreview
   }
 
-  // Custom handling for homepage.
+  // Fallback to empty props if homepage not set in WP.
   if ('/' === slug && error) {
-    // Fallback to empty props if homepage not set in WP.
     props.post = null
     props.error = false
   }

api/wordpress/_global/postTypes.js

@@ -1,15 +1,45 @@
 // Define valid WP post types (singular and plural GraphQL names).
 export const postTypes = {
-  career: 'careers',
-  comment: 'comments',
-  event: 'events',
-  mediaItem: 'mediaItems',
-  page: 'pages',
-  portfolio: 'portfolios',
-  post: 'posts',
-  service: 'services',
-  team: 'teams',
-  testimonial: 'testimonials'
+  career: {
+    pluralName: 'careers',
+    route: 'careers'
+  },
+  comment: {
+    pluralName: 'comments',
+    route: null
+  },
+  event: {
+    pluralName: 'events',
+    route: 'events'
+  },
+  mediaItem: {
+    pluralName: 'mediaItems',
+    route: null
+  },
+  page: {
+    pluralName: 'pages',
+    route: ''
+  },
+  portfolio: {
+    pluralName: 'portfolios',
+    route: 'portfolio'
+  },
+  post: {
+    pluralName: 'posts',
+    route: 'blog'
+  },
+  service: {
+    pluralName: 'services',
+    route: 'service'
+  },
+  team: {
+    pluralName: 'teams',
+    route: 'team'
+  },
+  testimonial: {
+    pluralName: 'testimonials',
+    route: 'testimonial'
+  }
 }
 
 // Define hierarchical post types.

api/wordpress/_global/queryDefaultPageData.js

@@ -3,7 +3,7 @@ import defaultPageData from '../_partials/defaultPageData'
 
 // Query: retrieve default SEO and other page data.
 const queryDefaultPageData = gql`
-  query GET_DEFAULT_SEO {
+  query GET_DEFAULT_PAGE_DATA {
     ${defaultPageData}
   }
 `

api/wordpress/_partials/globalPostFields.js

@@ -5,5 +5,6 @@ const globalPostFields = `
   slug
   uri
   title
+  status
 `
 export default globalPostFields

api/wordpress/connector.js

@@ -4,6 +4,14 @@ import {initializeApollo} from '../apolloConfig'
 
 // Define env vars.
 export const wpApiUrlBase = getEnvVar('WORDPRESS_API_URL')
+export const wpPreviewSecret = process.env.WORDPRESS_PREVIEW_SECRET
+const wpAppUser = process.env.WORDPRESS_APPLICATION_USERNAME
+const wpAppPass = process.env.WORDPRESS_APPLICATION_PASSWORD
+
+// Set WP application password auth header.
+const wpAuthorization = Buffer.from(`${wpAppUser}:${wpAppPass}`).toString(
+  'base64'
+)
 
 // Define Frontend WP API data endpoint base.
 const wpDataEndpointBase = '/wp'
@@ -21,14 +29,18 @@ let wpApolloClient
  * @see https://www.apollographql.com/docs/react/api/core/ApolloClient/
  *
  * @author WebDevStudios
- * @return {object} Apollo client instance.
+ * @param {boolean} auth Whether to include authentication via WP application password.
+ * @return {object}      Apollo client instance.
  */
-export function createWpApolloClient() {
+export function createWpApolloClient(auth = false) {
   return new ApolloClient({
     ssrMode: false,
     link: new HttpLink({
       uri: `${wpApiUrlBase}graphql`,
-      credentials: ''
+      credentials: '',
+      headers: {
+        authorization: auth ? `Basic ${wpAuthorization}` : ''
+      }
     }),
     cache: new InMemoryCache()
   })

functions/getPagePropTypes.js

@@ -49,7 +49,7 @@ export const postPropTypes = {
     excerpt: PropTypes.string,
     featuredImage: PropTypes.object,
     ...seoPropTypes,
-    slug: PropTypes.string,
+    slug: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     title: PropTypes.string,
     uri: PropTypes.string
   })

pages/[...slug].js

@@ -54,12 +54,14 @@ export async function getStaticPaths() {
  * Get post static props.
  *
  * @author WebDevStudios
- * @param {object} context        Context for current post.
- * @param {object} context.params Route parameters for current post.
- * @return {object}               Post props.
+ * @param {object}  context             Context for current post.
+ * @param {object}  context.params      Route parameters for current post.
+ * @param {boolean} context.preview     Whether requesting preview of post.
+ * @param {object}  context.previewData Post preview data.
+ * @return {object}                     Post props.
  */
-export async function getStaticProps({params}) {
-  return getPostTypeStaticProps(params, postType)
+export async function getStaticProps({params, preview, previewData}) {
+  return getPostTypeStaticProps(params, postType, preview, previewData)
 }
 
 Page.propTypes = {