From 9a5fa5ab9b05b00ca909c9e94ee27590bd57071c Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Wed, 3 Jul 2024 17:21:04 +0300 Subject: [PATCH 1/3] feat: prefill campaign application organizer form values from current user --- .../CampaignApplicationForm.tsx | 35 +++++++++++-------- .../CampaignApplicationPage.tsx | 16 ++++++++- 2 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 7389f3a71..6d942f6bb 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -1,6 +1,6 @@ -import { useCallback, useState } from 'react' - +import { useCallback, useMemo, useState } from 'react' import { Grid, StepLabel } from '@mui/material' +import { PersonResponse } from 'gql/person' import { CampaignApplicationFormData, @@ -25,17 +25,6 @@ import { StyledStepConnector, } from './helpers/campaignApplication.styled' -const initialValues: CampaignApplicationFormData = { - organizer: { - name: '', - phone: '', - email: '', - acceptTermsAndConditions: false, - transparencyTermsAccepted: false, - personalInformationProcessingAccepted: false, - }, -} - const steps: StepType[] = [ { title: 'campaign-application:steps.organizer.title', @@ -51,9 +40,27 @@ const steps: StepType[] = [ }, ] -export default function CampaignApplicationForm() { +type Props = { + person: PersonResponse +} + +export default function CampaignApplicationForm({ person }: Props) { const [activeStep, setActiveStep] = useState(Steps.ORGANIZER) + const initialValues: CampaignApplicationFormData = useMemo( + () => ({ + organizer: { + name: `${person?.firstName} ${person?.lastName}` ?? '', + phone: person?.phone ?? '', + email: person?.email ?? '', + acceptTermsAndConditions: false, + transparencyTermsAccepted: false, + personalInformationProcessingAccepted: false, + }, + }), + [person], + ) + const handleSubmit = () => { stepsHandler({ activeStep, setActiveStep }) } diff --git a/src/components/client/campaign-application/CampaignApplicationPage.tsx b/src/components/client/campaign-application/CampaignApplicationPage.tsx index 6a70d1b95..f78d9a401 100644 --- a/src/components/client/campaign-application/CampaignApplicationPage.tsx +++ b/src/components/client/campaign-application/CampaignApplicationPage.tsx @@ -1,10 +1,24 @@ +import { CircularProgress, Grid } from '@mui/material' +import { useSession } from 'next-auth/react' +import { useViewPersonByKeylockId } from 'common/hooks/person' import Layout from '../layout/Layout' import CampaignApplicationForm from './CampaignApplicationForm' export default function CampaignApplicationPage() { + const { data: session } = useSession() + const { data: person, isLoading } = useViewPersonByKeylockId(session?.user?.sub as string) + + if (isLoading) { + return ( + + + + ) + } + return ( - + {person && } ) } From 893ef9669c7a45719a1e9cb6e0720bf19ae08935 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Tue, 9 Jul 2024 23:09:50 +0300 Subject: [PATCH 2/3] fix: remove useMemo --- .../CampaignApplicationForm.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 6d942f6bb..18c4463a2 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -47,19 +47,16 @@ type Props = { export default function CampaignApplicationForm({ person }: Props) { const [activeStep, setActiveStep] = useState(Steps.ORGANIZER) - const initialValues: CampaignApplicationFormData = useMemo( - () => ({ - organizer: { - name: `${person?.firstName} ${person?.lastName}` ?? '', - phone: person?.phone ?? '', - email: person?.email ?? '', - acceptTermsAndConditions: false, - transparencyTermsAccepted: false, - personalInformationProcessingAccepted: false, - }, - }), - [person], - ) + const initialValues: CampaignApplicationFormData = { + organizer: { + name: `${person?.firstName} ${person?.lastName}` ?? '', + phone: person?.phone ?? '', + email: person?.email ?? '', + acceptTermsAndConditions: false, + transparencyTermsAccepted: false, + personalInformationProcessingAccepted: false, + }, + } const handleSubmit = () => { stepsHandler({ activeStep, setActiveStep }) From f3bff0f570813e86bff1417777cfcfde49d821cd Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Tue, 9 Jul 2024 23:19:20 +0300 Subject: [PATCH 3/3] fix: change to useCurrentPerson hook --- .../campaign-application/CampaignApplicationForm.tsx | 6 +++--- .../campaign-application/CampaignApplicationPage.tsx | 9 ++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 18c4463a2..c1dbfbfd9 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -1,6 +1,6 @@ -import { useCallback, useMemo, useState } from 'react' +import { useCallback, useState } from 'react' import { Grid, StepLabel } from '@mui/material' -import { PersonResponse } from 'gql/person' +import { Person } from 'gql/person' import { CampaignApplicationFormData, @@ -41,7 +41,7 @@ const steps: StepType[] = [ ] type Props = { - person: PersonResponse + person?: Person } export default function CampaignApplicationForm({ person }: Props) { diff --git a/src/components/client/campaign-application/CampaignApplicationPage.tsx b/src/components/client/campaign-application/CampaignApplicationPage.tsx index f78d9a401..6f8cfcefe 100644 --- a/src/components/client/campaign-application/CampaignApplicationPage.tsx +++ b/src/components/client/campaign-application/CampaignApplicationPage.tsx @@ -1,12 +1,11 @@ import { CircularProgress, Grid } from '@mui/material' -import { useSession } from 'next-auth/react' -import { useViewPersonByKeylockId } from 'common/hooks/person' +import { useCurrentPerson } from 'common/util/useCurrentPerson' import Layout from '../layout/Layout' import CampaignApplicationForm from './CampaignApplicationForm' export default function CampaignApplicationPage() { - const { data: session } = useSession() - const { data: person, isLoading } = useViewPersonByKeylockId(session?.user?.sub as string) + const { data: userData, isLoading } = useCurrentPerson() + const person = userData?.user || undefined if (isLoading) { return ( @@ -18,7 +17,7 @@ export default function CampaignApplicationPage() { return ( - {person && } + ) }