- Refaktorer SoekForm.tsx for å erstatte nestede <button>-element…

…er med en `Button`-komponent pakket inn i en `div`

- Sørg for at `KategoriEmptyButtonWrapper` inneholder `Button`-komponenten for å forhindre `<button>` inne i en annen `<button>`
- Oppdater `NyansettelserPage.tsx` for å pakke `<th>`-elementer inn i et `<tr>`-element innenfor `<thead>`
- Korriger HTML-strukturen for å unngå en hydratiseringsfeil forårsaket av ugyldig nesting av elementer
- Mye endring av redux funskjonalitet og connectorer
- Byttet pagineringen vi hadde med DS sin versjon og refaktorert til å fungere med listene våre
- Oppdatering og refaktor diverse steder
#deploy-test-frontend

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

@@ -42,7 +42,6 @@
     "react-hook-form": "^7.53.1",
     "react-inlinesvg": "^4.1.4",
     "react-modal": "^3.16.1",
-    "react-paginate": "^8.2.0",
     "react-select": "^5.8.2",
     "react-syntax-highlighter": "^15.6.1",
     "react-toastify": "^11.0.2",

apps/dolly-frontend/src/main/js/src/components/ui/button/FavoriteButton/FavoriteButton.tsx

@@ -1,28 +1,34 @@
 import Button from '../Button'
 import { useCurrentBruker } from '@/utils/hooks/useBruker'
 import { REGEX_BACKEND_BRUKER, useMatchMutate } from '@/utils/hooks/useMutate'
+import { useDispatch } from 'react-redux'
+import { addFavorite, removeFavorite } from '@/ducks/bruker'
 
 function mutateUserOptimisticly(mutate, response) {
 	return mutate(REGEX_BACKEND_BRUKER, response)
 }
 
-export default function FavoriteButton({ hideLabel, addFavorite, removeFavorite, groupId }) {
-	const {
-		currentBruker: { favoritter },
-	} = useCurrentBruker()
+export default function FavoriteButton({ hideLabel, groupId }: any) {
+	const dispatch = useDispatch()
+
+	const { currentBruker } = useCurrentBruker()
 
 	const mutate = useMatchMutate()
 
-	if (!favoritter) {
+	if (!currentBruker?.favoritter) {
 		return null
 	}
 
-	const isFavorite = favoritter.some((fav) => fav.id === groupId)
+	const isFavorite = currentBruker?.favoritter.some((fav: any) => fav.id === groupId)
 
 	const handleClick = () =>
 		isFavorite
-			? removeFavorite(groupId).then((resp) => mutateUserOptimisticly(mutate, resp?.value?.data))
-			: addFavorite(groupId).then((resp) => mutateUserOptimisticly(mutate, resp?.value?.data))
+			? dispatch(removeFavorite(groupId)).then((resp) =>
+					mutateUserOptimisticly(mutate, resp?.value?.data),
+				)
+			: dispatch(addFavorite(groupId)).then((resp) =>
+					mutateUserOptimisticly(mutate, resp?.value?.data),
+				)
 
 	return (
 		<Button

apps/dolly-frontend/src/main/js/src/components/ui/button/PersonIBrukButton/PersonIBrukButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { SyntheticEvent, useState } from 'react'
 import { DollyCheckbox } from '@/components/ui/form/inputs/checbox/Checkbox'
 import styled from 'styled-components'
 
@@ -14,7 +14,7 @@ const StyledSwitch = styled(DollyCheckbox)`
 
 export const PersonIBrukButton = ({ ident, updateIdentIbruk, ...props }) => {
 	const [brukt, setBrukt] = useState(ident.ibruk)
-	const handleOnChange = (event) => {
+	const handleOnChange = (event: any) => {
 		const erIBruk = event.target.checked
 		setBrukt(erIBruk)
 		updateIdentIbruk(ident.ident, erIBruk)
@@ -25,7 +25,7 @@ export const PersonIBrukButton = ({ ident, updateIdentIbruk, ...props }) => {
 			title={brukt ? 'Marker som ikke i bruk' : 'Marker som i bruk'}
 			checked={brukt}
 			onChange={handleOnChange}
-			onClick={(e) => e.stopPropagation()}
+			onClick={(e: SyntheticEvent) => e.stopPropagation()}
 			isSwitch
 			{...props}
 		/>

apps/dolly-frontend/src/main/js/src/components/ui/dollyTable/DollyTable.tsx

@@ -1,13 +1,13 @@
 import Table from './table/Table'
-import { Pagination } from '@/components/ui/dollyTable/pagination/Pagination'
+import { DollyPagination } from '@/components/ui/dollyTable/pagination/DollyPagination'
 import { useReduxSelector } from '@/utils/hooks/useRedux'
 
 export const DollyTable = ({ data, pagination, gruppeDetaljer = {}, ...props }) => {
 	const sidetall = useReduxSelector((state) => state.finnPerson.sidetall) || 0
 	if (!pagination) return <Table data={data} {...props} />
 
 	return (
-		<Pagination
+		<DollyPagination
 			visSide={sidetall}
 			items={data}
 			gruppeDetaljer={gruppeDetaljer}

apps/dolly-frontend/src/main/js/src/components/ui/dollyTable/pagination/Pagination.tsx → apps/dolly-frontend/src/main/js/src/components/ui/dollyTable/pagination/DollyPagination.tsx

@@ -1,12 +1,11 @@
 import React, { Fragment, useEffect, useState } from 'react'
-import ReactPaginate from 'react-paginate'
-import Icon from '@/components/ui/icon/Icon'
 import ItemCountSelect from './ItemCountSelect/ItemCountSelect'
 
-import './Pagination.less'
+import './DollyPagination.less'
 import { setSideStoerrelse, setSidetall } from '@/ducks/finnPerson'
 import { useDispatch } from 'react-redux'
 import { useLocation } from 'react-router'
+import { Pagination } from '@navikt/ds-react'
 
 type PaginationProps = {
 	visSide?: number
@@ -16,11 +15,11 @@ type PaginationProps = {
 }
 const ITEM_PER_PAGE = 10
 
-export const Pagination = ({
+export const DollyPagination = ({
 	gruppeDetaljer: { antallElementer, antallPages, pageSize },
 	items,
 	render,
-	visSide = 0,
+	visSide = 1,
 }: PaginationProps) => {
 	const [currentPage, setCurrentPage] = useState(visSide)
 	const [currentPageSize, setCurrentPageSize] = useState(pageSize || ITEM_PER_PAGE)
@@ -33,10 +32,10 @@ export const Pagination = ({
 
 	const dispatch = useDispatch()
 
-	const pageChangeHandler = (event: { selected: number }) => {
+	const pageChangeHandler = (page: number) => {
 		location.state = null
-		dispatch(setSidetall(event.selected))
-		setCurrentPage(event.selected)
+		dispatch(setSidetall(page - 1))
+		setCurrentPage(page - 1)
 	}
 
 	const itemCountHandler = (event: { value: number }) => {
@@ -86,15 +85,12 @@ export const Pagination = ({
 					<span className="pagination-label">
 						Viser {startIndex}-{lastIndex > itemCount ? itemCount : lastIndex} av {itemCount}
 					</span>
-					<ReactPaginate
-						containerClassName="pagination-container"
-						forcePage={currentPage}
-						pageCount={pageCount}
-						pageRangeDisplayed={2}
-						marginPagesDisplayed={1}
+					<Pagination
+						style={{ marginTop: '5px' }}
+						page={currentPage + 1}
+						count={pageCount}
+						size={'xsmall'}
 						onPageChange={pageChangeHandler}
-						previousLabel={<Icon size={11} kind="arrow-left" />}
-						nextLabel={<Icon size={11} kind="arrow-right" />}
 					/>
 				</Fragment>
 			)}

apps/dolly-frontend/src/main/js/src/components/ui/soekForm/SoekForm.tsx

@@ -19,7 +19,7 @@ export const SoekefeltWrapper = styled.div`
 	flex-direction: column;
 	margin-bottom: 20px;
 	background-color: white;
-	border: 1px @color-bg-grey-border;
+	border: 1px solid #ccc;
 	border-radius: 4px;
 `
 
@@ -82,7 +82,7 @@ const KategoriCircle = styled.div`
 	}
 `
 
-const KategoriEmptyButton = styled(Button)`
+const KategoriEmptyButtonWrapper = styled.div`
 	position: absolute;
 	right: 10px;
 `
@@ -98,17 +98,19 @@ export const Header = ({ title, antall, paths, getValues, emptyCategory, dataCy
 				</KategoriCircle>
 			)}
 			{paths && (
-				<KategoriEmptyButton
-					onClick={(e) => {
-						e.stopPropagation()
-						emptyCategory?.(paths)
-					}}
-					data-testid={TestComponentSelectors.BUTTON_TENOR_CLEAR_HEADER}
-					variant={'tertiary'}
-					icon={<TrashIcon />}
-					size={'small'}
-					title="Tøm kategori"
-				/>
+				<KategoriEmptyButtonWrapper>
+					<Button
+						onClick={(e) => {
+							e.stopPropagation()
+							emptyCategory?.(paths)
+						}}
+						data-testid={TestComponentSelectors.BUTTON_TENOR_CLEAR_HEADER}
+						variant={'tertiary'}
+						icon={<TrashIcon />}
+						size={'small'}
+						title="Tøm kategori"
+					/>
+				</KategoriEmptyButtonWrapper>
 			)}
 		</KategoriHeader>
 	)

apps/dolly-frontend/src/main/js/src/pages/gruppe/Gruppe.tsx

@@ -43,15 +43,15 @@ export default ({ sidetall, sideStoerrelse, sorting, update }: GruppeProps) => {
 	}, [])
 
 	const { bestillingerById: ikkeFerdigBestillinger } = useIkkeFerdigBestillingerGruppe(
-		gruppeId!,
+		gruppeId,
 		'personer',
 		sidetall,
 		sideStoerrelse,
 		update,
 	)
 
 	const { bestillingerById, loading: loadingBestillinger } = useIkkeFerdigBestillingerGruppe(
-		gruppeId!,
+		gruppeId,
 		visning,
 		sidetall,
 		sideStoerrelse,
@@ -63,7 +63,7 @@ export default ({ sidetall, sideStoerrelse, sorting, update }: GruppeProps) => {
 		identer,
 		loading: loadingGruppe,
 	} = useGruppeById(
-		gruppeId!,
+		gruppeId,
 		location?.state?.sidetall || sidetall,
 		sideStoerrelse,
 		false,

apps/dolly-frontend/src/main/js/src/pages/gruppe/GruppeHeader/GruppeHeader.tsx

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react'
 import Button from '@/components/ui/button/Button'
 import useBoolean from '@/utils/hooks/useBoolean'
 import RedigerGruppeConnector from '@/components/redigerGruppe/RedigerGruppeConnector'
-import FavoriteButtonConnector from '@/components/ui/button/FavoriteButton/FavoriteButtonConnector'
 import { EksporterExcel } from '@/pages/gruppe/EksporterExcel/EksporterExcel'
 import { SlettButton } from '@/components/ui/button/SlettButton/SlettButton'
 import { LaasButton } from '@/components/ui/button/LaasButton/LaasButton'
@@ -22,6 +21,7 @@ import cn from 'classnames'
 import Icon from '@/components/ui/icon/Icon'
 import { TestComponentSelectors } from '#/mocks/Selectors'
 import Loading from '@/components/ui/loading/Loading'
+import FavoriteButton from '@/components/ui/button/FavoriteButton/FavoriteButton'
 
 type GruppeHeaderProps = {
 	gruppeId: string
@@ -155,7 +155,7 @@ const GruppeHeader = ({
 							action={getGruppeExcelFil}
 							loading={isFetchingExcel}
 						/>
-						{!gruppe.erEierAvGruppe && <FavoriteButtonConnector groupId={gruppe.id} />}
+						{!gruppe.erEierAvGruppe && <FavoriteButton groupId={gruppe.id} />}
 					</div>
 				</div>
 			</header>

apps/dolly-frontend/src/main/js/src/pages/gruppe/PersonListe/PersonListe.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo, useState } from 'react'
+import React, { Suspense, useEffect, useState } from 'react'
 import 'rc-tooltip/assets/bootstrap.css'
 import { DollyTable } from '@/components/ui/dollyTable/DollyTable'
 import Loading from '@/components/ui/loading/Loading'
@@ -57,10 +57,7 @@ export default function PersonListe({
 
 	const location = useLocation()
 
-	const personListe = useMemo(
-		() => sokSelector(selectPersonListe(identer, bestillingStatuser, fagsystem), search),
-		[identer, search, fagsystem, bestillingStatuser, visPerson],
-	)
+	const personListe = sokSelector(selectPersonListe(identer, bestillingStatuser, fagsystem), search)
 
 	useEffect(() => {
 		const idents =