Development to main, week 44

pwa/package.json

@@ -25,8 +25,10 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.18",
-    "@conduction/theme": "1.0.51",
+    "@conduction/theme": "1.0.52",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.107",
@@ -85,7 +87,8 @@
     "react-loading-skeleton": "^3.1.0",
     "react-paginate": "^8.1.4",
     "react-query": "^3.34.19",
-    "react-select": "^5.3.2"
+    "react-select": "^5.3.2",
+    "showdown": "^2.1.0"
   },
   "devDependencies": {
     "@types/dateformat": "^5.0.0",
@@ -94,6 +97,7 @@
     "@types/react-helmet": "^6.1.5",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
+    "@types/showdown": "2.0.3",
     "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",

pwa/src/apiService/apiService.ts

@@ -1,8 +1,12 @@
-import axios, { AxiosInstance, AxiosResponse } from "axios";
 import toast from "react-hot-toast";
+import axios, { AxiosInstance, AxiosResponse } from "axios";
+import { removeFileNameFromUrl } from "../services/FileNameFromUrl";
+import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate";
 
 // Resources
 import OpenWoo from "./resources/openWoo";
+import FooterContent from "./resources/footerContent";
+import Markdown from "./resources/markdown";
 
 interface PromiseMessage {
   loading?: string;
@@ -28,10 +32,37 @@ export default class APIService {
     });
   }
 
+  public get FooterContentClient(): AxiosInstance {
+    return axios.create({
+      baseURL: removeFileNameFromUrl(
+        process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0
+          ? process.env.GATSBY_FOOTER_CONTENT
+          : DEFAULT_FOOTER_CONTENT_URL,
+      ),
+    });
+  }
+
+  public get MarkdownClient(): AxiosInstance {
+    return axios.create({
+      baseURL: process.env.GATSBY_BASE_URL ?? undefined,
+      headers: {
+        Accept: "application/vnd.github.html",
+      },
+    });
+  }
+
   public get OpenWoo(): OpenWoo {
     return new OpenWoo(this.BaseClient, this.Send);
   }
 
+  public get FooterContent(): FooterContent {
+    return new FooterContent(this.FooterContentClient, this.Send);
+  }
+
+  public get Markdown(): Markdown {
+    return new Markdown(this.MarkdownClient, this.Send);
+  }
+
   // Send method
   public Send: TSendFunction = (instance, method, endpoint, payload, promiseMessage) => {
     const _payload = JSON.stringify(payload);

pwa/src/apiService/resources/footerContent.ts

@@ -0,0 +1,18 @@
+import { TSendFunction } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class FooterContent {
+  private _instance: AxiosInstance;
+  private _send: TSendFunction;
+
+  constructor(_instance: AxiosInstance, send: TSendFunction) {
+    this._instance = _instance;
+    this._send = send;
+  }
+
+  public getContent = async (fileName: string): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", fileName);
+
+    return data;
+  };
+}

pwa/src/apiService/resources/markdown.ts

@@ -0,0 +1,17 @@
+import { TSendFunction } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class Markdown {
+  private _instance: AxiosInstance;
+  private _send: TSendFunction;
+  constructor(_instance: AxiosInstance, send: TSendFunction) {
+    this._instance = _instance;
+    this._send = send;
+  }
+
+  public getContent = async (filePath: string): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", filePath);
+
+    return data;
+  };
+}