create.js

import React, { useState, useEffect } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { Box, Button, Container, Flex, Heading, Spinner, Text } from 'theme-ui'
import Layout from '../../components/layout'
import {
  personalInfoFormMap,
  jobDetailsFormMap,
  jobHistoryFormMap
} from '../../components/forms/formMaps'
import useCandidate from '../../hooks/use-candidate'
import { useAuth } from '../../context/auth'
import FormBuilder from '../../components/forms/FormBuiler'
import { useRouter } from 'next/router'
import { Stepper as FormStepper, Step } from 'react-form-stepper'

function StepTracker({ setFormStep, stepMap, formStep }) {
  return (
    <Box sx={{ backgroundColor: 'primary', padding: 48, marginBottom: 32 }}>
      <Heading
        marginBottom={48}
        color="white"
        as="h2"
        sx={{ textAlign: 'center' }}
      >
        Candidate Talent Profile
      </Heading>

      <FormStepper
        activeStep={formStep}
        styleConfig={{ inactiveTextColor: 'purple', labelFontSize: 24 }}
        style={{ color: 'white' }}
      >
        {stepMap.map((step, i) => (
          <Step
            key={step.title}
            label={step.title}
            onClick={() => setFormStep(i)}
          />
        ))}
      </FormStepper>
    </Box>
  )
}

function Stepper({ handleSubmit, onSubmit, setFormStep, formStep, isDirty }) {
  return (
    <Flex
      as="form"
      onSubmit={handleSubmit(onSubmit)}
      sx={{ justifyContent: 'space-between', marginTop: 32 }}
    >
      <Box>
        <Button
          type="button"
          disabled={formStep === 0}
          onClick={() => setFormStep(formStep - 1)}
        >
          Back
        </Button>
      </Box>
      <Flex
        sx={{
          justifyContent: 'space-between',
          alignItems: 'center'
        }}
      >
        <Button
          variant={isDirty ? 'default' : 'inactive'}
          marginRight="8px"
          type="submit"
        >
          Save
        </Button>
        <Button
          type="button"
          disabled={formStep === 3}
          onClick={() => setFormStep(formStep + 1)}
        >
          Next
        </Button>
      </Flex>
    </Flex>
  )
}

function CreateProfile() {
  const router = useRouter()
  const { user } = useAuth()
  const {
    getCandidate,
    candidateData,
    status,
    createCandidateEntry,
    updateCandidateEntry,
    deleteCandidateEntry
  } = useCandidate()

  const skills = candidateData?.skills || []
  const [skillTags, setSkillTags] = useState(skills)

  const methods = useForm({ defaultValues: candidateData, mode: 'onChange' })

  const {
    formState: { isDirty, dirtyFields },
    handleSubmit,
    reset,
    setValue
  } = methods

  const [isDirtyError, setIsDirtyError] = useState(null)
  const [formStep, setFormStep] = useState(0)

  useEffect(() => {
    async function handleUser(username) {
      await getCandidate(username)
    }

    if (user && candidateData === null) {
      handleUser(user.username)
    }
  }, [user, getCandidate, status, candidateData])

  useEffect(() => {
    if (candidateData) {
      reset(candidateData)
      setSkillTags(candidateData.skills)
    }
  }, [candidateData, reset])

  const stepMap = [
    {
      title: 'Personal Information',
      Component: (
        <FormBuilder
          formMap={personalInfoFormMap}
          form={useForm}
          candidateData={candidateData}
          title={'Personal Information'}
        />
      )
    },
    {
      title: 'Job Details',
      Component: (
        <FormBuilder
          formMap={jobDetailsFormMap}
          form={useForm}
          candidateData={candidateData}
          title={'Job Details'}
        />
      )
    },
    {
      title: 'Job History',
      Component: (
        <FormBuilder
          formMap={jobHistoryFormMap}
          form={useForm}
          candidateData={candidateData}
          title={'Job History'}
          skillTags={skillTags}
          setSkillTags={setSkillTags}
        />
      )
    },
    {
      title: 'Review',
      Component: <h1>Review Stuff</h1>
    }
  ]

  const onSubmit = async (data, e) => {
    e.preventDefault()

    data.skills = skillTags.length === 0 ? '' : skillTags
    if (!isDirty) {
      console.log('no updates to make')
      setIsDirtyError('No updates to make')
      return
    } else {
      setIsDirtyError(null)
    }

    if (data.resume.length === 0 && candidateData?.resume) {
      data.resume = candidateData.resume
    }

    if (candidateData?.id) {
      data.id = candidateData.id

      try {
        await updateCandidateEntry(data)
        await router.push('/profile')
      } catch (error) {
        alert(error)
      }
    }

    if (!candidateData) {
      await createCandidateEntry(data)
      router.push('/thank-you')
    }
  }

  if (status === 'idle') {
    return (
      <Layout>
        <Spinner />
      </Layout>
    )
  }

  return (
    <Layout>
      <FormProvider {...methods}>
        <StepTracker
          formStep={formStep}
          setFormStep={setFormStep}
          stepMap={stepMap}
        />
        <Container sx={{ maxWidth: 476 }}>
          {stepMap[formStep].Component}
          <Stepper
            handleSubmit={handleSubmit}
            onSubmit={onSubmit}
            setFormStep={setFormStep}
            formStep={formStep}
            isDirty={isDirty}
          />
        </Container>
      </FormProvider>
    </Layout>
  )
}

export default CreateProfile