diff --git a/pwa/gatsby-config.js b/pwa/gatsby-config.js index 80e8e9da..e2400e18 100644 --- a/pwa/gatsby-config.js +++ b/pwa/gatsby-config.js @@ -3,10 +3,14 @@ require("dotenv").config({ }); module.exports = { + /** + * We do NOT want to set the pathPrefix when we're using a DNS; it's only needed on gh-pages + * We CAN NOT set the pathPrefix when we're using the JSON-config files (due to needing access to window) + */ pathPrefix: process.env.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true" ? `/${process.env.GITHUB_REPOSITORY_NAME}` - : "", // we do NOT want to set the prefix if we're using an DNS + : "", plugins: [ { resolve: `gatsby-plugin-layout`, diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 229618da..e095d960 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.25", + "@conduction/theme": "1.0.55", "@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.25", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.25.tgz", + "integrity": "sha512-83w2RSTr+VqGFNlwKMQeek57LEJUUBX+ypcF9jay+Jx2Q6cCgqlgPj5rhYXQCBZfpe2AoQtIXllfpJi3/p9qyA==", "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.55", + "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.55.tgz", + "integrity": "sha512-GCk9v3HyAy/3exE2G7VpJF8g8m8g5l0do9i0AaWz4u12I5UMoY581tXmX3YUkh1wawS+TCgL7jvB/t2C6tl+1g==", "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..947173bc 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.25", + "@conduction/theme": "1.0.55", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", "@fortawesome/free-regular-svg-icons": "6.4.2", diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts index ba68c0e9..7f929140 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 AvailableFilters from "./resources/availableFilters"; interface PromiseMessage { loading?: string; @@ -24,7 +25,7 @@ export type TSendFunction = ( export default class APIService { public get BaseClient(): AxiosInstance { return axios.create({ - baseURL: process.env.GATSBY_API_BASE_URL, + baseURL: window.sessionStorage.getItem("API_BASE_URL") ?? "", headers: { Accept: "application/json", "Content-Type": "application/json", @@ -32,19 +33,25 @@ export default class APIService { }); } + public get AvailableFiltersClient(): AxiosInstance { + return axios.create({ + baseURL: window.sessionStorage.getItem("API_BASE_URL") ?? "", + headers: { + Accept: "application/json+aggregations", + "Content-Type": "application/json", + }, + }); + } + public get FooterContentClient(): AxiosInstance { return axios.create({ - baseURL: removeFileNameFromUrl( - process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0 - ? process.env.GATSBY_FOOTER_CONTENT - : DEFAULT_FOOTER_CONTENT_URL, - ), + baseURL: removeFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL), }); } public get MarkdownClient(): AxiosInstance { return axios.create({ - baseURL: process.env.GATSBY_BASE_URL ?? undefined, + baseURL: window.sessionStorage.getItem("BASE_URL") ?? undefined, headers: { Accept: "application/vnd.github.html", }, @@ -55,6 +62,10 @@ export default class APIService { return new OpenWoo(this.BaseClient, this.Send); } + public get AvailableFilters(): AvailableFilters { + return new AvailableFilters(this.AvailableFiltersClient, this.Send); + } + public get FooterContent(): FooterContent { return new FooterContent(this.FooterContentClient, this.Send); } diff --git a/pwa/src/apiService/resources/availableFilters.ts b/pwa/src/apiService/resources/availableFilters.ts new file mode 100644 index 00000000..05b33510 --- /dev/null +++ b/pwa/src/apiService/resources/availableFilters.ts @@ -0,0 +1,24 @@ +import { TSendFunction } from "../apiService"; +import { AxiosInstance } from "axios"; + +export default class AvailableFilters { + private _instance: AxiosInstance; + private _send: TSendFunction; + + constructor(_instance: AxiosInstance, send: TSendFunction) { + this._instance = _instance; + this._send = send; + } + + public getCategories = async (): Promise => { + let endpoint = "/openWOO?_queries[]=Categorie"; + + if (window.sessionStorage.getItem("OIDN_NUMBER")) { + endpoint += `&oidn=${window.sessionStorage.getItem("OIDN_NUMBER")}`; + } + + const { data } = await this._send(this._instance, "GET", endpoint); + + return data; + }; +} diff --git a/pwa/src/apiService/resources/openWoo.ts b/pwa/src/apiService/resources/openWoo.ts index 4a2f178f..277bc315 100644 --- a/pwa/src/apiService/resources/openWoo.ts +++ b/pwa/src/apiService/resources/openWoo.ts @@ -19,8 +19,8 @@ export default class OpenWoo { filters, )}&_order[Publicatiedatum]=desc&_limit=${limit}&_page=${currentPage}`; - if (process.env.GATSBY_OIDN_NUMBER) { - endpoint += `&oidn=${process.env.GATSBY_OIDN_NUMBER}`; + if (window.sessionStorage.getItem("OIDN_NUMBER")) { + endpoint += `&oidn=${window.sessionStorage.getItem("OIDN_NUMBER")}`; } const { data } = await this._send(this._instance, "GET", endpoint); diff --git a/pwa/src/data/PublicationType.ts b/pwa/src/data/PublicationType.ts deleted file mode 100644 index c7fc79ef..00000000 --- a/pwa/src/data/PublicationType.ts +++ /dev/null @@ -1,71 +0,0 @@ -export const TEMP_PUBLICATION_TYPES = [ - { - label: "Wetten en algemeen verbindende voorschriften", - value: "wetten en algemeen verbindende voorschriften", - }, - { - label: "Overige besluiten van algemene strekking", - value: "overige besluiten van algemene strekking", - }, - { - label: "Ontwerpen van wet- en regelgeving met adviesaanvraag", - value: "ontwerpen van wet- en regelgeving met adviesaanvraag", - }, - { - label: "Organisatie en werkwijze", - value: "organisatie en werkwijze", - }, - { - label: "Bereikbaarheidsgegevens", - value: "bereikbaarheidsgegevens", - }, - - { - label: "Bij vertegenwoordigende organen ingekomen stukken", - value: "bij vertegenwoordigende organen ingekomen stukken", - }, - { - label: "Vergaderstukken Staten-Generaal", - value: "vergaderstukken Staten-Generaal", - }, - { - label: "Vergaderstukken decentrale overheden", - value: "vergaderstukken decentrale overheden", - }, - { - label: "Agenda's en besluitenlijsten bestuurscolleges", - value: "agenda's en besluitenlijsten bestuurscolleges", - }, - { - label: "Adviezen", - value: "adviezen", - }, - { - label: "Convenanten", - value: "convenanten", - }, - { - label: "Jaarplannen en jaarverslagen", - value: "jaarplannen en jaarverslagen", - }, - { - label: "Subsidieverplichtingen anders dan met beschikking", - value: "subsidieverplichtingen anders dan met beschikking", - }, - { - label: "Woo-verzoeken en -besluiten", - value: "woo-verzoeken en -besluiten", - }, - { - label: "Onderzoeksrapporten", - value: "onderzoeksrapporten", - }, - { - label: "Beschikkingen", - value: "beschikkingen", - }, - { - label: "Klachtoordelen", - value: "klachtoordelen", - }, -]; diff --git a/pwa/src/data/features.ts b/pwa/src/data/features.ts deleted file mode 100644 index 3cd4e724..00000000 --- a/pwa/src/data/features.ts +++ /dev/null @@ -1,98 +0,0 @@ -export const features = [ - { - href: "API", - name: "API", - }, - { - href: "Action_handlers", - name: "Action handlers", - }, - { - href: "Architecture", - name: "Architecture", - }, - { - href: "Authentication", - name: "Authentication", - }, - { - href: "Authorization", - name: "Authorization", - }, - { - href: "Code_quality", - name: "Code quality", - }, - { - href: "Commands", - name: "Commands", - }, - { - href: "Cronjobs", - name: "Cronjobs", - }, - { - href: "Datalayer", - name: "Datalayer", - }, - { - href: "Design_decisions", - name: "Design decisions", - }, - { - href: "Endpoints", - name: "Endpoints", - }, - { - href: "Events", - name: "Events", - }, - { - href: "Features", - name: "Features", - }, - { - href: "Federalization", - name: "Federalization", - }, - { - href: "Logging", - name: "Logging", - }, - { - href: "Mappings", - name: "Mappings", - }, - { - href: "Monitoring", - name: "Monitoring", - }, - { - href: "Notifications", - name: "Notifications", - }, - { - href: "Plugins", - name: "Plugins", - }, - { - href: "Schemas", - name: "Schemas", - }, - { - href: "Security", - name: "Security", - }, - { - href: "Sources", - name: "Sources", - }, - { - href: "Synchronizations", - name: "Synchronizations", - }, - { - href: "Twig", - name: "Twig", - }, -]; diff --git a/pwa/src/hooks/availableFilters.ts b/pwa/src/hooks/availableFilters.ts new file mode 100644 index 00000000..9314da73 --- /dev/null +++ b/pwa/src/hooks/availableFilters.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 useAvailableFilters = () => { + const API: APIService | null = React.useContext(APIContext); + + const getCategories = () => + useQuery(["available_catagories"], () => API?.AvailableFilters.getCategories(), { + onError: (error) => { + console.warn(error.message); + }, + }); + + return { getCategories }; +}; diff --git a/pwa/src/hooks/footerContent.ts b/pwa/src/hooks/footerContent.ts index 71a92ef0..e395c4a9 100644 --- a/pwa/src/hooks/footerContent.ts +++ b/pwa/src/hooks/footerContent.ts @@ -8,11 +8,7 @@ import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/Fo export const useFooterContent = () => { const API: APIService | null = React.useContext(APIContext); - const fileName = getFileNameFromUrl( - process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0 - ? process.env.GATSBY_FOOTER_CONTENT - : DEFAULT_FOOTER_CONTENT_URL, - ); + const fileName = getFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL); const getContent = () => useQuery(["contents", fileName], () => API?.FooterContent.getContent(fileName), { diff --git a/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx b/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx index 86de8fc5..8c72c060 100644 --- a/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx +++ b/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx @@ -89,7 +89,7 @@ const handleInternalLinks = (props: any, targetFile: string, location: string, d if (!directoryFound) { const hrefWithLeadingSlash = !props.href.startsWith("/") ? `/${props.href}` : props.href; - open(`${process.env.GATSBY_GITHUB_REPOSITORY_URL}/blob/master${hrefWithLeadingSlash}`); + open(`${window.sessionStorage.getItem("GITHUB_REPOSITORY_URL") ?? ""}/blob/master${hrefWithLeadingSlash}`); } return; // ensure no other flow is triggered diff --git a/pwa/src/hooks/htmlParser/image/getImage.tsx b/pwa/src/hooks/htmlParser/image/getImage.tsx index 979ac26f..f3c0ba31 100644 --- a/pwa/src/hooks/htmlParser/image/getImage.tsx +++ b/pwa/src/hooks/htmlParser/image/getImage.tsx @@ -4,7 +4,7 @@ export const getImage = (props: any) => { let src = props.src; if (!props.src.includes("https://" || "http://")) { - const sessionUrl = process.env.GATSBY_GITHUB_REPOSITORY_URL; + const sessionUrl = window.sessionStorage.getItem("GITHUB_REPOSITORY_URL"); const url = sessionUrl?.replace("https://github.com/", ""); src = `https://raw.githubusercontent.com/${url}/master/docs/features/${props.src}`; 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/hooks/useMarkdownDirectories.ts b/pwa/src/hooks/useMarkdownDirectories.ts index 107afcf6..d70a44f5 100644 --- a/pwa/src/hooks/useMarkdownDirectories.ts +++ b/pwa/src/hooks/useMarkdownDirectories.ts @@ -9,7 +9,7 @@ export const useMarkdownDirectories = () => { const [directories, setDirectories] = React.useState([]); React.useEffect(() => { - const markdownDirectoryPathsString: string | undefined = process.env.GATSBY_GITHUB_DOCS_DIRECTORY_PATHS; + const markdownDirectoryPathsString: string | null = window.sessionStorage.getItem("GITHUB_DOCS_DIRECTORY_PATHS"); if (!markdownDirectoryPathsString) return; diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx index 1495f44d..5ab8c01a 100644 --- a/pwa/src/layout/Head.tsx +++ b/pwa/src/layout/Head.tsx @@ -26,13 +26,13 @@ export const Head: React.FC = () => { lang: currentLanguage, }} bodyAttributes={{ - class: process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME, + class: window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME"), }} > - {`Woo | ${process.env.GATSBY_ORGANISATION_NAME} | ${ + <title>{`Woo | ${window.sessionStorage.getItem("ORGANISATION_NAME")} | ${ getPageTitle(translatedCrumbs, gatsbyContext.location) ?? "Error" }`} - + ); }; diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx index 33bd2ae7..8508c091 100644 --- a/pwa/src/layout/Layout.tsx +++ b/pwa/src/layout/Layout.tsx @@ -12,6 +12,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons"; import { fab } from "@fortawesome/free-brands-svg-icons"; import { far } from "@fortawesome/free-regular-svg-icons"; import { IconPack, library } from "@fortawesome/fontawesome-svg-core"; +import { initiateEnvironment } from "../services/initiateEnvironment"; interface LayoutProps { children: React.ReactNode; @@ -25,6 +26,10 @@ const Layout: React.FC = ({ children, pageContext, location }) => { library.add(fas, fab as IconPack, far as IconPack); + React.useEffect(() => { + initiateEnvironment(); + }, []); + React.useEffect(() => { setAPI(new APIService()); }, [pageContext]); diff --git a/pwa/src/services/getConfig.ts b/pwa/src/services/getConfig.ts new file mode 100644 index 00000000..71805827 --- /dev/null +++ b/pwa/src/services/getConfig.ts @@ -0,0 +1,14 @@ +import Conduction from "./../../static/configFiles/conduction.json"; +import Epe from "./../../static/configFiles/epe.json"; +import Noordwijk from "./../../static/configFiles/noordwijk.json"; + +export const getConfig = (domain: string): Record | undefined => { + switch (domain) { + case "open.epe.nl": + return Epe as Record; + case "open.noordwijk.nl": + return Noordwijk as Record; + default: + return Conduction as Record; + } +}; diff --git a/pwa/src/services/initiateEnvironment.ts b/pwa/src/services/initiateEnvironment.ts new file mode 100644 index 00000000..6ffa76dc --- /dev/null +++ b/pwa/src/services/initiateEnvironment.ts @@ -0,0 +1,33 @@ +import { getConfig } from "./getConfig"; + +export const initiateEnvironment = () => { + const varsAvailable = process.env.GATSBY_ENV_VARS_SET === "true"; + + if (varsAvailable) { + window.sessionStorage.setItem("API_BASE_URL", process.env.GATSBY_API_BASE_URL ?? ""); + window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? ""); + window.sessionStorage.setItem("FAVICON_URL", process.env.GATSBY_FAVICON_URL ?? ""); + window.sessionStorage.setItem("ORGANISATION_NAME", process.env.GATSBY_ORGANISATION_NAME ?? ""); + window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", process.env.GATSBY_JUMBOTRON_IMAGE_URL ?? ""); + window.sessionStorage.setItem("FOOTER_LOGO_HREF", process.env.GATSBY_FOOTER_LOGO_HREF ?? ""); + window.sessionStorage.setItem("FOOTER_CONTENT", process.env.FOOTER_CONTENT ?? ""); + window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? ""); + window.sessionStorage.setItem("OIDN_NUMBER", process.env.GATSBY_OIDN_NUMBER ?? ""); + + return; // all vars are set in sessionStorage, nothing else to do + } + + const config = getConfig(window.location.hostname); + + if (!config) return; // no config found, nothing else to do + + window.sessionStorage.setItem("API_BASE_URL", config.GATSBY_API_BASE_URL ?? ""); + window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", config.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? ""); + window.sessionStorage.setItem("FAVICON_URL", config.GATSBY_FAVICON_URL ?? ""); + window.sessionStorage.setItem("ORGANISATION_NAME", config.GATSBY_ORGANISATION_NAME ?? ""); + window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", config.GATSBY_JUMBOTRON_IMAGE_URL ?? ""); + window.sessionStorage.setItem("FOOTER_LOGO_HREF", config.GATSBY_FOOTER_LOGO_HREF ?? ""); + window.sessionStorage.setItem("FOOTER_CONTENT", config.GATSBY_FOOTER_CONTENT ?? ""); + window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", config.GATSBY_FOOTER_CONTENT_HEADER ?? ""); + window.sessionStorage.setItem("OIDN_NUMBER", config.GATSBY_OIDN_NUMBER ?? ""); +}; diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css index 7ac1d5bc..06490b45 100644 --- a/pwa/src/styling/index.css +++ b/pwa/src/styling/index.css @@ -13,6 +13,7 @@ @import "../../node_modules/@conduction/theme/municipalities/rotterdam-design-tokens/dist/index.css"; @import "../../node_modules/@conduction/theme/municipalities/open-webconcept-design-tokens/dist/index.css"; @import "../../node_modules/@conduction/theme/municipalities/dimpact-design-tokens/dist/index.css"; +@import "../../node_modules/@conduction/theme/municipalities/commonground-design-tokens/dist/index.css"; /* Design Tokens maintained by Frameless */ @import "../../node_modules/@utrecht/design-tokens/dist/theme.css"; diff --git a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx index a600f0c3..a5096d67 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"; @@ -11,18 +11,19 @@ export const JumbotronTemplate: React.FC = () => {
- - {t("Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME} - + + {t("Woo-publications of")} {window.sessionStorage.getItem("ORGANISATION_NAME")} + - {t("On this page you will find the Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME} + {t("On this page you will find the Woo-publications of")}{" "} + {window.sessionStorage.getItem("ORGANISATION_NAME")} 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")} diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx index 2fbcf381..60c62f53 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"; @@ -10,11 +11,11 @@ import { Button } from "@utrecht/component-library-react/dist/css-module"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faMagnifyingGlass, faSpinner } from "@fortawesome/free-solid-svg-icons"; import { generateYearsArray } from "../../../data/years"; -import { TEMP_PUBLICATION_TYPES } from "../../../data/PublicationType"; import { useTranslation } from "react-i18next"; import { filtersToUrlQueryParams } from "../../../services/filtersToQueryParams"; import { navigate } from "gatsby"; import { useGatsbyContext } from "../../../context/gatsby"; +import { useAvailableFilters } from "../../../hooks/availableFilters"; interface FiltersTemplateProps { isLoading: boolean; @@ -25,6 +26,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 +54,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 => { + getCategories.isSuccess && + setValue( + "category", + categoryOptions.find((option: any) => option.value === params.Categorie?.replace(/_/g, " ")), + ); }; const onSubmit = (data: any) => { @@ -79,10 +85,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 +104,19 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = navigate(`/${filtersToUrlQueryParams(filters)}`); }, [filters]); + const getCategories = useAvailableFilters().getCategories(); + + React.useEffect(() => { + if (!getCategories.isSuccess) return; + + const categoriesWithData = getCategories.data.Categorie.map((category: any) => ({ + label: _.upperFirst(category._id.toLowerCase()), + value: category._id.toLowerCase(), + })); + + setCategoryOptions(_.orderBy(_.uniqBy(categoriesWithData, "value"), "label", "asc")); + }, [getCategories.isSuccess]); + return (
@@ -103,11 +129,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 +142,19 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = ariaLabel={t("Select year")} /> - option.value === filters.Categorie)} - isClearable - {...{ register, errors, control }} - ariaLabel={t("Select category")} - /> + {getCategories.isLoading && } + {getCategories.isSuccess && ( + option.value === filters.Categorie)} + isClearable + disabled={getCategories.isLoading} + {...{ register, errors, control }} + ariaLabel={t("Select category")} + /> + )}