Refactor tab type

navikt · Nov 28, 2024 · 3022b5f · 3022b5f
1 parent a947db4
commit 3022b5f
Show file tree

Hide file tree

Showing 21 changed files with 171 additions and 202 deletions.
diff --git a/src/components/Filter/HendelseFilter.tsx b/src/components/Filter/HendelseFilter.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
 import { PersonregisterState } from '@/api/types/personregisterTypes';
 import { filterOnPersonregister } from '@/utils/hendelseFilteringUtils';
-import { OverviewTabType } from '@/konstanter';
 import { useFilters } from '@/context/filters/FilterContext';
 import { ActionType } from '@/context/filters/filterContextActions';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import {
   FilterState,
   HendelseTypeFilter,
 } from '@/context/filters/filterContextState';
 import { Checkbox, CheckboxGroup } from '@navikt/ds-react';
 import * as Amplitude from '@/utils/amplitude';
 import { EventType } from '@/utils/amplitude';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 export const HendelseTekster = {
   UFORDELTE_BRUKERE: 'Ufordelte brukere', // Ikke tildelt veileder
@@ -154,7 +153,7 @@ function isChecked(state: HendelseTypeFilter, hendelse: Hendelse): boolean {
   }
 }
 
-function showCheckbox(hendelse: Hendelse, tabType: OverviewTabType): boolean {
+function showCheckbox(hendelse: Hendelse, tabType: TabType): boolean {
   switch (hendelse) {
     case 'AKTIVITETSKRAV':
     case 'AKTIVITETSKRAV_VURDER_STANS':
@@ -171,7 +170,7 @@ function showCheckbox(hendelse: Hendelse, tabType: OverviewTabType): boolean {
     case 'SNART_SLUTT_PA_SYKEPENGENE':
       return true;
     case 'UFORDELTE_BRUKERE':
-      return tabType === OverviewTabType.ENHET_OVERVIEW;
+      return tabType === TabType.ENHETENS_OVERSIKT;
   }
 }
 
@@ -186,7 +185,7 @@ interface CheckboxElement {
 function hendelseCheckboxes(
   personRegister: PersonregisterState | undefined,
   filterState: FilterState,
-  tabType: OverviewTabType
+  tabType: TabType
 ): CheckboxElement[] {
   return Object.entries(HendelseTekster).map(([hendelse, tekst]) => {
     const filter = initFilter(hendelse as Hendelse);

diff --git a/src/components/FristDataCell.tsx b/src/components/FristDataCell.tsx
@@ -10,8 +10,7 @@ import { AktivitetskravStatus } from '@/api/types/personoversiktTypes';
 import { Button, Table, Tooltip } from '@navikt/ds-react';
 import OppfolgingsoppgaveModal from '@/components/OppfolgingsoppgaveModal';
 import * as Amplitude from '@/utils/amplitude';
-import { useTabType } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 const texts = {
   tooltipAvventer: 'Avventer til',
@@ -51,7 +50,7 @@ function fristerInfo(
     manglendeMedvirkning,
   }: PersonData,
   setIsModalOpen: (open: boolean) => void,
-  selectedTab: OverviewTabType
+  selectedTab: TabType
 ): Frist[] {
   const frister: Frist[] = [];
   const aktivitetskravStatus = aktivitetskravvurdering?.status;
@@ -88,7 +87,7 @@ function fristerInfo(
   if (oppfolgingsoppgave?.frist) {
     frister.push({
       icon: () =>
-        selectedTab === OverviewTabType.MY_OVERVIEW ? (
+        selectedTab === TabType.MIN_OVERSIKT ? (
           <Button
             size="xsmall"
             icon={<FileTextIcon aria-hidden fontSize="1.5rem" />}
@@ -103,7 +102,7 @@ function fristerInfo(
         ),
       date: oppfolgingsoppgave.frist,
       tooltip: `${
-        selectedTab === OverviewTabType.MY_OVERVIEW
+        selectedTab === TabType.MIN_OVERSIKT
           ? 'Åpne oppfølgingsoppgave'
           : 'Oppfølgingsoppgave frist'
       }`,

diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -1,14 +1,10 @@
 import React, { ReactElement } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { MoteoversiktLink } from '@/components/MoteoversiktLink';
-import {
-  enhetOversiktRoutePath,
-  minOversiktRoutePath,
-  sokSykmeldtRoutePath,
-} from '@/routers/AppRouter';
 import { Box, Heading, HStack, Tabs } from '@navikt/ds-react';
 import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
 import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
+import { routes } from '@/routers/routes';
 
 const texts = {
   enhetensOversikt: 'Enhetens oversikt',
@@ -27,16 +23,16 @@ export const NavigationBar = (): ReactElement => {
         <Tabs value={pathname} onChange={(value) => navigate(value)}>
           <Tabs.List>
             <Tabs.Tab
-              value={minOversiktRoutePath}
+              value={routes.MIN_OVERSIKT}
               label={<Heading size="small">{texts.minOversikt}</Heading>}
             />
             <Tabs.Tab
-              value={enhetOversiktRoutePath}
+              value={routes.ENHET_OVERSIKT}
               label={<Heading size="small">{texts.enhetensOversikt}</Heading>}
             />
             {toggles.isSokEnabled && (
               <Tabs.Tab
-                value={sokSykmeldtRoutePath}
+                value={routes.SOK_SYKMELDT}
                 icon={<MagnifyingGlassIcon />}
                 label={<Heading size="small">{texts.sokSykmeldt}</Heading>}
               />

diff --git a/src/components/NewOversiktTable.tsx b/src/components/NewOversiktTable.tsx
@@ -8,11 +8,10 @@ import { Sorting, SortingKey, useSorting } from '@/hooks/useSorting';
 import { LinkSyfomodiaperson } from '@/components/LinkSyfomodiaperson';
 import { toLastnameFirstnameFormat } from '@/utils/stringUtil';
 import { getHendelser } from '@/utils/hendelseColumnUtils';
-import { useTabType } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
 import * as Amplitude from '@/utils/amplitude';
 import { EventType } from '@/utils/amplitude';
 import { OppfolgingstilfelleDTO } from '@/api/types/personoversiktTypes';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 function getVarighetOppfolgingstilfelle(
   oppfolgingstilfelle: OppfolgingstilfelleDTO | undefined
@@ -109,7 +108,7 @@ export function NewOversiktTable({
           {columns
             .filter(
               (column) =>
-                selectedTab === OverviewTabType.ENHET_OVERVIEW ||
+                selectedTab === TabType.ENHETENS_OVERSIKT ||
                 column.sortKey !== 'VEILEDER'
             )
             .map((col, index) => (
@@ -155,7 +154,7 @@ export function NewOversiktTable({
             <Table.DataCell textSize="small">
               <PersonRadVirksomhetColumn personData={persondata} />
             </Table.DataCell>
-            {selectedTab === OverviewTabType.ENHET_OVERVIEW && (
+            {selectedTab === TabType.ENHETENS_OVERSIKT && (
               <Table.DataCell textSize="small">
                 <VeilederColumn personData={persondata} />
               </Table.DataCell>

diff --git a/src/components/Sokeresultat.tsx b/src/components/Sokeresultat.tsx
@@ -13,9 +13,8 @@ import {
   filterOnPersonregister,
 } from '@/utils/hendelseFilteringUtils';
 import { useFilters } from '@/context/filters/FilterContext';
-import { useTabType } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
 import { NewOversikt } from '@/components/NewOversikt';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 interface SokeresultatProps {
   allEvents: Filterable<PersonregisterState>;
@@ -45,7 +44,7 @@ const Sokeresultat = ({ allEvents }: SokeresultatProps) => {
   }, [selectedTab]);
 
   const selectedHendelsetypeFilter =
-    selectedTab === OverviewTabType.MY_OVERVIEW
+    selectedTab === TabType.MIN_OVERSIKT
       ? {
           ...filterState.selectedHendelseType,
           ufordeltBruker: false,

diff --git a/src/components/toolbar/AssignVeileder/TildelVeileder.tsx b/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
@@ -9,7 +9,7 @@ import {
   useAktivVeilederQuery,
   useVeiledereQuery,
 } from '@/data/veiledereQueryHooks';
-import { useTabType } from '@/context/tab/TabTypeContext';
+import { useTabType } from '@/hooks/useTabType';
 
 const dropdownButtonTexts: DropdownButtonTexts = {
   assign: 'Tildel veileder',

diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
@@ -1,12 +1,11 @@
 import TildelVeileder from './AssignVeileder/TildelVeileder';
-import { OverviewTabType } from '@/konstanter';
 import SearchVeileder from './SearchVeileder/SearchVeileder';
 import React from 'react';
 import styled from 'styled-components';
 import themes from '../../styles/themes';
 import { ToolbarWrapperProps } from './ToolbarWrapper';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import PaginationContainer from '@/components/toolbar/PaginationContainer';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 const Innhold = styled.section`
   display: flex;
@@ -56,7 +55,7 @@ const Toolbar = (props: ToolbarProps) => {
             handleTildelVeileder={props.buttonHandler}
             handleSelectAll={props.checkAllHandler}
           />
-          {selectedTab === OverviewTabType.ENHET_OVERVIEW && <SearchVeileder />}
+          {selectedTab === TabType.ENHETENS_OVERSIKT && <SearchVeileder />}
         </Element>
         <PaginationContainer
           numberOfItemsTotal={props.numberOfItemsTotal}

diff --git a/src/containers/Oversikt.tsx b/src/containers/Oversikt.tsx
@@ -13,13 +13,12 @@ import {
   Filterable,
   filterEventsOnVeileder,
 } from '@/utils/hendelseFilteringUtils';
-import { OverviewTabType } from '@/konstanter';
 import { PersonOversiktStatusDTO } from '@/api/types/personoversiktTypes';
 import { useFilters } from '@/context/filters/FilterContext';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import { useAktivVeilederQuery } from '@/data/veiledereQueryHooks';
 import { HendelseFilter } from '@/components/Filter/HendelseFilter';
 import { Box } from '@navikt/ds-react';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 const SokeresultatFiltre = styled.div`
   margin-right: 1rem;
@@ -59,7 +58,7 @@ export const Oversikt = ({
   );
 
   const eventFilterValue =
-    selectedTab === OverviewTabType.MY_OVERVIEW
+    selectedTab === TabType.MIN_OVERSIKT
       ? [aktivVeilederQuery.data?.ident || '']
       : filterState.selectedVeilederIdents;
 

diff --git a/src/containers/OversiktContainer.tsx b/src/containers/OversiktContainer.tsx
@@ -3,9 +3,7 @@ import { usePersonregisterQuery } from '@/data/personregisterHooks';
 import { usePersonoversiktQuery } from '@/data/personoversiktHooks';
 import AppSpinner from '@/components/AppSpinner';
 import { Oversikt } from '@/containers/Oversikt';
-import { OverviewTabType } from '@/konstanter';
 import { NavigationBar } from '@/components/NavigationBar';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import { NotificationBar } from '@/components/error/NotificationBar';
 import ErrorBoundary from '@/components/error/ErrorBoundary';
 import * as Amplitude from '@/utils/amplitude';
@@ -14,31 +12,31 @@ import { Flexjar } from '@/components/flexjar/Flexjar';
 import { StoreKey, useLocalStorageState } from '@/hooks/useLocalStorageState';
 import { getWeeksBetween } from '@/utils/dateUtils';
 import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
-interface Props {
-  tabType: OverviewTabType;
-}
-
-function logPageView(tab: OverviewTabType) {
+function logPageView(tab: TabType) {
   Amplitude.logEvent({
     type: EventType.PageView,
     data: { url: window.location.href, sidetittel: toReadableString(tab) },
   });
 }
 
-function toReadableString(overviewTabType: OverviewTabType): string {
+function toReadableString(overviewTabType: TabType): string {
   switch (overviewTabType) {
-    case OverviewTabType.ENHET_OVERVIEW:
+    case TabType.ENHETENS_OVERSIKT:
       return 'Enhetens oversikt';
-    case OverviewTabType.MY_OVERVIEW:
+    case TabType.MIN_OVERSIKT:
       return 'Min oversikt';
+    case TabType.SOK_SYKMELDT:
+      return 'Søk sykmeldt';
   }
 }
 
-const OversiktContainer = ({ tabType }: Props): ReactElement => {
+const OversiktContainer = (): ReactElement => {
   const personregisterQuery = usePersonregisterQuery();
   const personoversiktQuery = usePersonoversiktQuery();
   const { toggles } = useFeatureToggles();
+  const { selectedTab } = useTabType();
   const [feedbackDate] = useLocalStorageState<Date | null>(
     StoreKey.FLEXJAR_ARENABRUK_FEEDBACK_DATE,
     null
@@ -47,11 +45,9 @@ const OversiktContainer = ({ tabType }: Props): ReactElement => {
     toggles.isFlexjarArenaEnabled &&
     (feedbackDate === null || getWeeksBetween(new Date(), feedbackDate) >= 3);
 
-  const { setTabType } = useTabType();
   useEffect(() => {
-    setTabType(tabType);
-    logPageView(tabType);
-  }, [setTabType, tabType]);
+    logPageView(selectedTab);
+  }, [selectedTab]);
 
   const ContainerContent = (): ReactElement => {
     if (personoversiktQuery.isInitialLoading) {
@@ -73,7 +69,7 @@ const OversiktContainer = ({ tabType }: Props): ReactElement => {
         <NavigationBar />
         <ContainerContent />
         {showFlexjar && personoversiktQuery.isSuccess && (
-          <Flexjar side={toReadableString(tabType)} />
+          <Flexjar side={toReadableString(selectedTab)} />
         )}
       </div>
     </ErrorBoundary>

diff --git a/src/context/tab/TabTypeContext.tsx b/src/context/tab/TabTypeContext.tsx
diff --git a/src/hooks/useTabType.ts b/src/hooks/useTabType.ts
@@ -0,0 +1,21 @@
+import { useLocation } from 'react-router-dom';
+import { Routes } from '@/routers/routes';
+
+export enum TabType {
+  ENHETENS_OVERSIKT = 'ENHETENS_OVERSIKT',
+  MIN_OVERSIKT = 'MIN_OVERSIKT',
+  SOK_SYKMELDT = 'SOK_SYKMELDT',
+}
+
+const routeTabs: Record<Routes, TabType> = {
+  '/enhet': TabType.ENHETENS_OVERSIKT,
+  '/minoversikt': TabType.MIN_OVERSIKT,
+  '/sok': TabType.SOK_SYKMELDT,
+};
+
+export const useTabType = () => {
+  const { pathname } = useLocation();
+  const selectedTab = routeTabs[pathname as Routes];
+
+  return { selectedTab };
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { FilterProvider } from '@/context/filters/FilterContext';
 import { AktivEnhetProvider } from '@/context/aktivEnhet/AktivEnhetContext';
-import { TabTypeProvider } from '@/context/tab/TabTypeContext';
 import { NotificationProvider } from '@/context/notification/NotificationContext';
 import { minutesToMillis } from '@/utils/timeUtils';
 import { isClientError } from '@/api/errors';
@@ -44,16 +43,14 @@ const App = () => {
   return (
     <ErrorBoundary>
       <NotificationProvider>
-        <TabTypeProvider>
-          <AktivEnhetProvider>
-            <FilterProvider>
-              <QueryClientProvider client={queryClient}>
-                <AppRouter />
-                <ReactQueryDevtools initialIsOpen={false} />
-              </QueryClientProvider>
-            </FilterProvider>
-          </AktivEnhetProvider>
-        </TabTypeProvider>
+        <AktivEnhetProvider>
+          <FilterProvider>
+            <QueryClientProvider client={queryClient}>
+              <AppRouter />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
+          </FilterProvider>
+        </AktivEnhetProvider>
       </NotificationProvider>
     </ErrorBoundary>
   );

diff --git a/src/konstanter.ts b/src/konstanter.ts