erstatter flere globale states med props

navikt · Dec 27, 2023 · b6b5a7a · b6b5a7a
1 parent 3f7df52
commit b6b5a7a
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 227 deletions.
diff --git a/frontend/src/components/content/Content.tsx b/frontend/src/components/content/Content.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {JsonView} from './JsonView'
 import {HendelseView} from './hendelser/HendelseView'
 import {ContentView} from '../../state/state'
 import {HendelseDokumentView} from './hendelseDokument/HendelseDokumentView'
 import {IngressView} from './IngressView'
 import {Box, Tabs} from "@navikt/ds-react";
+import {PersonDto} from "../../state/dto";
 
-export const Content = ({ valgteTing }: { valgteTing: string[] }) => {
+export const Content = ({ person, valgteTing }: { person: PersonDto, valgteTing: string[] }) => {
     return (
         <Box>
             <Tabs defaultValue={ ContentView.Json }>
@@ -16,13 +17,13 @@ export const Content = ({ valgteTing }: { valgteTing: string[] }) => {
                     <ViewButton value={ ContentView.Ingress } />
                 </Tabs.List>
                 <Tabs.Panel value={ ContentView.Json }>
-                    <JsonView valgteTing={valgteTing} />
+                    <JsonView person={person} valgteTing={valgteTing} />
                 </Tabs.Panel>
                 <Tabs.Panel value={ ContentView.Hendelser }>
-                    <HendelseView valgteTing={valgteTing} />
+                    <HendelseView person={person} valgteTing={valgteTing} />
                 </Tabs.Panel>
                 <Tabs.Panel value={ ContentView.Ingress }>
-                    <IngressView valgteTing={valgteTing} />
+                    <IngressView person={person} valgteTing={valgteTing} />
                 </Tabs.Panel>
             </Tabs>
             <HendelseDokumentView />

diff --git a/frontend/src/components/content/ContentCategory.tsx b/frontend/src/components/content/ContentCategory.tsx
@@ -1,65 +1,66 @@
-import {
-    ArbeidsgiverContext,
-    ForkastetVedtaksperiodeContext,
-    usePerson,
-    UtbetalingContext,
-    VedtakContext,
-} from '../../state/contexts'
 import React, {ReactNode} from 'react'
 import {ContentView} from '../../state/state'
 import {Card} from "../Card";
+import {ArbeidsgiverDto, FokastetVedtaksperiodeDto, PersonDto, UtbetalingDto, VedtakDto} from "../../state/dto";
 
 type ContentCategoryProperties = {
     displayName: ContentView
-    Person?: React.FC
-    Arbeidsgiver?: React.FC
-    Vedtaksperiode?: React.FC
-    ForkastetVedtaksperiode?: React.FC
-    Utbetaling?: React.FC,
+    person: PersonDto,
+    Person?: React.FC<{ person: PersonDto }>
+    Arbeidsgiver?: React.FC<{ arbeidsgiver: ArbeidsgiverDto }>
+    Vedtaksperiode?: React.FC<{ vedtaksperiode: VedtakDto }>
+    ForkastetVedtaksperiode?: React.FC<{ vedtaksperiode: FokastetVedtaksperiodeDto }>
+    Utbetaling?: React.FC<{ utbetaling: UtbetalingDto }>,
     valgteTing: string[]
 }
 
-export const ContentCategory = React.memo<ContentCategoryProperties>(
-    ({
-        Person = undefined,
-        Arbeidsgiver = undefined,
-        Vedtaksperiode = undefined,
-        ForkastetVedtaksperiode = undefined,
-        Utbetaling = undefined,
-        valgteTing
-    }) => {
-        const person = usePerson()
-        return (
-            <>
-                {Person && <Ramme valgteTing={valgteTing} ting={person.aktørId}><Person /></Ramme> }
-                {Arbeidsgiver && person.arbeidsgivere.map((arbeidsgiver) => (
-                    <ArbeidsgiverContext.Provider value={arbeidsgiver} key={arbeidsgiver.id}>
-                        {<Ramme valgteTing={valgteTing} ting={arbeidsgiver.id}><Arbeidsgiver /></Ramme> }
-                        {Vedtaksperiode && arbeidsgiver.vedtaksperioder.map((vedtaksperiode) => (
-                            <VedtakContext.Provider value={vedtaksperiode} key={vedtaksperiode.id}>
-                                <Ramme valgteTing={valgteTing} ting={vedtaksperiode.id}><Vedtaksperiode /></Ramme>
-                            </VedtakContext.Provider>
-                        ))}
-                        {ForkastetVedtaksperiode && arbeidsgiver.forkastede.map((forkastet) => (
-                            <ForkastetVedtaksperiodeContext.Provider
-                                value={forkastet.vedtaksperiode}
-                                key={forkastet.vedtaksperiode.id}
-                            >
-                                <Ramme valgteTing={valgteTing} ting={forkastet.vedtaksperiode.id}><ForkastetVedtaksperiode /></Ramme>
-                            </ForkastetVedtaksperiodeContext.Provider>
-                        ))}
-                        {Utbetaling && arbeidsgiver.utbetalinger.map((utbetaling) => (
-                            <UtbetalingContext.Provider value={utbetaling} key={utbetaling.id}>
-                                <Ramme valgteTing={valgteTing} ting={utbetaling.id}><Utbetaling /></Ramme>
-                            </UtbetalingContext.Provider>
-                        ))}
-                    </ArbeidsgiverContext.Provider>
-                ))}
-            </>
+export function ContentCategory({
+    displayName,
+    person,
+    Person = undefined,
+    Arbeidsgiver = undefined,
+    Vedtaksperiode = undefined,
+    ForkastetVedtaksperiode = undefined,
+    Utbetaling = undefined,
+    valgteTing
+} : ContentCategoryProperties) {
+    let tingene = HentVisning(person, valgteTing)
+    return <>
+        {Person && tingene.person && <Ramme key={tingene.person.aktørId} valgteTing={valgteTing} ting={tingene.person.aktørId}><Person person={tingene.person} /></Ramme>}
+        {Arbeidsgiver && tingene.arbeidsgivere.map((it) =>
+            <Ramme key={it.id} valgteTing={valgteTing} ting={it.id}><Arbeidsgiver arbeidsgiver={it} /></Ramme>
+        )}
+        {Vedtaksperiode && tingene.vedtaksperioder.map((it) =>
+            <Ramme key={it.id}  valgteTing={valgteTing} ting={it.id}><Vedtaksperiode vedtaksperiode={it} /></Ramme>
+        )}
+        {ForkastetVedtaksperiode && tingene.forkastedeVedtaksperioder.map((it) =>
+            <Ramme key={it.id}  valgteTing={valgteTing} ting={it.id}><ForkastetVedtaksperiode vedtaksperiode={it} /></Ramme>
+        )}
+        {Utbetaling && tingene.utbetalinger.map((it) =>
+            <Ramme key={it.id}  valgteTing={valgteTing} ting={it.id}><Utbetaling utbetaling={it} /></Ramme>
+        )}
+    </>
+}
+
+ContentCategory.displayName = 'ContentCategory'
+
+function HentVisning(person: PersonDto, valgteTing: string[]) {
+    return {
+        person: valgteTing.includes(person.aktørId) ? person : undefined,
+        arbeidsgivere: person.arbeidsgivere.filter((it) => valgteTing.includes(it.id)),
+        vedtaksperioder: person.arbeidsgivere.flatMap((it) =>
+            it.vedtaksperioder.filter((vedtaksperiode) => valgteTing.includes(vedtaksperiode.id))
+        ),
+        forkastedeVedtaksperioder: person.arbeidsgivere
+            .flatMap((it) =>
+                it.forkastede.filter((forkastet) => valgteTing.includes(forkastet.vedtaksperiode.id))
+            )
+            .map((forkastede) => forkastede.vedtaksperiode),
+        utbetalinger: person.arbeidsgivere.flatMap((it) =>
+            it.utbetalinger.filter((utbetaling) => valgteTing.includes(utbetaling.id))
         )
     }
-)
-ContentCategory.displayName = 'ContentCategory'
+}
 
 export function fargeForTing(valgteTing: string[], ting: string) {
     const index = valgteTing.findIndex((it) => it === ting)
@@ -68,7 +69,7 @@ export function fargeForTing(valgteTing: string[], ting: string) {
     return selectColors[index % selectColors.length]
 }
 
-function Ramme({ valgteTing, ting, children }: { valgteTing: string[], ting: string, children: ReactNode }) {
+export function Ramme({ valgteTing, ting, children }: { valgteTing: string[], ting: string, children: ReactNode }) {
     const color = fargeForTing(valgteTing, ting)
     if (!color) return null
     return <Card style={{ borderStyle: valgteTing.length > 1 ? `solid` : 'none', borderWidth: '7px', borderColor: color }}>

diff --git a/frontend/src/components/content/IngressView.tsx b/frontend/src/components/content/IngressView.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { ContentCategory } from './ContentCategory'
-import { ContentView } from '../../state/state'
-import { useForkastetVedtaksperiode, usePerson, useVedtak } from '../../state/contexts'
+import {ContentCategory} from './ContentCategory'
+import {ContentView} from '../../state/state'
+import {FokastetVedtaksperiodeDto, PersonDto, VedtakDto} from "../../state/dto";
 
 const sporing = window.location.origin.includes('dev')
     ? 'https://sporing.intern.dev.nav.no'
@@ -15,33 +15,37 @@ const _ingressView = (vedtaksperiodeId: string) => {
         </div>
     )
 }
-const Vedtaksperiode = () => {
-    const vedtaksperiode = useVedtak()
+const Vedtaksperiode = ({ vedtaksperiode }: { vedtaksperiode: VedtakDto }) => {
     return _ingressView(vedtaksperiode.id)
 }
 Vedtaksperiode.displayName = 'IngressView.Vedtaksperiode'
 
-const ForkastetVedtaksperiode = () => {
-    const vedtaksperiode = useForkastetVedtaksperiode()
+const ForkastetVedtaksperiode = ({ vedtaksperiode }: { vedtaksperiode: FokastetVedtaksperiodeDto }) => {
     return _ingressView(vedtaksperiode.id)
 }
 ForkastetVedtaksperiode.displayName = 'IngressView.ForkastetVedtaksperiode'
 
-const Person = () => {
-    const p = usePerson()
+const Person = ({ person }: { person: PersonDto }) => {
     return (
         <div>
-            <a href={`${sporing}/person/${p.aktørId}`} target="_blank">
+            <a href={`${sporing}/person/${person.aktørId}`} target="_blank">
                 Sporing
             </a>
         </div>
     )
 }
 Person.displayName = 'IngressView.Person'
 
-export const IngressView = ({ valgteTing }: { valgteTing: string[] }) => {
+export const IngressView = ({ person, valgteTing }: { person: PersonDto, valgteTing: string[] }) => {
     return (
-        <ContentCategory displayName={ContentView.Ingress} valgteTing={valgteTing} {...{ Person, Vedtaksperiode, ForkastetVedtaksperiode }} />
+        <ContentCategory
+            displayName={ContentView.Ingress}
+            valgteTing={valgteTing}
+            person={person}
+            Person={Person}
+            Vedtaksperiode={Vedtaksperiode}
+            ForkastetVedtaksperiode={ForkastetVedtaksperiode}
+        />
     )
 }
 

diff --git a/frontend/src/components/content/JsonView.tsx b/frontend/src/components/content/JsonView.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
-import { useArbeidsgiver, useForkastetVedtaksperiode, usePerson, useUtbetaling, useVedtak } from '../../state/contexts'
+import React, {useMemo} from 'react'
 import ReactJson from 'react-json-view'
-import { ContentView } from '../../state/state'
-import { ContentCategory } from './ContentCategory'
-import { writeToClipboard } from '../../utils'
+import {ContentView} from '../../state/state'
+import {ContentCategory} from './ContentCategory'
+import {writeToClipboard} from '../../utils'
+import {ArbeidsgiverDto, FokastetVedtaksperiodeDto, PersonDto, UtbetalingDto, VedtakDto} from "../../state/dto";
 
-const Arbeidsgiver = () => {
-    const arbeidsgiver = useArbeidsgiver()
+const Arbeidsgiver = ({ arbeidsgiver }: { arbeidsgiver: ArbeidsgiverDto }) => {
     return (
         <div>
             <ReactJsonMedBedreKopiering src={arbeidsgiver} />
@@ -15,8 +14,7 @@ const Arbeidsgiver = () => {
 }
 Arbeidsgiver.displayName = 'JsonView.Arbeidsgiver'
 
-const Person = () => {
-    const person = usePerson()
+const Person = ({ person }: { person: PersonDto }) => {
     return (
         <div>
             <ReactJsonMedBedreKopiering src={person} />
@@ -25,8 +23,7 @@ const Person = () => {
 }
 Person.displayName = 'JsonView.Person'
 
-const Vedtaksperiode = () => {
-    const vedtaksperiode = useVedtak()
+const Vedtaksperiode = ({ vedtaksperiode }: { vedtaksperiode: VedtakDto }) => {
     return (
         <div>
             <ReactJsonMedBedreKopiering src={vedtaksperiode} />
@@ -35,8 +32,7 @@ const Vedtaksperiode = () => {
 }
 Vedtaksperiode.displayName = 'JsonView.Vedtaksperiode'
 
-const ForkastetVedtaksperiode = () => {
-    const vedtaksperiode = useForkastetVedtaksperiode()
+const ForkastetVedtaksperiode = ({ vedtaksperiode }: { vedtaksperiode: FokastetVedtaksperiodeDto }) => {
     return (
         <div>
             <ReactJsonMedBedreKopiering src={vedtaksperiode} />
@@ -45,8 +41,7 @@ const ForkastetVedtaksperiode = () => {
 }
 ForkastetVedtaksperiode.displayName = 'JsonView.ForkastetVedtaksperiode'
 
-const Utbetaling = () => {
-    const utbetaling = useUtbetaling()
+const Utbetaling = ({ utbetaling }: { utbetaling: UtbetalingDto }) => {
     return (
         <div>
             <ReactJsonMedBedreKopiering src={utbetaling} />
@@ -73,13 +68,14 @@ const ReactJsonMedBedreKopiering = (props: { src: object }) => (
     />
 )
 
-export const JsonView = ({ valgteTing }: { valgteTing: string[] }) => {
-    return (
-        <ContentCategory
+export const JsonView = ({ person, valgteTing }: { person: PersonDto, valgteTing: string[] }) => {
+    return useMemo(() => {
+        return <ContentCategory
             displayName={ContentView.Json}
+            person={person}
             valgteTing={valgteTing}
             {...{ Person, Arbeidsgiver, Vedtaksperiode, ForkastetVedtaksperiode, Utbetaling }}
         />
-    )
+    }, [valgteTing])
 }
 JsonView.displayName = 'JsonView'