killme.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 useCandidate from '../../hooks/use-candidate'
import { useAuth } from '../../context/auth'
import { Stepper as FormStepper } from 'react-form-stepper'
import JobDetails from '../../components/forms/JobDetails'
import JobHistory from '../../components/forms//JobHistory'
import PersonalInformation from '../../components/forms//PersonalInformation'

function FormSwitcher({ step, onSubmit }) {
  switch (step) {
    case 0:
      return <PersonalInformation onSubmit={onSubmit} />
    case 1:
      return <JobDetails onSubmit={onSubmit} />
    case 2:
      return <JobHistory onSubmit={onSubmit} />
    case 3:
      return <h1>Review Page</h1>
    default:
      return null
  }
}

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

      <FormStepper
        steps={[
          { label: 'Step 1' },
          { label: 'Step 2' },
          { label: 'Step 3' },
          { label: 'Step 4' }
        ]}
        activeStep={step}
        styleConfig={{ inactiveTextColor: 'purple', labelFontSize: 24 }}
        style={{ color: 'white' }}
      />
    </Box>
  )
}

function StepperFooter({ handleSubmit, onSubmit, setStep, step, isDirty }) {
  return (
    <Flex
      as="form"
      onSubmit={handleSubmit(onSubmit)}
      sx={{ justifyContent: 'space-between', marginTop: 32 }}
    >
      <Box>
        <Button
          type="button"
          disabled={step === 0}
          onClick={() => setStep(step - 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={step === 3}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </Flex>
    </Flex>
  )
}

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

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

  const methods = useForm({ defaultValues: candidateData })

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

  const [isDirtyError, setIsDirtyError] = useState(null)

  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 onSubmit = async (data, e) => {
    e.preventDefault()

    if (step <= 2) {
      setStep(step + 1)
    } else {
      alert('Submit the data')
    }

    // 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 step={step} setStep={setStep} />
        <Container sx={{ maxWidth: 476 }}>
          <FormSwitcher step={step} onSubmit={onSubmit} />
          <StepperFooter
            handleSubmit={handleSubmit}
            onSubmit={onSubmit}
            setStep={setStep}
            formStep={step}
            isDirty={isDirty}
            step={step}
          />
        </Container>
      </FormProvider>
    </Layout>
  )
}

export default CreateProfile