From a3c4f9ad5ea50fbe385671a9e2dd8014de90ac42 Mon Sep 17 00:00:00 2001 From: Hamid Date: Thu, 21 Apr 2022 15:25:09 +0200 Subject: [PATCH 1/4] erste page meldingdetil --- pwa/src/hooks/meldingen.tsx | 30 ++++++++++++++++++++++++++++++ pwa/src/pages/meldingen/[id].tsx | 23 +++++++++++++++++++++++ pwa/src/tables/MeldingenTable.tsx | 2 ++ 3 files changed, 55 insertions(+) create mode 100644 pwa/src/hooks/meldingen.tsx create mode 100644 pwa/src/pages/meldingen/[id].tsx diff --git a/pwa/src/hooks/meldingen.tsx b/pwa/src/hooks/meldingen.tsx new file mode 100644 index 0000000..a62b2a0 --- /dev/null +++ b/pwa/src/hooks/meldingen.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import { useQuery, QueryClient } from "react-query"; +import APIService from "../apiService/apiService"; +import APIContext from "../apiService/apiContext"; + +export const useMeldingen = (queryClient?: QueryClient) => { + const API: APIService = React.useContext(APIContext); + + const getAll = () => + useQuery("meldingen", API.Melding.getAll, { + onError: (error) => { + throw new Error(error.message); + }, + }); + + + const getOne = (meldingId: string) => { + if (!queryClient) { + throw new Error('No queryClient passed'); + } + return useQuery(["meldingen", meldingId], () => API.Product.getOne(productId), { + onError: (error) => { + throw new Error(error.message) + }, + enabled: !!meldingId, + }); + } + + return { getAll, getOne }; +}; diff --git a/pwa/src/pages/meldingen/[id].tsx b/pwa/src/pages/meldingen/[id].tsx new file mode 100644 index 0000000..21dd294 --- /dev/null +++ b/pwa/src/pages/meldingen/[id].tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { useQueryClient } from "react-query"; + + +const MeldingDetailPage = (props: any) => { + const meldingId: string = props.params.id === "new" ? null : props.params.id; + const queryClient = useQueryClient(); + const _useMeldingen= useMeldingen(queryClient); + const getProduct = _useMeldingDetail.getOne(meldingId); + + return ( + <> + {getProduct.data && ( + <> + + + + )} + + ); +}; + +export default MeldingDetailPage; diff --git a/pwa/src/tables/MeldingenTable.tsx b/pwa/src/tables/MeldingenTable.tsx index de7f023..ca4b9b0 100644 --- a/pwa/src/tables/MeldingenTable.tsx +++ b/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 = ({ meldingen }) => { {melding.title} {melding.description} {new Date(melding["@dateCreated"]).toLocaleString("nl-NL")} + Details ))} From 194334d738b9ea042e682a983e80795f31410301 Mon Sep 17 00:00:00 2001 From: Hamid Date: Thu, 21 Apr 2022 15:44:30 +0200 Subject: [PATCH 2/4] 2 update page meldingdetail --- pwa/gatsby-config.js | 6 +++- pwa/src/apiService/resources/notification.ts | 5 ++++ pwa/src/hooks/meldingen.tsx | 30 -------------------- pwa/src/hooks/notifications.ts | 14 ++++++++- pwa/src/pages/meldingen/[id].tsx | 24 ++++++++++------ 5 files changed, 38 insertions(+), 41 deletions(-) delete mode 100644 pwa/src/hooks/meldingen.tsx diff --git a/pwa/gatsby-config.js b/pwa/gatsby-config.js index b516477..fa0244b 100644 --- a/pwa/gatsby-config.js +++ b/pwa/gatsby-config.js @@ -41,7 +41,11 @@ module.exports = { { pathname: "/nieuws/[id]", crumbLabel: "Nieuws" - } + }, + { + pathname: "/meldingen/[id]", + crumbLabel: "Melding Detail" + }, ] } } diff --git a/pwa/src/apiService/resources/notification.ts b/pwa/src/apiService/resources/notification.ts index e13c059..c66cdf6 100644 --- a/pwa/src/apiService/resources/notification.ts +++ b/pwa/src/apiService/resources/notification.ts @@ -13,6 +13,11 @@ export default class Notification { return data.results; }; + public getOne = async (notificationId: string): Promise => { + const { data } = await Send(this._instance, "GET", `/wp-json/owc/pdc/v1/items/${notificationId}`); + return data; + }; + public create = async (variables: { payload: any }): Promise => { const { payload } = variables; const { data } = await Send(this._instance, "POST", "/notifications", payload); diff --git a/pwa/src/hooks/meldingen.tsx b/pwa/src/hooks/meldingen.tsx deleted file mode 100644 index a62b2a0..0000000 --- a/pwa/src/hooks/meldingen.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from "react"; -import { useQuery, QueryClient } from "react-query"; -import APIService from "../apiService/apiService"; -import APIContext from "../apiService/apiContext"; - -export const useMeldingen = (queryClient?: QueryClient) => { - const API: APIService = React.useContext(APIContext); - - const getAll = () => - useQuery("meldingen", API.Melding.getAll, { - onError: (error) => { - throw new Error(error.message); - }, - }); - - - const getOne = (meldingId: string) => { - if (!queryClient) { - throw new Error('No queryClient passed'); - } - return useQuery(["meldingen", meldingId], () => API.Product.getOne(productId), { - onError: (error) => { - throw new Error(error.message) - }, - enabled: !!meldingId, - }); - } - - return { getAll, getOne }; -}; diff --git a/pwa/src/hooks/notifications.ts b/pwa/src/hooks/notifications.ts index a879fce..ba598fa 100644 --- a/pwa/src/hooks/notifications.ts +++ b/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(["notification", notificationId], () => API.Notification.getOne(notificationId), { + onError: (error) => { + throw new Error(error.message) + }, + enabled: !!notificationId, + }); + } + + return { getAll, create , getOne}; }; diff --git a/pwa/src/pages/meldingen/[id].tsx b/pwa/src/pages/meldingen/[id].tsx index 21dd294..682c2ce 100644 --- a/pwa/src/pages/meldingen/[id].tsx +++ b/pwa/src/pages/meldingen/[id].tsx @@ -1,23 +1,29 @@ import * as React from "react"; import { useQueryClient } from "react-query"; +import { Heading1, Article } from "@utrecht/component-library-react/dist"; +import {useNotification} from "../../hooks/notifications"; - -const MeldingDetailPage = (props: any) => { - const meldingId: string = props.params.id === "new" ? null : props.params.id; +const NotificationPage = (props: any) => { + const notificationId: string = props.params.id === "new" ? null : props.params.id; const queryClient = useQueryClient(); - const _useMeldingen= useMeldingen(queryClient); - const getProduct = _useMeldingDetail.getOne(meldingId); + const _useNotification = useNotification (queryClient); + const getNotification = _useNotification.getOne(notificationId); return ( <> - {getProduct.data && ( + {getNotification.data && ( <> - - + {getNotification.data && getNotification.data.title} +
+
", '

'), + }} + /> )} ); }; -export default MeldingDetailPage; +export default NotificationPage; From e3aff08608d685aae24a8273e9bf4294f3d6cd55 Mon Sep 17 00:00:00 2001 From: Hamid Date: Thu, 21 Apr 2022 15:49:18 +0200 Subject: [PATCH 3/4] 3 update page meldingdetail --- pwa/src/pages/meldingen/[id].tsx | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/pwa/src/pages/meldingen/[id].tsx b/pwa/src/pages/meldingen/[id].tsx index 682c2ce..bc10b58 100644 --- a/pwa/src/pages/meldingen/[id].tsx +++ b/pwa/src/pages/meldingen/[id].tsx @@ -2,6 +2,8 @@ import * as React from "react"; import { useQueryClient } from "react-query"; import { Heading1, Article } from "@utrecht/component-library-react/dist"; import {useNotification} from "../../hooks/notifications"; +import {Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow} from "@utrecht/component-library-react"; +import {Link} from "gatsby"; const NotificationPage = (props: any) => { const notificationId: string = props.params.id === "new" ? null : props.params.id; @@ -12,15 +14,23 @@ const NotificationPage = (props: any) => { return ( <> {getNotification.data && ( - <> - {getNotification.data && getNotification.data.title} -
-
", '

'), - }} - /> - + + + + Title + Description + Date created + + + + + + {getNotification.data.title} + {getNotification.data.description} + {new Date(getNotification.data["@dateCreated"]).toLocaleString("nl-NL")} + + +
)} ); From b4d2453606bff5f0a85361df8ae6ced3f2c5b2e1 Mon Sep 17 00:00:00 2001 From: Hamid Date: Thu, 21 Apr 2022 15:50:06 +0200 Subject: [PATCH 4/4] 3 update page meldingdetail --- pwa/src/pages/meldingen/[id].tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pwa/src/pages/meldingen/[id].tsx b/pwa/src/pages/meldingen/[id].tsx index bc10b58..491a8ef 100644 --- a/pwa/src/pages/meldingen/[id].tsx +++ b/pwa/src/pages/meldingen/[id].tsx @@ -1,9 +1,8 @@ import * as React from "react"; import { useQueryClient } from "react-query"; -import { Heading1, Article } from "@utrecht/component-library-react/dist"; import {useNotification} from "../../hooks/notifications"; import {Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow} from "@utrecht/component-library-react"; -import {Link} from "gatsby"; + const NotificationPage = (props: any) => { const notificationId: string = props.params.id === "new" ? null : props.params.id;