diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 6b85beec3..4953bfcbe 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -18,8 +18,8 @@ function App() { } /> } /> } /> - } /> } /> + } /> } /> } /> diff --git a/packages/frontend/src/api/useParties.ts b/packages/frontend/src/api/useParties.ts index bd6914b5c..781ca2570 100644 --- a/packages/frontend/src/api/useParties.ts +++ b/packages/frontend/src/api/useParties.ts @@ -42,16 +42,24 @@ const fetchParties = async (): Promise => { }; }; -const setAllPartiesParam = (searchParamString: string) => { +const createParamsForKey = (searchParamString: string, key: string, value: string): URLSearchParams => { const params = new URLSearchParams(searchParamString); - params.set('allParties', 'true'); - return params.toString(); + params.set(key, value); + return params; }; export const useParties = (): UsePartiesOutput => { const queryClient = useQueryClient(); const location = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); + + const handleChangSearchParams = (searchParams: URLSearchParams) => { + /* Avoid setting search params if they are the same as the current ones */ + if (searchParams.toString() !== new URLSearchParams(location.search).toString()) { + setSearchParams(searchParams, { replace: true }); + } + }; + const selectedPartiesQuery = useQuery({ queryKey: [QUERY_KEYS.SELECTED_PARTIES], enabled: false, @@ -87,15 +95,24 @@ export const useParties = (): UsePartiesOutput => { const setSelectedPartyIds = (partyIds: string[], allOrganizationsSelected: boolean) => { setAllOrganizationsSelected(allOrganizationsSelected); - const isPerson = partyIds[0].includes('person'); + const isCurrentEndUser = partyIds[0].includes('person'); + const searchParamsString = searchParams.toString(); if (allOrganizationsSelected) { - setSearchParams(setAllPartiesParam(searchParams.toString()), { replace: true }); - } else if (isPerson) { - setSearchParams(stripQueryParamsForParty(searchParams.toString()), { replace: true }); + const allPartiesParams = createParamsForKey(searchParamsString, 'allParties', 'true'); + handleChangSearchParams(allPartiesParams); + } else if (isCurrentEndUser) { + /* endUser (type=person) is the only party selected and is default, this is the only case + * where we want to remove the party query param from the URL + */ + const currentEndUserParams = new URLSearchParams(stripQueryParamsForParty(searchParamsString)); + handleChangSearchParams(currentEndUserParams); } else { - const newSearchParams = new URLSearchParams(stripQueryParamsForParty(searchParams.toString())); - newSearchParams.append('party', encodeURIComponent(partyIds[0])); - setSearchParams(newSearchParams, { replace: true }); + const params = createParamsForKey( + stripQueryParamsForParty(searchParamsString), + 'party', + encodeURIComponent(partyIds[0]), + ); + handleChangSearchParams(params); } setSelectedParties(data?.parties.filter((party) => partyIds.includes(party.party)) ?? []); }; diff --git a/packages/frontend/src/components/BackButton/BackButton.tsx b/packages/frontend/src/components/BackButton/BackButton.tsx index 911323cd6..a5cfb0413 100644 --- a/packages/frontend/src/components/BackButton/BackButton.tsx +++ b/packages/frontend/src/components/BackButton/BackButton.tsx @@ -5,14 +5,10 @@ import { Link } from 'react-router-dom'; import { Button } from '@digdir/designsystemet-react'; import styles from './backButton.module.css'; -interface BackButtonProps { - pathTo: string; -} - -export function BackButton({ pathTo }: BackButtonProps) { +export function BackButton({ path }: { path: string }) { const { t } = useTranslation(); return ( - +