From 74aae11ab49e652e545447deb964ef414b97b804 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 8 Nov 2023 13:46:16 +0100 Subject: [PATCH 01/18] added h1 to jumbotron --- pwa/package-lock.json | 16 ++++++++-------- pwa/package.json | 8 +++----- .../jumbotronTemplate/JumbotronTemplate.tsx | 6 +++--- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index b5a1b205..01e500ad 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,8 +8,8 @@ "name": "product-website-template", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.18", - "@conduction/theme": "1.0.51", + "@conduction/components": "2.2.24", + "@conduction/theme": "1.0.54", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.1.18", @@ -2057,9 +2057,9 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.18", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.18.tgz", - "integrity": "sha512-dXuDeA4BVGtNzQ0w2t2J3tDoqEHEOehwd0YYm68NWCDYMy/EtlX8tJpTrQSbXpkKt/pQV6dGt5WuBknWHOPHkA==", + "version": "2.2.24", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.24.tgz", + "integrity": "sha512-hGKHdGf+8FBVX2WwQS1DkwbJq/9UW1B3pi6y91aWW3v1T0l4Fh15c1JogqClhHlosb5KQHvwnGThu1bKpxzTlg==", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", @@ -2112,9 +2112,9 @@ } }, "node_modules/@conduction/theme": { - "version": "1.0.51", - "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.51.tgz", - "integrity": "sha512-rRp8SMHYU7EYrgXNR/z5+X6/rB6XNrXrJ3WnmBEu+jYLKJqpbhluPUPhHvWEJmRAYNDo1rEYyYK27JljgGe89w==", + "version": "1.0.54", + "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.54.tgz", + "integrity": "sha512-3Wt6k42hgmQ8WfV+XRBhP33zIEnio3uuaFZqZ6g4eIgSK8ji/ROAXoS0KLLqoOuQzFkL7Od5cEddE+W/gYH+rA==", "dependencies": { "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100" } diff --git a/pwa/package.json b/pwa/package.json index 645098f3..4f14eec3 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -4,9 +4,7 @@ "private": true, "description": "Product Website Template", "author": "Conduction", - "keywords": [ - "gatsby" - ], + "keywords": ["gatsby"], "scripts": { "develop": "gatsby develop", "start": "gatsby develop", @@ -24,8 +22,8 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.18", - "@conduction/theme": "1.0.51", + "@conduction/components": "2.2.24", + "@conduction/theme": "1.0.54", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.1.18", diff --git a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx index a600f0c3..a265b6ba 100644 --- a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx +++ b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import * as styles from "./JumbotronTemplate.module.css"; -import { Heading2, Paragraph, Page, PageContent } from "@utrecht/component-library-react/dist/css-module"; +import { Heading1, Paragraph, Page, PageContent } from "@utrecht/component-library-react/dist/css-module"; import { CardWrapper } from "@conduction/components"; import { useTranslation } from "react-i18next"; @@ -17,9 +17,9 @@ export const JumbotronTemplate: React.FC = () => { - + {t("Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME} - + {t("On this page you will find the Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME} From 5bca8eee84010fe18e51bf0bee15fb4d833b3978 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 8 Nov 2023 13:50:42 +0100 Subject: [PATCH 02/18] updated package --- pwa/package-lock.json | 16 ++++++++-------- pwa/package.json | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 229618da..53fcbf10 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,8 +8,8 @@ "name": "product-website-template", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.23", - "@conduction/theme": "1.0.53", + "@conduction/components": "2.2.24", + "@conduction/theme": "1.0.54", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", "@fortawesome/free-regular-svg-icons": "6.4.2", @@ -2061,9 +2061,9 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.23", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.23.tgz", - "integrity": "sha512-2AV9btRq2W4wwx73zVuN1k+/sJ1ACZoG+yJ1yyxGMZRKvzIBxisxQR2GJjqvW5W44R0Y3izKyfPXcKDhPLamqg==", + "version": "2.2.24", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.24.tgz", + "integrity": "sha512-hGKHdGf+8FBVX2WwQS1DkwbJq/9UW1B3pi6y91aWW3v1T0l4Fh15c1JogqClhHlosb5KQHvwnGThu1bKpxzTlg==", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", @@ -2116,9 +2116,9 @@ } }, "node_modules/@conduction/theme": { - "version": "1.0.53", - "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.53.tgz", - "integrity": "sha512-5A8/K+60qQKfTYINAYJiXDSDNsKArDpxBotAduw6shxfH3ZSPFBcVE62yG2Gt7xJnwXyqgpC5OYI1T/P6BRhaw==", + "version": "1.0.54", + "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.54.tgz", + "integrity": "sha512-3Wt6k42hgmQ8WfV+XRBhP33zIEnio3uuaFZqZ6g4eIgSK8ji/ROAXoS0KLLqoOuQzFkL7Od5cEddE+W/gYH+rA==", "dependencies": { "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100" } diff --git a/pwa/package.json b/pwa/package.json index df837aa9..23e1f1d4 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -22,8 +22,8 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.23", - "@conduction/theme": "1.0.53", + "@conduction/components": "2.2.24", + "@conduction/theme": "1.0.54", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", "@fortawesome/free-regular-svg-icons": "6.4.2", From 59da34aedd202b3e25d84b88e61023d23f20447f Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 8 Nov 2023 14:05:55 +0100 Subject: [PATCH 03/18] added full width card container --- .../CardsResultsTemplate.module.css | 18 ++++++++++-------- .../CardsResultsTemplate.tsx | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css index 23365624..b73b448a 100644 --- a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css +++ b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css @@ -1,11 +1,3 @@ -.tableRow { - cursor: pointer; -} - -.tableRow > * { - vertical-align: middle !important; -} - .componentsGrid { display: grid; grid-gap: 24px; @@ -18,6 +10,16 @@ flex-direction: column; } +.cardHeader:before { + z-index: 1; + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + .title { overflow-wrap: break-word; } diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx index f5bd4828..5628260f 100644 --- a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx +++ b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx @@ -26,7 +26,7 @@ export const CardsResultsTemplate: React.FC = ({ requ request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A") }`} > - + {request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")} From 2b682226c0a7901c7d6090e669c423e4bdcbb6a5 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 9 Nov 2023 14:33:32 +0100 Subject: [PATCH 04/18] added dynamic select content --- pwa/src/apiService/apiService.ts | 15 +++++ pwa/src/apiService/resources/filterCount.ts | 22 +++++++ pwa/src/hooks/filterCount.ts | 17 +++++ pwa/src/hooks/openWoo.ts | 12 ++-- .../templateParts/filters/FiltersTemplate.tsx | 66 ++++++++++++++----- 5 files changed, 111 insertions(+), 21 deletions(-) create mode 100644 pwa/src/apiService/resources/filterCount.ts create mode 100644 pwa/src/hooks/filterCount.ts diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts index ba68c0e9..be928434 100644 --- a/pwa/src/apiService/apiService.ts +++ b/pwa/src/apiService/apiService.ts @@ -7,6 +7,7 @@ import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/Fo import OpenWoo from "./resources/openWoo"; import FooterContent from "./resources/footerContent"; import Markdown from "./resources/markdown"; +import FilterCount from "./resources/filterCount"; interface PromiseMessage { loading?: string; @@ -32,6 +33,16 @@ export default class APIService { }); } + public get FilterCountClient(): AxiosInstance { + return axios.create({ + baseURL: process.env.GATSBY_API_BASE_URL, + headers: { + Accept: "application/json+aggregations", + "Content-Type": "application/json", + }, + }); + } + public get FooterContentClient(): AxiosInstance { return axios.create({ baseURL: removeFileNameFromUrl( @@ -55,6 +66,10 @@ export default class APIService { return new OpenWoo(this.BaseClient, this.Send); } + public get FilterCount(): FilterCount { + return new FilterCount(this.FilterCountClient, this.Send); + } + public get FooterContent(): FooterContent { return new FooterContent(this.FooterContentClient, this.Send); } diff --git a/pwa/src/apiService/resources/filterCount.ts b/pwa/src/apiService/resources/filterCount.ts new file mode 100644 index 00000000..cd5ef3bd --- /dev/null +++ b/pwa/src/apiService/resources/filterCount.ts @@ -0,0 +1,22 @@ +import { TSendFunction } from "../apiService"; +import { AxiosInstance } from "axios"; + +export const OPEN_WOO_LIMIT = 6; + +export default class FilterCount { + private _instance: AxiosInstance; + private _send: TSendFunction; + + constructor(_instance: AxiosInstance, send: TSendFunction) { + this._instance = _instance; + this._send = send; + } + + public getCategoryCount = async (): Promise => { + const endpoint = "/openWOO?_queries[]=Categorie"; + + const { data } = await this._send(this._instance, "GET", endpoint); + + return data; + }; +} diff --git a/pwa/src/hooks/filterCount.ts b/pwa/src/hooks/filterCount.ts new file mode 100644 index 00000000..43144376 --- /dev/null +++ b/pwa/src/hooks/filterCount.ts @@ -0,0 +1,17 @@ +import * as React from "react"; +import { useQuery } from "react-query"; +import APIService from "../apiService/apiService"; +import APIContext from "../apiService/apiContext"; + +export const useFilterCount = () => { + const API: APIService | null = React.useContext(APIContext); + + const getCategoryCount = () => + useQuery(["CategoryCount"], () => API?.FilterCount.getCategoryCount(), { + onError: (error) => { + console.warn(error.message); + }, + }); + + return { getCategoryCount }; +}; diff --git a/pwa/src/hooks/openWoo.ts b/pwa/src/hooks/openWoo.ts index 11d6bb03..a6e8b093 100644 --- a/pwa/src/hooks/openWoo.ts +++ b/pwa/src/hooks/openWoo.ts @@ -8,11 +8,15 @@ export const useOpenWoo = (queryClient: QueryClient) => { const API: APIService | null = React.useContext(APIContext); const getAll = (filters: IFiltersContext, currentPage: number, limit: number) => - useQuery(["OpenWoo", filters, currentPage, limit], () => API?.OpenWoo.getAll(filters, currentPage, limit), { - onError: (error) => { - console.warn(error.message); + useQuery( + ["OpenWoo", filters, currentPage, limit], + () => API?.OpenWoo.getAll(filters, currentPage, limit), + { + onError: (error) => { + console.warn(error.message); + }, }, - }); + ); const getOne = (requestId: string) => useQuery(["OpenWoo", requestId], () => API?.OpenWoo.getOne(requestId), { diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx index 2fbcf381..f84fac1a 100644 --- a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx +++ b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx @@ -3,6 +3,7 @@ import * as styles from "./FiltersTemplate.module.css"; import ResultsDisplaySwitch from "../../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; import _ from "lodash"; import qs from "qs"; +import Skeleton from "react-loading-skeleton"; import { useForm } from "react-hook-form"; import { InputText, SelectSingle } from "@conduction/components"; import { IFiltersContext, defaultFiltersContext, useFiltersContext } from "../../../context/filters"; @@ -15,6 +16,7 @@ import { useTranslation } from "react-i18next"; import { filtersToUrlQueryParams } from "../../../services/filtersToQueryParams"; import { navigate } from "gatsby"; import { useGatsbyContext } from "../../../context/gatsby"; +import { useFilterCount } from "../../../hooks/filterCount"; interface FiltersTemplateProps { isLoading: boolean; @@ -25,6 +27,8 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = const { filters, setFilters } = useFiltersContext(); const { gatsbyContext } = useGatsbyContext(); const [queryParams, setQueryParams] = React.useState(defaultFiltersContext); + const [categoryParams, setCategoryParams] = React.useState(); + const [categoryOptions, setCategoryOptions] = React.useState(); const filterTimeout = React.useRef(null); const { @@ -51,15 +55,18 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = setValue( "year", - generateYearsArray(currentYear - 1995).find((year: any) => { + generateYearsArray(currentYear - 2021).find((year: any) => { return year.value === params.year; }), ); + }; - setValue( - "category", - TEMP_PUBLICATION_TYPES.find((option) => option.value === params.Categorie?.replace(/_/g, " ")), - ); + const handleSetSelectFormValues = (params: any): void => { + getItems.isSuccess && + setValue( + "category", + categoryOptions.find((option: any) => option.value === params.Categorie?.replace(/_/g, " ")), + ); }; const onSubmit = (data: any) => { @@ -79,10 +86,17 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = React.useEffect(() => { if (_.isEmpty(parsedParams)) return; - + setCategoryParams(parsedParams); handleSetFormValues(parsedParams); }, []); + React.useEffect(() => { + if (_.isEmpty(categoryOptions)) return; + if (_.isEmpty(categoryParams)) return; + + handleSetSelectFormValues(categoryParams); + }, [categoryOptions]); + React.useEffect(() => { //Prevents loop that puts user at top of page after scroll if (_.isEqual(filters, queryParams)) return; @@ -91,6 +105,20 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = navigate(`/${filtersToUrlQueryParams(filters)}`); }, [filters]); + const getItems = useFilterCount().getCategoryCount(); + + React.useEffect(() => { + if (!getItems.isSuccess) return; + + const categoriesWithData = getItems.data.Categorie.map((test: any) => { + return TEMP_PUBLICATION_TYPES?.find((option) => { + return option.value === test._id.toLowerCase(); + }); + }); + + setCategoryOptions(Array.from(new Set(categoriesWithData))); + }, [getItems.isSuccess]); + return (
@@ -103,11 +131,11 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = /> { + defaultValue={generateYearsArray(currentYear - 2021).find((year: any) => { return ( year.after === filters["Publicatiedatum[after]"] && year.before === filters["Publicatiedatum[before]"] ); @@ -116,15 +144,19 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = ariaLabel={t("Select year")} /> - option.value === filters.Categorie)} - isClearable - {...{ register, errors, control }} - ariaLabel={t("Select category")} - /> + {getItems.isLoading && } + {getItems.isSuccess && ( + option.value === filters.Categorie)} + isClearable + disabled={getItems.isLoading} + {...{ register, errors, control }} + ariaLabel={t("Select category")} + /> + )}