Merge pull request #172 from ConductionNL/Feature/xw-110/currentPage

Feature/xw-110/currentPage
ConductionNL · Nov 17, 2023 · 32ae83f · 32ae83f
2 parents 6ad5b6d + 203009e
commit 32ae83f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/pwa/src/context/pagination.ts b/pwa/src/context/pagination.ts
@@ -11,15 +11,11 @@ export const defaultPaginationContext: IPaginationContext = {
 
 export const usePaginationContext = () => {
   const [globalContext, setGlobalContext] = React.useContext(GlobalContext);
-  const [currentPage, setCurrentPage] = React.useState<number>(globalContext.pagination.currentPage);
-
-  React.useEffect(() => {
-    setPagination({ currentPage });
-  }, [currentPage]);
+  const pagination: IPaginationContext = globalContext.pagination;
 
   const setPagination = (newFilters: IPaginationContext) => {
-    setGlobalContext((oldGlobalContext) => ({ ...oldGlobalContext, pagination: newFilters }));
+    setGlobalContext((context) => ({ ...context, pagination: { ...globalContext.pagination, ...newFilters } }));
   };
 
-  return { currentPage, setCurrentPage };
+  return { pagination, setPagination };
 };
diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts
@@ -5,10 +5,12 @@ export const QUERY_LIMIT_DEFAULT = 12;
 
 export interface IQueryLimitContext {
   openWooObjectsQueryLimit: number;
+  previousOpenWooObjectsQueryLimit: number;
 }
 
 export const defaultQueryLimitContext: IQueryLimitContext = {
   openWooObjectsQueryLimit: QUERY_LIMIT_DEFAULT,
+  previousOpenWooObjectsQueryLimit: QUERY_LIMIT_DEFAULT,
 };
 
 export const useQueryLimitContext = () => {

diff --git a/pwa/src/services/initiateEnvironment.ts b/pwa/src/services/initiateEnvironment.ts
@@ -10,7 +10,7 @@ export const initiateEnvironment = () => {
     window.sessionStorage.setItem("ORGANISATION_NAME", process.env.GATSBY_ORGANISATION_NAME ?? "");
     window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", process.env.GATSBY_JUMBOTRON_IMAGE_URL ?? "");
     window.sessionStorage.setItem("FOOTER_LOGO_HREF", process.env.GATSBY_FOOTER_LOGO_HREF ?? "");
-    window.sessionStorage.setItem("FOOTER_CONTENT", process.env.FOOTER_CONTENT ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT", process.env.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OIDN_NUMBER", process.env.GATSBY_OIDN_NUMBER ?? "");
 

diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -15,16 +15,19 @@ import { useQueryLimitContext } from "../../context/queryLimit";
 import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect";
 
 export const LandingTemplate: React.FC = () => {
-  const { currentPage, setCurrentPage } = usePaginationContext();
-  const { filters } = useFiltersContext();
   const { t } = useTranslation();
-  const { queryLimit } = useQueryLimitContext();
+  const { filters } = useFiltersContext();
+  const { pagination, setPagination } = usePaginationContext();
+  const { queryLimit, setQueryLimit } = useQueryLimitContext();
 
   const queryClient = new QueryClient();
-  const getItems = useOpenWoo(queryClient).getAll(filters, currentPage, queryLimit.openWooObjectsQueryLimit);
+  const getItems = useOpenWoo(queryClient).getAll(filters, pagination.currentPage, queryLimit.openWooObjectsQueryLimit);
 
   React.useEffect(() => {
-    setCurrentPage(1);
+    if (queryLimit.openWooObjectsQueryLimit === queryLimit.previousOpenWooObjectsQueryLimit) return;
+
+    setPagination({ currentPage: 1 });
+    setQueryLimit({ ...queryLimit, previousOpenWooObjectsQueryLimit: queryLimit.openWooObjectsQueryLimit });
   }, [queryLimit.openWooObjectsQueryLimit]);
 
   return (
@@ -43,7 +46,8 @@ export const LandingTemplate: React.FC = () => {
                 <Pagination
                   ariaLabels={{ previousPage: t("Previous page"), nextPage: t("Next page"), page: t("Page") }}
                   totalPages={getItems.data.pages}
-                  {...{ currentPage, setCurrentPage }}
+                  currentPage={getItems.data.page}
+                  setCurrentPage={(page: any) => setPagination({ currentPage: page })}
                 />
                 <PaginationLimitSelectComponent queryLimitName={"openWooObjectsQueryLimit"} />
               </div>

diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx
@@ -16,6 +16,7 @@ import { filtersToUrlQueryParams } from "../../../services/filtersToQueryParams"
 import { navigate } from "gatsby";
 import { useGatsbyContext } from "../../../context/gatsby";
 import { useAvailableFilters } from "../../../hooks/availableFilters";
+import { usePaginationContext } from "../../../context/pagination";
 
 interface FiltersTemplateProps {
   isLoading: boolean;
@@ -24,6 +25,7 @@ interface FiltersTemplateProps {
 export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) => {
   const { t } = useTranslation();
   const { filters, setFilters } = useFiltersContext();
+  const { setPagination } = usePaginationContext();
   const { gatsbyContext } = useGatsbyContext();
   const [queryParams, setQueryParams] = React.useState<IFiltersContext>(defaultFiltersContext);
   const [categoryParams, setCategoryParams] = React.useState<any>();
@@ -102,6 +104,7 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
 
     setQueryParams(filters);
     navigate(`/${filtersToUrlQueryParams(filters)}`);
+    setPagination({ currentPage: 1 });
   }, [filters]);
 
   const getCategories = useAvailableFilters().getCategories();