Merge pull request #395 from OpenCatalogi/feature/OP-98/query-params

feature/OP-98/query-params
OpenCatalogi · Nov 15, 2023 · 1fc577b · 1fc577b
2 parents df1e053 + 23f1232
commit 1fc577b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts
@@ -4,12 +4,14 @@ import { GlobalContext } from "./global";
 export const QUERY_LIMIT_DEFAULT = 10;
 
 export interface IQueryLimitContext {
+  previousComponentsSearchQueryLimit: number;
   componentsSearchQueryLimit: number;
   organizationsQueryLimit: number;
   applicationsQueryLimit: number;
 }
 
 export const defaultQueryLimitContext: IQueryLimitContext = {
+  previousComponentsSearchQueryLimit: QUERY_LIMIT_DEFAULT,
   componentsSearchQueryLimit: QUERY_LIMIT_DEFAULT,
   organizationsQueryLimit: QUERY_LIMIT_DEFAULT,
   applicationsQueryLimit: QUERY_LIMIT_DEFAULT,

diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx
@@ -24,7 +24,7 @@ import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout
 export const ComponentsTemplate: React.FC = () => {
   const { t } = useTranslation();
   const { filters } = useFiltersContext();
-  const { queryLimit } = useQueryLimitContext();
+  const { queryLimit, setQueryLimit } = useQueryLimitContext();
   const { pagination, setPagination } = usePaginationContext();
   const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext();
 
@@ -40,7 +40,10 @@ export const ComponentsTemplate: React.FC = () => {
   const componentsCount = _useComponents.getCount(filters);
 
   React.useEffect(() => {
+    if (queryLimit.previousComponentsSearchQueryLimit === queryLimit.componentsSearchQueryLimit) return;
+
     setPagination({ ...pagination, componentsCurrentPage: 1 });
+    setQueryLimit({ ...queryLimit, previousComponentsSearchQueryLimit: queryLimit.componentsSearchQueryLimit });
   }, [queryLimit.componentsSearchQueryLimit]);
 
   const displaySwitchButtons: IDisplaySwitchButton[] = [

diff --git a/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/horizontalFilters/HorizontalFiltersTemplate.tsx
@@ -24,13 +24,17 @@ export const HorizontalFiltersTemplate: React.FC = () => {
   const watchName = watch("name");
 
   React.useEffect(() => {
+    if (watchName === undefined || watchName === filters._search) return;
+
     if (searchTimeout.current) clearTimeout(searchTimeout.current);
+
     searchTimeout.current = setTimeout(() => {
       setFilters({
         ...filters,
         _search: watchName === undefined ? "" : watchName, //This check is important for the react lifecycle
-      }),
-        setPagination({ ...pagination, componentsCurrentPage: 1 });
+      });
+
+      setPagination({ ...pagination, componentsCurrentPage: 1 });
     }, 500);
   }, [watchName]);
 
@@ -42,7 +46,12 @@ export const HorizontalFiltersTemplate: React.FC = () => {
     >
       <FormField>
         <FormLabel htmlFor={"componentSearchFormInput"}>Zoek op naam</FormLabel>
-        <Textbox id="componentSearchFormInput" {...register("name", { required: true })} invalid={errors["name"]} />
+        <Textbox
+          id="componentSearchFormInput"
+          defaultValue=""
+          {...register("name", { required: true })}
+          invalid={errors["name"]}
+        />
       </FormField>
     </form>
   );

diff --git a/pwa/src/templates/templateParts/resultsTemplates/cards/CardsResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/cards/CardsResultTemplate.tsx
@@ -27,9 +27,10 @@ export const CardsResultTemplate: React.FC<CardsResultTemplateProps> = ({ compon
   return (
     <div className={styles.ComponentsGrid}>
       {_components.map((component) => (
-        <>
+        <React.Fragment key={component.id}>
           {component._self.schema.ref.includes("organisation.schema.json") && (
             <OrganizationCard
+              key={component.id}
               title={{
                 label: component.name,
                 href: `/organizations/${component.id}`,
@@ -72,12 +73,12 @@ export const CardsResultTemplate: React.FC<CardsResultTemplateProps> = ({ compon
               title={{ label: component.name, href: `/applications/${component.id}` }}
               description={component.shortDescription}
               tags={{
-                organization: component?.embedded?.owner.fullName,
+                organization: component?.embedded?.owner?.fullName,
                 githubLink: component?.demoUrl,
               }}
             />
           )}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );

diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
@@ -86,7 +86,7 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
                       {t(
                         _.upperFirst(
                           component._self.schema.ref.includes("component.schema.json")
-                            ? component.embedded?.nl?.embedded?.commonground.layerType ?? t("Unknown")
+                            ? component.embedded?.nl?.embedded?.commonground?.layerType ?? t("Unknown")
                             : "N.V.T.",
                         ),
                       )}