Merge pull request #607 from navikt/dekonstruer-props

Destrukturer props slik at vi ser kva for nokre som er brukt
navikt · Jul 31, 2024 · f9dc407 · f9dc407
2 parents 8183ed2 + d67de7b
commit f9dc407
Show file tree

Hide file tree

Showing 38 changed files with 268 additions and 288 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -16,21 +16,21 @@ export interface AppProps {
     avsluttOppfolgingOpptelt?: boolean;
 }
 
-function App(props: AppProps) {
+function App({ fnr, enhet, tilbakeTilFlate, visVeilederVerktoy, skjulEtiketter, avsluttOppfolgingOpptelt }: AppProps) {
     return (
         <StoreProvider
-            brukerFnr={props.fnr}
-            enhetId={props.enhet}
-            tilbakeTilFlate={props.tilbakeTilFlate}
-            visVeilederVerktoy={props.visVeilederVerktoy || false}
-            avsluttOppfolgingOpptelt={props.avsluttOppfolgingOpptelt || false}
+            brukerFnr={fnr}
+            enhetId={enhet}
+            tilbakeTilFlate={tilbakeTilFlate}
+            visVeilederVerktoy={visVeilederVerktoy || false}
+            avsluttOppfolgingOpptelt={avsluttOppfolgingOpptelt || false}
         >
             <div className="visittkortfs">
                 <DataFetcher>
                     <Tilbakelenke />
                     <div className="visittkortfs__container">
                         <PersonInfo />
-                        {!props.skjulEtiketter && <Etiketter />}
+                        {!skjulEtiketter && <Etiketter />}
                         <Veilederverktoylinje />
                     </div>
                 </DataFetcher>

diff --git a/src/component/arbeidsliste/arbeidsliste-footer.tsx b/src/component/arbeidsliste/arbeidsliste-footer.tsx
@@ -1,25 +1,25 @@
 import { Button } from '@navikt/ds-react';
 import { TrashIcon } from '@navikt/aksel-icons';
 
-interface ArbeidslisteFooterProps {
+interface Props {
     onRequestClose: () => void;
     slettArbeidsliste: () => void;
     kanFjerneArbeidsliste: boolean;
 }
 
-function ArbeidslisteFooter(props: ArbeidslisteFooterProps) {
+function ArbeidslisteFooter({ onRequestClose, slettArbeidsliste, kanFjerneArbeidsliste }: Props) {
     return (
         <div className="modal-footer">
             <Button variant="primary" size="small" type="submit" className="bekreft-btn">
                 Lagre
             </Button>
-            <Button variant="secondary" size="small" type="button" onClick={props.onRequestClose}>
+            <Button variant="secondary" size="small" type="button" onClick={onRequestClose}>
                 Avbryt
             </Button>
-            {props.kanFjerneArbeidsliste && (
+            {kanFjerneArbeidsliste && (
                 <Button
                     type="button"
-                    onClick={props.slettArbeidsliste}
+                    onClick={slettArbeidsliste}
                     icon={<TrashIcon />}
                     variant="tertiary"
                     size="small"

diff --git a/src/component/arbeidsliste/arbeidsliste-knapp.tsx b/src/component/arbeidsliste/arbeidsliste-knapp.tsx
@@ -1,40 +1,41 @@
+import { Button } from '@navikt/ds-react';
 import ArbeidslistekategoriVisning from './arbeidslistekategori-visning';
 import withClickMetric from '../components/click-metric/click-metric';
 import { KategoriModell, useArbeidsliste } from '../../api/veilarbportefolje';
 import { trackAmplitude } from '../../amplitude/amplitude';
-import { Button } from '@navikt/ds-react';
 import { useAppStore } from '../../store/app-store';
 import { logMetrikk } from '../../util/logger';
 
-export interface ArbeidslisteKnappProps {
+interface Props {
     hidden: boolean;
     onClick: () => void;
 }
 
-function ArbeidslisteKnapp(props: ArbeidslisteKnappProps) {
+function ArbeidslisteKnapp({ hidden, onClick }: Props) {
     const { brukerFnr, visVeilederVerktoy } = useAppStore();
     const { data: arbeidsliste } = useArbeidsliste(brukerFnr, visVeilederVerktoy);
 
-    if (props.hidden) {
-        return null;
-    }
     const kategori = arbeidsliste?.kategori || KategoriModell.TOM;
     const arbeidslisteikon = arbeidsliste?.kategori;
 
-    const onClick = () => {
+    const handleClick = () => {
         trackAmplitude({
             name: 'navigere',
             data: { lenketekst: 'visittkort-fargekategori-ikon', destinasjon: 'arbeidslista' }
         });
         logMetrikk('veilarbvisittkortfs.metrikker.visittkort.arbeidsliste-ikon', { kategori: arbeidslisteikon });
-        props.onClick();
+        onClick();
     };
 
+    if (hidden) {
+        return null;
+    }
+
     return (
         <Button
             icon={<ArbeidslistekategoriVisning kategori={kategori} />}
             className="arbeidsliste-knapp"
-            onClick={onClick}
+            onClick={handleClick}
             variant="tertiary"
         />
     );

diff --git a/src/component/arbeidsliste/arbeidslisteikon/arbeidslisteikon-visning.tsx b/src/component/arbeidsliste/arbeidslisteikon/arbeidslisteikon-visning.tsx
@@ -1,16 +1,20 @@
+import { Field } from 'formik';
+import { Label } from '@navikt/ds-react';
 import ArbeidslisteikonBla from './arbeidslisteikon_bla.svg?react';
 import ArbeidslisteikonLilla from './arbeidslisteikon_lilla.svg?react';
 import ArbeidslisteikonGronn from './arbeidslisteikon_gronn.svg?react';
 import ArbeidslisteikonGul from './arbeidslisteikon_gul.svg?react';
-import { Field } from 'formik';
 import Arbeidslistekategori from './arbeidslistekategori';
 import { FieldProps } from 'formik/dist/Field';
 import { KategoriModell } from '../../../api/veilarbportefolje';
-import { Label } from '@navikt/ds-react';
 
-function ArbeidslistekategoriVisning(props: { name: string }) {
+interface Props {
+    name: string;
+}
+
+function ArbeidslistekategoriVisning({ name }: Props) {
     return (
-        <Field name={props.name}>
+        <Field name={name}>
             {({ field, form }: FieldProps<KategoriModell>) => {
                 return (
                     <div className="arbeidslistekategori">
@@ -21,32 +25,32 @@ function ArbeidslistekategoriVisning(props: { name: string }) {
                             <Arbeidslistekategori
                                 value={KategoriModell.BLA}
                                 arbeidslisteikon={<ArbeidslisteikonBla />}
-                                name={props.name}
+                                name={name}
                                 onChange={() => form.setFieldValue(field.name, KategoriModell.BLA)}
                                 checked={field.value === KategoriModell.BLA}
                                 title="Arbeidslisteikon blå"
                             />
                             <Arbeidslistekategori
                                 value={KategoriModell.GRONN}
                                 arbeidslisteikon={<ArbeidslisteikonGronn />}
-                                name={props.name}
-                                onChange={() => form.setFieldValue(props.name, KategoriModell.GRONN)}
+                                name={name}
+                                onChange={() => form.setFieldValue(name, KategoriModell.GRONN)}
                                 checked={field.value === KategoriModell.GRONN}
                                 title="Arbeidslisteikon grønn"
                             />
                             <Arbeidslistekategori
                                 value={KategoriModell.LILLA}
                                 arbeidslisteikon={<ArbeidslisteikonLilla />}
-                                name={props.name}
-                                onChange={() => form.setFieldValue(props.name, KategoriModell.LILLA)}
+                                name={name}
+                                onChange={() => form.setFieldValue(name, KategoriModell.LILLA)}
                                 checked={field.value === KategoriModell.LILLA}
                                 title="Arbeidslisteikon lilla"
                             />
                             <Arbeidslistekategori
                                 value={KategoriModell.GUL}
                                 arbeidslisteikon={<ArbeidslisteikonGul />}
-                                name={props.name}
-                                onChange={() => form.setFieldValue(props.name, KategoriModell.GUL)}
+                                name={name}
+                                onChange={() => form.setFieldValue(name, KategoriModell.GUL)}
                                 checked={field.value === KategoriModell.GUL}
                                 title="Arbeidslisteikon gul"
                             />

diff --git a/src/component/components/formik/formik-modal.tsx b/src/component/components/formik/formik-modal.tsx
@@ -1,21 +1,26 @@
 import { ReactNode, useState } from 'react';
 import cls from 'classnames';
 import { Formik, FormikProps, FormikValues } from 'formik';
-import { useModalStore } from '../../../store/modal-store';
 import { Modal } from '@navikt/ds-react';
+import { useModalStore } from '../../../store/modal-store';
 
 interface FormikModalProps<Values> {
     initialValues: Values;
     handleSubmit: (values: Values) => void;
-    validationSchema?: (values: Values) => void;
-    className?: string;
+    tittel: string;
     render: (formikProps: FormikProps<Values>) => ReactNode;
     visConfirmDialog?: boolean;
-    isOpen?: boolean;
-    tittel?: string;
+    className?: string;
 }
 
-function FormikModal<Values extends FormikValues>({ visConfirmDialog = true, ...props }: FormikModalProps<Values>) {
+function FormikModal<Values extends FormikValues>({
+    initialValues,
+    handleSubmit,
+    tittel,
+    render,
+    visConfirmDialog = true,
+    className
+}: FormikModalProps<Values>) {
     const { hideModal } = useModalStore();
     const [isOpen, setIsOpen] = useState(true);
 
@@ -38,23 +43,19 @@ function FormikModal<Values extends FormikValues>({ visConfirmDialog = true, ...
     };
 
     return (
-        <Formik
-            initialValues={props.initialValues}
-            validationSchema={props.validationSchema}
-            onSubmit={values => props.handleSubmit(values)}
-        >
+        <Formik initialValues={initialValues} onSubmit={values => handleSubmit(values)}>
             {formikProps => (
                 <Modal
-                    className={cls('visittkortfs-modal', props.className)}
-                    open={props.isOpen || isOpen}
+                    className={cls('visittkortfs-modal', className)}
+                    open={isOpen}
                     onClose={() => tilbake(formikProps)}
                     closeOnBackdropClick={true}
                     header={{
-                        heading: props.tittel ?? '',
+                        heading: tittel,
                         closeButton: true
                     }}
                 >
-                    <Modal.Body>{props.render(formikProps)}</Modal.Body>
+                    <Modal.Body>{render(formikProps)}</Modal.Body>
                 </Modal>
             )}
         </Formik>

diff --git a/src/component/components/hidden-if/hidden-if-div.tsx b/src/component/components/hidden-if/hidden-if-div.tsx
diff --git a/src/component/components/kopier-knapp/kopier-knapp.tsx b/src/component/components/kopier-knapp/kopier-knapp.tsx
@@ -1,13 +1,18 @@
-import './kopier-knapp.less';
 import { CopyButton } from '@navikt/ds-react';
+import './kopier-knapp.less';
+
+interface Props {
+    kopierTekst: string;
+    viseTekst: string;
+}
 
-export function KopierKnappTekst(props: { kopierTekst: string; viseTekst: string }) {
+export function KopierKnappTekst({ kopierTekst, viseTekst }: Props) {
     return (
         <div className="fnr-og-telefon">
-            {props.kopierTekst && (
+            {kopierTekst && (
                 <CopyButton
-                    copyText={props.kopierTekst}
-                    text={props.viseTekst}
+                    copyText={kopierTekst}
+                    text={viseTekst}
                     activeText="Kopiert!"
                     size="medium"
                     iconPosition="right"

diff --git a/src/component/components/modal/veilederverktoy-modal.tsx b/src/component/components/modal/veilederverktoy-modal.tsx
@@ -1,29 +1,29 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
-import { useModalStore } from '../../../store/modal-store';
 import { Modal } from '@navikt/ds-react';
+import { useModalStore } from '../../../store/modal-store';
 
-interface VeilederVerktoyModalProps {
+interface Props {
+    tittel: string;
     children: ReactNode;
     className?: string;
-    tittel: string;
 }
 
-function VeilederVerktoyModal(props: VeilederVerktoyModalProps) {
+function VeilederVerktoyModal({ tittel, children, className }: Props) {
     const { hideModal } = useModalStore();
 
     return (
         <Modal
-            className={classNames('veilederverktoy-modal', props.className)}
+            className={classNames('veilederverktoy-modal', className)}
             open={true}
             onClose={hideModal}
             closeOnBackdropClick={true}
             header={{
-                heading: props.tittel,
+                heading: tittel,
                 closeButton: true
             }}
         >
-            <Modal.Body>{props.children}</Modal.Body>
+            <Modal.Body>{children}</Modal.Body>
         </Modal>
     );
 }

diff --git a/src/component/components/radiofilterform/radio-filter-form.tsx b/src/component/components/radiofilterform/radio-filter-form.tsx
@@ -2,18 +2,16 @@ import { ChangeEvent } from 'react';
 import { Radio, RadioGroup } from '@navikt/ds-react';
 import './radio-filterform.less';
 
-export interface RadioFilterFormProps<T> {
+interface Props<T> {
     data: T[];
     createLabel: (foo: T) => string;
     createValue: (foo: T) => string;
     radioName: string;
-    fjernNullstill?: boolean;
     selected: string;
     changeSelected: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-function RadioFilterForm<T>(props: RadioFilterFormProps<T>) {
-    const { data, createLabel, createValue, radioName } = props;
+function RadioFilterForm<T>({ data, createLabel, createValue, radioName, selected, changeSelected }: Props<T>) {
     return (
         <div className="radio-filterform">
             <RadioGroup legend="tildel_veileder" hideLegend={true} className="radio-filterform__valg scrollbar">
@@ -25,8 +23,8 @@ function RadioFilterForm<T>(props: RadioFilterFormProps<T>) {
                             value={value}
                             id={`${value}-${radioName}`}
                             key={`${value}-${radioName}`}
-                            checked={value === props.selected}
-                            onChange={e => props.changeSelected(e)}
+                            checked={value === selected}
+                            onChange={e => changeSelected(e)}
                             size="small"
                         >
                             {createLabel(o)}

diff --git a/src/component/components/show/show.tsx b/src/component/components/show/show.tsx
diff --git a/src/component/components/sokfilter/sok-filter.tsx b/src/component/components/sokfilter/sok-filter.tsx
@@ -1,24 +1,24 @@
 import { ReactNode, useState } from 'react';
-import './sok-filter.less';
 import { TextField } from '@navikt/ds-react';
 import { useFocus } from '../../../util/hook/use-focus';
+import './sok-filter.less';
 
 interface SokFilterProps<T> {
-    data: T[];
-    children: (filteredData: T[]) => ReactNode;
     label: string;
     placeholder: string;
+    data: T[];
+    children: (filteredData: T[]) => ReactNode;
     limitSize?: number;
 }
 
 function limit<T>(liste: T[], antall: number) {
     return liste.slice(0, antall);
 }
 
-function SokFilter<T>(props: SokFilterProps<T>) {
+function SokFilter<T>({ label, placeholder, data, children, limitSize }: SokFilterProps<T>) {
     const { focusRef } = useFocus();
     const [query, changeQuery] = useState('');
-    const { data, limitSize, children } = props;
+
     const rawfilteredData = data.filter(
         elem => !query || JSON.stringify(elem).toLowerCase().includes(query.toLowerCase())
     );
@@ -30,8 +30,8 @@ function SokFilter<T>(props: SokFilterProps<T>) {
             <div className="sokfilter">
                 <TextField
                     ref={inputRef => (focusRef.current = inputRef)}
-                    label={props.label}
-                    placeholder={props.placeholder}
+                    label={label}
+                    placeholder={placeholder}
                     value={query}
                     size="small"
                     className="sokfilter__input"

diff --git a/src/component/components/visible-if-div.tsx b/src/component/components/visible-if-div.tsx