feature/GW-788/PDC-PUB

pwa/gatsby-config.js

@@ -61,6 +61,22 @@ module.exports = {
             pathname: "/self-services/moving/form",
             crumbLabel: "Form",
           },
+          {
+            pathname: "/products",
+            crumbLabel: "Products",
+          },
+          {
+            pathname: "/news",
+            crumbLabel: "News",
+          },
+          {
+            pathname: "/news/[newsId]",
+            crumbLabel: "News Item",
+          },
+          {
+            pathname: "/products/[productId]",
+            crumbLabel: "Product",
+          },
         ],
       },
     },

pwa/package.json

@@ -37,7 +37,7 @@
     "lodash": "^4.17.21",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^7.29.0",
+    "react-hook-form": "7.29.0",
     "react-i18next": "^11.16.6",
     "react-loading-skeleton": "^3.1.0",
     "react-query": "^3.34.19"

pwa/src/apiService/apiService.ts

@@ -4,6 +4,8 @@ import Case from "./resources/case";
 import Message from "./resources/message";
 import Login from "./services/login";
 import Me from "./services/me";
+import Product from "./resources/product";
+import News from "./resources/news";
 
 export default class APIService {
   public removeAuthentication(): void {
@@ -86,6 +88,14 @@ export default class APIService {
   public get Me(): Me {
     return new Me(this.BaseClient);
   }
+
+  public get Product(): Product {
+    return new Product(this.apiClient);
+  }
+
+  public get News(): News {
+    return new News(this.halApiClient);
+  }
 }
 
 export const Send = (

pwa/src/apiService/resources/news.ts

@@ -0,0 +1,65 @@
+import { Send } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class News {
+  private _instance: AxiosInstance;
+
+  constructor(_instance: AxiosInstance) {
+    _instance.interceptors.request.use((config) => ({
+      ...config,
+      params: { extend: ["taxonomies.openpubAudience", "taxonomies.openpubType", "taxonomies.openpubUsage"] },
+    }));
+
+    this._instance = _instance;
+  }
+
+  public getOne = async (id: string): Promise<any> => {
+    const { data } = await Send(this._instance, "GET", `/nieuws/${id}`);
+    const newsItem: any = {
+      id: data.id,
+      title: data.title,
+      content: data.content,
+      date: data.date,
+    };
+
+    const _embedded = data?._embedded?.taxonomies?._embedded;
+
+    if (_embedded) {
+      newsItem.audiences = data._embedded.taxonomies._embedded.openpubAudience.map((audience: any) => audience.name);
+
+      newsItem.type = data._embedded.taxonomies._embedded.openpubType.map((type: any) => type.name);
+      newsItem.usage = data._embedded.taxonomies._embedded.openpubUsage.map((usage: any) => usage.name);
+    }
+
+    return newsItem;
+  };
+
+  public getAll = async (): Promise<any> => {
+    const {
+      data: { _embedded },
+    } = await Send(this._instance, "GET", "/nieuws");
+
+    const newsItems = _embedded.nieuws.map((newsItem: any) => {
+      const _newsItem: any = {
+        id: newsItem.id,
+        title: newsItem.title,
+        content: newsItem.content,
+        date: newsItem.date,
+      };
+
+      const _embedded = newsItem?._embedded?.taxonomies?._embedded;
+
+      if (_embedded) {
+        _newsItem.audiences = newsItem._embedded.taxonomies._embedded.openpubAudience.map(
+          (audience: any) => audience.name,
+        );
+        _newsItem.type = newsItem._embedded.taxonomies._embedded.openpubType.map((type: any) => type.name);
+        _newsItem.usage = newsItem._embedded.taxonomies._embedded.openpubUsage.map((usage: any) => usage.name);
+      }
+
+      return _newsItem;
+    });
+
+    return newsItems;
+  };
+}

pwa/src/apiService/resources/product.ts

@@ -0,0 +1,24 @@
+import { Send } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class Product {
+  private _instance: AxiosInstance;
+
+  constructor(_instance: AxiosInstance) {
+    this._instance = _instance;
+  }
+
+  public getOne = async (id: string): Promise<any> => {
+    const { data } = await Send(this._instance, "GET", `/products/${id}`);
+
+    return data;
+  };
+
+  public getAll = async (): Promise<any> => {
+    const {
+      data: { results },
+    } = await Send(this._instance, "GET", "/products");
+
+    return results;
+  };
+}

pwa/src/hooks/news.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { QueryClient, useQuery } from "react-query";
+import APIService from "../apiService/apiService";
+import APIContext from "../apiService/apiContext";
+
+export const useNews = (queryClient: QueryClient) => {
+  const API: APIService = React.useContext(APIContext);
+
+  const getOne = (newsId: string) =>
+    useQuery<any, Error>(["news", newsId], () => API.News.getOne(newsId), {
+      initialData: () => queryClient.getQueryData<any[]>("news")?.find((_news) => _news.id === newsId),
+      onError: (error) => {
+        throw new Error(error.message);
+      },
+      enabled: !!newsId,
+    });
+
+  const getAll = () =>
+    useQuery<any[], Error>("news", API.News.getAll, {
+      onError: (error) => {
+        throw new Error(error.message);
+      },
+    });
+
+  return { getAll, getOne };
+};