fixed build and updated header

ConductionNL · Dec 5, 2023 · 5688847 · 5688847
1 parent b2cdc0f
commit 5688847
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 122 deletions.
diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosInstance, AxiosResponse } from "axios";
-import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate";
 import { removeFileNameFromUrl } from "../services/FileNameFromUrl";
-import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate";
+import footerDefaults from "../templates/templateParts/footer/Defaults.json"
+import headerDefaults from "../templates/templateParts/header/Defaults.json"
 import toast from "react-hot-toast";
 
 // Resources
@@ -34,13 +34,13 @@ export default class APIService {
 
   public get FooterContentClient(): AxiosInstance {
     return axios.create({
-      baseURL: removeFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? DEFAULT_FOOTER_CONTENT_URL),
+      baseURL: removeFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? footerDefaults.FOOTER_CONTENT_URL),
     });
   }
 
   public get HeaderContentClient(): AxiosInstance {
     return axios.create({
-      baseURL: removeFileNameFromUrl(process.env.GATSBY_HEADER_CONTENT ?? DEFAULT_HEADER_CONTENT_URL),
+      baseURL: removeFileNameFromUrl(process.env.GATSBY_HEADER_CONTENT ?? headerDefaults.HEADER_CONTENT_URL),
     });
   }
 

diff --git a/pwa/src/hooks/footerContent.ts b/pwa/src/hooks/footerContent.ts
@@ -1,15 +1,14 @@
 import * as React from "react";
-import { useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
+import footerDefaults from "../templates/templateParts/footer/Defaults.json";
+import { useQuery } from "react-query";
 import { getFileNameFromUrl } from "../services/FileNameFromUrl";
-import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate";
 
 export const useFooterContent = () => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const fileName = getFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? DEFAULT_FOOTER_CONTENT_URL);
-
+  const fileName = getFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? footerDefaults.FOOTER_CONTENT_URL);
 
   const getContent = () =>
     useQuery<any, Error>(["footer-content", fileName], () => API?.FooterContent.getContent(fileName), {

diff --git a/pwa/src/hooks/headerContent.ts b/pwa/src/hooks/headerContent.ts
@@ -1,17 +1,17 @@
 import * as React from "react";
-import { useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
+import headerDefaults from "../templates/templateParts/header/Defaults.json";
+import { useQuery } from "react-query";
 import { getFileNameFromUrl } from "../services/FileNameFromUrl";
-import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate";
 
 export const useHeaderContent = () => {
   const API: APIService | null = React.useContext(APIContext);
 
   const fileName = getFileNameFromUrl(
     process.env.GATSBY_HEADER_CONTENT !== undefined && process.env.GATSBY_HEADER_CONTENT.length !== 0
       ? process.env.GATSBY_HEADER_CONTENT
-      : DEFAULT_HEADER_CONTENT_URL,
+      : headerDefaults.HEADER_CONTENT_URL,
   );
 
   const getContent = () =>

diff --git a/pwa/src/hooks/useHeaderTopNavItems.ts b/pwa/src/hooks/useHeaderTopNavItems.ts
@@ -1,7 +1,9 @@
+import * as React from "react";
 import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav";
 import { useGatsbyContext } from "../context/gatsby";
 import { navigate } from "gatsby";
 import { useTranslation } from "react-i18next";
+import { useHeaderContent } from "./headerContent";
 
 export type THeaderTopNavItem = {
   label: string;
@@ -20,88 +22,100 @@ export type THeaderTopNavItem = {
   };
 };
 
-export const useHeaderTopNavItems = (data: THeaderTopNavItem[]) => {
-  const { gatsbyContext } = useGatsbyContext();
+export const useHeaderTopNavItems = (optionalData?: THeaderTopNavItem[]) => {
   const { t } = useTranslation();
+  const { gatsbyContext } = useGatsbyContext();
+  const [topNavItems, setTopNavItems] = React.useState<ITopNavItem[]>([]);
 
-  const headerTopNavItems: ITopNavItem[] = [];
+  // For production
+  const _useHeaderContent = useHeaderContent();
+  const getHeaderContent = _useHeaderContent.getContent();
+  getHeaderContent.isSuccess && getHeaderContent.data.concat(optionalData);
 
-  data?.map((item: any) => {
-    const isCurrent = (current: any) => {
-      const prefixedPathname =
-        process.env.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true"
-          ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}${current.pathname}`
-          : current.pathname;
+  // For development
+  // const getHeaderContent = {data: require("../templates/templateParts/header/HeaderContent.json")};
 
-      const isCurrentRoute = (): boolean => {
-        if (prefixedPathname === gatsbyContext.location.pathname) return true;
+  React.useEffect(() => {
+    if (!getHeaderContent.data) return;
 
-        if (current.pathname !== "/") return gatsbyContext.location.pathname.includes(current.pathname);
+    const headerTopNavItems = [...getHeaderContent.data, ...(optionalData ?? [])].map((item: any) => {
+      const isCurrent = (current: any) => {
+        const prefixedPathname =
+          process.env.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true"
+            ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}${current.pathname}`
+            : current.pathname;
 
-        return false;
-      };
+        const isCurrentRoute = (): boolean => {
+          if (prefixedPathname === gatsbyContext.location.pathname) return true;
 
-      if (!current.filterCondition) {
-        return isCurrentRoute();
-      }
-    };
+          if (current.pathname !== "/") return gatsbyContext.location.pathname.includes(current.pathname);
 
-    const getOnClick = (
-      onClick: any,
-      type: "markdown" | "readme" | "internal" | "external" | "internalMarkdown",
-      label: string,
-    ) => {
-      if (!onClick || !type || !label) return;
+          return false;
+        };
 
-      if (onClick.link && !onClick.setFilter) {
-        if (type === "internal") {
-          navigate(onClick.link);
-        }
-
-        if (type === "external") {
-          open(onClick.link);
+        if (!current.filterCondition) {
+          return isCurrentRoute();
         }
+      };
 
-        if (type === "markdown" || type === "readme") {
-          navigate(`/github/${label.replaceAll(" ", "_")}/?link=${onClick.link}`);
+      const getOnClick = (
+        onClick: any,
+        type: "markdown" | "readme" | "internal" | "external" | "internalMarkdown",
+        label: string,
+      ) => {
+        if (!onClick || !type || !label) return;
+
+        if (onClick.link && !onClick.setFilter) {
+          if (type === "internal") {
+            navigate(onClick.link);
+          }
+
+          if (type === "external") {
+            open(onClick.link);
+          }
+
+          if (type === "markdown" || type === "readme") {
+            navigate(`/github/${label.replaceAll(" ", "_")}/?link=${onClick.link}`);
+          }
         }
-      }
 
-      if (!onClick.link && onClick.internalMarkdown) {
-        if (type === "internalMarkdown") {
-          navigate(`/pages/${onClick.internalMarkdown.directoryName}/${onClick.internalMarkdown.fileName}`);
+        if (!onClick.link && onClick.internalMarkdown) {
+          if (type === "internalMarkdown") {
+            navigate(`/pages/${onClick.internalMarkdown.directoryName}/${onClick.internalMarkdown.fileName}`);
+          }
         }
-      }
-    };
+      };
 
-    const setSubItems = (subItems: ITopNavItem[]) => {
-      if (!subItems) return;
-      const subItemsArray: ITopNavItem[] = [];
-
-      subItems.map((item: any) => {
-        subItemsArray.push({
-          label: t(item.label),
-          type: item.type,
-          showToolTip: item.showToolTip === "true" ? true : false,
-          current: item.current ? isCurrent(item.current) : false,
-          handleClick: () => getOnClick(item.handleClick, item.type, item.label),
+      const setSubItems = (subItems: ITopNavItem[]) => {
+        if (!subItems) return;
+        const subItemsArray: ITopNavItem[] = [];
+
+        subItems.map((item: any) => {
+          subItemsArray.push({
+            label: t(item.label),
+            type: item.type,
+            current: item.current ? isCurrent(item.current) : false,
+            handleClick: () => getOnClick(item.handleClick, item.type, item.label),
+          });
         });
-      });
 
-      const subItemsObject = Object.assign(subItemsArray);
+        const subItemsObject = Object.assign(subItemsArray);
 
-      return subItemsObject;
-    };
+        return subItemsObject;
+      };
 
-    headerTopNavItems.push({
-      label: t(item.label),
-      type: item.type,
-      icon: item.icon,
-      current: item.current ? isCurrent(item.current) : false,
-      handleClick: () => getOnClick(item.handleClick, item.type, item.label),
-      subItems: setSubItems(item.subItems),
+      return {
+        label: t(item.label),
+        type: item.type,
+        icon: item.icon,
+        current: item.current ? isCurrent(item.current) : false,
+        handleClick: () => getOnClick(item.handleClick, item.type, item.label),
+        subItems: setSubItems(item.subItems),
+      };
     });
-  });
 
-  return { headerTopNavItems };
+    setTopNavItems(headerTopNavItems);
+  }, [getHeaderContent.data, gatsbyContext.location.pathname, gatsbyContext.pageContext?.breadcrumb.crumbs]);
+
+  return { topNavItems };
 };
diff --git a/pwa/src/templates/templateParts/footer/Defaults.json b/pwa/src/templates/templateParts/footer/Defaults.json
@@ -0,0 +1,3 @@
+{
+  "FOOTER_CONTENT_URL": "https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"
+}
diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -20,9 +20,6 @@ import { Logo } from "@conduction/components";
 import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 import { useFooterContent } from "../../../hooks/footerContent";
 
-export const DEFAULT_FOOTER_CONTENT_URL =
-  "https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json";
-
 type TDynamicContentItem = {
   title: string;
   items: {

diff --git a/pwa/src/templates/templateParts/header/Defaults.json b/pwa/src/templates/templateParts/header/Defaults.json
@@ -0,0 +1,3 @@
+{
+  "HEADER_CONTENT_URL": "https://raw.githubusercontent.com/ConductionNL/product-website-template/f62359452725aa45c94a348b13d041af63646503/pwa/src/templates/templateParts/header/HeaderContent.json"
+}