added dynamic select content

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,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<any> => {
+    const endpoint = "/openWOO?_queries[]=Categorie";
+
+    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/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"