From 1f3ee979b794cdf1e07e4ae555b5e5c1d008e38d Mon Sep 17 00:00:00 2001 From: Ken Gullaksen Date: Mon, 27 Nov 2023 12:59:12 +0100 Subject: [PATCH] =?UTF-8?q?h=C3=A5ndter=20navigering=20mellom=20forside=20?= =?UTF-8?q?og=20saksoversikt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Saksoversikt/useOversiktSessionStorage.ts | 23 ++--- .../useOversiktStateTransitions.ts | 99 ++++++++++--------- 2 files changed, 64 insertions(+), 58 deletions(-) diff --git a/src/Pages/Saksoversikt/useOversiktSessionStorage.ts b/src/Pages/Saksoversikt/useOversiktSessionStorage.ts index 439cf5f0f..78db386dc 100644 --- a/src/Pages/Saksoversikt/useOversiktSessionStorage.ts +++ b/src/Pages/Saksoversikt/useOversiktSessionStorage.ts @@ -1,6 +1,6 @@ // Store copy of oversikts-filter in sessionStorage -import { useContext, useEffect, useMemo } from 'react'; +import { useContext, useEffect, useMemo, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import { useSessionStorage } from '../../hooks/useStorage'; import { equalAsSets, Filter } from './useOversiktStateTransitions'; @@ -18,14 +18,12 @@ type SessionStateSaksoversikt = { tekstsoek: string; virksomhetsnumre: string[] | 'ALLEBEDRIFTER'; sortering: SakSortering; - bedrift: string | undefined; sakstyper: string[]; oppgaveTilstand: OppgaveTilstand[]; valgtFilterId: string | undefined; }; type SessionStateForside = { route: '/'; - bedrift: string | undefined; }; type SessionState = SessionStateSaksoversikt | SessionStateForside; @@ -35,7 +33,6 @@ const filterToSessionState = ( valgtFilterId: string | undefined ): SessionStateSaksoversikt => ({ route: '/saksoversikt', - bedrift: undefined, side: filter.side, tekstsoek: filter.tekstsoek, sortering: filter.sortering, @@ -67,12 +64,11 @@ const equalVirksomhetsnumre = ( export const equalSessionState = (a: SessionState, b: SessionState): boolean => { if (a.route === '/' && b.route === '/') { - return a.bedrift === b.bedrift; + return true; } else if (a.route === '/saksoversikt' && b.route === '/saksoversikt') { return ( a.side === b.side && a.tekstsoek === b.tekstsoek && - a.bedrift === b.bedrift && a.sortering === b.sortering && a.valgtFilterId === b.valgtFilterId && equalVirksomhetsnumre(a, b) && @@ -86,14 +82,14 @@ export const equalSessionState = (a: SessionState, b: SessionState): boolean => export const useSessionStateForside = (): void => { const { valgtOrganisasjon } = useContext(OrganisasjonsDetaljerContext); + const [_, setSessionState] = useSessionStorage(SESSION_STORAGE_KEY, { route: '/' }); const bedrift = valgtOrganisasjon?.organisasjon?.OrganizationNumber; useEffect(() => { const sessionState: SessionStateForside = { route: '/', - bedrift, }; - sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(sessionState)); + setSessionState(sessionState); }, [bedrift]); }; @@ -111,17 +107,22 @@ const defaultSessionState: SessionStateSaksoversikt = { tekstsoek: '', virksomhetsnumre: 'ALLEBEDRIFTER', sortering: SakSortering.Oppdatert, - bedrift: undefined, sakstyper: [], oppgaveTilstand: [], valgtFilterId: undefined, }; -export const useSessionState = (alleVirksomheter: Organisasjon[]): UseSessionState => { - const [sessionState, setSessionState] = useSessionStorage( +export const useSessionStateOversikt = (alleVirksomheter: Organisasjon[]): UseSessionState => { + const [sessionStorage, setSessionStorage] = useSessionStorage( SESSION_STORAGE_KEY, defaultSessionState ); + const [sessionState, setSessionState] = useState(() => + sessionStorage.route === '/saksoversikt' ? sessionStorage : defaultSessionState + ); + useEffect(() => { + setSessionStorage(sessionState); + }, [sessionState]); const [params, setParams] = useSearchParams(); diff --git a/src/Pages/Saksoversikt/useOversiktStateTransitions.ts b/src/Pages/Saksoversikt/useOversiktStateTransitions.ts index b98467801..f6bbe9230 100644 --- a/src/Pages/Saksoversikt/useOversiktStateTransitions.ts +++ b/src/Pages/Saksoversikt/useOversiktStateTransitions.ts @@ -1,6 +1,6 @@ import { useEffect, useReducer } from 'react'; import { SIDE_SIZE } from './Saksoversikt'; -import { useSessionState } from './useOversiktSessionStorage'; +import { useSessionStateOversikt } from './useOversiktSessionStorage'; import { useSaker } from './useSaker'; import amplitude from '../../utils/amplitude'; import { @@ -15,53 +15,57 @@ import Immutable, { Set } from 'immutable'; import { Organisasjon } from '../../altinn/organisasjon'; export type Filter = { - side: number, - tekstsoek: string, - virksomheter: Set, - sortering: SakSortering, - sakstyper: string[], - oppgaveTilstand: OppgaveTilstand[], -} + side: number; + tekstsoek: string; + virksomheter: Set; + sortering: SakSortering; + sakstyper: string[]; + oppgaveTilstand: OppgaveTilstand[]; +}; -export type State = { - state: 'loading'; - filter: Filter; - valgtFilterId: string | undefined; - sider: number | undefined; - totaltAntallSaker: number | undefined; - forrigeSaker: Array | null; - sakstyper: Array | undefined; - oppgaveTilstandInfo: Array | undefined; - startTid: Date; -} | { - state: 'done'; - filter: Filter; - valgtFilterId: string | undefined; - sider: number; - saker: Array; - sakstyper: Array; - totaltAntallSaker: number; - oppgaveTilstandInfo: Array; -} | { - state: 'error'; - filter: Filter; - valgtFilterId: string | undefined; - sider: number | undefined; - sakstyper: Array | undefined; - totaltAntallSaker: number | undefined; - oppgaveTilstandInfo: Array | undefined; -} +export type State = + | { + state: 'loading'; + filter: Filter; + valgtFilterId: string | undefined; + sider: number | undefined; + totaltAntallSaker: number | undefined; + forrigeSaker: Array | null; + sakstyper: Array | undefined; + oppgaveTilstandInfo: Array | undefined; + startTid: Date; + } + | { + state: 'done'; + filter: Filter; + valgtFilterId: string | undefined; + sider: number; + saker: Array; + sakstyper: Array; + totaltAntallSaker: number; + oppgaveTilstandInfo: Array; + } + | { + state: 'error'; + filter: Filter; + valgtFilterId: string | undefined; + sider: number | undefined; + sakstyper: Array | undefined; + totaltAntallSaker: number | undefined; + oppgaveTilstandInfo: Array | undefined; + }; type Action = - | { action: 'bytt-filter', filter: Filter } - | { action: 'sett-valgt-filterid', id: string | undefined } + | { action: 'bytt-filter'; filter: Filter } + | { action: 'sett-valgt-filterid'; id: string | undefined } | { action: 'lasting-pågår' } - | { action: 'lasting-ferdig', resultat: SakerResultat } - | { action: 'lasting-feilet' } - + | { action: 'lasting-ferdig'; resultat: SakerResultat } + | { action: 'lasting-feilet' }; export const useOversiktStateTransitions = (alleVirksomheter: Organisasjon[]) => { - const [sessionState, setSessionState] = useSessionState(alleVirksomheter) + const [sessionState, setSessionState] = useSessionStateOversikt(alleVirksomheter); + + console.log('useOversiktStateTransitions', { sessionState }); const [state, dispatch] = useReducer(reduce, { state: 'loading', @@ -78,8 +82,8 @@ export const useOversiktStateTransitions = (alleVirksomheter: Organisasjon[]) => const { loading, data } = useSaker(SIDE_SIZE, state.filter); useEffect(() => { - setSessionState(state.filter, state.valgtFilterId) - }, [state.filter, state.valgtFilterId]) + setSessionState(state.filter, state.valgtFilterId); + }, [state.filter, state.valgtFilterId]); useEffect(() => { if (loading) { @@ -100,7 +104,8 @@ export const useOversiktStateTransitions = (alleVirksomheter: Organisasjon[]) => return { state, byttFilter: (filter: Filter) => dispatch({ action: 'bytt-filter', filter }), - setValgtFilterId: (id: string | undefined) => dispatch({ action: 'sett-valgt-filterid', id }), + setValgtFilterId: (id: string | undefined) => + dispatch({ action: 'sett-valgt-filterid', id }), }; }; @@ -118,7 +123,7 @@ const reduce = (current: State, action: Action): State => { return { ...current, valgtFilterId: action.id, - } + }; case 'lasting-pågår': return { state: 'loading', @@ -186,7 +191,7 @@ const finnForrigeSaker = (state: State): Array | null => { }; export function equalAsSets(a: string[], b: string[]) { - return a.length === b.length && a.every(aa => b.includes(aa)); + return a.length === b.length && a.every((aa) => b.includes(aa)); } export const equalFilter = (a: Filter, b: Filter): boolean =>