dynamic menu depending on category

ragudesign · Jun 16, 2022 · 0546f2d · 0546f2d
1 parent 6fe6cdb
commit 0546f2d
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 43 deletions.
diff --git a/components/header/Header.js b/components/header/Header.js
@@ -1,22 +1,7 @@
 import Link from 'next/link';
 import headerStyles from './Header.module.scss';
-import fetcher from '../../lib/fetcher';
-import { getCats } from '../../lib/api';
-import { useEffect, useState } from 'react';
 
-const Header = () => {
-
-  // const [menuItems, setMenuItems] = useState([]);
-
-  // useEffect(async () => {
-  //   const response = await fetcher(getCats);
-
-  //   const kbCats = response.data.kbsTax.nodes;
-
-  //   setMenuItems(kbCats);
-  // }, []);
-
-  // console.log(menuItems, "menuItems")
+const Header = ({menu}) => {
 
   return (
     <div className={headerStyles.header}>
@@ -29,12 +14,9 @@ const Header = () => {
 
         <nav className={headerStyles.nav}>
           <ul>
-            {/* {menuItems.map((item) => {
+            {menu.map((item) => {
               return <li key={item.id}><Link href={'/categories/'+item.slug}>{item.name}</Link></li>;
-            })} */}
-            {/* <li>
-              <Link href="/">Back to home</Link>
-            </li> */}
+            })}
           </ul>
         </nav>
       </div>

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,31 +1,26 @@
-import Header from '../components/header/Header'
+import Header from '../components/header/Header';
 import NextNprogress from 'nextjs-progressbar';
 import fetcher from '../lib/fetcher';
-import '../styles/base/base.scss'
-import '../styles/base/gutenberg.scss'
+import { getCats } from '../lib/api';
+import '../styles/base/base.scss';
+import '../styles/base/gutenberg.scss';
 
 function MyApp({ Component, pageProps, kbCats }) {
-
   return (
     <>
       <NextNprogress color="#0770ef" />
-      <Header kbCats={kbCats} />
+      <Header menu={kbCats} />
       <Component {...pageProps} />
     </>
-  )
+  );
 }
 
-export default MyApp
-
-
-export async function getStaticProps() {
+MyApp.getInitialProps = async () => {
   const response = await fetcher(getCats);
 
-  const kbCats = response.data.kbsTax.nodes;
+  const kbCats = response.data?.kbsTax.nodes;
 
-return {
-  props: {
-    kbCats,
-  },
+  return { kbCats };
 };
-}
+
+export default MyApp;
diff --git a/pages/categories/[slug].js b/pages/categories/[slug].js
@@ -32,7 +32,7 @@ export default function categories({ singleCategory }) {
 export async function getStaticPaths() {
   const response = await fetcher(getCats);
 
-  const catSlugs = response.data.kbsTax.nodes;
+  const catSlugs = response.data?.kbsTax.nodes;
 
   return {
     paths: catSlugs.map((cat) => `/categories/${cat.slug}`),
@@ -49,7 +49,7 @@ export const getStaticProps = async ({ params }) => {
 
   return {
     props: {
-      singleCategory: response.data.kbsTax.nodes[0],
+      singleCategory: response.data?.kbsTax.nodes[0],
     },
   };
 };
diff --git a/pages/index.js b/pages/index.js
@@ -44,7 +44,7 @@ export default function Home({ latestKbs }) {
 export async function getStaticProps() {
   const response = await fetcher(getLatestKbs);
 
-  const latestKbs = response.data.kbsTax.nodes;
+  const latestKbs = response.data?.kbsTax.nodes;
 
   return {
     props: {

diff --git a/pages/kb/[slug].js b/pages/kb/[slug].js
@@ -29,7 +29,7 @@ export default function Kb({ singlePage }) {
 export async function getStaticPaths() {
   const response = await fetcher(getKbSlugs);
 
-  const titleSlugs = response.data.kbs.nodes;
+  const titleSlugs = response.data?.kbs.nodes;
 
   return {
     paths: titleSlugs.map((kb) => `/kb/${kb.slug}`),
@@ -46,7 +46,7 @@ export const getStaticProps = async ({ params }) => {
 
   return {
     props: {
-      singlePage: response.data.kb,
+      singlePage: response.data?.kb,
     },
   };
 };
diff --git a/scripts/build-search.js b/scripts/build-search.js
@@ -30,7 +30,7 @@ async function buildJSON() {
 
   const response = await fetcher(query);
 
-  const titleSlugs = response.data.kbs.nodes
+  const titleSlugs = response.data?.kbs.nodes
 
   const fullParams = `${JSON.stringify(titleSlugs)}`