Melding Detail pagina in Pip

pwa/gatsby-config.js

@@ -41,7 +41,11 @@ module.exports = {
           {
             pathname: "/nieuws/[id]",
             crumbLabel: "Nieuws"
-          }
+          },
+          {
+            pathname: "/meldingen/[id]",
+            crumbLabel: "Melding Detail"
+          },
         ]
       }
     }

pwa/src/apiService/resources/notification.ts

@@ -13,6 +13,11 @@ export default class Notification {
     return data.results;
   };
 
+  public getOne = async (notificationId: string): Promise<any> => {
+    const { data } = await Send(this._instance, "GET", `/wp-json/owc/pdc/v1/items/${notificationId}`);
+    return data;
+  };
+
   public create = async (variables: { payload: any }): Promise<any> => {
     const { payload } = variables;
     const { data } = await Send(this._instance, "POST", "/notifications", payload);

pwa/src/hooks/notifications.ts

@@ -26,5 +26,17 @@ export const useNotification = (queryClient: QueryClient) => {
       },
     });
 
-  return { getAll, create };
+    const getOne = (notificationId: string) => {
+        if (!queryClient) {
+            throw new Error('No queryClient passed');
+        }
+        return useQuery<any, Error>(["notification", notificationId], () => API.Notification.getOne(notificationId), {
+            onError: (error) => {
+                throw new Error(error.message)
+            },
+            enabled: !!notificationId,
+        });
+    }
+
+  return { getAll, create , getOne};
 };

pwa/src/pages/meldingen/[id].tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { useQueryClient } from "react-query";
+import {useNotification} from "../../hooks/notifications";
+import {Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow} from "@utrecht/component-library-react";
+
+
+const NotificationPage = (props: any) => {
+    const notificationId: string = props.params.id === "new" ? null : props.params.id;
+    const queryClient = useQueryClient();
+    const _useNotification = useNotification (queryClient);
+    const getNotification =  _useNotification.getOne(notificationId);
+
+    return (
+        <>
+            {getNotification.data && (
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHeaderCell>Title</TableHeaderCell>
+                                <TableHeaderCell>Description</TableHeaderCell>
+                                <TableHeaderCell>Date created</TableHeaderCell>
+                            </TableRow>
+                        </TableHeader>
+
+                        <TableBody>
+                                <TableRow>
+                                    <TableCell>{getNotification.data.title}</TableCell>
+                                    <TableCell>{getNotification.data.description}</TableCell>
+                                    <TableCell>{new Date(getNotification.data["@dateCreated"]).toLocaleString("nl-NL")}</TableCell>
+                                </TableRow>
+                        </TableBody>
+                    </Table>
+            )}
+        </>
+    );
+};
+
+export default NotificationPage;

pwa/src/tables/MeldingenTable.tsx

@@ -7,6 +7,7 @@ import {
   TableCell,
   TableHeader,
 } from "@utrecht/component-library-react/dist";
+import {Link} from "gatsby";
 
 interface MeldingenProps {
   meldingen: any[];
@@ -29,6 +30,7 @@ export const MeldingenTable: React.FC<MeldingenProps> = ({ meldingen }) => {
             <TableCell>{melding.title}</TableCell>
             <TableCell>{melding.description}</TableCell>
             <TableCell>{new Date(melding["@dateCreated"]).toLocaleString("nl-NL")}</TableCell>
+            <TableCell> <Link to={`/meldingen/${melding?.id}`}>Details</Link></TableCell>
           </TableRow>
         ))}
       </TableBody>