fix: add current tab number clicks to uri when each tab is clicked (#…

…3288)
City-of-Helsinki · Sep 9, 2024 · a7f2d71 · a7f2d71
1 parent 485308b
commit a7f2d71
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx b/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx
@@ -1,4 +1,7 @@
-import { ALL_APPLICATION_STATUSES } from 'benefit/handler/constants';
+import {
+ ALL_APPLICATION_STATUSES,
+ APPLICATION_LIST_TABS,
+} from 'benefit/handler/constants';
 import FrontPageProvider from 'benefit/handler/context/FrontPageProvider';
 import { APPLICATION_STATUSES, BATCH_STATUSES } from 'benefit-shared/constants';
 import { ApplicationListItemData } from 'benefit-shared/types/application';
@@ -110,39 +113,54 @@ const HandlerIndex: React.FC<ApplicationListProps> = ({
  );
  }
 
+ const updateTabToUrl = (tabNumber: APPLICATION_LIST_TABS): void =>
+ window.history.pushState({ tab }, '', `/?tab=${tabNumber}`);
+
  return (
  <FrontPageProvider>
  <$BackgroundWrapper backgroundColor={layoutBackgroundColor}>
  <MainIngress />
  <Container>
  <Tabs theme={theme.components.tabs} initiallyActiveTab={activeTab}>
  <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
- <Tabs.Tab>
+ <Tabs.Tab
+ onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.ALL)}
+ >
  {getListHeadingByStatus('all', ALL_APPLICATION_STATUSES)}
  </Tabs.Tab>
- <Tabs.Tab>
+ <Tabs.Tab
+ onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.DRAFT)}
+ >
  {getListHeadingByStatus(APPLICATION_STATUSES.DRAFT, [
  APPLICATION_STATUSES.DRAFT,
  ])}
  </Tabs.Tab>
- <Tabs.Tab>
+ <Tabs.Tab
+ onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.RECEIVED)}
+ >
  {getListHeadingByStatus(APPLICATION_STATUSES.RECEIVED, [
  APPLICATION_STATUSES.RECEIVED,
  ])}
  </Tabs.Tab>
- <Tabs.Tab>
+ <Tabs.Tab
+ onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.HANDLING)}
+ >
  {getListHeadingByStatus(APPLICATION_STATUSES.HANDLING, [
  APPLICATION_STATUSES.HANDLING,
  APPLICATION_STATUSES.INFO_REQUIRED,
  ])}
  </Tabs.Tab>
- <Tabs.Tab>
+ <Tabs.Tab
+ onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.ACCEPTED)}
+ >
  {getListHeadingByStatus('pending', [
  APPLICATION_STATUSES.ACCEPTED,
  APPLICATION_STATUSES.REJECTED,
  ])}
  </Tabs.Tab>
- <Tabs.Tab>
+ <Tabs.Tab
+ onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.IN_PAYMENT)}
+ >
  {getListHeadingByStatus('inPayment', [
  APPLICATION_STATUSES.ACCEPTED,
  ])}

diff --git a/frontend/benefit/handler/src/constants.ts b/frontend/benefit/handler/src/constants.ts
@@ -234,6 +234,7 @@ export enum APPLICATION_LIST_TABS {
  HANDLING = '3',
  ACCEPTED = '4',
  REJECTED = '5',
+ IN_PAYMENT = '5',
 }
 
 export const DEFAULT_MINIMUM_RECOVERY_AMOUNT = 20;