Skip to content

Commit

Permalink
Masse refaktorering fra formik til React-hook-forms v2
Browse files Browse the repository at this point in the history 
#deploy-test-frontend
  • Loading branch information
@stigus
stigus committed Nov 17, 2023
1 parent f3a10b1 commit 1c0d5ef
Show file tree
Hide file tree
Showing 115 changed files with 891 additions and 836 deletions.
6 changes: 3 additions & 3 deletions apps/dolly-frontend/src/main/js/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

166 changes: 82 additions & 84 deletions ...ly-frontend/src/main/js/src/components/bestillingsveileder/startModal/NyIdent/NyIdent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState } from 'react'
import { Formik, FormikProps } from 'formik'
import * as yup from 'yup'
import { useToggle } from 'react-use'
import { NavLink } from 'react-router-dom'
Expand All @@ -16,6 +15,8 @@ import * as _ from 'lodash-es'
import { tpsfAttributter } from '@/components/bestillingsveileder/utils'
import { Mal, useDollyMaler } from '@/utils/hooks/useMaler'
import { CypressSelector } from '../../../../../cypress/mocks/Selectors'
import { useFormContext } from 'react-hook-form'
import { UseFormReturn } from 'react-hook-form/dist/types'

const initialValues = {
antall: 1,
Expand Down Expand Up @@ -47,107 +48,104 @@ export const NyIdent = ({ brukernavn, onAvbryt, onSubmit }: NyBestillingProps) =
const [bruker, setBruker] = useState(brukernavn)
const [malAktiv, toggleMalAktiv] = useToggle(false)
const { maler, loading } = useDollyMaler()
const formMethods = useFormContext()

const brukerOptions = getBrukerOptions(maler)
const malOptions = getMalOptions(maler, bruker)

const handleMalChange = (formikbag: FormikProps<any>) => {
const handleMalChange = (formMethods: UseFormReturn) => {
toggleMalAktiv()
if (formikbag.values.mal) {
formikbag.setFieldValue('mal', null)
if (formMethods.getValues().mal) {
formMethods.setValue('mal', null)
}
}

const handleBrukerChange = (event: { value: any }, formikbag: FormikProps<any>) => {
const handleBrukerChange = (event: { value: any }, formMethods: UseFormReturn) => {
setBruker(event.value)
formikbag.setFieldValue('mal', null)
formMethods.setValue('mal', null)
}

const preSubmit = (values: { mal: any }, formikBag: any) => {
const preSubmit = (values: { mal: any }) => {
if (values.mal) values.mal = malOptions.find((m) => m.value === values.mal).data
return onSubmit(values, formikBag)
return onSubmit(values, undefined)
}

return (
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={preSubmit}>
{(formikBag) => {
const valgtMal = malOptions.find((mal) => mal.value === _.get(formikBag.values, 'mal'))
const valgtMalTpsfValues = _.get(valgtMal, 'data.bestilling.tpsf')
const erTpsfMal = tpsfAttributter.some((a) => _.has(valgtMalTpsfValues, a))
const valgtMal = malOptions.find((mal) => mal.value === _.get(formMethods.getValues(), 'mal'))
const valgtMalTpsfValues = _.get(valgtMal, 'data.bestilling.tpsf')
const erTpsfMal = tpsfAttributter.some((a) => _.has(valgtMalTpsfValues, a))

return (
<div className="ny-bestilling-form">
<h3>Velg type og antall</h3>
<div className="ny-bestilling-form_selects">
<FormikSelect
name="identtype"
label="Velg identtype"
size="medium"
options={Options('identtype')}
isClearable={false}
/>
<FormikTextInput name="antall" label="Antall" type="number" size="medium" />
</div>
<div className="ny-bestilling-form_maler">
<div>
<DollyCheckbox
data-cy={CypressSelector.TOGGLE_MAL}
name="aktiver-maler"
onChange={() => handleMalChange(formikBag)}
label="Opprett fra mal"
wrapperSize={'none'}
size={'small'}
isSwitch
/>
</div>
return (
<form onSubmit={formMethods.handleSubmit(preSubmit(formMethods.getValues()))}>
<div className="ny-bestilling-form">
<h3>Velg type og antall</h3>
<div className="ny-bestilling-form_selects">
<FormikSelect
name="identtype"
label="Velg identtype"
size="medium"
options={Options('identtype')}
isClearable={false}
/>
<FormikTextInput name="antall" label="Antall" type="number" size="medium" />
</div>
<div className="ny-bestilling-form_maler">
<div>
<DollyCheckbox
data-cy={CypressSelector.TOGGLE_MAL}
name="aktiver-maler"
onChange={() => handleMalChange(formMethods)}
label="Opprett fra mal"
wrapperSize={'none'}
size={'small'}
isSwitch
/>
</div>

<InputDiv>
<DollySelect
name="zIdent"
label="Bruker"
isLoading={loading}
options={brukerOptions}
size="medium"
onChange={(e) => handleBrukerChange(e, formikBag)}
value={bruker}
isClearable={false}
isDisabled={!malAktiv}
/>
<FormikSelect
name="mal"
label="Maler"
isLoading={loading}
options={malOptions}
size="grow"
fastfield={false}
isDisabled={!malAktiv}
/>
</InputDiv>
{erTpsfMal && (
<Alert variant={'warning'} style={{ width: '97%' }}>
Denne malen er utdatert, og vil dessverre ikke fungere som den skal. Dette fordi
master for bestillinger er endret fra TPS til PDL. Vi anbefaler at du oppretter en
ny mal og sletter denne malen.
</Alert>
)}
<div className="mal-admin">
<Button kind="maler" fontSize={'1.2rem'}>
<NavLink to="/minside">Administrer maler</NavLink>
</Button>
</div>
</div>
<ModalActionKnapper
data-cy={CypressSelector.BUTTON_START_BESTILLING}
submitknapp="Start bestilling"
disabled={!formikBag.isValid || formikBag.isSubmitting}
onSubmit={formikBag.handleSubmit}
onAvbryt={onAvbryt}
center
<InputDiv>
<DollySelect
name="zIdent"
label="Bruker"
isLoading={loading}
options={brukerOptions}
size="medium"
onChange={(e) => handleBrukerChange(e, formMethods)}
value={bruker}
isClearable={false}
isDisabled={!malAktiv}
/>
<FormikSelect
name="mal"
label="Maler"
isLoading={loading}
options={malOptions}
size="grow"
fastfield={false}
isDisabled={!malAktiv}
/>
</InputDiv>
{erTpsfMal && (
<Alert variant={'warning'} style={{ width: '97%' }}>
Denne malen er utdatert, og vil dessverre ikke fungere som den skal. Dette fordi
master for bestillinger er endret fra TPS til PDL. Vi anbefaler at du oppretter en ny
mal og sletter denne malen.
</Alert>
)}
<div className="mal-admin">
<Button kind="maler" fontSize={'1.2rem'}>
<NavLink to="/minside">Administrer maler</NavLink>
</Button>
</div>
)
}}
</Formik>
</div>
<ModalActionKnapper
data-cy={CypressSelector.BUTTON_START_BESTILLING}
submitknapp="Start bestilling"
disabled={!formMethods.formState.isValid || formMethods.formState.isSubmitting}
onSubmit={formMethods.handleSubmit}
onAvbryt={onAvbryt}
center
/>
</div>
</form>
)
}

Expand Down
15 changes: 6 additions & 9 deletions ...frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg3/MalForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,15 @@ import { ifPresent, requiredString } from '@/utils/YupValidations'
import { Mal, useDollyMalerBrukerOgMalnavn } from '@/utils/hooks/useMaler'
import Loading from '@/components/ui/loading/Loading'
import { MalOppsummering } from '@/components/bestillingsveileder/stegVelger/steg/steg3/MalOppsummering'
import { UseFormReturn } from 'react-hook-form/dist/types'

export type MalerFormProps = {
brukerId: string
formikBag: { setFieldValue: (arg0: string, arg1: string) => void }
formMethods: UseFormReturn
opprettetFraMal: string
}

export const MalForm = ({
brukerId,
formikBag: { setFieldValue },
opprettetFraMal,
}: MalerFormProps) => {
export const MalForm = ({ brukerId, formMethods, opprettetFraMal }: MalerFormProps) => {
const [typeMal, setTypeMal] = useState(MalTyper.OPPRETT)
const [opprettMal, setOpprettMal] = useState(false)
const { maler, loading } = useDollyMalerBrukerOgMalnavn(brukerId, null)
Expand All @@ -26,14 +23,14 @@ export const MalForm = ({
const handleToggleChange = (value: MalTyper) => {
setTypeMal(value)
if (value === MalTyper.OPPRETT) {
setFieldValue('malBestillingNavn', '')
formMethods.setValue('malBestillingNavn', '')
} else if (value === MalTyper.ENDRE) {
setFieldValue('malBestillingNavn', opprettetFraMal || '')
formMethods.setValue('malBestillingNavn', opprettetFraMal || '')
}
}

const handleCheckboxChange = (value: BaseSyntheticEvent) => {
setFieldValue('malBestillingNavn', value.target?.checked ? '' : undefined)
formMethods.setValue('malBestillingNavn', value.target?.checked ? '' : undefined)
setOpprettMal(value.target?.checked)
}

Expand Down
4 changes: 2 additions & 2 deletions ...js/src/components/bestillingsveileder/stegVelger/steg/steg3/OppsummeringKommentarForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import * as _ from 'lodash-es'
import { CypressSelector } from '../../../../../../cypress/mocks/Selectors'

export const OppsummeringKommentarForm = ({ formMethods }) => {
const eksisterendeBeskrivelse = _.get(formikBag.values, 'beskrivelse')
const eksisterendeBeskrivelse = _.get(formMethods.getValues(), 'beskrivelse')
return (
<div className="input-oppsummering">
<h2 data-cy={CypressSelector.TITLE_SEND_KOMMENTAR}>Send med kommentar</h2>
<TextEditor
text={null}
handleSubmit={(value) => formikBag.setFieldValue('beskrivelse', value)}
handleSubmit={(value) => formMethods.setValue('beskrivelse', value)}
placeholder={
eksisterendeBeskrivelse ? eksisterendeBeskrivelse : 'Skriv inn kommentar (notat)'
}
Expand Down
52 changes: 26 additions & 26 deletions ...y-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg3/Steg3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,41 @@ import { OppsummeringKommentarForm } from '@/components/bestillingsveileder/steg
import { BestillingsveilederContext } from '@/components/bestillingsveileder/BestillingsveilederContext'
import * as _ from 'lodash-es'
import { MalFormOrganisasjon } from '@/pages/organisasjoner/MalFormOrganisasjon'
import { useFormikContext } from 'formik'
import { useCurrentBruker, useOrganisasjonTilgang } from '@/utils/hooks/useBruker'
import Loading from '@/components/ui/loading/Loading'
import { useFormContext } from 'react-hook-form'

const Bestillingskriterier = React.lazy(
() => import('@/components/bestilling/sammendrag/kriterier/Bestillingskriterier'),
)

export const Steg3 = () => {
const opts = useContext(BestillingsveilederContext)
const formikBag = useFormikContext()
const formMethods = useFormContext()
const { currentBruker } = useCurrentBruker()

const { organisasjonTilgang } = useOrganisasjonTilgang()
const tilgjengeligMiljoe = organisasjonTilgang?.miljoe

const importTestnorge = opts.is.importTestnorge

const erOrganisasjon = formikBag.values.hasOwnProperty('organisasjon')
const erOrganisasjon = formMethods.getValues('organisasjon')
const erQ2MiljoeAvhengig =
_.get(formikBag.values, 'pdldata.person.fullmakt') ||
_.get(formikBag.values, 'pdldata.person.falskIdentitet') ||
_.get(formikBag.values, 'pdldata.person.falskIdentitet') ||
_.get(formikBag.values, 'pdldata.person.utenlandskIdentifikasjonsnummer') ||
_.get(formikBag.values, 'pdldata.person.kontaktinformasjonForDoedsbo')
_.get(formMethods.getValues(), 'pdldata.person.fullmakt') ||
_.get(formMethods.getValues(), 'pdldata.person.falskIdentitet') ||
_.get(formMethods.getValues(), 'pdldata.person.falskIdentitet') ||
_.get(formMethods.getValues(), 'pdldata.person.utenlandskIdentifikasjonsnummer') ||
_.get(formMethods.getValues(), 'pdldata.person.kontaktinformasjonForDoedsbo')

const bankIdBruker = currentBruker?.brukertype === 'BANKID'

const sivilstand = _.get(formikBag.values, 'pdldata.person.sivilstand')
const sivilstand = _.get(formMethods.getValues(), 'pdldata.person.sivilstand')
const harRelatertPersonVedSivilstand = sivilstand?.some((item) => item.relatertVedSivilstand)

const nyIdent = _.get(formikBag.values, 'pdldata.person.nyident')
const nyIdent = _.get(formMethods.getValues(), 'pdldata.person.nyident')
const harEksisterendeNyIdent = nyIdent?.some((item) => item.eksisterendeIdent)

const forelderBarnRelasjon = _.get(formikBag.values, 'pdldata.person.forelderBarnRelasjon')
const forelderBarnRelasjon = _.get(formMethods.getValues(), 'pdldata.person.forelderBarnRelasjon')
const harRelatertPersonBarn = forelderBarnRelasjon?.some((item) => item.relatertPerson)

const alleredeValgtMiljoe = () => {
Expand All @@ -61,39 +61,39 @@ export const Steg3 = () => {

useEffect(() => {
if (importTestnorge) {
if (harAvhukedeAttributter(formikBag.values)) {
formikBag.setFieldValue('environments', alleredeValgtMiljoe())
if (harAvhukedeAttributter(formMethods.getValues())) {
formMethods.setValue('environments', alleredeValgtMiljoe())
}
formikBag.setFieldValue('gruppeId', opts.gruppe?.id)
formMethods.setValue('gruppeId', opts.gruppe?.id)
} else if (bankIdBruker) {
formikBag.setFieldValue('environments', alleredeValgtMiljoe())
formMethods.setValue('environments', alleredeValgtMiljoe())
} else if (erQ1EllerQ2MiljoeAvhengig(formMethods.getValues())) {
formikBag.setFieldValue('environments', ['q1', 'q2'])
} else if (formikBag.values?.sykemelding) {
formikBag.setFieldValue('environments', ['q1'])
formMethods.setValue('environments', ['q1', 'q2'])
} else if (formMethods.getValues()?.sykemelding) {
formMethods.setValue('environments', ['q1'])
} else if (erQ2MiljoeAvhengig) {
formikBag.setFieldValue('environments', alleredeValgtMiljoe())
} else if (!formikBag.values?.environments) {
formikBag.setFieldValue('environments', [])
formMethods.setValue('environments', alleredeValgtMiljoe())
} else if (!formMethods.getValues()?.environments) {
formMethods.setValue('environments', [])
}
if (harRelatertPersonVedSivilstand || harEksisterendeNyIdent || harRelatertPersonBarn) {
formikBag.setFieldValue('malBestillingNavn', undefined)
formMethods.setValue('malBestillingNavn', undefined)
}
}, [])

const visMiljoeVelger = formikBag.values.hasOwnProperty('environments')
const visMiljoeVelger = formMethods.getValues().hasOwnProperty('environments')
return (
<div>
{harAvhukedeAttributter(formikBag.values) && (
{harAvhukedeAttributter(formMethods.getValues()) && (
<div className="oppsummering">
<Suspense fallback={<Loading label={'Laster bestillingskriterier...'} />}>
<Bestillingskriterier bestilling={formikBag.values} />
<Bestillingskriterier bestilling={formMethods.getValues()} />
</Suspense>
</div>
)}
{visMiljoeVelger && (
<MiljoVelger
bestillingsdata={formikBag.values}
bestillingsdata={formMethods.getValues()}
heading="Hvilke miljøer vil du opprette i?"
bankIdBruker={bankIdBruker}
orgTilgang={organisasjonTilgang}
Expand Down
Loading

0 comments on commit 1c0d5ef

Please sign in to comment.