From 8c18006427333e5c451cb9614130b50a9f4cf304 Mon Sep 17 00:00:00 2001 From: Mateusz Bacherycz Date: Thu, 7 Nov 2024 12:32:31 +0100 Subject: [PATCH] fix: Back button will update application state based on query params --- packages/frontend/src/api/useParties.ts | 70 +++++++++---------- .../tests/stories/loginPartyContext.spec.ts | 20 +++++- 2 files changed, 54 insertions(+), 36 deletions(-) diff --git a/packages/frontend/src/api/useParties.ts b/packages/frontend/src/api/useParties.ts index bb098deee..7ad8b44bb 100644 --- a/packages/frontend/src/api/useParties.ts +++ b/packages/frontend/src/api/useParties.ts @@ -1,7 +1,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'; import type { PartiesQuery, PartyFieldsFragment } from 'bff-types-generated'; import { useEffect } from 'react'; -import { useSearchParams } from 'react-router-dom'; +import { useLocation, useSearchParams } from 'react-router-dom'; import { normalizeFlattenParties } from '../components/PartyDropdown/normalizeFlattenParties.ts'; import { QUERY_KEYS } from '../constants/queryKeys.ts'; import { getSelectedAllPartiesFromQueryParams, getSelectedPartyFromQueryParams } from '../pages/Inbox/queryParams.ts'; @@ -42,7 +42,7 @@ const setAllPartiesParam = (searchParamString: string) => { export const useParties = (): UsePartiesOutput => { const queryClient = useQueryClient(); - + const location = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); const selectedPartiesQuery = useQuery({ queryKey: [QUERY_KEYS.SELECTED_PARTIES], @@ -99,44 +99,44 @@ export const useParties = (): UsePartiesOutput => { setSelectedParties(data?.parties.filter((party) => partyIds.includes(party.party)) ?? []); }; - // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed - useEffect(() => { - const selectAllOrganizations = () => { - const allOrgParties = - data?.parties?.filter((party) => party.party.includes('organization')).map((party) => party.party) ?? []; - setSelectedPartyIds(allOrgParties, true); - }; - - const selectSpecificParty = () => { - const partyFromQuery = getSelectedPartyFromQueryParams(searchParams); - return partyFromQuery && data?.parties?.find((party) => party.party.includes(partyFromQuery)); - }; - - const selectCurrentEndUser = () => { - return data?.parties?.find((party) => party.isCurrentEndUser); - }; - - const handlePartySelection = () => { - if (getSelectedAllPartiesFromQueryParams(searchParams)) { - selectAllOrganizations(); + const selectAllOrganizations = () => { + const allOrgParties = + data?.parties?.filter((party) => party.party.includes('organization')).map((party) => party.party) ?? []; + setSelectedPartyIds(allOrgParties, true); + }; + + const selectSpecificParty = () => { + const partyFromQuery = getSelectedPartyFromQueryParams(searchParams); + return partyFromQuery && data?.parties?.find((party) => party.party.includes(partyFromQuery)); + }; + + const selectCurrentEndUser = () => { + return data?.parties?.find((party) => party.isCurrentEndUser); + }; + + const handlePartySelection = () => { + if (getSelectedAllPartiesFromQueryParams(searchParams)) { + selectAllOrganizations(); + } else { + const selectedParty = selectSpecificParty(); + const currentEndUser = selectCurrentEndUser(); + + if (selectedParty) { + setSelectedPartyIds([selectedParty.party], false); + } else if (currentEndUser) { + setSelectedPartyIds([currentEndUser.party], false); } else { - const selectedParty = selectSpecificParty(); - const currentEndUser = selectCurrentEndUser(); - - if (selectedParty) { - setSelectedPartyIds([selectedParty.party], false); - } else if (currentEndUser) { - setSelectedParties([currentEndUser]); - } else { - console.warn('No current end user found, unable to select default parties.'); - } + console.warn('No current end user found, unable to select default parties.'); } - }; + } + }; - if (isSuccess && !selectedParties.length && data?.parties?.length > 0) { + // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed + useEffect(() => { + if (isSuccess && data?.parties?.length > 0) { handlePartySelection(); } - }, [isSuccess, selectedParties.length, data?.parties, allOrganizationsSelected]); + }, [isSuccess, data?.parties, location.search]); return { isLoading, diff --git a/packages/frontend/tests/stories/loginPartyContext.spec.ts b/packages/frontend/tests/stories/loginPartyContext.spec.ts index 20ac8a188..6614e41e4 100644 --- a/packages/frontend/tests/stories/loginPartyContext.spec.ts +++ b/packages/frontend/tests/stories/loginPartyContext.spec.ts @@ -75,7 +75,7 @@ test.describe('LoginPartyContext', () => { await expect(page.getByRole('button', { name: 'Test Testesen' })).toBeVisible(); await expect(page.getByRole('link', { name: 'This is a message 1 for Firma AS' })).not.toBeVisible(); - await expect(page.getByTestId('pageLayout-background')).not.toHaveClass('isCompany'); + await expect(page.getByTestId('pageLayout-background')).not.toHaveClass(/.*isCompany.*/); await page.getByRole('button', { name: 'Test Testesen' }).click(); await page.locator('li').filter({ hasText: 'Firma AS' }).click(); @@ -109,4 +109,22 @@ test.describe('LoginPartyContext', () => { await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible(); await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible(); }); + + test('Go-back button updates state and shows correct data and color theme', async ({ page }: { page: Page }) => { + await expect(page.getByRole('button', { name: 'Test Testesen' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).not.toBeVisible(); + + await page.getByRole('button', { name: 'Test Testesen' }).click(); + await page.getByText('Alle virksomheter').click(); + await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).not.toBeVisible(); + await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).toBeVisible(); + await expect(page.getByTestId('pageLayout-background')).toHaveClass(/.*isCompany.*/); + + await page.goBack(); + await expect(page.getByRole('button', { name: 'Test Testesen' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).not.toBeVisible(); + await expect(page.getByTestId('pageLayout-background')).not.toHaveClass(/.*isCompany.*/); + }); });