Merge pull request #357 from OpenCatalogi/feature/OP-81/query-param-f…

…ilters

Feature/op 81/query param filters

pwa/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "description": "skeleton-pip",
   "author": "Conduction",
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",

pwa/src/apiService/resources/applications.ts

@@ -1,6 +1,6 @@
 import { Send } from "../apiService";
 import { AxiosInstance } from "axios";
-import { IFilters } from "../../context/filters";
+import { IFiltersContext } from "../../context/filters";
 
 export default class Applications {
   private _instance: AxiosInstance;
@@ -15,7 +15,7 @@ export default class Applications {
     return data;
   };
 
-  public getAll = async (filters: IFilters): Promise<any> => {
+  public getAll = async (filters: IFiltersContext): Promise<any> => {
     const { data } = await Send(
       this._instance,
       "GET",

pwa/src/apiService/resources/components.ts

@@ -1,6 +1,6 @@
 import { Send } from "../apiService";
 import { AxiosInstance } from "axios";
-import { IFilters } from "../../context/filters";
+import { IFiltersContext } from "../../context/filters";
 import { filtersToQueryParams } from "../../services/filtersToQueryParams";
 
 export default class Component {
@@ -16,7 +16,7 @@ export default class Component {
     return data;
   };
 
-  public getAll = async (filters: IFilters): Promise<any> => {
+  public getAll = async (filters: IFiltersContext): Promise<any> => {
     const { data } = await Send(
       this._instance,
       "GET",
@@ -26,7 +26,7 @@ export default class Component {
     return data;
   };
 
-  public getCount = async (filters: IFilters): Promise<any> => {
+  public getCount = async (filters: IFiltersContext): Promise<any> => {
     const { data } = await Send(this._instance, "GET", `/components?limit=1${filtersToQueryParams(filters)}`);
 
     return data.total;

pwa/src/apiService/resources/organization.ts

@@ -1,6 +1,6 @@
 import { Send } from "../apiService";
 import { AxiosInstance } from "axios";
-import { IFilters } from "../../context/filters";
+import { IFiltersContext } from "../../context/filters";
 import { filtersToQueryParams } from "../../services/filtersToQueryParams";
 
 export default class Organization {
@@ -16,7 +16,7 @@ export default class Organization {
     return data;
   };
 
-  public getAll = async (filters: IFilters): Promise<any> => {
+  public getAll = async (filters: IFiltersContext): Promise<any> => {
     let url = `/organizations?page=${filters.organizationCurrentPage}&order[owns]=desc&limit=10&extend[]=all`;
 
     if (filters.organizationSearch) {
@@ -34,7 +34,7 @@ export default class Organization {
     return data;
   };
 
-  public getCount = async (filters: IFilters): Promise<any> => {
+  public getCount = async (filters: IFiltersContext): Promise<any> => {
     const { data } = await Send(this._instance, "GET", `/organizations?limit=1${filtersToQueryParams(filters)}`);
 
     return data.total;

pwa/src/apiService/resources/search.ts

@@ -1,6 +1,6 @@
 import { Send } from "../apiService";
 import { AxiosInstance } from "axios";
-import { IFilters } from "../../context/filters";
+import { IFiltersContext } from "../../context/filters";
 import { filtersToQueryParams } from "../../services/filtersToQueryParams";
 
 export default class Search {
@@ -10,16 +10,16 @@ export default class Search {
     this._instance = _instance;
   }
 
-  public getSearch = async (filters: IFilters): Promise<any> => {
+  public getSearch = async (filters: IFiltersContext): Promise<any> => {
     let endpoint = `/search?page=${
       filters.currentPage
     }&order[embedded.rating.rating]=desc&limit=10&extend[]=all${filtersToQueryParams(filters)}`;
 
     if (process.env.GATSBY_GITHUB_ORGANIZATION_URL) {
-      endpoint += `&legal.repoOwner.github=${process.env.GATSBY_GITHUB_ORGANIZATION_URL}`;
+      endpoint += `&embedded.url.embedded.organisation.github=${process.env.GATSBY_GITHUB_ORGANIZATION_URL}`;
     }
 
-    if (filters.isForked) {
+    if (filters.isForked === true) {
       endpoint += `&isBasedOn=IS NULL`;
     }
 

pwa/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import _ from "lodash";
 import { Container } from "@conduction/components";
 import { isHomepage } from "../../services/isHomepage";
 import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator, Icon } from "@utrecht/component-library-react";
-import { GatsbyContext } from "../../context/gatsby";
+import { useGatsbyContext } from "../../context/gatsby";
 import { navigate } from "gatsby";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
@@ -18,7 +18,7 @@ export const Breadcrumbs: React.FC = () => {
       breadcrumb: { crumbs },
     },
     location: { pathname },
-  } = React.useContext(GatsbyContext);
+  } = useGatsbyContext();
 
   const githubLabel = () => {
     const stringLabelfull = location.pathname.split("/github/")[1];

pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as styles from "./ResultsDisplaySwitch.module.css";
 import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
-import { FiltersContext } from "../../context/filters";
+import { useFiltersContext } from "../../context/filters";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNodes, faGripVertical, faLayerGroup, faTable } from "@fortawesome/free-solid-svg-icons";
 import clsx from "clsx";
@@ -26,7 +26,7 @@ interface ResultsDisplaySwitchProps {
 
 const ResultsDisplaySwitch: React.FC<ResultsDisplaySwitchProps> = ({ layoutClassName, resultsDisplayType }) => {
   const { t } = useTranslation();
-  const [filters, setFilters] = React.useContext(FiltersContext);
+  const { filters, setFilters } = useFiltersContext();
 
   const acceptedFilters: AcceptedFilters = {
     resultDisplayLayout: ["table", "cards", "layer"],

pwa/src/context/filters.ts

@@ -1,12 +1,16 @@
 import * as React from "react";
+import { GlobalContext } from "./global";
+import { getParsedParamsFromSearch } from "../services/getParsedParamsFromSearch";
+import { navigate } from "gatsby";
+import { filtersToUrlQueryParams } from "../services/filtersToQueryParams";
 
 export type TComponentResultsLayout = "table" | "cards" | "layer";
 export type TComponentDependenciesLayout = "layer" | "relations";
 export type TLandingDisplayLayout = "layer" | "cards";
 export type TCatagoryDisplayLayout = "table" | "cards" | "layer";
 export type TOrganizationsResultDisplayLayout = "table" | "cards";
 
-export interface IFilters {
+export interface IFiltersContext {
   resultDisplayLayout: TComponentResultsLayout;
   dependenciesDisplayLayout: TComponentDependenciesLayout;
   landingDisplayLayout: TLandingDisplayLayout;
@@ -28,7 +32,7 @@ export interface IFilters {
   "embedded.nl.embedded.gemma.bedrijfsfuncties"?: string[];
   "embedded.nl.embedded.gemma.bedrijfsservices"?: string[];
   "embedded.nl.embedded.gemma.referentieComponenten"?: string[];
-  "embedded.nl.embedded.gemma.applicatiefunctie": string;
+  "embedded.nl.embedded.gemma.applicatiefunctie"?: string;
   "embedded.nl.embedded.upl"?: string[];
   "embedded.maintenance.type"?: string;
   "embedded.legal.license"?: string;
@@ -39,7 +43,7 @@ export interface IFilters {
   showMoreSupport?: boolean;
 }
 
-export const baseFilters = {
+export const defaultFiltersContext: IFiltersContext = {
   resultDisplayLayout: "table",
   dependenciesDisplayLayout: "layer",
   landingDisplayLayout: "cards",
@@ -52,8 +56,19 @@ export const baseFilters = {
   organizationSearch: "",
   isForked: true,
   developmentStatus: "hideObsolete",
-} as IFilters;
+};
 
-export const FiltersContext = React.createContext<[IFilters, (_: IFilters) => void]>([baseFilters, () => null]);
+export const useFiltersContext = () => {
+  const [globalContext, setGlobalContext] = React.useContext(GlobalContext);
 
-export const FiltersProvider = FiltersContext.Provider;
+  const filters: IFiltersContext = globalContext.filters;
+
+  const setFilters = (newFilters: IFiltersContext) => {
+    setGlobalContext((oldGlobalContext) => ({
+      ...oldGlobalContext,
+      filters: newFilters,
+    }));
+  };
+
+  return { setFilters, filters };
+};

pwa/src/context/gatsby.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { GlobalContext } from "./global";
 
 export type TScreenSize = "mobile" | "tablet" | "desktop";
 
@@ -8,10 +9,16 @@ export interface IGatsbyContext {
   screenSize: TScreenSize;
 }
 
-export const GatsbyContext = React.createContext<IGatsbyContext>({
+export const defaultGatsbyContext: IGatsbyContext = {
   pageContext: null,
   location: null,
   screenSize: "mobile",
-});
+};
 
-export const GatsbyProvider = GatsbyContext.Provider;
+export const useGatsbyContext = () => {
+  const [globalContext] = React.useContext(GlobalContext);
+
+  const gatsbyContext: IGatsbyContext = globalContext.gatsby;
+
+  return gatsbyContext;
+};

pwa/src/context/global.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { defaultGatsbyContext, IGatsbyContext } from "./gatsby";
+import { defaultFiltersContext, IFiltersContext } from "./filters";
+
+export interface IGlobalContext {
+  initiated: boolean;
+  gatsby: IGatsbyContext;
+  filters: IFiltersContext;
+}
+
+export const defaultGlobalContext: IGlobalContext = {
+  initiated: false,
+  gatsby: defaultGatsbyContext,
+  filters: defaultFiltersContext,
+};
+
+export const GlobalContext = React.createContext<
+  [IGlobalContext, React.Dispatch<React.SetStateAction<IGlobalContext>>]
+>([defaultGlobalContext, () => null]);
+
+export const GlobalProvider = GlobalContext.Provider;

pwa/src/hooks/applications.ts

@@ -2,12 +2,12 @@ import * as React from "react";
 import { QueryClient, useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
-import { IFilters } from "../context/filters";
+import { IFiltersContext } from "../context/filters";
 
 export const useApplications = (queryClient: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const getAll = (filters: IFilters) =>
+  const getAll = (filters: IFiltersContext) =>
     useQuery<any, Error>(["applications", filters], () => API?.Applications.getAll(filters), {
       onError: (error) => {
         throw new Error(error.message);

pwa/src/hooks/components.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { QueryClient, useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
-import { IFilters } from "../context/filters";
+import { IFiltersContext } from "../context/filters";
 
 export const useComponent = (queryClient: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
@@ -17,14 +17,14 @@ export const useComponent = (queryClient: QueryClient) => {
       enabled: !!componentId,
     });
 
-  const getAll = (filters: IFilters) =>
+  const getAll = (filters: IFiltersContext) =>
     useQuery<any, Error>(["components", filters], () => API?.Component.getAll(filters), {
       onError: (error) => {
         throw new Error(error.message);
       },
     });
 
-  const getCount = (filters: IFilters) =>
+  const getCount = (filters: IFiltersContext) =>
     useQuery<any, Error>(["components_count", filters], () => API?.Component.getCount(filters), {
       onError: (error) => {
         throw new Error(error.message);

pwa/src/hooks/organization.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { QueryClient, useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
-import { IFilters } from "../context/filters";
+import { IFiltersContext } from "../context/filters";
 
 export const useOrganization = (queryClient: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
@@ -17,7 +17,7 @@ export const useOrganization = (queryClient: QueryClient) => {
       enabled: !!organizationId,
     });
 
-  const getAll = (filters: IFilters) =>
+  const getAll = (filters: IFiltersContext) =>
     useQuery<any, Error>(["organizations", filters], () => API?.Organization.getAll(filters), {
       onError: (error) => {
         throw new Error(error.message);
@@ -31,7 +31,7 @@ export const useOrganization = (queryClient: QueryClient) => {
       },
     });
 
-  const getCount = (filters: IFilters) =>
+  const getCount = (filters: IFiltersContext) =>
     useQuery<any, Error>(["organizations_count", filters], () => API?.Organization.getCount(filters), {
       onError: (error) => {
         throw new Error(error.message);

pwa/src/hooks/search.ts

@@ -2,12 +2,12 @@ import * as React from "react";
 import { QueryClient, useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
-import { IFilters } from "../context/filters";
+import { IFiltersContext } from "../context/filters";
 
 export const useSearch = (_: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const getSearch = (filters: IFilters) =>
+  const getSearch = (filters: IFiltersContext) =>
     useQuery<any, Error>(["search", filters], () => API?.Search.getSearch(filters), {
       onError: (error) => {
         throw new Error(error.message);