Merge pull request #98 from WebDevStudios/feature/menus

Feature/menus

Author: Greg Rickaby

api/wordpress/_global/getPostTypeStaticProps.js

@@ -2,6 +2,8 @@ import {algoliaIndexName} from '@/api/algolia/connector'
 import getPostTypeById from './getPostTypeById'
 import getPostTypeArchive from './getPostTypeArchive'
 import {addApolloState} from '@/api/apolloConfig'
+import getMenus from '@/api/wordpress/menus/getMenus'
+import config from '@/functions/config'
 
 /**
  * Retrieve static props by post type.
@@ -17,10 +19,21 @@ export default async function getPostTypeStaticProps(
   // preview = false, // TODO - add preview handling.
   // previewData = null
 ) {
+  // Get WP Nav Menus.
+  const menus = await getMenus(config.menuLocations)
+
   // Check for dynamic archive display.
   if (!Object.keys(params).length) {
     const {apolloClient, ...archiveData} = await getPostTypeArchive(postType)
 
+    // Add WP Nav Menus to archive.
+    archiveData.menus = menus
+
+    // Add Algolia env vars to archive.
+    archiveData.algolia = {
+      indexName: algoliaIndexName
+    }
+
     // Merge in query results as Apollo state.
     return addApolloState(apolloClient, {
       props: {
@@ -49,6 +62,9 @@ export default async function getPostTypeStaticProps(
     props.error = false
   }
 
+  // Set WP Nav Menus.
+  props.menus = menus
+
   // Add Algolia env vars.
   props.algolia = {
     indexName: algoliaIndexName

api/wordpress/menus/filterByLocation.js

@@ -0,0 +1,29 @@
+import formatHeirarchialMenu from '@/api/wordpress/menus/formatHeirarchialMenu'
+
+/**
+ * Filter menus array by menu location.
+ *
+ * @author WebDevStudios
+ * @param {Array} menus     The array of WP menus to filter.
+ * @param {Array} locations The array of locations for filtering.
+ * @return {object}         An object containing the requested locations as individual objects.
+ */
+export default function filterByLocation(menus, locations) {
+  const data = {}
+
+  // Loop each menu location.
+  locations.forEach((location) => {
+    // Convert dashes to underscores.
+    const locationName = location.replace(/-/g, '_')
+
+    // Filter menus array by location and assign to new object.
+    const wpmenu = menus.filter(function (menu) {
+      return menu['locations'].includes(locationName.toUpperCase())
+    })
+
+    // Format the returned menu.
+    data[locationName] = formatHeirarchialMenu(wpmenu[0]?.menuItems?.nodes)
+  })
+
+  return data
+}

api/wordpress/menus/formatHeirarchialMenu.js

@@ -0,0 +1,26 @@
+/**
+ * Format a flat list WP nav menu into a heirarchial list.
+ *
+ * @author WebDevStudios
+ * @see https://www.wpgraphql.com/docs/menus/#hierarchical-data
+ * @param {array}  data    The array containing menu data.
+ * @param {object} Default Object keys
+ * @return {array}         Array containing a updated menu list.
+ */
+export default function formatHeirarchialMenu(
+  data = [],
+  {idKey = 'id', parentKey = 'parentId', childrenKey = 'children'} = {}
+) {
+  const tree = []
+  const childrenOf = {}
+  data.forEach((item) => {
+    const newItem = {...item}
+    const {[idKey]: id, [parentKey]: parentId = 0} = newItem
+    childrenOf[id] = childrenOf[id] || []
+    newItem[childrenKey] = childrenOf[id]
+    parentId
+      ? (childrenOf[parentId] = childrenOf[parentId] || []).push(newItem)
+      : tree.push(newItem)
+  })
+  return tree
+}

api/wordpress/menus/getMenus.js

@@ -0,0 +1,23 @@
+import filterByLocation from '@/api/wordpress/menus/filterByLocation'
+import queryMenus from './queryMenus'
+
+/**
+ * Get menu data from WPGraphQL.
+ *
+ * @author WebDevStudios
+ * @param {array} locations The menu locations as an array.
+ * @return {array}          Returns array of menu objects.
+ */
+export default async function getMenus(locations = []) {
+  if (!locations.length > 0) {
+    return [] // Exit if empty.
+  }
+
+  // Query WP Menus.
+  const menus = await queryMenus()
+
+  // Filter returned menus by specific menu location.
+  const filteredMenus = filterByLocation(menus?.data?.menus?.nodes, locations)
+
+  return filteredMenus || []
+}

api/wordpress/menus/queryMenus.js

@@ -0,0 +1,52 @@
+import {gql} from '@apollo/client'
+import {initializeWpApollo} from '../connector'
+
+/**
+ * Query all WP Menus.
+ *
+ * @author WebDevStudios
+ * @return {object}    Menu data or error object.
+ */
+export default async function queryMenus() {
+  const query = gql`
+    query menuQuery {
+      menus {
+        nodes {
+          locations
+          menuItems {
+            nodes {
+              id
+              parentId
+              label
+              path
+              target
+              title
+            }
+          }
+        }
+      }
+    }
+  `
+
+  // Get/create Apollo instance.
+  const apolloClient = initializeWpApollo()
+
+  const menus = await apolloClient
+    .query({query})
+    .then((menus) => menus ?? null)
+    .catch((error) => {
+      return {
+        isError: true,
+        message: error.message
+      }
+    })
+
+  if (!menus) {
+    return {
+      isError: true,
+      message: `An error occurred while trying to get menu data"`
+    }
+  }
+
+  return menus
+}

components/atoms/Logo/Logo.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+// TODO: Create Storybook for this component.
+
+export default function Logo() {
+  return (
+    <Link href="/">
+      <a>
+        <img
+          src="/logo.svg"
+          alt="site logo"
+          loading="lazy"
+          height="128"
+          width="128"
+        />
+      </a>
+    </Link>
+  )
+}

components/atoms/Logo/index.js

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

components/common/Layout.js

@@ -37,5 +37,6 @@ Layout.propTypes = {
   noFollow: PropTypes.bool,
   noIndex: PropTypes.bool,
   openGraph: PropTypes.object,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  menus: PropTypes.object
 }

components/common/MenuProvider.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import {createContext} from 'react'
+
+// Initialize Menu context object.
+export const MenuContext = createContext({
+  menus: null
+})
+
+/**
+ * Provide menus for components.
+ *
+ * @param  {Object} props The component attributes as props.
+ * @return {Element}      The child elements wrapped in a context provider.
+ */
+export default function MenuProvider(props) {
+  const {value, children} = props
+
+  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>
+}
+
+MenuProvider.propTypes = {
+  menus: PropTypes.string,
+  children: PropTypes.object,
+  value: PropTypes.object
+}

components/molecules/Navigation/Navigation.js

@@ -0,0 +1,69 @@
+import isLinkActive from '@/functions/isLinkActive'
+import cn from 'classnames'
+import Link from 'next/link'
+import {useRouter} from 'next/router'
+import styles from './Navigation.module.css'
+
+/**
+ * Render the Navigation component.
+ *
+ * @author WebDevStudios
+ * @param {object}  props           Navigation props.
+ * @param {array}   props.menu      Array of menu items.
+ * @param {string}  props.className Optional classname for the element.
+ * @return {Element}                The Navigation component.
+ */
+export default function Navigation({menu, className}) {
+  const {asPath} = useRouter()
+  return (
+    <>
+      {!!menu?.length && (
+        <nav className={cn(styles.navigation, className)}>
+          <ul>
+            {menu.map((item, index) => {
+              const children =
+                item.children && item.children.length > 0 ? item.children : ''
+              return (
+                <li key={index}>
+                  <Link href={item.path}>
+                    <a
+                      target={item.target ? item.target : '_self'}
+                      className={cn(
+                        'nav-item',
+                        isLinkActive(asPath, item.path) && styles.active
+                      )}
+                    >
+                      {item.label}
+                    </a>
+                  </Link>
+                  {children && (
+                    <ul>
+                      {children.map((item, index) => {
+                        return (
+                          <li key={index}>
+                            <Link href={item.path}>
+                              <a
+                                target={item.target ? item.target : '_self'}
+                                className={cn(
+                                  'nav-item',
+                                  isLinkActive(asPath, item.path) &&
+                                    styles.active
+                                )}
+                              >
+                                {item.label}
+                              </a>
+                            </Link>
+                          </li>
+                        )
+                      })}
+                    </ul>
+                  )}
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+      )}
+    </>
+  )
+}