fixed redirect page 1

OpenCatalogi · Feb 29, 2024 · 3bae667 · 3bae667
1 parent 828925d
commit 3bae667
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 21 deletions.
diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts
@@ -6,14 +6,18 @@ export const QUERY_LIMIT_DEFAULT = 10;
 export interface IQueryLimitContext {
   previousComponentsSearchQueryLimit: number;
   componentsSearchQueryLimit: number;
+  previousOrganizationsQueryLimit: number;
   organizationsQueryLimit: number;
+  previousApplicationsQueryLimit: number;
   applicationsQueryLimit: number;
 }
 
 export const defaultQueryLimitContext: IQueryLimitContext = {
   previousComponentsSearchQueryLimit: QUERY_LIMIT_DEFAULT,
   componentsSearchQueryLimit: QUERY_LIMIT_DEFAULT,
+  previousOrganizationsQueryLimit: QUERY_LIMIT_DEFAULT,
   organizationsQueryLimit: QUERY_LIMIT_DEFAULT,
+  previousApplicationsQueryLimit: QUERY_LIMIT_DEFAULT,
   applicationsQueryLimit: QUERY_LIMIT_DEFAULT,
 };
 

diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx
@@ -18,7 +18,7 @@ import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
 export const ApplicationsTemplate: React.FC = () => {
   const { t } = useTranslation();
   const { filters } = useFiltersContext();
-  const { queryLimit } = useQueryLimitContext();
+  const { queryLimit, setQueryLimit } = useQueryLimitContext();
   const { pagination, setPagination } = usePaginationContext();
 
   const queryClient = new QueryClient();
@@ -32,7 +32,10 @@ export const ApplicationsTemplate: React.FC = () => {
   );
 
   React.useEffect(() => {
+    if (queryLimit.previousApplicationsQueryLimit === queryLimit.applicationsQueryLimit) return;
+
     setPagination({ ...pagination, applicationCurrentPage: 1 });
+    setQueryLimit({ ...queryLimit, previousApplicationsQueryLimit: queryLimit.applicationsQueryLimit });
   }, [queryLimit.applicationsQueryLimit]);
 
   return (

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
@@ -39,13 +39,11 @@
 
 .layerAndCategoryContainer {
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--web-app-size-xs);
   margin-block-end: var(--web-app-size-xs);
 }
 
-.layerAndCategoryContainer > *:not(:last-child) {
-  margin-inline-end: var(--web-app-size-xs);
-}
-
 .tags {
   display: flex;
   flex-wrap: wrap;

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -145,7 +145,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
         Math.ceil(elementRect.width) % 2 === 0 ? Math.ceil(elementRect.width) : Math.ceil(elementRect.width) + 1;
       element.style.width = `${newWidth}px`;
       element.style.maxWidth = newWidth < 1170 ? `${newWidth}px` : `${1170}px`;
-    }, 210); // Give the modal some time to finish animating
+    }, 300); // Give the modal some time to finish animating
   };
 
   return (

diff --git a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.module.css b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.module.css
@@ -7,9 +7,8 @@
 }
 
 .container > .backButton {
-  display: none;
-  margin-block-start: var(--web-app-size-2xl);
-  margin-block-end: var(--web-app-size-sm);
+  margin-block-start: var(--web-app-size-sm);
+  margin-block-end: var(--web-app-size-2xl);
 }
 
 .section > *:not(:last-child) {

diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx
@@ -19,14 +19,14 @@ import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout
 export const OrganizationsTemplate: React.FC = () => {
   const { t } = useTranslation();
   const { filters } = useFiltersContext();
-  const { queryLimit } = useQueryLimitContext();
+  const { queryLimit, setQueryLimit } = useQueryLimitContext();
   const { pagination, setPagination } = usePaginationContext();
   const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext();
 
   const queryClient = new QueryClient();
   const _useOrganisation = useOrganization(queryClient);
   const getOrganisations = _useOrganisation.getAll(
-    { ...filters },
+    { ...filters, _search: "" },
     pagination.organizationCurrentPage,
     queryLimit.organizationsQueryLimit,
   );
@@ -53,7 +53,10 @@ export const OrganizationsTemplate: React.FC = () => {
   ];
 
   React.useEffect(() => {
+    if (queryLimit.previousOrganizationsQueryLimit === queryLimit.organizationsQueryLimit) return;
+
     setPagination({ ...pagination, organizationCurrentPage: 1 });
+    setQueryLimit({ ...queryLimit, previousOrganizationsQueryLimit: queryLimit.organizationsQueryLimit });
   }, [queryLimit.organizationsQueryLimit]);
 
   return (

diff --git a/...mplateParts/filters/organizationSearchFilterTemplate/OrganizationSearchFilterTemplate.tsx b/...mplateParts/filters/organizationSearchFilterTemplate/OrganizationSearchFilterTemplate.tsx
@@ -2,9 +2,11 @@ import * as React from "react";
 import { useForm } from "react-hook-form";
 import { useFiltersContext } from "../../../../context/filters";
 import { FormField, FormLabel, Textbox } from "@utrecht/component-library-react/dist/css-module";
+import { usePaginationContext } from "../../../../context/pagination";
 
 export const OrganizationSearchFiltersTemplate: React.FC = () => {
   const { filters, setFilters } = useFiltersContext();
+  const { pagination, setPagination } = usePaginationContext();
   const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
   const {
@@ -22,15 +24,18 @@ export const OrganizationSearchFiltersTemplate: React.FC = () => {
   const watchName = watch("name");
 
   React.useEffect(() => {
+    if (watchName === undefined || watchName === filters.organizationSearch) return;
+
     if (searchTimeout.current) clearTimeout(searchTimeout.current);
-    searchTimeout.current = setTimeout(
-      () =>
-        setFilters({
-          ...filters,
-          organizationSearch: watchName === undefined ? "" : watchName, //This check is important for the react lifecycle
-        }),
-      500,
-    );
+
+    searchTimeout.current = setTimeout(() => {
+      setFilters({
+        ...filters,
+        organizationSearch: watchName === undefined ? "" : watchName, //This check is important for the react lifecycle
+      });
+
+      setPagination({ ...pagination, organizationCurrentPage: 1 });
+    }, 500);
   }, [watchName]);
 
   return (
@@ -41,7 +46,12 @@ export const OrganizationSearchFiltersTemplate: React.FC = () => {
     >
       <FormField>
         <FormLabel htmlFor={"OrganizationSearchFormInput"}>Zoek op naam</FormLabel>
-        <Textbox id="OrganizationSearchFormInput" {...register("name", { required: true })} invalid={errors["name"]} />
+        <Textbox
+          id="OrganizationSearchFormInput"
+          defaultValue=""
+          {...register("name", { required: true })}
+          invalid={!!errors["name"]}
+        />
       </FormField>
     </form>
   );

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -89,7 +89,8 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
       <div className={styles.headerMiddleBar}>
         <Container layoutClassName={styles.primaryNavContainer}>
           <div className={clsx(styles.logoContainer, styles.logoDesktop)}>
-            {window.sessionStorage.getItem("HEADER_LOGO_URL") !== "false" ? (
+            {window.sessionStorage.getItem("HEADER_LOGO_URL") &&
+            window.sessionStorage.getItem("HEADER_LOGO_URL") !== "false" ? (
               <img
                 onClick={() => navigate("/")}
                 src={window.sessionStorage.getItem("HEADER_LOGO_URL") ?? LogoRotterdam}