Merge pull request #361 from OpenCatalogi/feautre/OP-91/headerRefactor

feautre/OP-91/headerRefactor
OpenCatalogi · Oct 25, 2023 · e54bfcf · e54bfcf
2 parents a94eb7f + a6b4a91
commit e54bfcf
Show file tree

Hide file tree

Showing 10 changed files with 383 additions and 109 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -23,7 +23,7 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.19",
+    "@conduction/components": "2.2.20",
     "@conduction/theme": "1.0.50",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.4.2",

diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts
@@ -14,6 +14,8 @@ import FooterContent from "./resources/footerContent";
 
 import Login from "./services/login";
 import Me from "./services/me";
+import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate";
+import HeaderContent from "./resources/headerContent";
 
 export default class APIService {
   public JWT?: string;
@@ -85,6 +87,16 @@ export default class APIService {
     });
   }
 
+  public get HeaderContentClient(): AxiosInstance {
+    return axios.create({
+      baseURL: removeFileNameFromUrl(
+        process.env.GATSBY_HEADER_CONTENT !== undefined && process.env.GATSBY_HEADER_CONTENT.length !== 0
+          ? process.env.GATSBY_HEADER_CONTENT
+          : DEFAULT_HEADER_CONTENT_URL,
+      ),
+    });
+  }
+
   // Resources
   public get Case(): Case {
     return new Case(this.apiClient);
@@ -122,6 +134,10 @@ export default class APIService {
     return new FooterContent(this.FooterContentClient);
   }
 
+  public get HeaderContent(): HeaderContent {
+    return new HeaderContent(this.HeaderContentClient);
+  }
+
   // Services
   public get Login(): Login {
     return new Login(this.LoginClient);

diff --git a/pwa/src/apiService/resources/headerContent.ts b/pwa/src/apiService/resources/headerContent.ts
@@ -0,0 +1,16 @@
+import { Send } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class HeaderContent {
+  private _instance: AxiosInstance;
+
+  constructor(_instance: AxiosInstance) {
+    this._instance = _instance;
+  }
+
+  public getContent = async (fileName: string): Promise<any> => {
+    const { data } = await Send(this._instance, "GET", fileName);
+
+    return data;
+  };
+}
diff --git a/pwa/src/hooks/headerContent.ts b/pwa/src/hooks/headerContent.ts
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useQuery } from "react-query";
+import APIService from "../apiService/apiService";
+import APIContext from "../apiService/apiContext";
+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,
+  );
+
+  const getContent = () =>
+    useQuery<any, Error>(["contents", fileName], () => API?.HeaderContent.getContent(fileName), {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
+  return { getContent };
+};
diff --git a/pwa/src/templates/templateParts/header/HeaderContent.json b/pwa/src/templates/templateParts/header/HeaderContent.json
@@ -0,0 +1,174 @@
+[
+  {
+    "label": "Home",
+    "type": "internal",
+
+    "current": {
+      "pathname": "/",
+      "operator": "equals"
+    },
+    "handleClick": {
+      "link": "/"
+    }
+  },
+  {
+    "label": "Categories",
+    "type": "internal",
+    "current": {
+      "pathname": "/categories",
+      "operator": "includes"
+    },
+    "handleClick": {
+      "link": "/categories"
+    }
+  },
+  {
+    "label": "Applications",
+    "type": "internal",
+    "current": {
+      "pathname": "/applications",
+      "operator": "includes"
+    },
+    "handleClick": {
+      "link": "/applications"
+    }
+  },
+  {
+    "label": "Components",
+    "current": {
+      "pathname": "/components",
+      "operator": "includes"
+    },
+    "subItems": [
+      {
+        "label": "All components",
+        "type": "internal",
+        "current": {
+          "pathname": "/components",
+          "operator": "includes"
+        },
+        "handleClick": {
+          "link": "/components"
+        }
+      },
+      {
+        "label": "Processes",
+        "type": "internal",
+        "current": {
+          "pathname": "/components",
+          "operator": "includes",
+          "filterCondition": {
+            "filter": "embedded.nl.embedded.commonground.layerType",
+            "value": "process",
+            "isObject": true
+          }
+        },
+        "handleClick": {
+          "link": "/components",
+          "type": "internal",
+          "setFilter": {
+            "filter": "embedded.nl.embedded.commonground.layerType",
+            "value": "process",
+            "isObject": true
+          }
+        }
+      },
+      {
+        "label": "Data models",
+        "type": "internal",
+        "current": {
+          "pathname": "/components",
+          "operator": "includes",
+          "filterCondition": {
+            "filter": "embedded.nl.embedded.commonground.layerType",
+            "value": "data",
+            "isObject": true
+          }
+        },
+        "handleClick": {
+          "link": "/components",
+          "setFilter": {
+            "filter": "embedded.nl.embedded.commonground.layerType",
+            "value": "data",
+            "isObject": true
+          }
+        }
+      },
+      {
+        "label": "API's",
+        "type": "internal",
+        "current": {
+          "pathname": "/components",
+          "operator": "includes",
+          "filterCondition": {
+            "filter": "embedded.nl.embedded.commonground.layerType",
+            "value": "service",
+            "isObject": true
+          }
+        },
+        "handleClick": {
+          "link": "/components",
+          "setFilter": {
+            "filter": "embedded.nl.embedded.commonground.layerType",
+            "value": "service",
+            "isObject": true
+          }
+        }
+      }
+    ]
+  },
+  {
+    "label": "Organizations",
+    "type": "internal",
+    "current": {
+      "pathname": "/organizations",
+      "operator": "includes"
+    },
+    "handleClick": {
+      "link": "/organizations"
+    }
+  },
+  {
+    "label": "Initiatives",
+    "type": "internal",
+    "current": "pathname === \"/components\" && filters.developmentStatus === \"concept\"",
+    "handleClick": {
+      "link": "/components",
+      "setFilter": {
+        "filter": "developmentStatus",
+        "value": "concept"
+      }
+    }
+  },
+  {
+    "label": "Documentatie",
+    "current": {
+      "pathname": "/documentation",
+      "operator": "includes"
+    },
+    "subItems": [
+      {
+        "label": "About",
+        "type": "internal",
+        "current": {
+          "pathname": "/documentation/about",
+          "operator": "equals"
+        },
+        "handleClick": {
+          "link": "/documentation/about"
+        }
+      },
+      {
+        "label": "Use",
+        "type": "internal",
+        "current": {
+          "pathname": "/documentation/usage",
+          "operator": "equals"
+        },
+        "handleClick": {
+          "link": "/documentation/usage"
+        }
+      }
+    ]
+  }
+]
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -158,6 +158,10 @@ li .denhaag-link__icon {
     padding-inline: var(--web-app-size-md);
   }
 
+  .headerContainerSingle {
+    padding-block-start: var(--web-app-size-md);
+  }
+
   .headerContent {
     padding-block-start: var(--web-app-size-3xl);
     padding-block-end: var(--web-app-size-3xl);