diff --git a/pwa/src/context/pagination.ts b/pwa/src/context/pagination.ts index b3ddd388..2e8e2652 100644 --- 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(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 index 164c5eac..9e5d794a 100644 --- 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 index 6ffa76dc..be65bf24 100644 --- 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 index 195fb473..6b554faf 100644 --- 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 = () => { setPagination({ currentPage: page })} /> diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/FiltersTemplate.tsx index 60c62f53..16a68374 100644 --- 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 = ({ isLoading }) => { const { t } = useTranslation(); const { filters, setFilters } = useFiltersContext(); + const { setPagination } = usePaginationContext(); const { gatsbyContext } = useGatsbyContext(); const [queryParams, setQueryParams] = React.useState(defaultFiltersContext); const [categoryParams, setCategoryParams] = React.useState(); @@ -102,6 +104,7 @@ export const FiltersTemplate: React.FC = ({ isLoading }) = setQueryParams(filters); navigate(`/${filtersToUrlQueryParams(filters)}`); + setPagination({ currentPage: 1 }); }, [filters]); const getCategories = useAvailableFilters().getCategories();