Development to main, week 45

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",

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);
   }

pwa/src/apiService/resources/filterCount.ts

@@ -0,0 +1,24 @@
+import { TSendFunction } from "../apiService";
+import { AxiosInstance } from "axios";
+
+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<any> => {
+    let endpoint = "/openWOO?_queries[]=Categorie";
+
+    if (process.env.GATSBY_OIDN_NUMBER) {
+      endpoint += `&oidn=${process.env.GATSBY_OIDN_NUMBER}`;
+    }
+
+    const { data } = await this._send(this._instance, "GET", endpoint);
+
+    return data;
+  };
+}

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<any, Error>(["CategoryCount"], () => API?.FilterCount.getCategoryCount(), {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
+  return { getCategoryCount };
+};

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<any, Error>(["OpenWoo", filters, currentPage, limit], () => API?.OpenWoo.getAll(filters, currentPage, limit), {
-      onError: (error) => {
-        console.warn(error.message);
+    useQuery<any, Error>(
+      ["OpenWoo", filters, currentPage, limit],
+      () => API?.OpenWoo.getAll(filters, currentPage, limit),
+      {
+        onError: (error) => {
+          console.warn(error.message);
+        },
       },
-    });
+    );
 
   const getOne = (requestId: string) =>
     useQuery<any, Error>(["OpenWoo", requestId], () => API?.OpenWoo.getOne(requestId), {

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";

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 = () => {
       <Page>
         <PageContent>
           <CardWrapper aria-label={t("Jumbotron card")} role="contentinfo" className={styles.card}>
-            <Heading2 className={styles.title}>
+            <Heading1 className={styles.title}>
               {t("Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME}
-            </Heading2>
+            </Heading1>
 
             <Paragraph className={styles.description}>
               {t("On this page you will find the Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME}

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;
 }

pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx

@@ -26,7 +26,7 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
               request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
             }`}
           >
-            <CardHeader>
+            <CardHeader className={styles.cardHeader}>
               <CardHeaderDate>
                 {request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")}
               </CardHeaderDate>

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<FiltersTemplateProps> = ({ isLoading }) =
   const { filters, setFilters } = useFiltersContext();
   const { gatsbyContext } = useGatsbyContext();
   const [queryParams, setQueryParams] = React.useState<IFiltersContext>(defaultFiltersContext);
+  const [categoryParams, setCategoryParams] = React.useState<any>();
+  const [categoryOptions, setCategoryOptions] = React.useState<any>();
   const filterTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
   const {
@@ -51,15 +55,18 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ 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<FiltersTemplateProps> = ({ 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<FiltersTemplateProps> = ({ 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 (
     <div id="filters" className={styles.container}>
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
@@ -103,11 +131,11 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
         />
 
         <SelectSingle
-          options={generateYearsArray(currentYear - 1995)}
+          options={generateYearsArray(currentYear - 2021)}
           name="year"
           placeholder={t("Year")}
           isClearable
-          defaultValue={generateYearsArray(currentYear - 1995).find((year: any) => {
+          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<FiltersTemplateProps> = ({ isLoading }) =
           ariaLabel={t("Select year")}
         />
 
-        <SelectSingle
-          options={TEMP_PUBLICATION_TYPES}
-          name="category"
-          placeholder={t("Category")}
-          defaultValue={TEMP_PUBLICATION_TYPES.find((option) => option.value === filters.Categorie)}
-          isClearable
-          {...{ register, errors, control }}
-          ariaLabel={t("Select category")}
-        />
+        {getItems.isLoading && <Skeleton height="50px" />}
+        {getItems.isSuccess && (
+          <SelectSingle
+            options={categoryOptions}
+            name="category"
+            placeholder={t("Category")}
+            defaultValue={TEMP_PUBLICATION_TYPES.find((option) => option.value === filters.Categorie)}
+            isClearable
+            disabled={getItems.isLoading}
+            {...{ register, errors, control }}
+            ariaLabel={t("Select category")}
+          />
+        )}
 
         <Button
           type="submit"