fix: Back button will update application state based on query params

digdir · Nov 7, 2024 · 8c18006 · 8c18006
1 parent 46a869b
commit 8c18006
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 36 deletions.
diff --git 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<PartyFieldsFragment[]>({
     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
@@ -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.*/);
+  });
 });