@chakra-ui/core#Textarea JavaScript Examples

The following examples show how to use @chakra-ui/core#Textarea. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CompanyReviewForm.js    From allay-fe with MIT License 4 votes vote down vote up
ReviewForm2 = ({
  history,
  loadingCompanies,
  companies,
  getCompanies,
  postReview,
}) => {
  //initialize animations
  AOS.init()
  const { register, handleSubmit, formState } = useForm()

  // thinking state
  const [thinking, setThinking] = useState(false)
  const dots = () => {
    setThinking(true)
  }

  // search state
  const [searchTerm, setSearchTerm] = useState('')
  const [searchResults, setSearchResults] = useState([])

  // no company state
  const [noCompany, setNoCompany] = useState(false)

  // location "state"
  const [location, setLocation] = useState({})
  const [newLocation, setNewLocation] = useState({})
  const stateSelectorHelper = (value) => {
    setLocation(value)
  }

  // star rating
  const [starState, setStarState] = useState(0)

  //progress bar
  const [progress, setProgress] = useState({
    prec: 99,
    time: 8,
    prog: 2,
  })

  // state for visibility
  const [Tag2, setTag2] = useState(false)
  const [Tag3, setTag3] = useState(false)
  const [Tag4, setTag4] = useState(false)
  const [Tag5, setTag5] = useState(false)
  const [Tag6, setTag6] = useState(false)

  // brings to top on render
  useEffect(() => {
    getCompanies()
    setProgress({
      prec: 95,
      time: 7,
      prog: 5,
    })
    const element = document.getElementById('Tag1')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
  }, [getCompanies])

  // company search function
  useEffect(() => {
    if (searchTerm.length >= 3) {
      const results = companies.filter((company) =>
        company.company_name.toLowerCase().startsWith(searchTerm.toLowerCase())
      )
      setSearchResults(results)
      if (results.length === 0) {
        setNoCompany(true)
      } else {
        setNoCompany(false)
      }
    }
  }, [searchTerm, companies])

  // state confirmation search function
  useEffect(() => {
    if (location.myState) {
      const stateId = states.filter((i) =>
        i.state_name.toLowerCase().startsWith(location.myState.toLowerCase())
      )
      setNewLocation({ ...location, myState: stateId[0].id })
    }
  }, [location])

  // timers for moves
  let timer = null
  let dotTimer = null

  // 2nd tag
  const time1 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo2, 1000)
  }
  const routeTo2 = () => {
    setTag2(true)
    setProgress({
      prec: 70,
      time: 6,
      prog: 20,
    })
    const element = document.getElementById('Tag2')
    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
    setThinking(false)
  }

  // 3rd tag
  const time2 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo3, 1000)
  }
  const routeTo3 = () => {
    setTag3(true)
    setProgress({
      prec: 65,
      time: 4,
      prog: 35,
    })
    const element = document.getElementById('Tag3')
    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
    setThinking(false)
  }

  //4th tag
  const time3 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo4, 1000)
  }
  const routeTo4 = () => {
    setTag4(true)
    setProgress({
      prec: 45,
      time: 2,
      prog: 65,
    })
    const element = document.getElementById('Tag4')
    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
    setThinking(false)
  }

  // 5th tag
  const time4 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo5, 1000)
  }
  const routeTo5 = () => {
    setTag5(true)
    setProgress({
      prec: 20,
      time: 1,
      prog: 80,
    })
    const element = document.getElementById('Tag5')
    element.scrollIntoView({ behavior: 'smooth', block: 'center' })
    setThinking(false)
  }

  // 6th tag
  const time5 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo6, 1000)
  }
  const routeTo6 = () => {
    setTag6(true)
    setProgress({
      prec: 100,
      time: 0,
      prog: 100,
    })
    const element = document.getElementById('Tag6')
    element.scrollIntoView({ behavior: 'smooth', block: 'center' })
    setThinking(false)
  }

  //push to dashboard and send info to DS for review
  const sendInfoToDS = (data) => {
    var dataForDS = JSON.stringify(data)
    axiosToDS()
      .post('/check_review', dataForDS)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
    history.push('/dashboard')
  }

  //submit handler
  const submitForm = (data) => {
    postReview(localStorage.getItem('userId'), {
      ...data,
      review_type_id: 1,
      overall_rating: starState,
      city: newLocation.myCity,
      state_id: newLocation.myState,
    }).then(() => sendInfoToDS(data))
    ReactGA.event({
      category: 'Review',
      action: `Submit review`,
    })
  }

  return (
    // main container

    <>
      <Flex justify="center">
        <ProgressHeader progress={progress} />
      </Flex>

      <Flex w="100%" margin="0 auto" minH="100vh">
        {thinking ? (
          <>
            <Flex
              bottom="0"
              position="fixed"
              overflow="hidden"
              zIndex="999"
              pt="5%"
              pl="15%"
            >
              <ThinkingDots />
            </Flex>
          </>
        ) : null}
        {/* form container */}
        <Flex
          w="100%"
          bg="#FFF"
          flexDir="column"
          px="2%"
          pt="5%"
          margin="0 auto"
        >
          {/*--------------- start of form ---------------  */}
          <form onSubmit={handleSubmit(submitForm)}>
            <FormControl isRequired>
              {/* first prompt */}
              <Flex
                id="Tag1"
                align="center"
                h="5%"
                p="1%"
                w="416px"
                mb="8%"
                mt="5%"
                bg="#F2F6FE"
                rounded="20px"
                data-aos="fade-right"
                data-aos-offset="200"
                data-aos-delay="50"
                data-aos-duration="1000"
                data-aos-easing="ease-in-out"
                data-aos-mirror="true"
                data-aos-once="true"
              >
                <p>Tell me some details so we can get started</p>
              </Flex>
              {/* form container  */}
              <Flex w="100%" justify="flex-end">
                {/* company box */}
                <Flex
                  w="459px"
                  h="700px"
                  px="6"
                  py="8"
                  border="1px solid #BBBDC6"
                  rounded="6px"
                  flexDir="column"
                  justify="space-evenly"
                  data-aos="fade-in"
                  data-aos-offset="200"
                  data-aos-delay="1000"
                  data-aos-duration="1500"
                  data-aos-easing="ease-in-out"
                  data-aos-mirror="true"
                  data-aos-once="true"
                  data-aos-anchor="Tag1"
                >
                  <FormLabel>1. Company name</FormLabel>
                  {loadingCompanies ? (
                    <>
                      <Flex justify="center" w="100%">
                        <CustomSpinner />
                      </Flex>
                    </>
                  ) : (
                    <>
                      {' '}
                      <Input
                        h="56px"
                        variant="filled"
                        rounded="6px"
                        textTransform="capitalize"
                        type="text"
                        label="company_name"
                        name="company_name"
                        list="company_name"
                        ref={register}
                        onChange={(e) => setSearchTerm(e.target.value)}
                      />
                      <datalist id="company_name">
                        {searchResults.map((company) => (
                          <option value={company.company_name} key={company.id}>
                            {company.company_name}
                          </option>
                        ))}
                      </datalist>
                      {noCompany ? (
                        <>
                          <Link mb="3" color="grey" href="/add-company">
                            Oops, you need to add that company!
                          </Link>
                        </>
                      ) : (
                        <Flex mb="6" />
                      )}
                    </>
                  )}
                  <FormLabel>2. Status at the company</FormLabel>
                  <Select
                    h="56px"
                    mb="6"
                    rounded="6px"
                    variant="filled"
                    label="work_status_id"
                    name="work_status_id"
                    placeholder="Select one"
                    ref={register}
                  >
                    <option value={1}>Current Employee</option>
                    <option value={2}>Former Employee</option>
                    <option value={3}>Full Time</option>
                    <option value={4}>Part Time</option>
                    <option value={5}>Intern</option>
                  </Select>
                  <FormLabel>3. Job Title</FormLabel>
                  <Input
                    h="56px"
                    mb="6"
                    variant="filled"
                    rounded="6px"
                    autoCapitalize="none"
                    type="text"
                    label="job_title"
                    name="job_title"
                    list="job_title"
                    ref={register}
                  />
                  <FormLabel>3. Location of company</FormLabel>
                  <CustomAutoComplete
                    stateHelper={stateSelectorHelper}
                    id="Company Headquarters"
                    name="Company Headquarters"
                    label="Company Headquarters"
                    placeholder="e.g. Los Angeles, CA"
                  />
                  <FormLabel mt="6">5. Length of position</FormLabel>
                  <Flex w="100%" justify="space-between">
                    <Input
                      type="number"
                      min="1970"
                      max="2030"
                      h="56px"
                      variant="filled"
                      rounded="6px"
                      w="45%"
                      mr="2%"
                      label="start_date"
                      name="start_date"
                      placeholder="YYYY"
                      ref={register}
                    />

                    <Input
                      h="56px"
                      variant="filled"
                      rounded="6px"
                      autoCapitalize="none"
                      type="number"
                      min="1970"
                      max="2030"
                      w="45%"
                      label="end_date"
                      name="end_date"
                      placeholder="YYYY"
                      ref={register}
                    />
                  </Flex>
                </Flex>
                {/* avatar */}
                <Flex
                  h="700px"
                  align="flex-end"
                  ml="1%"
                  data-aos="fade-in"
                  data-aos-offset="200"
                  data-aos-delay="1000"
                  data-aos-duration="1500"
                  data-aos-easing="ease-in-out"
                  data-aos-mirror="true"
                  data-aos-once="true"
                  data-aos-anchor="Tag1"
                >
                  <Avatar size="md" src="https://bit.ly/broken-link" />
                </Flex>
              </Flex>
              <Flex
                justify="flex-end"
                mb="5%"
                data-aos="fade-in"
                data-aos-offset="120"
                data-aos-delay="1000"
                data-aos-duration="1500"
                data-aos-easing="ease-in-out"
                data-aos-mirror="true"
                data-aos-once="true"
                data-aos-anchor="Tag1"
              >
                <Button
                  data-cy="companyReviewFormButton"
                  h="56px"
                  w="17%"
                  mt="2%"
                  rounded="35px"
                  border="1px solid #344CD0"
                  color="#344CD0"
                  backgroundColor="#FFF"
                  _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                  onClick={time1}
                >
                  Next
                </Button>
              </Flex>
              {/* Second prompt */}
              {Tag2 ? (
                <>
                  <Flex
                    id="Tag2"
                    align="center"
                    p="1%"
                    mb="2%"
                    h="5%"
                    w="45%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Thank you for that information.</p>
                  </Flex>
                  <Flex
                    id="Tag2"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="800"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Please add some comments below. Helpful comments include
                      information about company culture, work environment,
                      career growth, salary, etc.
                    </p>
                  </Flex>
                  <Flex w="100%" justify="flex-end">
                    {/* long hand interview box */}
                    <Flex
                      w="459px"
                      h="350px"
                      px="6"
                      py="8"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="2400"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag2"
                    >
                      <FormLabel>Comments</FormLabel>
                      <Textarea
                        variant="filled"
                        resize="none"
                        h="250px"
                        rowsMax={6}
                        type="text"
                        name="comment"
                        rounded="6px"
                        ref={register}
                        data-cy="companyComment"
                      />
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="350px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="2400"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag2"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="120"
                    data-aos-delay="2400"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="Tag2"
                  >
                    <Button
                      data-cy="companyReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time2}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* 3rd prompt */}
              {Tag3 ? (
                <>
                  <Flex
                    id="Tag3"
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="2%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Thank you for sharing that.</p>
                  </Flex>
                  <Flex
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="1500"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      To better understand company culture, would you please add
                      a few more details?
                    </p>
                  </Flex>
                  {/* hours container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* hours box */}
                    <Flex
                      w="459px"
                      h="136px"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="2800"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag3"
                    >
                      <FormLabel>Working hours</FormLabel>
                      <Select
                        h="56px"
                        rounded="6px"
                        variant="filled"
                        label="typical_hours"
                        name="typical_hours"
                        placeholder="Select one"
                        ref={register}
                      >
                        <option value={29}>Less than 30 hours</option>
                        <option value={30}>30 hours+</option>
                        <option value={40}>40 hours+</option>
                        <option value={50}>50 hours+</option>
                        <option value={60}>60 hours+</option>
                      </Select>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="136px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="2800"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag3"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="120"
                    data-aos-delay="2800"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="Tag3"
                  >
                    <Button
                      data-cy="companyReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time3}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* 4th prompt */}
              {Tag4 ? (
                <>
                  <Flex
                    id="Tag4"
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Posting your hiring salary helps many job-seekers
                      negotiate fair salaries.
                    </p>
                  </Flex>
                  {/* salary container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* salary box */}
                    <Flex
                      w="459px"
                      h="150px"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="1000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag4"
                    >
                      <FormLabel>Hiring salary</FormLabel>
                      <InputGroup>
                        <InputLeftElement
                          mb="4"
                          py="28px"
                          color="gray.300"
                          fontSize="1.2em"
                          children="$"
                        />
                        <Input
                          h="56px"
                          mb="6"
                          variant="filled"
                          rounded="6px"
                          autoCapitalize="none"
                          type="number"
                          label="salary"
                          name="salary"
                          ref={register}
                        />
                      </InputGroup>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="150px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag4"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="120"
                    data-aos-delay="1000"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="Tag4"
                  >
                    <Button
                      data-cy="companyReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time4}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* 5th prompt */}
              {Tag5 ? (
                <>
                  <Flex
                    id="Tag5"
                    align="center"
                    h="5%"
                    w="416px"
                    p="1%"
                    mb="2%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Awesome! Thank you for sharing that.</p>
                  </Flex>
                  <Flex
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="1000"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>One last question.</p>
                  </Flex>
                  {/* overall container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* overall box */}
                    <Flex
                      w="459px"
                      h="136px"
                      mb="8%"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <FormLabel mb="4">
                        Please rate your overall experience.
                      </FormLabel>
                      <Flex justify="center" w="100%">
                        <BeautyStars
                          name="companyOverall"
                          value={starState}
                          activeColor="#344CD0"
                          onChange={(value) => {
                            setStarState(value)
                            time5()
                          }}
                        />
                      </Flex>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="136px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag5"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                </>
              ) : null}
              {/* 6th prompt */}
              {Tag6 ? (
                <>
                  <Flex
                    id="Tag6"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="#ratingTag"
                  >
                    <p>Thank you! Don’t forget to hit submit. </p>
                  </Flex>
                  {/* submit container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* submit box */}
                    <Flex
                      w="459px"
                      h="136px"
                      mb="8%"
                      p="6"
                      justify="center"
                      align="center"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Button
                        bg="#344CD0"
                        color="white"
                        type="submit"
                        isLoading={formState.isSubmitting}
                        rounded="6px"
                        border="none"
                        data-cy="companyReviewSubmit"
                      >
                        Submit
                      </Button>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="136px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                </>
              ) : null}
            </FormControl>
          </form>
        </Flex>
      </Flex>
    </>
  )
}
Example #2
Source File: EditInterviewForm.js    From allay-fe with MIT License 4 votes vote down vote up
EditInterviewForm = ({
  review,
  getReviewById,
  editReview,
  match,
  history,
  isLoading,
}) => {
  const { register, handleSubmit, errors, formState } = useForm()
  const id = match.params.id
  const [editValue, setEditValue] = useState({
    id: id,
  })

  // specifically for the cancel button functionality
  const [isOpen, setIsOpen] = useState()
  const onClose = () => setIsOpen(false)
  const cancelRef = useRef()

  // validating salary
  function validateSalary(value) {
    let error
    if (value < 0) {
      error = 'Salary cannot be less than zero.'
    }
    return error || true
  }

  useEffect(() => {
    getReviewById(id)
  }, [id, getReviewById])

  if (isLoading) {
    return (
      <Flex justify="center" align="center" w="100vh" h="100vh">
        <CustomSpinner />
      </Flex>
    )
  }

  const submitEdits = () => {
    editReview(review.user_id, review.review_id, editValue).then(() => {
      history.push('/dashboard')
    })
    ReactGA.event({
      category: 'Interview Review Edit',
      action: `Submit edit`,
    })
  }

  return (
    <Flex justify="center" w="100%" minH="100vh" bg="#F2F6FE">
      <Flex w="45%" my="10%" px="4%" justify="center" flexDir="column">
        <form onSubmit={handleSubmit(submitEdits)}>
          <FormControl>
            <h2 color="#525252" align="center">
              Edit interview review
            </h2>
            <FormLabel color="#525252" mt="3">
              Job title
            </FormLabel>
            <EditReviewInput
              name="job_title"
              placeholder={review.job_title}
              value={editValue.job_title}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: e.target.value,
                })
              }
            />
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job location
            </FormLabel>
            <Flex justify="space-between" wrap="nowrap">
              <EditReviewInput
                w="60%"
                h="58px"
                py="32px"
                borderColor="#ECF1FE"
                rounded="3px"
                name="city"
                placeholder={review.city}
                value={editValue.city}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: e.target.value,
                  })
                }
              />

              <Select
                w="35%"
                mb="4"
                h="65px"
                rounded="3px"
                border="1px solid black"
                name="state_id"
                ref={register}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: e.target.value,
                  })
                }
              >
                <option value={0}>{review.state_name}</option>
                {states.map((i) => (
                  <option key={i.id} value={i.id}>
                    {i.state_name}
                  </option>
                ))}
              </Select>
            </Flex>
          </FormControl>

          <FormControl isInvalid={errors.salary}>
            <FormLabel fontSize="15px" color="#525252">
              Salary
            </FormLabel>
            <InputGroup>
              <InputLeftElement
                mb="4"
                h="58px"
                py="32px"
                borderColor="#ECF1FE"
                color="gray.300"
                fontSize="1.2em"
                children="$"
              />
              <EditReviewInput
                pl="6%"
                borderColor="#ECF1FE"
                rounded="3px"
                name="salary"
                type="number"
                placeholder={review.salary}
                ref={register({ validate: validateSalary })}
                value={editValue.salary}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: e.target.value,
                  })
                }
              />
            </InputGroup>
            <FormErrorMessage>
              {errors.salary && errors.salary.message}
            </FormErrorMessage>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job offer
            </FormLabel>
            <Select
              mb="4"
              h="65px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              name="offer_status_id"
              ref={register}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: e.target.value,
                })
              }
            >
              <option value={0}>{review.offer_status}</option>
              <option value={1}>No offer</option>
              <option value={2}>Offer accepted</option>
              <option value={3}>Offer declined</option>
              )}
            </Select>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Interview difficulty
            </FormLabel>
            <Select
              mb="4"
              h="65px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              name="difficulty_rating"
              ref={register}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: e.target.value,
                })
              }
            >
              <option value={0}>{review.difficulty_rating}</option>
              <option value={5}>5 - Very hard</option>
              <option value={4}>4 - Somewhat hard</option>
              <option value={3}>3 - Somewhat easy</option>
              <option value={2}>2 - Easy</option>
              <option value={1}>1 - Very easy</option>
            </Select>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Interview rounds
            </FormLabel>
            <EditReviewInput
              name="interview_rounds"
              type="number"
              color="#494B5B"
              placeholder={review.interview_rounds}
              value={editValue.interview_rounds}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: e.target.value,
                })
              }
            />
          </FormControl>

          <FormLabel mb="2">Interview types </FormLabel>
          <Flex mb="4">
            <Flex w="50%">
              <CheckboxGroup defaultValue={[true]}>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="phone_interview"
                  value={review.phone_interview}
                  onClick={() =>
                    review.phone_interview
                      ? setEditValue({ ...editValue, phone_interview: false })
                      : setEditValue({ ...editValue, phone_interview: true })
                  }
                >
                  Phone Screening
                </Checkbox>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="resume_review"
                  value={review.resume_review}
                  onClick={() =>
                    review.resume_review
                      ? setEditValue({ ...editValue, resume_review: false })
                      : setEditValue({ ...editValue, resume_review: true })
                  }
                >
                  Resume Review
                </Checkbox>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="take_home_assignments"
                  value={review.take_home_assignments}
                  onClick={() =>
                    review.take_home_assignments
                      ? setEditValue({
                          ...editValue,
                          take_home_assignments: false,
                        })
                      : setEditValue({
                          ...editValue,
                          take_home_assignments: true,
                        })
                  }
                >
                  Take Home Assignments
                </Checkbox>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="online_coding_assignments"
                  value={review.online_coding_assignments}
                  onClick={() =>
                    review.online_coding_assignments
                      ? setEditValue({
                          ...editValue,
                          online_coding_assignments: false,
                        })
                      : setEditValue({
                          ...editValue,
                          online_coding_assignments: true,
                        })
                  }
                >
                  Online Coding Assignments
                </Checkbox>
              </CheckboxGroup>
            </Flex>
            <Flex>
              <CheckboxGroup defaultValue={[true]}>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="portfolio_review"
                  value={review.portfolio_review}
                  onClick={() =>
                    review.portfolio_review
                      ? setEditValue({ ...editValue, portfolio_review: false })
                      : setEditValue({ ...editValue, portfolio_review: true })
                  }
                >
                  Portfoilio Review
                </Checkbox>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="screen_share"
                  value={review.screen_share}
                  onClick={() =>
                    review.screen_share
                      ? setEditValue({ ...editValue, screen_share: false })
                      : setEditValue({ ...editValue, screen_share: true })
                  }
                >
                  Screen Share
                </Checkbox>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="open_source_contribution"
                  value={review.open_source_contribution}
                  onClick={() =>
                    review.open_source_contribution
                      ? setEditValue({
                          ...editValue,
                          open_source_contribution: false,
                        })
                      : setEditValue({
                          ...editValue,
                          open_source_contribution: true,
                        })
                  }
                >
                  Open Source Contribution
                </Checkbox>
                <Checkbox
                  size="md"
                  border="rgba(72, 72, 72, 0.1)"
                  name="side_projects"
                  value={review.side_projects}
                  onClick={() =>
                    review.side_projects
                      ? setEditValue({ ...editValue, side_projects: false })
                      : setEditValue({ ...editValue, side_projects: true })
                  }
                >
                  Side Projects
                </Checkbox>
              </CheckboxGroup>
            </Flex>
          </Flex>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job review
            </FormLabel>
            <Textarea
              mb="4"
              h="144px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              rowsMax={6}
              resize="none"
              type="text"
              name="comment"
              placeholder={review.comment}
              ref={register}
              value={editValue.comment}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: e.target.value,
                })
              }
            />
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job rating
            </FormLabel>
            <Select
              mb="4"
              h="65px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              name="overall_rating"
              ref={register}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: e.target.value,
                })
              }
            >
              <option value={0}>{review.overall_rating}</option>
              <option value={5}>5 - Great</option>
              <option value={4}>4 - Good</option>
              <option value={3}>3 - OK </option>
              <option value={2}>2 - Poor </option>
              <option value={1}>1 - Very poor </option>
            </Select>
          </FormControl>

          <Flex mt="40px">
            <Button
              bg="#344CD0"
              color="white"
              isLoading={formState.isSubmitting}
              type="submit"
              w="65%"
              h="72px"
              fontSize="18px"
              data-cy="companyEditInterviewSubmit"
            >
              Save changes
            </Button>
            <Flex
              align="center"
              justify="center"
              isloading
              height="72px"
              width="30%"
              color="#344CD0"
              fontSize="18px"
              fontWeight="bold"
              cursor="pointer"
              onClick={() => setIsOpen(true)}
            >
              Cancel
            </Flex>
            <AlertDialog
              isOpen={isOpen}
              leastDestructiveRef={cancelRef}
              onClose={onClose}
            >
              <AlertDialogOverlay />
              <AlertDialogContent>
                <AlertDialogHeader fontSize="lg" fontWeight="bold">
                  Cancel form?
                </AlertDialogHeader>
                <AlertDialogBody>
                  Are you sure? You can't undo this action.
                </AlertDialogBody>

                <AlertDialogFooter>
                  <Flex>
                    <Flex
                      align="center"
                      justify="center"
                      isloading
                      height="56px"
                      width="30%"
                      mr="5%"
                      color="#344CD0"
                      fontSize="18px"
                      fontWeight="bold"
                      cursor="pointer"
                      ref={cancelRef}
                      onClick={onClose}
                    >
                      Cancel
                    </Flex>
                    <Button
                      h="56px"
                      rounded="10px"
                      bg="#344CD0"
                      border="none"
                      color="white"
                      onClick={() => history.push('/dashboard')}
                      ml={3}
                    >
                      Yes I'm sure
                    </Button>
                  </Flex>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </Flex>
        </form>
      </Flex>
    </Flex>
  )
}
Example #3
Source File: EditReviewForm.js    From allay-fe with MIT License 4 votes vote down vote up
EditReviewForm = ({
  // getReviewById,
  // editReview,
  match,
  history,
  location,
}) => {
  const state = location.state
  const dispatch = useDispatch()
  const id = match.params.id
  const userId = localStorage.getItem('userId')
  // useEffect(() => {
  //   getReviewById(id)
  // }, [id, getReviewById])

  const { register, handleSubmit, errors, formState } = useForm({})

  const [editValue, setEditValue] = useState({
    id: id,
    job_title: state.job_title || null,
    city: state.city || null,
    state_id: null,
    salary: state.salary || null,
    company_name: state.company_name || null,
    work_status_id: null,
    start_date: state.start_date || null,
    end_date: state.end_date || null,
    typical_hours: state.typical_hours || null,
    comment: state.comment || null,
    overall_rating: state.overall_rating || null,
  })

  console.log('here', editValue)

  // specifically for the cancel button functionality
  const [isOpen, setIsOpen] = useState()
  const onClose = () => setIsOpen(false)
  const cancelRef = useRef()

  // validating salary
  function validateSalary(value) {
    let error
    if (value < 0) {
      error = 'Salary cannot be less than zero.'
    }
    return error || true
  }

  // if (isLoading) {
  //   return (
  //     <Flex justify="center" align="center" w="100vh" h="100vh">
  //       <CustomSpinner />
  //     </Flex>
  //   )
  // }

  // console.log('before sent', editValue)
  const submitEdits = () => {
    dispatch(editReview(userId, id, editValue)).then(() => {
      console.log('sent', editValue)
      // history.push('/dashboard')
    })

    ReactGA.event({
      category: 'Company Review Edit',
      action: `Submit edit`,
    })
  }

  return (
    <Flex w="100%" justify="center" minH="100vh" bg="#F2F6FE">
      <Flex w="45%" my="10%" px="4%" justify="center" flexDir="column">
        <form onSubmit={handleSubmit(submitEdits)}>
          <FormControl>
            <h2 color="#525252" align="center">
              Edit company review
            </h2>
            <FormLabel color="#525252" mt="3">
              Job title
            </FormLabel>
            <Input
              name="job_title"
              type="text"
              label="job_title"
              placeholder={state.job_title}
              value={editValue.job_title}
              onChange={(e) =>
                setEditValue({ ...editValue, [e.target.name]: e.target.value })
              }
            />
          </FormControl>
          <FormControl>
            <FormLabel color="#525252" mt="3">
              Company
            </FormLabel>
            <Input
              name="company_name"
              placeholder={state.company_name}
              value={editValue.company_name}
              onChange={(e) =>
                setEditValue({ ...editValue, [e.target.name]: e.target.value })
              }
            />
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job location
            </FormLabel>
            <Flex justify="space-between" wrap="nowrap">
              <Input
                w="60%"
                h="58px"
                py="32px"
                borderColor="#ECF1FE"
                rounded="3px"
                name="city"
                placeholder={state.city}
                value={editValue.city}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: e.target.value,
                  })
                }
              />

              <Select
                w="35%"
                mb="4"
                h="65px"
                rounded="3px"
                border="1px solid black"
                name="state_id"
                ref={register}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: Number(e.target.value),
                  })
                }
              >
                <option value={0}>{state.state_name}</option>
                {states.map((i) => (
                  <option key={i.id} value={i.id}>
                    {i.state_name}
                  </option>
                ))}
              </Select>
            </Flex>
          </FormControl>

          <FormControl isInvalid={errors.salary}>
            <FormLabel fontSize="15px" color="#525252">
              Salary
            </FormLabel>
            <InputGroup>
              <InputLeftElement
                mb="4"
                h="58px"
                py="32px"
                borderColor="#ECF1FE"
                color="gray.300"
                fontSize="1.2em"
                children="$"
              />
              <Input
                pl="6%"
                borderColor="#ECF1FE"
                rounded="3px"
                name="salary"
                type="number"
                placeholder={state.salary}
                ref={register({ validate: validateSalary })}
                value={editValue.salary}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: Number(e.target.value),
                  })
                }
              />
            </InputGroup>
            <FormErrorMessage>
              {errors.salary && errors.salary.message}
            </FormErrorMessage>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Work status
            </FormLabel>
            <Select
              mb="4"
              h="65px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              name="work_status_id"
              ref={register}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: Number(e.target.value),
                })
              }
            >
              <option value={0}>{state.work_status}</option>
              <option value={1}>Current Employee</option>
              <option value={2}>Former Employee</option>
              <option value={3}>Full Time</option>
              <option value={4}>Part Time</option>
              <option value={5}>Intern</option>
              )}
            </Select>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Years of employment
            </FormLabel>
            <Flex justify="space-between" wrap="nowrap">
              <Input
                w="48%"
                name="start_date"
                type="number"
                placeholder={`Start - ${state.start_date}`}
                value={editValue.start_date}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: Number(e.target.value),
                  })
                }
              />
              <Input
                w="48%"
                name="end_date"
                type="number"
                placeholder={`End - ${state.end_date}`}
                value={editValue.end_date}
                onChange={(e) =>
                  setEditValue({
                    ...editValue,
                    [e.target.name]: Number(e.target.value),
                  })
                }
              />
            </Flex>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Working hours
            </FormLabel>
            <Input
              name="typical_hours"
              type="number"
              placeholder={state.typical_hours}
              value={editValue.typical_hours}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: Number(e.target.value),
                })
              }
            />
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job review
            </FormLabel>
            <Textarea
              mb="4"
              h="144px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              rowsMax={6}
              resize="none"
              type="text"
              name="comment"
              placeholder={state.comment}
              ref={register}
              value={editValue.comment}
              onChange={(e) =>
                setEditValue({ ...editValue, [e.target.name]: e.target.value })
              }
            />
          </FormControl>

          <FormControl>
            <FormLabel fontSize="15px" color="#525252">
              Job rating
            </FormLabel>
            <Select
              mb="4"
              h="65px"
              rounded="3px"
              border="1px solid black"
              color="#494B5B"
              name="overall_rating"
              ref={register}
              onChange={(e) =>
                setEditValue({
                  ...editValue,
                  [e.target.name]: Number(e.target.value),
                })
              }
            >
              <option value={0}>{state.overall_rating}</option>
              <option value={5}>5 - Great</option>
              <option value={4}>4 - Good</option>
              <option value={3}>3 - OK </option>
              <option value={2}>2 - Poor </option>
              <option value={1}>1 - Very Poor </option>
            </Select>
          </FormControl>

          <Flex mt="40px">
            <Button
              bg="#344CD0"
              color="white"
              isLoading={formState.isSubmitting}
              type="submit"
              w="65%"
              h="72px"
              fontSize="18px"
              // data-cy="companyEditstateSubmit"
            >
              Save changes
            </Button>
            <Flex
              align="center"
              justify="center"
              isloading
              height="72px"
              width="30%"
              color="#344CD0"
              fontSize="18px"
              fontWeight="bold"
              cursor="pointer"
              onClick={() => setIsOpen(true)}
            >
              Cancel
            </Flex>
            <AlertDialog
              isOpen={isOpen}
              leastDestructiveRef={cancelRef}
              onClose={onClose}
            >
              <AlertDialogOverlay />
              <AlertDialogContent>
                <AlertDialogHeader fontSize="lg" fontWeight="bold">
                  Cancel form?
                </AlertDialogHeader>
                <AlertDialogBody>
                  Are you sure? You can't undo this action.
                </AlertDialogBody>

                <AlertDialogFooter>
                  <Flex>
                    <Flex
                      align="center"
                      justify="center"
                      isloading
                      height="56px"
                      width="30%"
                      mr="5%"
                      color="#344CD0"
                      fontSize="18px"
                      fontWeight="bold"
                      cursor="pointer"
                      ref={cancelRef}
                      onClick={onClose}
                    >
                      Cancel
                    </Flex>
                    <Button
                      h="56px"
                      rounded="10px"
                      bg="#344CD0"
                      border="none"
                      color="white"
                      onClick={() => history.push('/dashboard')}
                      ml={3}
                    >
                      Yes I'm sure
                    </Button>
                  </Flex>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </Flex>
        </form>
      </Flex>
    </Flex>
  )
}
Example #4
Source File: InterviewForm.js    From allay-fe with MIT License 4 votes vote down vote up
InterviewForm = ({
  loadingCompanies,
  getCompanies,
  companies,
  postReview,
  history,
}) => {
  //initialize animations
  AOS.init()
  const { register, handleSubmit, formState } = useForm()

  // state "state"
  const [location, setLocation] = useState({})
  const [newLocation, setNewLocation] = useState({})
  const stateSelectorHelper = (value) => {
    setLocation(value)
  }

  // thinking state
  const [thinking, setThinking] = useState(false)
  const dots = () => {
    setThinking(true)
  }

  // search state
  const [searchTerm, setSearchTerm] = useState('')
  const [searchResults, setSearchResults] = useState([])

  // no company state
  const [noCompany, setNoCompany] = useState(false)

  // star rating
  const [starState, setStarState] = useState(0)

  // custom radio button state offer status
  const [offer, setOffer] = useState(1)

  //progress bar
  const [progress, setProgress] = useState({
    prec: 99,
    time: 8,
    prog: 2,
  })
  // company search function

  useEffect(() => {
    if (searchTerm.length >= 3) {
      const results = companies.filter((company) =>
        company.company_name.toLowerCase().startsWith(searchTerm.toLowerCase())
      )
      setSearchResults(results)
      if (results.length === 0) {
        setNoCompany(true)
      } else {
        setNoCompany(false)
      }
    }
  }, [searchTerm, companies])

  // state confirmation search function
  useEffect(() => {
    if (location.myState) {
      const stateId = states.filter((i) =>
        i.state_name.toLowerCase().startsWith(location.myState.toLowerCase())
      )
      setNewLocation({ ...location, myState: stateId[0].id })
    }
  }, [location])

  // state for visibility
  const [Tag2, setTag2] = useState(false)
  const [Tag3, setTag3] = useState(false)
  const [Tag4, setTag4] = useState(false)
  const [Tag5, setTag5] = useState(false)
  const [Tag6, setTag6] = useState(false)
  const [Tag7, setTag7] = useState(false)
  const [Tag8, setTag8] = useState(false)
  const [Tag9, setTag9] = useState(false)

  // brings to top on render
  useEffect(() => {
    getCompanies()
    setProgress({
      prec: 95,
      time: 7,
      prog: 5,
    })
    const element = document.getElementById('Tag1')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    })
  }, [getCompanies])

  // timers for moves
  let timer = null
  let dotTimer = null

  // 2nd tag
  const time1 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo2, 1000)
  }
  const routeTo2 = () => {
    setTag2(true)
    setProgress({
      prec: 80,
      time: 6,
      prog: 20,
    })
    const element = document.getElementById('Tag2')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    })
    setThinking(false)
  }

  // 3rd tag
  const time2 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo3, 1000)
  }

  const routeTo3 = () => {
    setTag3(true)
    setProgress({
      prec: 70,
      time: 5,
      prog: 30,
    })
    const element = document.getElementById('Tag3')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
    setThinking(false)
  }

  //4th tag
  const time3 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo4, 1000)
  }

  const routeTo4 = () => {
    setTag4(true)
    setProgress({
      prec: 60,
      time: 4,
      prog: 40,
    })
    const element = document.getElementById('Tag4')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    })
    setThinking(false)
  }

  // 5th tag
  const time4 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo5, 1000)
  }

  const routeTo5 = () => {
    setTag5(true)
    setProgress({
      prec: 50,
      time: 3,
      prog: 50,
    })
    const element = document.getElementById('Tag5')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
    setThinking(false)
  }

  // 6th tag
  const time5 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo6, 1000)
  }
  const routeTo6 = () => {
    setTag6(true)
    setProgress({
      prec: 40,
      time: 2,
      prog: 60,
    })
    const element = document.getElementById('Tag6')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
    setThinking(false)
  }

  // 7th tag
  const time6 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo7, 1000)
  }
  const routeTo7 = () => {
    setTag7(true)
    setProgress({
      prec: 30,
      time: 1,
      prog: 70,
    })
    const element = document.getElementById('Tag7')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
    setThinking(false)
  }

  // 8th tag
  const time7 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo8, 1000)
  }
  const routeTo8 = () => {
    setTag8(true)
    setProgress({
      prec: 20,
      time: 1,
      prog: 85,
    })
    const element = document.getElementById('Tag8')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
    setThinking(false)
  }

  // 9th tag
  const time8 = () => {
    clearTimeout(timer)
    clearTimeout(dotTimer)
    dotTimer = setTimeout(dots, 300)
    timer = setTimeout(routeTo9, 1000)
  }
  const routeTo9 = () => {
    setTag9(true)
    setProgress({
      prec: 100,
      time: 0,
      prog: 100,
    })
    const element = document.getElementById('Tag9')
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    })
    setThinking(false)
  }

  // custom select for offer accepted
  const CustomRadio = React.forwardRef((props, ref) => {
    const { isChecked, isDisabled, value, ...rest } = props
    return (
      <Button
        ref={ref}
        variantColor={isChecked ? 'blue' : 'gray'}
        aria-checked={isChecked}
        role="radio"
        isDisabled={isDisabled}
        {...rest}
      />
    )
  })
  //push to dashboard and send info to DS for review
  const sendInfoToDS = (data) => {
    var dataForDS = JSON.stringify(data)
    axiosToDS()
      .post('/check_review', dataForDS)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
    history.push('/dashboard')
  }

  //submit handler
  const submitForm = (data) => {
    postReview(localStorage.getItem('userId'), {
      ...data,
      review_type_id: 2,
      overall_rating: starState,
      offer_status_id: offer,
      city: newLocation.myCity,
      state_id: newLocation.myState,
    }).then(() => sendInfoToDS(data))
    ReactGA.event({
      category: 'Review',
      action: `Submit review`,
    })
  }

  return (
    // main container
    <div>
      <Flex justify="center">
        <ProgressHeader progress={progress} />
      </Flex>
      <Flex w="100%" margin="0 auto" minH="100vh">
        {thinking ? (
          <>
            <Flex
              bottom="0"
              position="fixed"
              overflow="hidden"
              zIndex="999"
              pt="5%"
              pl="15%"
            >
              <ThinkingDots />
            </Flex>
          </>
        ) : null}

        {/* form container */}
        <Flex
          w="100%"
          bg="#FFF"
          flexDir="column"
          px="2%"
          pt="10%"
          margin="0 auto"
        >
          {/*--------------- start of form ---------------  */}
          <form onSubmit={handleSubmit(submitForm)}>
            <FormControl isRequired>
              {/* first prompt */}
              <Flex
                id="Tag1"
                align="center"
                h="5%"
                p="1%"
                w="416px"
                mb="8%"
                bg="#F2F6FE"
                rounded="20px"
                data-aos="fade-up"
                data-aos-offset="200"
                data-aos-delay="50"
                data-aos-duration="1000"
                data-aos-easing="ease-in-out"
                data-aos-mirror="true"
                data-aos-once="true"
              >
                <p>Great! I will need some general details to get started.</p>
              </Flex>
              {/* company container  */}
              <Flex w="100%" justify="flex-end">
                {/* company box */}
                <Flex
                  w="459px"
                  h="379px"
                  px="6"
                  py="10"
                  border="1px solid #BBBDC6"
                  rounded="6px"
                  flexDir="column"
                  data-aos="fade-in"
                  data-aos-offset="200"
                  data-aos-delay="1000"
                  data-aos-duration="1500"
                  data-aos-easing="ease-in-out"
                  data-aos-mirror="true"
                  data-aos-once="true"
                  data-aos-anchor="Tag1"
                >
                  <FormLabel>1. Company name</FormLabel>
                  {loadingCompanies ? (
                    <>
                      <Flex justify="center" w="100%">
                        <CustomSpinner />
                      </Flex>
                    </>
                  ) : (
                    <>
                      <Input
                        h="56px"
                        variant="filled"
                        rounded="6px"
                        textTransform="capitalize"
                        type="text"
                        label="company_name"
                        name="company_name"
                        list="company_name"
                        ref={register}
                        onChange={(e) => setSearchTerm(e.target.value)}
                      />
                      <datalist id="company_name">
                        {searchResults.map((company) => (
                          <option value={company.company_name} key={company.id}>
                            {company.company_name}
                          </option>
                        ))}
                      </datalist>
                      {noCompany ? (
                        <>
                          <Link mb="3" color="grey" href="/add-company">
                            Oops, you need to add that company!
                          </Link>
                        </>
                      ) : (
                        <Flex mb="6" />
                      )}
                    </>
                  )}
                  <FormLabel>2. Job title</FormLabel>
                  <Input
                    h="56px"
                    mb="6"
                    rounded="6px"
                    type="text"
                    variant="filled"
                    label="job_title"
                    name="job_title"
                    autoCapitalize="none"
                    ref={register}
                  />
                  <FormLabel>3. Place of interview</FormLabel>
                  <CustomAutoComplete
                    stateHelper={stateSelectorHelper}
                    id="Company Headquarters"
                    name="Company Headquarters"
                    label="Company Headquarters"
                    placeholder="e.g. Los Angeles, CA"
                    textTransform="capitalize"
                    h="56px"
                    mb="6"
                  />
                </Flex>

                {/* avatar */}
                <Flex
                  h="379px"
                  mt="5px"
                  align="flex-end"
                  ml="1%"
                  data-aos="fade-in"
                  data-aos-offset="200"
                  data-aos-delay="1000"
                  data-aos-duration="1500"
                  data-aos-easing="ease-in-out"
                  data-aos-mirror="true"
                  data-aos-once="true"
                  data-aos-anchor="Tag1"
                >
                  <Avatar size="md" src="https://bit.ly/broken-link" />
                </Flex>
              </Flex>
              <Flex
                justify="flex-end"
                mb="5%"
                data-aos="fade-in"
                data-aos-offset="200"
                data-aos-delay="1000"
                data-aos-duration="1500"
                data-aos-easing="ease-in-out"
                data-aos-mirror="true"
                data-aos-once="true"
                data-aos-anchor="Tag1"
              >
                <Button
                  data-cy="interviewReviewFormButton"
                  h="56px"
                  w="17%"
                  mt="2%"
                  rounded="35px"
                  border="1px solid #344CD0"
                  color="#344CD0"
                  backgroundColor="#FFF"
                  _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                  onClick={time1}
                >
                  Next
                </Button>
              </Flex>

              {/* second prompt */}
              {Tag2 ? (
                <>
                  <Flex
                    id="Tag2"
                    align="center"
                    h="5%"
                    w="416px"
                    py="1%"
                    px="1%"
                    mb="2%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Thank you for that information.</p>
                  </Flex>
                  <Flex
                    id="roundsTag"
                    justify="center"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="1000"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      For the quality of this review I will ask some in depth
                      questions. Let’s begin with how many rounds of interviews
                      you had? Please include phone interviews and onsite
                      interviews.
                    </p>
                  </Flex>
                  {/* rounds container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* rounds box */}
                    <Flex
                      w="459px"
                      h="150px"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="2000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="roundsTag"
                    >
                      <FormLabel>Select rounds of interviews</FormLabel>
                      <Select
                        h="56px"
                        mb="6"
                        rounded="6px"
                        variant="filled"
                        label="interview_rounds"
                        name="interview_rounds"
                        placeholder="Select one"
                      >
                        <option value={1}>1</option>
                        <option value={2}>2</option>
                        <option value={3}>3</option>
                        <option value={4}>4</option>
                        <option value={5}>5</option>
                        <option value={6}>6</option>
                        <option value={7}>7</option>
                        <option value={8}>8</option>
                        <option value={9}>9</option>
                        <option value={10}>10</option>
                      </Select>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="150px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="2000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="roundsTag"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="200"
                    data-aos-delay="2000"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="roundsTag"
                  >
                    <Button
                      data-cy="interviewReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time2}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* third prompt */}
              {Tag3 ? (
                <>
                  <Flex
                    id="Tag3"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      To better assist you I have included several different
                      interview types to choose from. Please select all types
                      that best describes the interview process you went
                      through.
                    </p>
                  </Flex>
                  <Flex w="100%" justify="flex-end">
                    {/* types of interview box */}
                    <Flex
                      w="459px"
                      h="220px"
                      px="6"
                      py="8"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="1000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag3"
                    >
                      <FormLabel>Select types of interviews</FormLabel>
                      <CheckboxGroup>
                        <Flex>
                          <Flex direction="column" pr="0.5%">
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="phone_interview"
                              ref={register}
                            >
                              Phone interview
                            </Checkbox>
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="resume_review"
                              ref={register}
                            >
                              Resume review
                            </Checkbox>
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="take_home_assignments"
                              ref={register}
                            >
                              Take home assignments
                            </Checkbox>
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="online_coding_assignments"
                              ref={register}
                            >
                              Online coding tests
                            </Checkbox>
                          </Flex>
                          <Flex direction="column">
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="portfolio_review"
                              ref={register}
                            >
                              Portfolio review
                            </Checkbox>
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="screen_share"
                              ref={register}
                            >
                              Screen share
                            </Checkbox>
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="open_source_contribution"
                              ref={register}
                            >
                              Open source contribution
                            </Checkbox>
                            <Checkbox
                              size="md"
                              border="rgba(72, 72, 72, 0.1)"
                              name="side_projects"
                              ref={register}
                            >
                              Side projects
                            </Checkbox>
                          </Flex>
                        </Flex>
                      </CheckboxGroup>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="220px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="0"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      id="Tag3"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="120"
                    data-aos-delay="0"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    id="Tag3"
                  >
                    <Button
                      data-cy="interviewReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time3}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* fourth prompt */}
              {Tag4 ? (
                <>
                  <Flex
                    id="Tag4"
                    align="center"
                    p="1%"
                    mb="2%"
                    h="5%"
                    w="416px"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Great!</p>
                  </Flex>
                  <Flex
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="1200"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Use this section to describe your interview experience
                      using the options selected above for reference.
                    </p>
                  </Flex>
                  <Flex w="100%" justify="flex-end">
                    {/* long hand interview box */}
                    <Flex
                      w="459px"
                      h="242px"
                      px="6"
                      py="8"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="2600"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag4"
                    >
                      <FormLabel>Describe the interview process</FormLabel>
                      <Textarea
                        variant="filled"
                        h="144px"
                        rowsMax={6}
                        type="text"
                        name="comment"
                        placeholder="What questions came up? What did you discuss? What did you come away with from this interview? "
                        rounded="6px"
                        resize="none"
                        ref={register}
                        data-cy="interviewComment"
                      />
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="242px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="2600"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag4"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="120"
                    data-aos-delay="2600"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="Tag4"
                  >
                    <Button
                      data-cy="interviewReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time4}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* 5th prompt */}
              {Tag5 ? (
                <>
                  <Flex
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="2%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Thanks! Your opinion is very valuable and helps Lambda
                      job-seekers be better prepared.
                    </p>
                  </Flex>
                  <Flex
                    id="Tag5"
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="1000"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Please provide a difficulty rating for your interview. How
                      easy or hard was the interview?
                    </p>
                  </Flex>
                  {/* diff container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* diff box */}
                    <Flex
                      w="459px"
                      h="150px"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="120"
                      data-aos-delay="3000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag5"
                    >
                      <FormLabel>Rate the difficulty</FormLabel>
                      <Select
                        h="56px"
                        mb="6"
                        rounded="6px"
                        variant="filled"
                        label="difficulty_rating"
                        name="difficulty_rating"
                        placeholder="Select one"
                        ref={register}
                      >
                        <option value={5}>Very difficult</option>
                        <option value={4}>Difficult</option>
                        <option value={3}>Average</option>
                        <option value={2}>Easy</option>
                        <option value={1}>Very easy</option>
                      </Select>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="150px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="3000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="Tag5"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="8%"
                    data-aos="fade-in"
                    data-aos-offset="200"
                    data-aos-delay="2700"
                    data-aos-duration="1500"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="Tag5"
                  >
                    <Button
                      data-cy="interviewReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time5}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* 6th prompt */}
              {Tag6 ? (
                <>
                  <Flex
                    id="Tag6"
                    justify="center"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Your review is almost complete. Tell me how your interview
                      process ended. Did you recieve an offer?
                    </p>
                  </Flex>
                  {/* offer container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* diff box */}
                    <Flex
                      w="459px"
                      h="176px"
                      mb="8%"
                      py="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Flex w="100%" justify="center">
                        <RadioButtonGroup
                          display="flex"
                          flexDir="column"
                          spacing={0}
                          label="offer_status_id"
                          name="offer_status_id"
                          defaultValue="1"
                          onChange={(val) => {
                            setOffer(val)
                            time6()
                          }}
                        >
                          <CustomRadio value="1" w="100%">
                            No offer
                          </CustomRadio>
                          <CustomRadio value="2" w="100%" data-cy="accepted">
                            Accepted
                          </CustomRadio>
                          <CustomRadio value="3" w="100%">
                            Declined
                          </CustomRadio>
                        </RadioButtonGroup>
                      </Flex>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="176px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1000"
                      data-aos-duration="1500"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                </>
              ) : null}
              {/* 7th prompt */}
              {Tag7 ? (
                <>
                  <Flex
                    id="Tag7"
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="2%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Thank you for that information.</p>
                  </Flex>
                  <Flex
                    id="salaryTag"
                    align="center"
                    h="5%"
                    p="1%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="1500"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      If you were offered, asked, or negotiated a salary,
                      including it in your review increases the helpfulness of
                      this post.
                    </p>
                  </Flex>
                  {/* salary container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* salary box */}
                    <Flex
                      w="459px"
                      h="150px"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      justify="space-evenly"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1000"
                      data-aos-duration="3000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="salaryTag"
                    >
                      <FormLabel>Salary</FormLabel>
                      <InputGroup>
                        <InputLeftElement
                          mb="4"
                          py="28px"
                          color="gray.300"
                          fontSize="1.2em"
                          children="$"
                        />
                        <Input
                          h="56px"
                          rounded="6px"
                          type="number"
                          variant="filled"
                          label="salary"
                          name="salary"
                          autoCapitalize="none"
                          ref={register}
                        />
                      </InputGroup>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="150px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1000"
                      data-aos-duration="3000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor="salaryTag"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                  <Flex
                    justify="flex-end"
                    mb="5%"
                    data-aos="fade-in"
                    data-aos-offset="200"
                    data-aos-delay="1000"
                    data-aos-duration="3000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="salaryTag"
                  >
                    <Button
                      data-cy="interviewReviewFormButton"
                      h="56px"
                      w="17%"
                      mt="2%"
                      rounded="35px"
                      border="1px solid #344CD0"
                      color="#344CD0"
                      backgroundColor="#FFF"
                      _hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
                      onClick={time7}
                    >
                      Next
                    </Button>
                  </Flex>
                </>
              ) : null}
              {/* 8th prompt */}
              {Tag8 ? (
                <>
                  <Flex
                    id="Tag8"
                    align="center"
                    h="5%"
                    w="416px"
                    p="1%"
                    mb="2%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>Thanks!</p>
                  </Flex>
                  <Flex
                    id="ratingTag"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="900"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                  >
                    <p>
                      Last question. How would you rate your overall interview
                      experience?
                    </p>
                  </Flex>
                  {/* overall container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* overall box */}
                    <Flex
                      w="459px"
                      h="136px"
                      mb="8%"
                      p="6"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <FormLabel mb="4">Rate overall experience</FormLabel>
                      <Flex justify="center" w="100%">
                        <BeautyStars
                          name="interviewRating"
                          value={starState}
                          activeColor="#344CD0"
                          onChange={(value) => {
                            setStarState(value)
                            time8()
                          }}
                        />
                      </Flex>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="136px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                </>
              ) : null}
              {Tag9 ? (
                <>
                  <Flex
                    id="Tag9"
                    align="center"
                    p="1%"
                    h="5%"
                    w="416px"
                    mb="8%"
                    bg="#F2F6FE"
                    rounded="20px"
                    data-aos="fade-right"
                    data-aos-offset="200"
                    data-aos-delay="50"
                    data-aos-duration="1000"
                    data-aos-easing="ease-in-out"
                    data-aos-mirror="true"
                    data-aos-once="true"
                    data-aos-anchor="#ratingTag"
                  >
                    <p>Thank you! Don’t forget to hit submit.</p>
                  </Flex>
                  {/* submit container  */}
                  <Flex w="100%" justify="flex-end">
                    {/* submit box */}
                    <Flex
                      w="459px"
                      h="136px"
                      mb="8%"
                      p="6"
                      justify="center"
                      align="center"
                      border="1px solid #BBBDC6"
                      rounded="6px"
                      flexDir="column"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Button
                        bg="#344CD0"
                        color="white"
                        type="submit"
                        isLoading={formState.isSubmitting}
                        rounded="6px"
                        border="none"
                        data-cy="interviewReviewSubmit"
                      >
                        Submit
                      </Button>
                    </Flex>
                    {/* avatar */}
                    <Flex
                      h="136px"
                      align="flex-end"
                      ml="1%"
                      data-aos="fade-in"
                      data-aos-offset="200"
                      data-aos-delay="1500"
                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                    >
                      <Avatar size="md" src="https://bit.ly/broken-link" />
                    </Flex>
                  </Flex>
                </>
              ) : null}
            </FormControl>
          </form>
        </Flex>
      </Flex>
    </div>
  )
}
Example #5
Source File: ForwardModel.js    From CubeMail with MIT License 4 votes vote down vote up
ForwardModel = ({ forwardData, getMessageBody }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const forwardTo = form.elements["emailTo"].value;
    handleForwardMsg(
      forwardTo,
      forwardData.payload.headers,
      getMessageBody(forwardData.payload)
    );
    onClose();
  };

  const handleForwardMsg = (forwardTo, headers, body) => {
    let email = "";
    email += `From: ${getHeader(headers, "From")} \r\n`;
    email += `Date: ${getHeader(headers, "Date")} \r\n`;
    email += `Subject: ${getHeader(headers, "Subject")} \r\n`;
    email += `To: ${forwardTo} \r\n`;
    email += `Content-Type: text/html; charset=UTF-8 \r\n`;
    email += `\r\n ${body}`;

    sendMessage("me", email, displayToast);
  };

  const sendMessage = (userId, email, callback) => {
    const base64EncodedEmail = Base64.encodeURI(email);
    const request = window.gapi.client.gmail.users.messages.send({
      userId: userId,
      resource: {
        raw: base64EncodedEmail,
      },
    });
    request.execute(callback);
  };

  const displayToast = ({ result }) => {
    if (result.labelIds.indexOf("SENT") !== -1) {
      toast({
        title: "Email forwarded Successfully.",
        status: "success",
        duration: 3000,
        isClosable: true,
      });
    } else {
      toast({
        title: "An error occurred.",
        description: "Unable to sent your mail.",
        status: "error",
        duration: 3000,
        isClosable: true,
      });
    }
  };

  const getForwardHead = (headers) => {
    let msg = "";
    msg += "From: " + getHeader(headers, "From") + "\r\n";
    msg += "Date: " + getHeader(headers, "Date") + "\r\n";
    msg += "Subject: " + getHeader(headers, "Subject") + "\r\n";
    msg += "To: " + getHeader(headers, "To") + "\r\n";
    return msg;
  };

  return (
    <Fragment>
      <Button
        rightIcon={MdArrowForward}
        variantColor='blue'
        variant='outline'
        onClick={onOpen}
      >
        Forward
      </Button>

      <Modal
        isOpen={isOpen}
        size='xl'
        onClose={onClose}
        closeOnOverlayClick={false}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Forward </ModalHeader>
          <ModalCloseButton />
          <form id='form' onSubmit={handleSubmit}>
            <ModalBody>
              <FormControl isRequired>
                <Input
                  type='email'
                  id='emailTo'
                  placeholder='To'
                  aria-describedby='email-helper-text'
                />
              </FormControl>
              <FormControl isRequired>
                <Input
                  type='text'
                  id='subject'
                  placeholder='Subject'
                  aria-describedby='subject-email-helper-text'
                  value={getHeader(forwardData.payload.headers, "Subject")}
                  readOnly
                />
              </FormControl>
              <FormControl isRequired>
                <Textarea
                  id='message'
                  minH='280px'
                  size='xl'
                  resize='vertical'
                  value={
                    "------Forward Message------\r\n" +
                    getForwardHead(forwardData.payload.headers)
                  }
                  readOnly
                />
              </FormControl>
            </ModalBody>

            <ModalFooter>
              <Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
                Close
              </Button>
              <Button type='submit' variantColor='green'>
                Send
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>
    </Fragment>
  );
}
Example #6
Source File: ReplyModel.js    From CubeMail with MIT License 4 votes vote down vote up
ReplyModel = ({ replayData }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const emailTo = form.elements["emailTo"].value;
    const subject = form.elements["subject"].value;
    const replayMsgId = form.elements["reply-message-id"].value;
    const message = form.elements["message"].value;

    // Send Replay
    sendMessage(
      {
        To: emailTo,
        Subject: subject,
        "In-Reply-To": replayMsgId,
      },
      message,
      displayToast
    );

    onClose();
  };

  const sendMessage = (headers_obj, message, callback) => {
    let email = "";

    for (let header in headers_obj)
      email += header += ": " + headers_obj[header] + "\r\n";

    email += "\r\n" + message;

    const base64EncodedEmail = Base64.encodeURI(email);
    const request = window.gapi.client.gmail.users.messages.send({
      userId: "me",
      resource: {
        raw: base64EncodedEmail,
      },
    });

    request.execute(callback);
  };

  const displayToast = ({ result }) => {
    if (result.labelIds.indexOf("SENT") !== -1) {
      toast({
        title: "Message Sent.",
        status: "success",
        duration: 3000,
        isClosable: true,
      });
    } else {
      toast({
        title: "An error occurred.",
        description: "Unable to sent your replay.",
        status: "error",
        duration: 3000,
        isClosable: true,
      });
    }
  };

  return (
    <Fragment>
      <Button
        rightIcon={MdReplay}
        variantColor='blue'
        variant='outline'
        onClick={onOpen}
      >
        Replay
      </Button>
      <Modal
        isOpen={isOpen}
        size='xl'
        onClose={onClose}
        closeOnOverlayClick={false}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Replay </ModalHeader>
          <ModalCloseButton />
          <form id='form' onSubmit={handleSubmit}>
            <ModalBody>
              <Input
                type='hidden'
                id='reply-message-id'
                value={replayData.msgId}
                readOnly
              />
              <FormControl isRequired>
                <Input
                  type='email'
                  id='emailTo'
                  placeholder='To'
                  aria-describedby='email-helper-text'
                  value={replayData.to}
                  readOnly
                />
              </FormControl>
              <FormControl isRequired>
                <Input
                  type='text'
                  id='subject'
                  placeholder='Subject'
                  aria-describedby='subject-email-helper-text'
                  value={replayData.subject}
                  readOnly
                />
              </FormControl>
              <FormControl isRequired>
                <Textarea
                  id='message'
                  minH='280px'
                  size='xl'
                  resize='vertical'
                />
              </FormControl>
            </ModalBody>

            <ModalFooter>
              <Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
                Close
              </Button>
              <Button type='submit' variantColor='green'>
                Send
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>
    </Fragment>
  );
}
Example #7
Source File: SendModel.js    From CubeMail with MIT License 4 votes vote down vote up
SendModel = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const emailTo = form.elements["emailTo"].value;
    const subject = form.elements["subject"].value;
    const message = form.elements["message"].value;

    // Send Simple Mail && Display Toast
    sendMessage(
      {
        To: emailTo,
        Subject: subject,
      },
      message,
      displayToast
    );

    onClose();
  };

  const sendMessage = (headers_obj, message, callback) => {
    let email = "";

    for (var header in headers_obj)
      email += header += ": " + headers_obj[header] + "\r\n";

    email += "\r\n" + message;

    const base64EncodedEmail = Base64.encodeURI(email);
    const request = window.gapi.client.gmail.users.messages.send({
      userId: "me",
      resource: {
        raw: base64EncodedEmail,
      },
    });
    request.execute(callback);
  };

  const displayToast = ({ result }) => {
    if (result.labelIds.indexOf("SENT") !== -1) {
      toast({
        title: "Message Sent.",
        description: "We've Sent your email.",
        status: "success",
        duration: 9000,
        isClosable: true,
      });
    } else {
      toast({
        title: "An error occurred.",
        description: "Unable to sent your email.",
        status: "error",
        duration: 9000,
        isClosable: true,
      });
    }
  };

  return (
    <Fragment>
      <Button
        w='100%'
        h='48px'
        leftIcon={BsPlusCircle}
        borderRadius='20px'
        variant='solid'
        variantColor='blue'
        onClick={onOpen}
      >
        New Message
      </Button>
      <Modal
        isOpen={isOpen}
        size='xl'
        onClose={onClose}
        closeOnOverlayClick={false}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>New Message</ModalHeader>
          <ModalCloseButton />
          <form id='form' onSubmit={handleSubmit}>
            <ModalBody>
              <FormControl isRequired>
                <Input
                  type='email'
                  id='emailTo'
                  placeholder='To'
                  aria-describedby='email-helper-text'
                />
              </FormControl>
              <FormControl isRequired>
                <Input
                  type='text'
                  id='subject'
                  placeholder='Subject'
                  aria-describedby='subject-email-helper-text'
                />
              </FormControl>
              <FormControl isRequired>
                <Textarea
                  id='message'
                  minH='280px'
                  size='xl'
                  resize='vertical'
                />
              </FormControl>
            </ModalBody>

            <ModalFooter>
              <Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
                Close
              </Button>
              <Button type='submit' variantColor='green'>
                Send
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>
    </Fragment>
  );
}