Merge pull request #164 from ConductionNL/Feature/OP-131/Dropdown-con…

…tent

Feature/OP-131/Dropdown-content

pwa/src/apiService/apiService.ts

@@ -7,7 +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";
+import AvailableFilters from "./resources/availableFilters";
 
 interface PromiseMessage {
   loading?: string;
@@ -33,7 +33,7 @@ export default class APIService {
     });
   }
 
-  public get FilterCountClient(): AxiosInstance {
+  public get AvailableFiltersClient(): AxiosInstance {
     return axios.create({
       baseURL: window.sessionStorage.getItem("API_BASE_URL") ?? "",
       headers: {
@@ -62,8 +62,8 @@ export default class APIService {
     return new OpenWoo(this.BaseClient, this.Send);
   }
 
-  public get FilterCount(): FilterCount {
-    return new FilterCount(this.FilterCountClient, this.Send);
+  public get AvailableFilters(): AvailableFilters {
+    return new AvailableFilters(this.AvailableFiltersClient, this.Send);
   }
 
   public get FooterContent(): FooterContent {

pwa/src/apiService/resources/filterCount.ts → pwa/src/apiService/resources/availableFilters.ts

@@ -1,7 +1,7 @@
 import { TSendFunction } from "../apiService";
 import { AxiosInstance } from "axios";
 
-export default class FilterCount {
+export default class AvailableFilters {
   private _instance: AxiosInstance;
   private _send: TSendFunction;
 
@@ -10,7 +10,7 @@ export default class FilterCount {
     this._send = send;
   }
 
-  public getCategoryCount = async (): Promise<any> => {
+  public getCategories = async (): Promise<any> => {
     let endpoint = "/openWOO?_queries[]=Categorie";
 
     if (window.sessionStorage.getItem("OIDN_NUMBER")) {

pwa/src/hooks/filterCount.ts → pwa/src/hooks/availableFilters.ts

@@ -3,15 +3,15 @@ import { useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
 
-export const useFilterCount = () => {
+export const useAvailableFilters = () => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const getCategoryCount = () =>
-    useQuery<any, Error>(["CategoryCount"], () => API?.FilterCount.getCategoryCount(), {
+  const getCategories = () =>
+    useQuery<any, Error>(["available_catagories"], () => API?.AvailableFilters.getCategories(), {
       onError: (error) => {
         console.warn(error.message);
       },
     });
 
-  return { getCategoryCount };
+  return { getCategories };
 };

pwa/src/templates/templateParts/filters/FiltersTemplate.tsx

@@ -11,12 +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 { useFilterCount } from "../../../hooks/filterCount";
+import { useAvailableFilters } from "../../../hooks/availableFilters";
 
 interface FiltersTemplateProps {
   isLoading: boolean;
@@ -62,7 +61,7 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
   };
 
   const handleSetSelectFormValues = (params: any): void => {
-    getItems.isSuccess &&
+    getCategories.isSuccess &&
       setValue(
         "category",
         categoryOptions.find((option: any) => option.value === params.Categorie?.replace(/_/g, " ")),
@@ -105,19 +104,18 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
     navigate(`/${filtersToUrlQueryParams(filters)}`);
   }, [filters]);
 
-  const getItems = useFilterCount().getCategoryCount();
+  const getCategories = useAvailableFilters().getCategories();
 
   React.useEffect(() => {
-    if (!getItems.isSuccess) return;
+    if (!getCategories.isSuccess) return;
 
-    const categoriesWithData = getItems.data.Categorie.map((test: any) => {
-      return TEMP_PUBLICATION_TYPES?.find((option) => {
-        return option.value === test._id.toLowerCase();
-      });
-    });
+    const categoriesWithData = getCategories.data.Categorie.map((category: any) => ({
+      label: _.upperFirst(category._id.toLowerCase()),
+      value: category._id.toLowerCase(),
+    }));
 
-    setCategoryOptions(Array.from(new Set(categoriesWithData)));
-  }, [getItems.isSuccess]);
+    setCategoryOptions(_.orderBy(_.uniqBy(categoriesWithData, "value"), "label", "asc"));
+  }, [getCategories.isSuccess]);
 
   return (
     <div id="filters" className={styles.container}>
@@ -144,15 +142,15 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
           ariaLabel={t("Select year")}
         />
 
-        {getItems.isLoading && <Skeleton height="50px" />}
-        {getItems.isSuccess && (
+        {getCategories.isLoading && <Skeleton height="50px" />}
+        {getCategories.isSuccess && (
           <SelectSingle
             options={categoryOptions}
             name="category"
             placeholder={t("Category")}
-            defaultValue={TEMP_PUBLICATION_TYPES.find((option) => option.value === filters.Categorie)}
+            defaultValue={categoryOptions && categoryOptions.find((option: any) => option.value === filters.Categorie)}
             isClearable
-            disabled={getItems.isLoading}
+            disabled={getCategories.isLoading}
             {...{ register, errors, control }}
             ariaLabel={t("Select category")}
           />

pwa/src/templates/templateParts/footer/FooterTemplate.tsx

@@ -59,16 +59,6 @@ export const FooterTemplate: React.FC = () => {
   //   setFooterContent(data);
   // }, []);
 
-  React.useEffect(() => {
-    if (!window.sessionStorage.getItem("FOOTER_CONTENT")) return;
-
-    try {
-      setFooterContent(JSON.parse(window.sessionStorage.getItem("FOOTER_CONTENT") ?? ""));
-    } catch {
-      console.warn("Could not parse footer content.");
-    }
-  }, [window.sessionStorage.getItem("FOOTER_CONTENT")]);
-
   return (
     <PageFooter className={styles.footer}>
       <div className={styles.container}>