Skip to content

Commit

Permalink
Refactor show checkbox logic and improved hendelse filter types (#363)
Browse files Browse the repository at this point in the history
  • Loading branch information
@andersrognstad
andersrognstad authored Oct 6, 2023
1 parent 1f88554 commit 20fe08b
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 55 deletions.
147 changes: 96 additions & 51 deletions src/components/HendelseTypeFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { HendelseTypeFilters } from '@/context/filters/filterContextState';
import { useTabType } from '@/context/tab/TabTypeContext';
import { trackOnClick } from '@/amplitude/amplitude';
import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
import { Toggles } from '@/data/unleash/types/unleash_types';

const texts = {
trackingLabel: 'HendelseFilter',
Expand All @@ -25,14 +26,17 @@ export const HendelseTekster = {
AKTIVITETSKRAV: 'Aktivitetskrav',
BEHANDLERDIALOG: 'Dialog med behandler',
AKTIVITETSKRAV_VURDER_STANS: 'Vurder stans',
};
} as const;

type HendelseTeksterKeys = keyof typeof HendelseTekster;
type HendelseTeksterValues = typeof HendelseTekster[HendelseTeksterKeys];

interface Props {
personRegister?: PersonregisterState;
}

const enkeltFilterFraTekst = (
tekst: string,
tekst: HendelseTeksterValues,
checked: boolean
): HendelseTypeFilters => {
const filter: HendelseTypeFilters = {
Expand All @@ -50,70 +54,117 @@ const enkeltFilterFraTekst = (

const lagNyttFilter = (
forrigeFilter: HendelseTypeFilters,
tekst: string,
tekst: HendelseTeksterValues,
checked: boolean
): HendelseTypeFilters => {
const filter = { ...forrigeFilter };
if (tekst === HendelseTekster.ARBEIDSGIVER_BISTAND)
filter.arbeidsgiverOnskerMote = checked;
if (tekst === HendelseTekster.MOTEBEHOV) filter.onskerMote = checked;
if (tekst === HendelseTekster.UFORDELTE_BRUKERE)
filter.ufordeltBruker = checked;
if (tekst === HendelseTekster.DIALOGMOTEKANDIDAT)
filter.dialogmotekandidat = checked;
if (tekst === HendelseTekster.DIALOGMOTESVAR) filter.dialogmotesvar = checked;
if (tekst === HendelseTekster.AKTIVITETSKRAV) filter.aktivitetskrav = checked;
if (tekst === HendelseTekster.BEHANDLERDIALOG)
filter.behandlerdialog = checked;
if (tekst === HendelseTekster.AKTIVITETSKRAV_VURDER_STANS)
filter.aktivitetskravVurderStans = checked;
return filter;

switch (tekst) {
case HendelseTekster.ARBEIDSGIVER_BISTAND: {
filter.arbeidsgiverOnskerMote = checked;
return filter;
}
case HendelseTekster.MOTEBEHOV: {
filter.onskerMote = checked;
return filter;
}
case HendelseTekster.UFORDELTE_BRUKERE: {
filter.ufordeltBruker = checked;
return filter;
}
case HendelseTekster.DIALOGMOTEKANDIDAT: {
filter.dialogmotekandidat = checked;
return filter;
}
case HendelseTekster.DIALOGMOTESVAR: {
filter.dialogmotesvar = checked;
return filter;
}
case HendelseTekster.AKTIVITETSKRAV: {
filter.aktivitetskrav = checked;
return filter;
}
case HendelseTekster.BEHANDLERDIALOG: {
filter.behandlerdialog = checked;
return filter;
}
case HendelseTekster.AKTIVITETSKRAV_VURDER_STANS: {
filter.aktivitetskravVurderStans = checked;
return filter;
}
}
};

const isCheckedInState = (
state: HendelseTypeFilters,
tekst: string
tekst: HendelseTeksterValues
): boolean => {
if (tekst === HendelseTekster.ARBEIDSGIVER_BISTAND)
return state.arbeidsgiverOnskerMote;
if (tekst === HendelseTekster.MOTEBEHOV) return state.onskerMote;
if (tekst === HendelseTekster.UFORDELTE_BRUKERE) return state.ufordeltBruker;
if (tekst === HendelseTekster.DIALOGMOTEKANDIDAT)
return state.dialogmotekandidat;
if (tekst === HendelseTekster.DIALOGMOTESVAR) return state.dialogmotesvar;
if (tekst === HendelseTekster.AKTIVITETSKRAV) return state.aktivitetskrav;
if (tekst === HendelseTekster.BEHANDLERDIALOG) return state.behandlerdialog;
if (tekst === HendelseTekster.AKTIVITETSKRAV_VURDER_STANS)
return state.aktivitetskravVurderStans;
return false;
switch (tekst) {
case HendelseTekster.ARBEIDSGIVER_BISTAND:
return state.arbeidsgiverOnskerMote;
case HendelseTekster.MOTEBEHOV:
return state.onskerMote;
case HendelseTekster.UFORDELTE_BRUKERE:
return state.ufordeltBruker;
case HendelseTekster.DIALOGMOTEKANDIDAT:
return state.dialogmotekandidat;
case HendelseTekster.DIALOGMOTESVAR:
return state.dialogmotesvar;
case HendelseTekster.AKTIVITETSKRAV:
return state.aktivitetskrav;
case HendelseTekster.BEHANDLERDIALOG:
return state.behandlerdialog;
case HendelseTekster.AKTIVITETSKRAV_VURDER_STANS:
return state.aktivitetskravVurderStans;
}
};

const showCheckbox = (
key: HendelseTeksterKeys,
toggles: Toggles,
tabType: OverviewTabType
): boolean => {
switch (key) {
case 'AKTIVITETSKRAV':
case 'BEHANDLERDIALOG':
case 'DIALOGMOTEKANDIDAT':
case 'DIALOGMOTESVAR':
case 'MOTEBEHOV':
case 'ARBEIDSGIVER_BISTAND':
return true;
case 'UFORDELTE_BRUKERE':
return tabType === OverviewTabType.ENHET_OVERVIEW;
case 'AKTIVITETSKRAV_VURDER_STANS':
return toggles.isSendingAvForhandsvarselEnabled;
}
};

interface CheckboksElement {
tekst: string;
tekst: HendelseTeksterValues;
checked: boolean;
key: string;
tabType: OverviewTabType;
key: HendelseTeksterKeys;
show: boolean;
}

const Container = styled.div`
margin-bottom: 1rem;
`;

export const HendelseTypeFilter = ({ personRegister }: Props): ReactElement => {
const { toggles } = useFeatureToggles();
const { filterState, dispatch: dispatchFilterAction } = useFilters();
const { tabType } = useTabType();

const elementer = Object.entries(HendelseTekster)
.filter(([, tekst]) => {
return !(
tekst === HendelseTekster.UFORDELTE_BRUKERE &&
tabType === OverviewTabType.MY_OVERVIEW
);
})
.map(([key, tekst]) => {
const checked = isCheckedInState(filterState.selectedHendelseType, tekst);
return { key, tekst, checked } as CheckboksElement;
});
const elementer = Object.entries(HendelseTekster).map(([key, tekst]) => {
const checked = isCheckedInState(filterState.selectedHendelseType, tekst);
const show = showCheckbox(key as HendelseTeksterKeys, toggles, tabType);
return {
key,
tekst,
checked,
show,
} as CheckboksElement;
});

const onCheckedChange = (element: CheckboksElement, checked: boolean) => {
const nyttFilter = lagNyttFilter(
Expand All @@ -135,7 +186,6 @@ export const HendelseTypeFilter = ({ personRegister }: Props): ReactElement => {
{genererHendelseCheckbokser(
elementer,
onCheckedChange,
toggles.isSendingAvForhandsvarselEnabled,
personRegister
)}
</CheckboxGruppe>
Expand All @@ -147,15 +197,10 @@ export const HendelseTypeFilter = ({ personRegister }: Props): ReactElement => {
const genererHendelseCheckbokser = (
elementer: CheckboksElement[],
onCheckedChange: (klikketElement: CheckboksElement, checked: boolean) => void,
isSendingAvForhandsvarselEnabled: boolean,
personRegister?: PersonregisterState
) => {
return elementer
.filter(
(checkboksElement) =>
isSendingAvForhandsvarselEnabled ||
checkboksElement.tekst !== HendelseTekster.AKTIVITETSKRAV_VURDER_STANS
)
.filter((checkboksElement) => checkboksElement.show)
.map((checkboksElement) => {
const filter = enkeltFilterFraTekst(checkboksElement.tekst, true);
const antall = Object.keys(
Expand Down
2 changes: 1 addition & 1 deletion src/context/tab/TabTypeContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { OverviewTabType } from '@/konstanter';

type TabTypeProviderProps = { children: React.ReactNode };

const TabTypeContext = React.createContext<{
export const TabTypeContext = React.createContext<{
tabType: OverviewTabType;
setTabType: (tabType: OverviewTabType) => void;
}>({
Expand Down
73 changes: 70 additions & 3 deletions test/components/HendelseTypeFilter.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { HendelseTypeFilter } from '@/components/HendelseTypeFilter';
import { QueryClientProvider } from '@tanstack/react-query';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render, screen } from '@testing-library/react';
import { expect } from 'chai';
import { NotificationProvider } from '@/context/notification/NotificationContext';
Expand All @@ -11,15 +11,20 @@ import { veilederMock } from '../../mock/syfoveileder/veilederMock';
import { testQueryClient } from '../testQueryClient';
import { aktivEnhetMock } from '../../mock/data/aktivEnhetMock';
import { unleashMock } from '../../mock/mockUnleash';
import { TabTypeContext } from '@/context/tab/TabTypeContext';
import { OverviewTabType } from '@/konstanter';

const queryClient = testQueryClient();
let queryClient: QueryClient;

describe('HendelseTypeFilter', () => {
it('Skal inneholde checkbokser med riktige labels', () => {
beforeEach(() => {
queryClient = testQueryClient();
queryClient.setQueryData(
veiledereQueryKeys.veiledereInfo,
() => veilederMock
);
});
it('Skal inneholde checkbokser med riktige labels', () => {
queryClient.setQueryData(
unleashQueryKeys.toggles(aktivEnhetMock.aktivEnhet, 'Z101010'),
() => unleashMock
Expand Down Expand Up @@ -81,5 +86,67 @@ describe('HendelseTypeFilter', () => {
checked: false,
});
expect(behandlerdialogCheckbox).to.exist;

const vurderStansCheckbox = screen.getByRole('checkbox', {
name: /Vurder stans/,
checked: false,
});
expect(vurderStansCheckbox).to.exist;
});
it('Skal ikke inneholde checkbokser bak toggle når toggles disabled', () => {
queryClient.setQueryData(
veiledereQueryKeys.veiledereInfo,
() => veilederMock
);

render(
<NotificationProvider>
<AktivEnhetContext.Provider
value={{
aktivEnhet: aktivEnhetMock.aktivEnhet,
handleAktivEnhetChanged: () => void 0,
}}
>
<QueryClientProvider client={queryClient}>
<HendelseTypeFilter />
</QueryClientProvider>
</AktivEnhetContext.Provider>
</NotificationProvider>
);

expect(
screen.queryByRole('checkbox', {
name: /Vurder stans/,
})
).to.not.exist;
});
it('Viser ikke ufordelte brukere-checkboks i min oversikt', () => {
render(
<NotificationProvider>
<TabTypeContext.Provider
value={{
tabType: OverviewTabType.MY_OVERVIEW,
setTabType: () => void 0,
}}
>
<AktivEnhetContext.Provider
value={{
aktivEnhet: aktivEnhetMock.aktivEnhet,
handleAktivEnhetChanged: () => void 0,
}}
>
<QueryClientProvider client={queryClient}>
<HendelseTypeFilter />
</QueryClientProvider>
</AktivEnhetContext.Provider>
</TabTypeContext.Provider>
</NotificationProvider>
);

expect(
screen.queryByRole('checkbox', {
name: /Ufordelte brukere/,
})
).to.not.exist;
});
});

0 comments on commit 20fe08b

Please sign in to comment.