feat: prefill campaign application organizer form values from current…

… user (Epic #1842) (#1874)

* feat: prefill campaign application organizer form values from current user

* fix: remove useMemo

* fix: change to useCurrentPerson hook

src/components/client/campaign-application/CampaignApplicationForm.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
-
 import { Grid, StepLabel } from '@mui/material'
+import { Person } 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,24 @@ const steps: StepType[] = [
   },
 ]
 
-export default function CampaignApplicationForm() {
+type Props = {
+  person?: Person
+}
+
+export default function CampaignApplicationForm({ person }: Props) {
   const [activeStep, setActiveStep] = useState<Steps>(Steps.ORGANIZER)
 
+  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 })
   }

src/components/client/campaign-application/CampaignApplicationPage.tsx

@@ -1,10 +1,23 @@
+import { CircularProgress, Grid } from '@mui/material'
+import { useCurrentPerson } from 'common/util/useCurrentPerson'
 import Layout from '../layout/Layout'
 import CampaignApplicationForm from './CampaignApplicationForm'
 
 export default function CampaignApplicationPage() {
+  const { data: userData, isLoading } = useCurrentPerson()
+  const person = userData?.user || undefined
+
+  if (isLoading) {
+    return (
+      <Grid container justifyContent="center" alignContent="center" sx={{ height: '100vh' }}>
+        <CircularProgress />
+      </Grid>
+    )
+  }
+
   return (
     <Layout maxWidth="md" sx={{ paddingInline: 5 }}>
-      <CampaignApplicationForm />
+      <CampaignApplicationForm person={person} />
     </Layout>
   )
 }