Bugfix for valg av mal i ident og org som etter navigering frem og tilbake kunne være stuck

Fjernet GruppeOversiktConnector og refaktorert GruppeOversikt
Fikset andre diverse mindre bugs

#deploy-test-dolly-backend

Author: stigus

apps/dolly-frontend/src/main/js/package-lock.json

@@ -8,9 +8,7 @@ const OrganisasjonTenorSoekPage = lazyWithPreload(
 	() => import('@/pages/organisasjoner/OrganisasjonTenorSoek/OrganisasjonTenorSoekPage'),
 )
 const NyansettelserPage = lazyWithPreload(() => import('@/pages/nyansettelser/NyansettelserPage'))
-const GruppeOversikt = lazyWithPreload(
-	() => import('@/pages/gruppeOversikt/GruppeOversiktConnector'),
-)
+const GruppeOversikt = lazyWithPreload(() => import('@/pages/gruppeOversikt/GruppeOversikt'))
 const Organisasjon = lazyWithPreload(() => import('@/pages/organisasjoner/Organisasjoner'))
 const MinSide = lazyWithPreload(() => import('@/pages/minSide/MinSide'))
 const UI = lazyWithPreload(() => import('@/pages/ui/index'))

apps/dolly-frontend/src/main/js/src/allRoutes.tsx

@@ -60,7 +60,7 @@ export const MalVelgerIdent = ({ brukernavn, gruppeId }: MalVelgerProps) => {
 			opts.mal = undefined
 			const options = BVOptions(opts, gruppeId, dollyEnvironments)
 			formMethods.reset(options.initialValues)
-			formMethods.setValue('mal', undefined)
+			formMethods.setValue('mal', null)
 			formMethods.setValue('gruppeId', gruppeId)
 		}
 	}
@@ -70,13 +70,13 @@ export const MalVelgerIdent = ({ brukernavn, gruppeId }: MalVelgerProps) => {
 		const options = BVOptions(opts, gruppeId, dollyEnvironments)
 		toggleMalAktiv()
 		formMethods.reset(options.initialValues)
-		formMethods.setValue('mal', undefined)
+		formMethods.setValue('mal', null)
 		formMethods.setValue('gruppeId', gruppeId)
 	}
 
 	const handleBrukerChange = (event: { value: string }) => {
 		setBruker(event.value)
-		formMethods.setValue('mal', undefined)
+		formMethods.setValue('mal', null)
 	}
 
 	const valgtMalValue = formMethods.watch('mal')

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/startModal/MalVelgerIdent.tsx

@@ -29,14 +29,14 @@ const Steg0 = () => {
 		<div className="start-bestilling-modal">
 			{!isOrganisasjon && (
 				<>
-					<div className="dolly-panel dolly-panel-open">
-						<VelgGruppe formMethods={formMethods} title={'Hvilken gruppe vil du bestille til?'} />
-					</div>
 					{isNyIdent && (
 						<div className="dolly-panel dolly-panel-open">
 							<VelgIdenttype />
 						</div>
 					)}
+					<div className="dolly-panel dolly-panel-open">
+						<VelgGruppe formMethods={formMethods} title={'Hvilken gruppe vil du bestille til?'} />
+					</div>
 				</>
 			)}
 			<div className="dolly-panel dolly-panel-open">

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg0/Steg0.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import useBoolean from '@/utils/hooks/useBoolean'
 import NavButton from '@/components/ui/button/NavButton/NavButton'
 import Icon from '@/components/ui/icon/Icon'
 import Liste from './Liste'
 import { useCurrentBruker } from '@/utils/hooks/useBruker'
 import { useGrupper } from '@/utils/hooks/useGruppe'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { setSidetall, setVisning } from '@/ducks/finnPerson'
 import { Hjelpetekst } from '@/components/hjelpetekst/Hjelpetekst'
 import { bottom } from '@popperjs/core'
@@ -15,15 +15,15 @@ import { TestComponentSelectors } from '#/mocks/Selectors'
 import FinnPersonBestilling from '@/pages/gruppeOversikt/FinnPersonBestilling'
 import { RedigerGruppe } from '@/components/redigerGruppe/RedigerGruppe'
 
-type GruppeOversiktProps = {
-	importerteZIdenter: any
-	sidetall: number
-	sideStoerrelse: number
-	gruppeInfo: any
-	searchActive: boolean
+type RootState = {
+	search: any
+	finnPerson: {
+		sidetall: number
+		sideStoerrelse: number
+	}
 }
 
-export enum VisningType {
+export const enum VisningType {
 	MINE = 'mine',
 	ALLE = 'alle',
 	FAVORITTER = 'favoritter',
@@ -47,29 +47,57 @@ const StyledDiv = styled.div`
 	}
 `
 
-const GruppeOversikt = ({ searchActive, sideStoerrelse, sidetall }: GruppeOversiktProps) => {
-	const {
-		currentBruker: { brukerId, brukertype },
-	} = useCurrentBruker()
-	const [visningType, setVisningType] = useState(VisningType.MINE)
+const GruppeOversikt: React.FC = () => {
+	const searchActive = useSelector((state: RootState) => Boolean(state.search))
+	const sidetall = useSelector((state: RootState) => state.finnPerson.sidetall)
+	const sideStoerrelse = useSelector((state: RootState) => state.finnPerson.sideStoerrelse)
+
+	const dispatch = useDispatch()
+	const { currentBruker } = useCurrentBruker()
+	const { brukerId, brukertype } = currentBruker
+
+	const [visningType, setVisningType] = useState<VisningType>(VisningType.MINE)
 	const [visNyGruppeState, visNyGruppe, skjulNyGruppe] = useBoolean(false)
+
 	const { grupper, loading } = useGrupper(
 		sidetall,
 		sideStoerrelse,
 		visningType === VisningType.ALLE ? null : brukerId,
 	)
-	const dispatch = useDispatch()
 
 	useEffect(() => {
 		dispatch(setVisning('personer'))
-	}, [])
+	}, [dispatch])
 
-	const byttVisning = (value: VisningType) => {
-		setVisningType(value)
-		dispatch(setSidetall(0))
-	}
+	const isBankIdBruker = useMemo(() => brukertype === 'BANKID', [brukertype])
 
-	const bankIdBruker = brukertype === 'BANKID'
+	const gruppeDetaljer = useMemo(
+		() => ({
+			pageSize: sideStoerrelse,
+			antallPages:
+				visningType === VisningType.FAVORITTER
+					? Math.ceil((grupper?.favoritter?.length || 0) / sideStoerrelse)
+					: grupper?.antallPages,
+			antallElementer:
+				visningType === VisningType.FAVORITTER
+					? grupper?.favoritter?.length
+					: grupper?.antallElementer,
+		}),
+		[grupper, sideStoerrelse, visningType],
+	)
+
+	const items = useMemo(
+		() => (visningType === VisningType.FAVORITTER ? grupper?.favoritter : grupper?.contents),
+		[grupper, visningType],
+	)
+
+	const handleVisningChange = useCallback(
+		(value: VisningType) => {
+			setVisningType(value)
+			dispatch(setSidetall(0))
+		},
+		[dispatch],
+	)
 
 	return (
 		<div className="oversikt-container">
@@ -79,11 +107,10 @@ const GruppeOversikt = ({ searchActive, sideStoerrelse, sidetall }: GruppeOversi
 					className="page-header flexbox--align-center--justify-start"
 				>
 					<h1>Grupper</h1>
-					<Hjelpetekst placement={bottom}>
-						Gruppene inneholder alle personene dine (FNR/DNR/NPID).
-					</Hjelpetekst>
+					<Hjelpetekst placement={bottom}>temp</Hjelpetekst>
 				</div>
 			</div>
+
 			<div className="toolbar gruppe--full">
 				<StyledNavButton
 					data-testid={TestComponentSelectors.BUTTON_NY_GRUPPE}
@@ -92,55 +119,45 @@ const GruppeOversikt = ({ searchActive, sideStoerrelse, sidetall }: GruppeOversi
 				>
 					Ny gruppe
 				</StyledNavButton>
-				{!bankIdBruker && <FinnPersonBestilling />}
+				{!isBankIdBruker && <FinnPersonBestilling />}
 			</div>
 
 			{visNyGruppeState && <RedigerGruppe onCancel={skjulNyGruppe} />}
 
 			<StyledDiv className="gruppe--flex-column-center">
 				<ToggleGroup
 					value={visningType}
-					onChange={byttVisning}
-					size={'small'}
+					onChange={handleVisningChange}
+					size="small"
 					style={{ backgroundColor: '#ffffff' }}
 				>
 					<StyledToggleItem
 						data-testid={TestComponentSelectors.TOGGLE_MINE}
 						value={VisningType.MINE}
 					>
-						<Icon kind={'man-silhouette'} />
+						<Icon kind="man-silhouette" />
 						Mine
 					</StyledToggleItem>
 					<StyledToggleItem
 						data-testid={TestComponentSelectors.TOGGLE_FAVORITTER}
 						value={VisningType.FAVORITTER}
 					>
-						<Icon kind={'star-light'} />
+						<Icon kind="star-light" />
 						Favoritter
 					</StyledToggleItem>
 					<StyledToggleItem
 						data-testid={TestComponentSelectors.TOGGLE_ALLE}
 						value={VisningType.ALLE}
 					>
-						<Icon kind={'group-light'} />
+						<Icon kind="group-light" />
 						Alle
 					</StyledToggleItem>
 				</ToggleGroup>
 			</StyledDiv>
 
 			<Liste
-				gruppeDetaljer={{
-					pageSize: sideStoerrelse,
-					antallPages:
-						visningType === VisningType.FAVORITTER
-							? grupper?.favoritter?.length / sideStoerrelse
-							: grupper?.antallPages,
-					antallElementer:
-						visningType === VisningType.FAVORITTER
-							? grupper?.favoritter?.length
-							: grupper?.antallElementer,
-				}}
-				items={visningType === VisningType.FAVORITTER ? grupper?.favoritter : grupper?.contents}
+				gruppeDetaljer={gruppeDetaljer}
+				items={items}
 				isFetching={loading}
 				searchActive={searchActive}
 				visSide={sidetall}
@@ -149,4 +166,5 @@ const GruppeOversikt = ({ searchActive, sideStoerrelse, sidetall }: GruppeOversi
 		</div>
 	)
 }
+
 export default GruppeOversikt

apps/dolly-frontend/src/main/js/src/pages/gruppeOversikt/GruppeOversikt.tsx

@@ -54,7 +54,7 @@ export const MalVelgerOrganisasjon = ({ brukernavn, gruppeId }: MalVelgerProps)
 			formMethods.setValue('mal', mal.value)
 		} else {
 			opts.mal = undefined
-			formMethods.setValue('mal', undefined)
+			formMethods.setValue('mal', null)
 			const options = BVOptions(opts, gruppeId, dollyEnvironments)
 			formMethods.reset(options.initialValues)
 		}
@@ -63,14 +63,14 @@ export const MalVelgerOrganisasjon = ({ brukernavn, gruppeId }: MalVelgerProps)
 	const handleMalEnable = () => {
 		opts.mal = undefined
 		toggleMalAktiv()
-		formMethods.setValue('mal', undefined)
+		formMethods.setValue('mal', null)
 		const options = BVOptions(opts, gruppeId, dollyEnvironments)
 		formMethods.reset(options.initialValues)
 	}
 
 	const handleBrukerChange = (event: { value: string }) => {
 		setBruker(event.value)
-		formMethods.setValue('mal', undefined)
+		formMethods.setValue('mal', null)
 	}
 
 	return (