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

@@ -16,6 +16,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@conduction/components": "^1.0.7",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",

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,56 @@
+import { Send } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class News {
+  private _instance: AxiosInstance;
+
+  constructor(_instance: AxiosInstance) {
+    _instance.interceptors.request.use(function (config) {
+      return {
+        ...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,
+    };
+
+    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,
+      };
+
+      _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 };
+};

pwa/src/hooks/products.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 useProduct = (queryClient: QueryClient) => {
+  const API: APIService = React.useContext(APIContext);
+
+  const getOne = (productId: string) =>
+    useQuery<any, Error>(["product", productId], () => API.Product.getOne(productId), {
+      initialData: () => queryClient.getQueryData<any[]>("product")?.find((_product) => _product.id === productId),
+      onError: (error) => {
+        throw new Error(error.message);
+      },
+      enabled: !!productId,
+    });
+
+  const getAll = () =>
+    useQuery<any[], Error>("products", API.Product.getAll, {
+      onError: (error) => {
+        throw new Error(error.message);
+      },
+    });
+
+  return { getAll, getOne };
+};

pwa/src/pages/news/NewsPage.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { DashboardTemplate } from "../../templates/dashboard/DashboardTemplate";
+import { NewsTemplate } from "../../templates/templateParts/news/NewsTemplate";
+
+const NewsPage: React.FC = () => {
+  return (
+    <DashboardTemplate>
+      <NewsTemplate />
+    </DashboardTemplate>
+  );
+};
+
+export default NewsPage;

pwa/src/pages/news/[newsId]/NewsDetailPage.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { PageProps } from "gatsby";
+import { DashboardTemplate } from "../../../templates/dashboard/DashboardTemplate";
+import { NewsDetailTemplate } from "../../../templates/templateParts/newsDetail/NewsDetailTemplate";
+
+const CurrentCasesPage: React.FC<PageProps> = (props: PageProps) => {
+  return (
+    <DashboardTemplate>
+      <NewsDetailTemplate newsId={props.params.newsId} />
+    </DashboardTemplate>
+  );
+};
+
+export default CurrentCasesPage;

pwa/src/pages/news/[newsId]/index.tsx

@@ -0,0 +1,3 @@
+import NewsDetailPage from "./NewsDetailPage";
+
+export default NewsDetailPage;

pwa/src/pages/news/index.tsx

@@ -0,0 +1,3 @@
+import NewsPage from "./NewsPage";
+
+export default NewsPage;

pwa/src/pages/products/ProductsPage.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { DashboardTemplate } from "../../templates/dashboard/DashboardTemplate";
+import { ProductsTemplate } from "../../templates/templateParts/products/ProductsTemplate";
+
+const ProductsPage: React.FC = () => {
+  return (
+    <DashboardTemplate>
+      <ProductsTemplate />
+    </DashboardTemplate>
+  );
+};
+
+export default ProductsPage;

pwa/src/pages/products/[productId]/ProductsDetailPage.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { PageProps } from "gatsby";
+import { DashboardTemplate } from "../../../templates/dashboard/DashboardTemplate";
+import { ProductsDetailTemplate } from "../../../templates/templateParts/productDetail/ProductsDetailTemplate";
+
+const CurrentCasesPage: React.FC<PageProps> = (props: PageProps) => {
+  return (
+    <DashboardTemplate>
+      <ProductsDetailTemplate productId={props.params.productId} />
+    </DashboardTemplate>
+  );
+};
+
+export default CurrentCasesPage;

pwa/src/pages/products/[productId]/index.tsx

@@ -0,0 +1,3 @@
+import ProductsDetailPage from "./ProductsDetailPage";
+
+export default ProductsDetailPage;

pwa/src/pages/products/index.tsx

@@ -0,0 +1,3 @@
+import ProductsPage from "./ProductsPage";
+
+export default ProductsPage;

pwa/src/templates/dashboard/DashboardTemplate.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./DashboardTemplate.module.css";
-import { GridIcon, InboxIcon, ArchiveIcon, UserIcon, ListIcon } from "@gemeente-denhaag/icons";
+import { GridIcon, InboxIcon, ArchiveIcon, UserIcon, ListIcon, MessageIcon, CoronaIcon } from "@gemeente-denhaag/icons";
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from "@gemeente-denhaag/sidenav";
 import { Container } from "../../components/container/Container";
 import { PrivateRoute } from "../../components/privateRoute/privateRoute";
@@ -66,6 +66,8 @@ const Menu: React.FC = () => {
     { label: t("My messages"), href: "/my-messages", current: pathname.includes("my-messages"), icon: <InboxIcon /> },
     { label: t("My cases"), href: "/my-cases", current: pathname.includes("my-cases"), icon: <ArchiveIcon /> },
     { label: t("My account"), href: "/my-account", current: pathname.includes("my-account"), icon: <UserIcon /> },
+    { label: t("Products"), href: "/products", current: pathname.includes("products"), icon: <CoronaIcon /> },
+    { label: t("News"), href: "/news", current: pathname .includes("news"), icon: <MessageIcon /> },
   ];
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, href: string): void => {

pwa/src/templates/templateParts/news/NewsTemplate.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Heading1 } from "@gemeente-denhaag/components-react";
+import { useTranslation } from "react-i18next";
+import { useNews } from "../../../hooks/news";
+import Skeleton from "react-loading-skeleton";
+import { navigate } from "gatsby";
+import { useQueryClient } from "react-query";
+import { DetailsCard } from "@conduction/components";
+
+export const NewsTemplate: React.FC = () => {
+  const { t } = useTranslation();
+
+  const queryClient = useQueryClient();
+
+  const _useNews = useNews(queryClient);
+  const getNews = _useNews.getAll();
+
+  React.useEffect(() => {
+    if (!getNews.isSuccess) return;
+  }, [getNews.isSuccess]);
+
+  return (
+    <div>
+      <Heading1>{t("News")}</Heading1>
+      {getNews.isLoading && <Skeleton height="100px" />}
+      <>
+        {!getNews.isLoading && (
+          <div>
+            {getNews.data?.map((newsItem) => (
+              <div key={newsItem.id} onClick={() => navigate(`/news/${newsItem.id}`)}>
+                <DetailsCard
+                  title={newsItem.title}
+                  introduction={""}
+                  link={{ label: t("Read more") + "...", href: `/news/${newsItem.id}` }}
+                  tags={[newsItem.audiences, newsItem.type, newsItem.usage]}
+                  subHeader={newsItem.date}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </>
+    </div>
+  );
+};