@chakra-ui/core#FormControl JavaScript Examples

The following examples show how to use @chakra-ui/core#FormControl. 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: Login.js    From allay-fe with MIT License 4 votes vote down vote up
Login = ({ login, isLoading, history }) => {
  const { handleSubmit, errors, register, formState } = useForm()
  const [show, setShow] = React.useState(false)
  const handleClick = () => setShow(!show)

  function validateEmail(value) {
    let error
    if (!value) {
      error = 'email is required'
    } else if (value.length < 5) {
      error = 'email needed'
    }
    return error || true
  }

  function validatePassword(value) {
    let error
    if (!value) {
      error = 'Password is required'
    } else if (value.length < 8) {
      error = 'Password must be at least 8 characters'
    }
    return error || true
  }

  const submitForm = (creds) => {
    // action function here
    login(creds).then(() => history.push('/dashboard'))
    ReactGA.event({
      category: 'User',
      action: `Button Login`,
    })
  }

  const gaSignup = () => {
    ReactGA.event({
      category: 'User',
      action: `Link Don't have an account`,
    })
  }

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

  return (
    <Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
      <Flex maxW="1440px" w="100%">
        <Stack
          wrap="wrap"
          w="60%"
          ml="6.5%"
          mb="15%"
          justify="center"
          align="center"
        >
          <Text
            as="h1"
            w="100%"
            fontFamily="Poppins"
            fontSize="80px"
            fontWeight="bold"
          >
            Allay
          </Text>
          <Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
            We're stronger together.
          </Text>
        </Stack>
        <Flex
          w="40%"
          mb="10%"
          mr="8%"
          justify="center"
          align="center"
          flexDir="column"
        >
          <form onSubmit={handleSubmit(submitForm)}>
            <Flex
              w="473px"
              h="480px"
              flexDir="column"
              background="#FDFDFF"
              justify="center"
            >
              <Flex
                as="h2"
                fontSize="36px"
                fontFamily="Poppins"
                justify="center"
                mx="1"
                my="2%"
              >
                Welcome back!
              </Flex>

              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isInvalid={errors.email}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Email
                  </FormLabel>
                  <SignupLoginInput
                    mb="30px"
                    type="text"
                    name="email"
                    label="email"
                    placeholder="lambda1"
                    autoCapitalize="none"
                    ref={register({ validate: validateEmail })}
                  />
                  <FormErrorMessage>
                    {errors.email && errors.email.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isInvalid={errors.password}>
                  <Flex flexDir="column">
                    <FormLabel
                      color="#131C4D"
                      fontSize="18px"
                      fontFamily="Muli"
                    >
                      Password
                    </FormLabel>
                    <InputGroup>
                      <SignupLoginInput
                        mb="30px"
                        type={show ? 'text' : 'password'}
                        name="password"
                        label="Password"
                        placeholder="********"
                        autoCapitalize="none"
                        ref={register({ validate: validatePassword })}
                      />
                      <InputRightElement width="4.5rem" py="32px">
                        <Button
                          h="1.75rem"
                          color="rgba(72, 72, 72, 0.1)"
                          border="none"
                          size="sm"
                          backgroundColor="#FDFDFF"
                          onClick={handleClick}
                        >
                          {show ? 'Hide' : 'Show'}
                        </Button>
                      </InputRightElement>
                    </InputGroup>
                    <FormErrorMessage>
                      {errors.password && errors.password.message}
                    </FormErrorMessage>
                  </Flex>
                </FormControl>
                <Flex width="100%" justify="center">
                  <Button
                    width="85%"
                    mb="30px"
                    border="none"
                    rounded="50px"
                    h="58px"
                    my="2%"
                    size="lg"
                    color="white"
                    backgroundColor="#344CD0"
                    _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                    isLoading={formState.isSubmitting}
                    type="submit"
                    data-cy="loginSubmit"
                  >
                    Login
                  </Button>
                </Flex>
              </Flex>
              <Flex m="15px" justify="center" fontWeight="light">
                <Text fontSize="16px" color="#17171B" fontFamily="Muli">
                  Don't have an account?{' '}
                  <Link
                    to="/signup"
                    onClick={gaSignup}
                    data-cy="signupLink"
                    style={{
                      textDecoration: 'none',
                      fontWeight: 'bold',
                      color: '#344CD0',
                      fontSize: '16px',
                    }}
                  >
                    Sign up here!
                  </Link>
                </Text>
              </Flex>
            </Flex>
          </form>
        </Flex>
      </Flex>
    </Flex>
  )
}
Example #2
Source File: Signup-Additional.js    From allay-fe with MIT License 4 votes vote down vote up
SignupAdditional = ({
  register,
  errors,
  location,
  setNewLocation,
  stateHelper,
  validateFieldOfStudy,
  uploadImage,
  profile_image,
  uploadResume,
  profile_resume,
}) => {
  // graduated state/helpers
  const [graduated, setGraduated] = useState(false)
  const isGraduated = () => {
    setGraduated(true)
  }
  const notGraduated = () => {
    setGraduated(false)
  }
  // employed state/helpers
  const [employed, setEmployed] = useState(false)
  const isEmployed = () => {
    setEmployed(true)
  }
  const notEmployed = () => {
    setEmployed(false)
  }

  //radio button state
  const [priorExp, setPriorExp] = useState(false)
  const [tlsl, setTlsl] = useState(false)
  const [remote, setRemote] = useState(false)

  //location helper
  useEffect(() => {
    setNewLocation({ ...location, myState: location.myState })
    // removes numbers, commas, and whitespaces from city
    if (location.myCity) {
      if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
        const tempCity = location.myCity
        setNewLocation({
          ...location,
          myCity: tempCity.replace(/^[\s,\d]+/, ''),
        })
      }
    }
  }, [location, setNewLocation])

  ///info for slack ID
  const info = (
    <Box>
      <Image
        objectFit="fit"
        width="300px"
        height="300px"
        src={require('../../icons/slack.gif')}
        alt="slack info"
      />
    </Box>
  )

  return (
    <>
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="61px"
        justify="flex-start"
        fontSize="16px"
      >
        <Text color="#131C4D" fontFamily="Muli">
          The information below will be visible on your profile page by others
        </Text>
      </Flex>

      {/* CLOUDINARY IMAGE UPLOAD */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="55px"
        justify="space-evenly"
        alignItems="center"
      >
        {!profile_image ? (
          <Image size="100px" src={require('../../icons/user.svg')} />
        ) : (
          <Image
            size="100px"
            style={{ borderRadius: '50px' }}
            src={profile_image}
          />
        )}
        <Flex alignItems="center">
          <input
            type="file"
            filename="image"
            placeholder="Upload profile picture"
            onChange={uploadImage}
            style={{
              opacity: '1',
              width: '105px',
              color: 'transparent',
              backgroundColor: 'transparent',
            }}
          />
          <label for="files" class="btn">
            Upload profile image
          </label>
        </Flex>
      </Flex>

      {/* LOCATION OF USER */}
      <Flex wrap="wrap" w="653" justify="center">
        <FormControl>
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Location (City, State)
          </FormLabel>
          <CustomAutocomplete
            stateHelper={stateHelper}
            w="653px"
            h="58px"
            mb="30px"
            rounded="2px"
            variant="outline"
            bgColor="#FDFDFF"
            focusBorderColor="#344CD0"
            borderColor="#EAF0FE"
            color="#17171B"
            _hover={{ borderColor: '#BBBDC6' }}
            _placeholder={{ color: '#BBBDC6' }}
            id="location"
            name="location"
            label="location"
            placeholder="e.g. Los Angeles, CA"
            ref={register}
          />
        </FormControl>
      </Flex>

      {/* GRADUATED CHECK */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb={graduated ? '20px' : '80px'}
        justify="space-between"
      >
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Have you graduated from Lambda yet?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="graduated"
            id="graduated-1"
            value={true}
            isChecked={graduated === true}
            onClick={isGraduated}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="graduated"
            id="graduated-2"
            value={false}
            isChecked={graduated === false}
            onClick={notGraduated}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      {/* GRADUATED MONTH AND YEAR */}
      {graduated ? (
        <Flex
          wrap="wrap"
          w="653px"
          mx="auto"
          mb="80px"
          justify="space-between"
          align="center"
        >
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            When did you graduate?
          </FormLabel>
          <Flex align="center" alignContent="center">
            <FormControl>
              <Select
                mr="17px"
                h="68px"
                py="16px"
                w="155px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="gradMonth"
                label="gradMonth"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Month
                </option>
                <option fontFamily="Muli" value="01">
                  Jan
                </option>
                <option fontFamily="Muli" value="02">
                  Feb
                </option>
                <option fontFamily="Muli" value="03">
                  Mar
                </option>
                <option fontFamily="Muli" value="04">
                  Apr
                </option>
                <option fontFamily="Muli" value="05">
                  May
                </option>
                <option fontFamily="Muli" value="06">
                  Jun
                </option>
                <option fontFamily="Muli" value="07">
                  Jul
                </option>
                <option fontFamily="Muli" value="08">
                  Aug
                </option>
                <option fontFamily="Muli" value="09">
                  Sep
                </option>
                <option fontFamily="Muli" value="10">
                  Oct
                </option>
                <option fontFamily="Muli" value="11">
                  Nov
                </option>
                <option fontFamily="Muli" value="12">
                  Dec
                </option>
              </Select>
            </FormControl>
            <FormControl>
              <Select
                h="68px"
                py="16px"
                w="155px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="gradYear"
                label="gradYear"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Year
                </option>
                {years.map((year, index) => (
                  <option key={`year${index}`} value={year}>
                    {year}
                  </option>
                ))}
              </Select>
            </FormControl>
          </Flex>
        </Flex>
      ) : null}

      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="35px"
        justify="flex-start"
        borderTop="1px solid #DADADD"
      >
        <Text
          fontFamily="Poppins"
          fontWeight="600"
          fontSize="24px"
          lineHeight="36px"
          color="#BBBDC6"
        >
          Background
        </Text>
      </Flex>

      {/* HIGHEST LEVEL OF EDUCATION */}
      <Flex wrap="wrap" w="411px%" justify="center">
        <FormControl>
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Highest level of education
          </FormLabel>
          <Select
            mb="30px"
            mr="17px"
            h="68px"
            py="16px"
            w="318px"
            rounded="2px"
            variant="outline"
            backgroundColor="#FDFDFF"
            focusBorderColor="#344CD0"
            borderColor="#EAF0FE"
            color="#BBBDC6"
            _focus={{ color: '#17171B' }}
            _hover={{ borderColor: '#BBBDC6' }}
            name="highest_ed"
            label="highest_ed"
            ref={register}
          >
            <option fontFamily="Muli" value="">
              Select your education level
            </option>
            <option fontFamily="Muli" value="High school diploma">
              High school diploma
            </option>
            <option fontFamily="Muli" value="Associate's degree">
              Associate's degree
            </option>
            <option fontFamily="Muli" value="Bachelor's degree">
              Bachelor's degree
            </option>
            <option fontFamily="Muli" value="Master's degree">
              Master's degree
            </option>
            <option fontFamily="Muli" value="PhD">
              PhD
            </option>
          </Select>
        </FormControl>

        {/* FIELD OF STUDY */}
        <FormControl isInvalid={errors.fieldOfStudy}>
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Field of study
          </FormLabel>
          <SignupLoginInput
            w="318px"
            mb="30px"
            type="text"
            name="field_of_study"
            label="field_of_study"
            placeholder="Enter your field of study"
            autoCapitalize="none"
            ref={register({ validate: validateFieldOfStudy })}
          />
          <FormErrorMessage>
            {errors.fieldOfStudy && errors.fieldOfStudy.message}
          </FormErrorMessage>
        </FormControl>
      </Flex>

      {/* PRIOR EXPERIENCE */}
      <Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Prior to Lambda did you have any experience in your track?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="prior_experience"
            id="priorExp-1"
            ref={register}
            value={true}
            isChecked={priorExp === true}
            onChange={() => setPriorExp(true)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="prior_experience"
            id="priorExp-2"
            ref={register}
            value={false}
            isChecked={priorExp === false}
            onChange={() => setPriorExp(false)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      {/* DID YOU TL/SL */}
      <Flex wrap="wrap" w="653px" mx="auto" mb="100px" justify="space-between">
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Have you been a TL/SL while at Lambda?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="tlsl_experience"
            id="TLSL-1"
            value={true}
            ref={register}
            isChecked={tlsl === false}
            onChange={() => setTlsl(true)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="tlsl_experience"
            id="TLSL-2"
            value={false}
            ref={register}
            isChecked={tlsl === false}
            onChange={() => setTlsl(false)}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="35px"
        justify="flex-start"
        borderTop="1px solid #DADADD"
      >
        <Text
          fontFamily="Poppins"
          fontWeight="600"
          fontSize="24px"
          lineHeight="36px"
          color="#BBBDC6"
        >
          Employment
        </Text>
      </Flex>

      {/* EMPLOYED CHECK */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb={employed ? '30px' : '80px'}
        justify="space-between"
      >
        <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
          Are you currently employed in your field of study?
        </FormLabel>
        <Flex justify="space-between" w="131px">
          <Radio
            name="employed"
            id="employed-1"
            value={true}
            isChecked={employed === true}
            onClick={isEmployed}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            Yes
          </Radio>
          <Radio
            name="employed"
            id="employed-2"
            value={false}
            isChecked={employed === false}
            onClick={notEmployed}
            borderRadius="md"
            borderColor="#D9D9D9"
            _checked={{ bg: '#344CD0' }}
          >
            No
          </Radio>
        </Flex>
      </Flex>

      {/* EMPLOYED COMPANY NAME AND JOB TITLE */}
      {employed ? (
        <Flex wrap="wrap" w="653" justify="center">
          <FormControl>
            <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
              Company name
            </FormLabel>
            <SignupLoginInput
              w="318px"
              mb="30px"
              mr="17px"
              type="text"
              name="employed_company"
              label="employed_company"
              placeholder="Enter the company name"
              autoCapitalize="none"
              ref={register}
            />
          </FormControl>
          <FormControl>
            <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
              Job title
            </FormLabel>
            <SignupLoginInput
              w="318px"
              mb="30px"
              type="text"
              name="employed_title"
              label="employed_title"
              placeholder="Enter your job title"
              autoCapitalize="none"
              ref={register}
            />
          </FormControl>
        </Flex>
      ) : null}

      {/* REMOTE WORK CHECK */}
      {employed ? (
        <Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            Are you working remotely?
          </FormLabel>
          <Flex justify="space-between" w="131px">
            <Radio
              name="employed_remote"
              id="employed_remote-1"
              value={true}
              ref={register}
              isChecked={remote === true}
              onChange={() => setRemote(true)}
              borderRadius="md"
              borderColor="#D9D9D9"
              _checked={{ bg: '#344CD0' }}
            >
              Yes
            </Radio>
            <Radio
              name="employed_remote"
              id="employed_remote-2"
              value={false}
              ref={register}
              isChecked={remote === false}
              onChange={() => setRemote(false)}
              borderRadius="md"
              borderColor="#D9D9D9"
              _checked={{ bg: '#344CD0' }}
            >
              No
            </Radio>
          </Flex>
        </Flex>
      ) : null}

      {/* EMPLOYMENT START DATE */}
      {employed ? (
        <Flex
          wrap="wrap"
          w="653px"
          mx="auto"
          mb="80px"
          justify="space-between"
          align="center"
        >
          <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
            When did you start?
          </FormLabel>
          <Flex align="center" alignContent="center">
            <FormControl>
              <Select
                mr="17px"
                h="68px"
                py="16px"
                w="159px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="workMonth"
                label="workMonth"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Month
                </option>
                <option fontFamily="Muli" value="01">
                  Jan
                </option>
                <option fontFamily="Muli" value="02">
                  Feb
                </option>
                <option fontFamily="Muli" value="03">
                  Mar
                </option>
                <option fontFamily="Muli" value="04">
                  Apr
                </option>
                <option fontFamily="Muli" value="05">
                  May
                </option>
                <option fontFamily="Muli" value="06">
                  Jun
                </option>
                <option fontFamily="Muli" value="07">
                  Jul
                </option>
                <option fontFamily="Muli" value="08">
                  Aug
                </option>
                <option fontFamily="Muli" value="09">
                  Sep
                </option>
                <option fontFamily="Muli" value="10">
                  Oct
                </option>
                <option fontFamily="Muli" value="11">
                  Nov
                </option>
                <option fontFamily="Muli" value="12">
                  Dec
                </option>
              </Select>
            </FormControl>
            <FormControl>
              <Select
                h="68px"
                py="16px"
                w="159px"
                rounded="2px"
                variant="outline"
                backgroundColor="#FDFDFF"
                focusBorderColor="#344CD0"
                borderColor="#EAF0FE"
                color="#BBBDC6"
                _focus={{ color: '#17171B' }}
                _hover={{ borderColor: '#BBBDC6' }}
                name="workYear"
                label="workYear"
                ref={register}
              >
                <option fontFamily="Muli" value="">
                  Year
                </option>
                {years.map((year, index) => (
                  <option key={`year${index}`} value={year}>
                    {year}
                  </option>
                ))}
              </Select>
            </FormControl>
          </Flex>
        </Flex>
      ) : null}

      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        mb="35px"
        justify="flex-start"
        borderTop="1px solid #DADADD"
      >
        <Text
          fontFamily="Poppins"
          fontWeight="600"
          fontSize="24px"
          lineHeight="36px"
          color="#BBBDC6"
        >
          Online Presence
        </Text>
      </Flex>

      {/* RESUME UPLOAD */}
      <Flex
        wrap="wrap"
        w="653px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" color="#131C4D" fontSize="18px" fontFamily="Muli">
          Resume
        </Text>
        <Flex width="270px" justify="flex-end">
          <input
            type="file"
            filename="image"
            placeholder="Upload profile picture"
            onChange={uploadResume}
            style={{
              opacity: '1',
              width: '105px',
              color: 'transparent',
              backgroundColor: 'transparent',
            }}
          />
          <label for="files" class="btn">
            {!profile_resume ? (
              'Upload resume'
            ) : (
              <i
                style={{
                  fontSize: '1.4rem',
                  color: 'green',
                  paddingLeft: '20px',
                }}
                class="far fa-check-circle"
              ></i>
            )}
          </label>
        </Flex>
      </Flex>
      <Flex w="653px" mx="auto" justify="flex-start">
        <FormHelperText w="653px" mb="30px" color="#9194A8">
          Must be a .pdf file
        </FormHelperText>
      </Flex>

      {/* CONTACT EMAIL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Email address
        </Text>
        <SignupLoginInput
          w="318px"
          type="email"
          name="contact_email"
          label="contact_email"
          placeholder="Enter your email address"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* PORTFOLIO URL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Portfolio URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="portfolio_URL"
          label="portfolio_URL"
          placeholder="Enter your portfolio URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* LINKEDIN URL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          LinkedIn URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="linked_in"
          label="linked_in"
          placeholder="Enter your LinkedIn URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* SLACK USERNAME */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Slack ID
          <Tooltip hasArrow label={info} placement="top">
            <i style={{ paddingLeft: '10px' }} class="fas fa-question"></i>
          </Tooltip>
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="slack"
          label="slack"
          placeholder="Enter your Slack ID"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* GITHUB USERNAME */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Github URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="github"
          label="github"
          placeholder="Enter your Github URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>

      {/* DRIBBBLE URL */}
      <Flex
        wrap="wrap"
        w="653px"
        mb="15px"
        mx="auto"
        justify="space-between"
        align="center"
      >
        <Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
          Dribbble URL
        </Text>
        <SignupLoginInput
          w="318px"
          type="text"
          name="dribble"
          label="dribble"
          placeholder="Enter your Dribbble URL"
          autoCapitalize="none"
          ref={register}
        />
      </Flex>
    </>
  )
}
Example #3
Source File: Signup.js    From allay-fe with MIT License 4 votes vote down vote up
Signup = ({ signup, isLoading, history }) => {
  const { handleSubmit, errors, register, formState } = useForm()
  const [show, setShow] = useState(false)
  const [moreInfo, setMoreInfo] = useState(false)
  const handleClick = () => setShow(!show)
  //location state
  const [location, setLocation] = useState({})
  const [newLocation, setNewLocation] = useState({})
  const stateHelper = (value) => {
    setLocation(value)
  }
  const [profile_image, setProfile_Image] = useState('')
  const [profile_resume, setProfile_resume] = useState('')
  //validation
  function validateFirstName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'First Name is required'
    } else if (value.length < 2) {
      error = 'First Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'First Name can only contain letters'
    }
    return error || true
  }

  function validateLastName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'Last Name is required'
    } else if (value.length < 2) {
      error = 'Last Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'Last Name can only contain letters'
    }
    return error || true
  }

  function validateEmail(value) {
    let error
    if (!value) {
      error = 'Email is required'
    } else if (!value.includes('@')) {
      error = 'Must be a valid email'
    }
    return error || true
  }

  function validateTrack(value) {
    let error
    if (!value) {
      error = 'Lambda track is required'
    }
    return error || true
  }

  function validateCohort(value) {
    let error
    if (!value) {
      error = 'Cohort is required'
    }
    return error || true
  }

  function validatePassword(value) {
    let error
    if (!value) {
      error = 'Password is required'
    } else if (value.length < 8) {
      error = 'Password must be at least 8 characters'
    }
    return error || true
  }

  function validateFieldOfStudy(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (nameRegex.test(value)) {
      error = 'Field of study can only contain letters'
    }
    return error || true
  }
  // end validation

  //add image to cloudinary
  const uploadImage = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    setProfile_Image(...profile_image, file.secure_url)
  }

  //upload resume to cloudinary
  const uploadResume = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    console.log('here', file)
    setProfile_resume(...profile_resume, file.secure_url)
  }

  const submitForm = (creds) => {
    // correcting grad date format
    let graduated = null
    if (creds.gradMonth && creds.gradYear) {
      graduated = `${creds.gradYear}-${creds.gradMonth}-01`
    }

    // correcting employed date format
    let employed_start = null
    if (creds.workMonth && creds.workYear) {
      employed_start = `${creds.workYear}-${creds.workMonth}-01`
    }

    if (creds.confirmPassword === creds.password) {
      // formatting the signup state to match the back end columns
      signup({
        email: creds.email,
        password: creds.password,
        track_id: Number(creds.track_id),
        first_name: creds.firstName,
        last_name: creds.lastName,
        cohort: creds.cohort,
        contact_email: creds.contact_email || null,
        location: newLocation
          ? `${newLocation.myCity} ${newLocation.myState}`
          : null,
        graduated: graduated,
        highest_ed: creds.highest_ed || null,
        field_of_study: creds.field_of_study || null,
        prior_experience: creds.prior_experience
          ? JSON.parse(creds.prior_experience)
          : false,
        tlsl_experience: creds.tlsl_experience
          ? JSON.parse(creds.tlsl_experience)
          : false,
        employed_company: creds.employed_company || null,
        employed_title: creds.employed_title || null,
        employed_remote: creds.employed_remote
          ? JSON.parse(creds.employed_remote)
          : false,
        employed_start: employed_start,
        resume: profile_resume || null,
        linked_in: creds.linked_in || null,
        slack: creds.slack || null,
        github: creds.github || null,
        dribble: creds.dribble || null,
        profile_image: profile_image || null,
        portfolio: creds.portfolio_URL || null,
      }).then(() => history.push('/dashboard'))
    } else {
      alert('Your Passwords must match!')
    }
    ReactGA.event({
      category: 'User',
      action: `Button Sign Up`,
    })
  }

  const switchMoreInfo = () => {
    setMoreInfo(!moreInfo)
  }

  const gaLogin = () => {
    ReactGA.event({
      category: 'User',
      action: `Link Already have an account`,
    })
  }

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

  return (
    <Flex className="RegisterSplash" w="100%" minH="100vh" justify="center">
      <Flex maxW="1440px" w="100%">
        <Flex
          w="833px"
          mx="auto"
          justify="center"
          align="center"
          flexDir="column"
        >
          <form onSubmit={handleSubmit(submitForm)}>
            <Flex
              w="833px"
              // h='825px'
              p="6"
              flexDir="column"
              background="#FDFDFF"
              justify="center"
            >
              <Flex
                as="h2"
                w="653"
                fontSize="36px"
                fontWeight="600"
                fontFamily="Poppins"
                justify="center"
                my="68px"
              >
                Let's get started!
              </Flex>

              {/* FIRST NAME, LAST NAME */}
              <Flex wrap="wrap" w="653" justify="center">
                <FormControl isRequired isInvalid={errors.username}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    First Name
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    mr="17px"
                    type="text"
                    name="firstName"
                    label="firstName"
                    placeholder="John"
                    autoCapitalize="none"
                    ref={register({ validate: validateFirstName })}
                  />
                  <FormErrorMessage>
                    {errors.firstName && errors.firstName.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isRequired isInvalid={errors.username}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Last Name
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    type="text"
                    name="lastName"
                    label="lastName"
                    placeholder="Doe"
                    autoCapitalize="none"
                    ref={register({ validate: validateLastName })}
                  />
                  <FormErrorMessage>
                    {errors.lastName && errors.lastName.message}
                  </FormErrorMessage>
                </FormControl>
              </Flex>

              {/* EMAIL */}
              <Flex wrap="wrap" w="653" justify="center">
                <FormControl isRequired isInvalid={errors.email}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Email
                  </FormLabel>
                  <SignupLoginInput
                    w="653px"
                    mb="30px"
                    type="email"
                    name="email"
                    label="email"
                    placeholder="[email protected]"
                    autoCapitalize="none"
                    ref={register({ validate: validateEmail })}
                  />
                  <FormErrorMessage>
                    {errors.email && errors.email.message}
                  </FormErrorMessage>
                </FormControl>
              </Flex>

              {/* TRACK */}
              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isRequired isInvalid={errors.track_name}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Track
                  </FormLabel>
                  <Select
                    mb="30px"
                    mr="17px"
                    h="68px"
                    py="16px"
                    w="318px"
                    rounded="2px"
                    variant="outline"
                    backgroundColor="#FDFDFF"
                    focusBorderColor="#344CD0"
                    borderColor="#EAF0FE"
                    color="#BBBDC6"
                    _focus={{ color: '#17171B' }}
                    _hover={{ borderColor: '#BBBDC6' }}
                    name="track_id"
                    label="track_id"
                    ref={register({ validate: validateTrack })}
                  >
                    <option fontFamily="Muli" value="">
                      Select Your Lambda Track
                    </option>
                    <option fontFamily="Muli" value={1}>
                      Android
                    </option>
                    <option fontFamily="Muli" value={2}>
                      DS
                    </option>
                    <option fontFamily="Muli" value={3}>
                      WEB
                    </option>
                    <option fontFamily="Muli" value={4}>
                      IOS
                    </option>
                    <option fontFamily="Muli" value={5}>
                      UX
                    </option>
                  </Select>
                  <FormErrorMessage>
                    {errors.track_id && errors.track_id.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isRequired isInvalid={errors.username}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Cohort
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    type="text"
                    name="cohort"
                    label="cohort"
                    placeholder="Ex: FT 1 or PT 1"
                    autoCapitalize="none"
                    ref={register({ validate: validateCohort })}
                  />
                  <FormErrorMessage>
                    {errors.cohort && errors.cohort.message}
                  </FormErrorMessage>
                </FormControl>
              </Flex>

              {/* PASSWORD, CONFIRM PASSWORD */}
              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isRequired isInvalid={errors.password}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Password
                  </FormLabel>
                  <InputGroup>
                    <SignupLoginInput
                      w="318px"
                      // mb='30px'
                      mr="17px"
                      type={show ? 'text' : 'password'}
                      name="password"
                      label="Password"
                      placeholder="********"
                      autoCapitalize="none"
                      ref={register({ validate: validatePassword })}
                    />
                    <InputRightElement width="4.5rem" pr="22px" py="32px">
                      <Button
                        h="1.75rem"
                        color="rgba(72, 72, 72, 0.1)"
                        border="none"
                        size="sm"
                        backgroundColor="#FDFDFF"
                        onClick={handleClick}
                      >
                        {show ? 'Hide' : 'Show'}
                      </Button>
                    </InputRightElement>
                  </InputGroup>
                  <FormHelperText mb="45px" color="#9194A8">
                    Must be at least 8 characters
                  </FormHelperText>
                  <FormErrorMessage>
                    {errors.password && errors.password.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isRequired>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Confirm Password
                  </FormLabel>
                  <InputGroup>
                    <SignupLoginInput
                      w="318px"
                      mb="30px"
                      type={show ? 'text' : 'password'}
                      name="confirmPassword"
                      label="Confirm Password"
                      placeholder="********"
                      autoCapitalize="none"
                      ref={register}
                    />
                    <InputRightElement width="4.5rem" py="32px">
                      <Button
                        data-cy="registerSubmit"
                        h="1.75rem"
                        color="rgba(72, 72, 72, 0.1)"
                        border="none"
                        size="sm"
                        backgroundColor="#FDFDFF"
                        onClick={handleClick}
                      >
                        {show ? 'Hide' : 'Show'}
                      </Button>
                    </InputRightElement>
                  </InputGroup>
                </FormControl>
              </Flex>

              {/* CLICK FOR LONGFORM SIGNUP */}
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb={moreInfo ? '0' : '55px'}
                cursor="pointer"
                justify="flex-start"
                data-cy="longFormDropdown"
                onClick={switchMoreInfo}
              >
                <Flex justify="flex-start">
                  {moreInfo ? (
                    <Icon
                      fontWeight="bold"
                      name="chevron-down"
                      textAlign="left"
                      size="30px"
                      mr="5px"
                      ml="-8px"
                      pt="3px"
                    />
                  ) : (
                    <Icon
                      fontWeight="bold"
                      name="chevron-right"
                      textAlign="left"
                      size="30px"
                      mr="5px"
                      ml="-8px"
                      pt="3px"
                    />
                  )}
                  <Text fontWeight="bold" fontSize="20px" fontFamily="Muli">
                    {' '}
                    Add Additional Information
                  </Text>
                </Flex>
              </Flex>

              {/* ADDITIONAL INFO COMPONENT */}
              {moreInfo ? (
                <SignupAdditional
                  profile_resume={profile_resume}
                  profile_image={profile_image}
                  uploadImage={uploadImage}
                  uploadResume={uploadResume}
                  register={register}
                  errors={errors}
                  location={location}
                  newLocation={newLocation}
                  setNewLocation={setNewLocation}
                  stateHelper={stateHelper}
                  validateFieldOfStudy={validateFieldOfStudy}
                />
              ) : null}

              <Flex w="100%" justify="center">
                <Button
                  mb="30px"
                  border="none"
                  rounded="50px"
                  h="58px"
                  w="653px"
                  my="2%"
                  size="lg"
                  color="white"
                  backgroundColor="#344CD0"
                  _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                  isLoading={formState.isSubmitting}
                  type="submit"
                  data-cy="registerSubmit"
                >
                  Sign up
                </Button>
              </Flex>
              <Flex m="15px" justify="center" fontWeight="light">
                <Text fontSize="16px" color="#17171B" fontFamily="Muli">
                  Already have an account?{' '}
                  <Link
                    to="/"
                    onClick={gaLogin}
                    style={{
                      textDecoration: 'none',
                      fontWeight: 'bold',
                      color: '#344CD0',
                      fontSize: '16px',
                    }}
                  >
                    Sign in here!
                  </Link>
                </Text>
              </Flex>
            </Flex>
          </form>
        </Flex>
      </Flex>
    </Flex>
  )
}
Example #4
Source File: AddCompanyForm.js    From allay-fe with MIT License 4 votes vote down vote up
AddCompanyForm = ({ isLoading, postCompany, history }) => {
  const { register, handleSubmit, errors, formState } = useForm();
  const [location, setLocation] = useState({});
  const [newLocation, setNewLocation] = useState({});
  const stateHelper = value => {
    setLocation(value);
  };

  // confirm myState and replace with matching state ID
  useEffect(() => {
    if (location.myState) {
      const stateId = states.filter(i =>
        i.state_name.toLowerCase().startsWith(location.myState.toLowerCase())
      );
      setNewLocation({ ...location, myState: stateId[0].id });
    }
  }, [location]);

  //submit handler
  const submitForm = newCompany => {
    postCompany({
      ...newCompany,
      hq_city: newLocation.myCity,
      state_id: newLocation.myState
    }).then(() => history.push('/dashboard/add-review'));
  };

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

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

  return (
    <Flex justify='center' w='100%' minH='100vh' bg='#F2F6FE'>
      <Flex w='45%' my='10%' px='4%' justify='center' flexDir='column'>
        <form onSubmit={handleSubmit(submitForm)}>
          <FormControl isRequired isInvalid={errors.hq_state}>
            <h2 color='#525252' align='center'>
              Add a company
            </h2>
            <FormLabel color='#525252' mt='3'>
              Company name
            </FormLabel>
            <OnboardingInput
              mb='30px'
              name='company_name'
              label='Company Name'
              placeholder='e.g. UPS'
              ref={register}
            />
            <FormLabel color='#525252'>Company headquarters location</FormLabel>
            <CustomAutocomplete
              stateHelper={stateHelper}
              h='72px'
              mb='30px'
              rounded='3px'
              variant='outline'
              id='hq_city'
              name='hq_city'
              label='hq_city'
              placeholder='e.g. Los Angeles, CA'
            />
            <FormLabel color='#525252'>Company website</FormLabel>
            <OnboardingInput
              mb='30px'
              name='domain'
              label='domain'
              placeholder='e.g. lambdaschool.com'
              ref={register}
            />
            <FormLabel color='#525252'>Company size</FormLabel>
            <Select
              mb='45px'
              h='70px'
              // w='404px'
              rounded='3px'
              variant='outline'
              backgroundColor='#FDFDFF'
              name='size_range'
              label='size_range'
              placeholder='Select company size'
              ref={register}
            >
              <option value='1-10'>1-10</option>
              <option value='11-50'>11-50</option>
              <option value='51-200'>51-200</option>
              <option value='201-500'>201-500</option>
              <option value='501-1000'>501-1000</option>
              <option value='1001-5000'>1001-5000</option>
              <option value='5001-10,000'>5001-10,000</option>
              <option value='10,001+'>10,001+</option>
            </Select>
          </FormControl>

          <Flex mt='1rem' w='100%' justify='space-between'>
            <Button
              bg='#344CD0'
              color='white'
              isLoading={formState.isSubmitting}
              type='submit'
              w='65%'
              h='72px'
              fontSize='18px'
            >
              Add
            </Button>
            <Flex
              align='center'
              justify='center'
              isloading
              height='72px'
              width='30%'
              color='#344CD0'
              fontSize='18px'
              fontWeight='bold'
              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'
                      ref={cancelRef}
                      onClick={onClose}
                    >
                      Cancel
                    </Flex>
                    <Button
                      h='56px'
                      rounded='10px'
                      bg='#344CD0'
                      border='none'
                      color='white'
                      onClick={() => history.push('/dashboard/add-review')}
                      ml={3}
                    >
                      Yes I'm sure
                    </Button>
                  </Flex>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </Flex>
        </form>
      </Flex>
    </Flex>
  );
}
Example #5
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 #6
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 #7
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 #8
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 #9
Source File: EditUserProfile.js    From allay-fe with MIT License 4 votes vote down vote up
EditUserProfile = ({ match, history, userData, updateUser }) => {
  const id = match.params.id
  const userId = window.localStorage.getItem('userId')
  // creating form state, setting default values
  const { handleSubmit, errors, register, formState } = useForm({
    defaultValues: {
      firstName: userData.first_name,
      lastName: userData.last_name,
      gradMonth: userData.graduated ? userData.graduated.slice(5, 7) : null,
      gradYear: userData.graduated ? userData.graduated.slice(0, 4) : null,
      highest_ed: userData.highest_ed,
      field_of_study: userData.field_of_study,
      employed_company: userData.employed_company,
      employed_title: userData.employed_title,
      workMonth: userData.employed_start
        ? userData.employed_start.slice(5, 7)
        : null,
      workYear: userData.employed_start
        ? userData.employed_start.slice(0, 4)
        : null,
      resume: userData.resume ? userData.resume : null,
      portfolio_URL: userData.portfolio ? userData.portfolio : null,
      linked_in: userData.linked_in ? userData.linked_in : null,
      slack: userData.slack ? userData.slack : null,
      github: userData.github ? userData.github : null,
      dribble: userData.dribble ? userData.dribble : null,
      profile_image: userData.profile_image ? userData.profile_image : null,
    },
  })

  //location state/helpers
  const [location, setLocation] = useState({})
  const [newLocation, setNewLocation] = useState({})
  const stateHelper = (value) => {
    setLocation(value)
  }
  // cloudinary stuff
  const [newProfile_image, setNewProfile_Image] = useState('')
  const [newProfile_resume, setNewProfile_resume] = useState('')

  // graduated state/helpers
  const [graduated, setGraduated] = useState(userData.graduated ? true : false)
  const isGraduated = () => {
    setGraduated(true)
  }
  const notGraduated = () => {
    setGraduated(false)
  }
  // employed state/helpers
  const [employed, setEmployed] = useState(
    userData.employed_start ? true : false
  )
  const isEmployed = () => {
    setEmployed(true)
  }
  const notEmployed = () => {
    setEmployed(false)
  }

  //radio button state
  const [priorExp, setPriorExp] = useState(
    userData.prior_experience ? userData.prior_experience : false
  )
  const [tlsl, setTlsl] = useState(
    userData.tlsl_experience ? userData.tlsl_experience : false
  )
  const [remote, setRemote] = useState(
    userData.employed_remote ? userData.employed_remote : false
  )

  //location helper
  useEffect(() => {
    setNewLocation({ ...location, myState: location.myState })
    // removes numbers, commas, and whitespaces from city
    if (location.myCity) {
      if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
        const tempCity = location.myCity
        setNewLocation({
          ...location,
          myCity: tempCity.replace(/^[\s,\d]+/, ''),
        })
      }
    }
  }, [location])

  ///info for slack ID
  const info = (
    <Box>
      <Image
        objectFit="fit"
        width="300px"
        height="300px"
        src={require('../../../icons/slack.gif')}
        alt="slack info"
      />
    </Box>
  )

  //validation
  function validateFirstName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'First Name is required'
    } else if (value.length < 2) {
      error = 'First Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'First Name can only contain letters'
    }
    return error || true
  }

  function validateLastName(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (!value) {
      error = 'Last Name is required'
    } else if (value.length < 2) {
      error = 'Last Name must be at least 2 characters'
    } else if (nameRegex.test(value)) {
      error = 'Last Name can only contain letters'
    }
    return error || true
  }

  function validateFieldOfStudy(value) {
    let error
    let nameRegex = /^[0-9*#+]+$/
    if (nameRegex.test(value)) {
      error = 'Field of study can only contain letters'
    }
    return error || true
  }
  //end validation

  //add image to cloudinary
  const updateImage = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    setNewProfile_Image(...newProfile_image, file.secure_url)
  }

  //upload resume to cloudinary
  const updateResume = async (e) => {
    const files = e.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('upload_preset', 'upload')
    const res = await fetch(
      '	https://api.cloudinary.com/v1_1/takija/image/upload',
      {
        method: 'POST',
        body: data,
      }
    )
    const file = await res.json()
    setNewProfile_resume(...newProfile_resume, file.secure_url)
  }

  // FORM SUBMISSION
  const submitForm = (creds) => {
    // correcting grad date format
    let graduated = null
    if (creds.gradMonth && creds.gradYear) {
      graduated = `${creds.gradYear}-${creds.gradMonth}-01`
    }

    // correcting employed date format
    let employed_start = null
    if (creds.workMonth && creds.workYear) {
      employed_start = `${creds.workYear}-${creds.workMonth}-01`
    }
    // formatting the signup state to match the back end columns
    updateUser(id, {
      first_name: creds.firstName,
      last_name: creds.lastName,
      location: newLocation
        ? `${newLocation.myCity || userData.location} ${newLocation.myState}`
        : creds.location,
      graduated: graduated,
      highest_ed: creds.highest_ed || null,
      field_of_study: creds.field_of_study || null,
      prior_experience: creds.prior_experience
        ? JSON.parse(creds.prior_experience)
        : false,
      tlsl_experience: creds.tlsl_experience
        ? JSON.parse(creds.tlsl_experience)
        : false,
      employed_company: creds.employed_company || null,
      employed_title: creds.employed_title || null,
      employed_remote: creds.employed_remote
        ? JSON.parse(creds.employed_remote)
        : false,
      employed_start: employed_start,
      resume: newProfile_resume || userData.resume,
      linked_in: creds.linked_in || null,
      slack: creds.slack || null,
      github: creds.github || null,
      dribble: creds.dribble || null,
      profile_image: newProfile_image || userData.profile_image,
      portfolio: creds.portfolio_URL || null,
    }).then(() => history.push(`/profile/${id}`))

    ReactGA.event({
      category: 'User',
      action: `Button Update Profile`,
    })
  }

  const returnToProfile = (e) => {
    e.preventDefault()
    history.push(`/profile/${id}`)
  }

  //see profilePage component for details
  const lazySolution =
    userData.location != 'undefined undefined ' &&
    userData.location != 'undefined undefined'
      ? userData.location
      : 'Enter your location'

  return (
    <>
      {/* //Top Section */}

      <Flex
        maxW="1440px"
        w="100%"
        px="40px"
        py="28px"
        m="0 auto"
        justify="space-between"
        align="center"
        borderBottom="1px solid #EAF0FE"
      >
        <Flex>
          <Link
            style={{
              textDecoration: 'none',
              color: '#344CD0',
              fontFamily: 'Poppins',
              fontWeight: '600',
              fontSize: '32px',
            }}
            to="/dashboard"
          >
            <h1> Allay </h1>
          </Link>
        </Flex>

        {Number(userId) === Number(userData.id) ? (
          <Flex>
            {userData.profile_image === 'h' ? (
              <Image
                size="58px"
                style={{ opacity: '0.6' }}
                src={require('../../../icons/user.svg')}
              />
            ) : (
              <Image
                size="58px"
                style={{ opacity: '0.6', borderRadius: '50%' }}
                src={userData.profile_image}
              />
            )}
          </Flex>
        ) : null}
      </Flex>
      <Flex
        w="833px"
        mx="auto"
        justify="center"
        align="center"
        flexDir="column"
      >
        <form onSubmit={handleSubmit(submitForm)}>
          <Flex
            w="833px"
            p="6"
            flexDir="column"
            background="#FDFDFF"
            justify="center"
          >
            <Flex w="653px" justify="space-between" my="68px" mx="auto">
              <Text
                as="h2"
                fontSize="24px"
                fontWeight="600"
                fontFamily="Poppins"
              >
                Edit Profile
              </Text>
              <Flex w="150px" justify="space-between">
                <Text
                  as="h3"
                  fontFamily="Muli"
                  fontSize="22px"
                  fontWeight="normal"
                  color="#9194A8"
                  style={{ cursor: 'pointer' }}
                  onClick={returnToProfile}
                >
                  Cancel
                </Text>
                <Text
                  as="h3"
                  fontFamily="Muli"
                  fontSize="22px"
                  fontWeight="bold"
                  color="#344CD0"
                  style={{ cursor: 'pointer' }}
                  onClick={handleSubmit(submitForm)}
                >
                  Save
                </Text>
              </Flex>
            </Flex>

            {/* CLOUDINARY IMAGE UPLOAD */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="55px"
              justify="space-evenly"
              alignItems="center"
            >
              {!newProfile_image ? (
                <Avatar
                  size="2xl"
                  name={userData.first_name}
                  style={{ borderRadius: '50%' }}
                  src={userData.profile_image}
                />
              ) : (
                <Avatar
                  size="2xl"
                  style={{ borderRadius: '50%' }}
                  src={newProfile_image}
                />
              )}

              <Flex alignItems="center">
                <input
                  type="file"
                  filename="image"
                  placeholder="Upload profile picture"
                  onChange={updateImage}
                  style={{
                    opacity: '1',
                    width: '105px',
                    color: 'transparent',
                    backgroundColor: 'transparent',
                  }}
                />
                {!newProfile_image ? (
                  <label htmlFor="files" className="btn">
                    Update profile image
                  </label>
                ) : (
                  <i
                    style={{
                      fontSize: '1.4rem',
                      color: 'green',
                      paddingLeft: '20px',
                    }}
                    className="far fa-check-circle"
                  ></i>
                )}
              </Flex>
            </Flex>

            {/* FIRST NAME, LAST NAME */}
            <Flex wrap="wrap" w="653" justify="center">
              <FormControl isRequired isInvalid={errors.username}>
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  First Name
                </FormLabel>
                <SignupLoginInput
                  w="318px"
                  mb="30px"
                  mr="17px"
                  type="text"
                  name="firstName"
                  label="firstName"
                  placeholder="John"
                  autoCapitalize="none"
                  ref={register({ validate: validateFirstName })}
                />
                <FormErrorMessage>
                  {errors.firstName && errors.firstName.message}
                </FormErrorMessage>
              </FormControl>
              <FormControl isRequired isInvalid={errors.username}>
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  Last Name
                </FormLabel>
                <SignupLoginInput
                  w="318px"
                  mb="30px"
                  type="text"
                  name="lastName"
                  label="lastName"
                  placeholder="Doe"
                  autoCapitalize="none"
                  ref={register({ validate: validateLastName })}
                />
                <FormErrorMessage>
                  {errors.lastName && errors.lastName.message}
                </FormErrorMessage>
              </FormControl>
            </Flex>

            {/* LOCATION OF USER */}
            <Flex wrap="wrap" w="653" justify="center">
              <FormControl>
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  Location (City, State)
                </FormLabel>
                <CustomAutocomplete
                  stateHelper={stateHelper}
                  w="653px"
                  h="58px"
                  mb="30px"
                  rounded="2px"
                  variant="outline"
                  bgColor="#FDFDFF"
                  focusBorderColor="#344CD0"
                  borderColor="#EAF0FE"
                  color="#17171B"
                  _hover={{ borderColor: '#BBBDC6' }}
                  _placeholder={{ color: '#BBBDC6' }}
                  id="location"
                  name="location"
                  label="location"
                  placeholder={lazySolution}
                  ref={register}
                />
              </FormControl>
            </Flex>

            {/* GRADUATED CHECK */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb={graduated ? '20px' : '80px'}
              justify="space-between"
            >
              <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                Have you graduated from Lambda yet?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="graduated"
                  id="graduated-1"
                  value={true}
                  isChecked={graduated === true}
                  onClick={isGraduated}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="graduated"
                  id="graduated-2"
                  value={false}
                  isChecked={graduated === false}
                  onClick={notGraduated}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>
            {/* GRADUATED MONTH AND YEAR */}
            {graduated ? (
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb="80px"
                justify="space-between"
                align="center"
              >
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  When did you graduate?
                </FormLabel>
                <Flex align="center" alignContent="center">
                  <FormControl>
                    <Select
                      mr="17px"
                      h="68px"
                      py="16px"
                      w="155px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="gradMonth"
                      label="gradMonth"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Month
                      </option>
                      <option fontFamily="Muli" value="01">
                        Jan
                      </option>
                      <option fontFamily="Muli" value="02">
                        Feb
                      </option>
                      <option fontFamily="Muli" value="03">
                        Mar
                      </option>
                      <option fontFamily="Muli" value="04">
                        Apr
                      </option>
                      <option fontFamily="Muli" value="05">
                        May
                      </option>
                      <option fontFamily="Muli" value="06">
                        Jun
                      </option>
                      <option fontFamily="Muli" value="07">
                        Jul
                      </option>
                      <option fontFamily="Muli" value="08">
                        Aug
                      </option>
                      <option fontFamily="Muli" value="09">
                        Sep
                      </option>
                      <option fontFamily="Muli" value="10">
                        Oct
                      </option>
                      <option fontFamily="Muli" value="11">
                        Nov
                      </option>
                      <option fontFamily="Muli" value="12">
                        Dec
                      </option>
                    </Select>
                  </FormControl>
                  <FormControl>
                    <Select
                      h="68px"
                      py="16px"
                      w="155px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="gradYear"
                      label="gradYear"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Year
                      </option>
                      {years.map((year, index) => (
                        <option key={`year${index}`} value={year}>
                          {year}
                        </option>
                      ))}
                    </Select>
                  </FormControl>
                </Flex>
              </Flex>
            ) : null}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="35px"
              justify="flex-start"
              borderTop="1px solid #DADADD"
            >
              <Text
                fontFamily="Poppins"
                fontWeight="600"
                fontSize="24px"
                lineHeight="36px"
                color="#BBBDC6"
              >
                Background
              </Text>
            </Flex>

            {/* HIGHEST LEVEL OF EDUCATION */}
            <Flex wrap="wrap" w="411px%" justify="center">
              <FormControl>
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  Highest level of education
                </FormLabel>
                <Select
                  mb="30px"
                  mr="17px"
                  h="68px"
                  py="16px"
                  w="318px"
                  rounded="2px"
                  variant="outline"
                  backgroundColor="#FDFDFF"
                  focusBorderColor="#344CD0"
                  borderColor="#EAF0FE"
                  color="#BBBDC6"
                  _focus={{ color: '#17171B' }}
                  _hover={{ borderColor: '#BBBDC6' }}
                  name="highest_ed"
                  label="highest_ed"
                  ref={register}
                >
                  <option fontFamily="Muli" value="">
                    Select your education level
                  </option>
                  <option fontFamily="Muli" value="High school diploma">
                    High school diploma
                  </option>
                  <option fontFamily="Muli" value="Associate's degree">
                    Associate's degree
                  </option>
                  <option fontFamily="Muli" value="Bachelor's degree">
                    Bachelor's degree
                  </option>
                  <option fontFamily="Muli" value="Master's degree">
                    Master's degree
                  </option>
                  <option fontFamily="Muli" value="PhD">
                    PhD
                  </option>
                </Select>
              </FormControl>

              {/* FIELD OF STUDY */}
              <FormControl isInvalid={errors.fieldOfStudy}>
                <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                  Field of study
                </FormLabel>
                <SignupLoginInput
                  w="318px"
                  mb="30px"
                  type="text"
                  name="field_of_study"
                  label="field_of_study"
                  placeholder="Enter your field of study"
                  autoCapitalize="none"
                  ref={register({ validate: validateFieldOfStudy })}
                />
                <FormErrorMessage>
                  {errors.fieldOfStudy && errors.fieldOfStudy.message}
                </FormErrorMessage>
              </FormControl>
            </Flex>

            {/* PRIOR EXPERIENCE */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="30px"
              justify="space-between"
            >
              <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                Prior to Lambda did you have any experience in your track?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="prior_experience"
                  id="priorExp-1"
                  ref={register}
                  value={true}
                  isChecked={priorExp === true}
                  onChange={() => setPriorExp(true)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="prior_experience"
                  id="priorExp-2"
                  ref={register}
                  value={false}
                  isChecked={priorExp === false}
                  onChange={() => setPriorExp(false)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>

            {/* DID YOU TL/SL */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="100px"
              justify="space-between"
            >
              <FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
                Have you been a TL/SL while at Lambda?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="tlsl_experience"
                  id="TLSL-1"
                  value={true}
                  ref={register}
                  isChecked={tlsl === true}
                  onChange={() => setTlsl(true)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="tlsl_experience"
                  id="TLSL-2"
                  value={false}
                  ref={register}
                  isChecked={tlsl === false}
                  onChange={() => setTlsl(false)}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>

            {/* RESUME UPLOAD */}
            {/* /// */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                fontSize="18px"
                color="#131C4D"
                align="center"
                fontFamily="Muli"
              >
                Resume
              </Text>
              <Flex width="270px" justify="flex-end">
                <input
                  type="file"
                  filename="image"
                  placeholder="Upload profile picture"
                  onChange={updateResume}
                  style={{
                    opacity: '1',
                    width: '105px',
                    color: 'transparent',
                    backgroundColor: 'transparent',
                  }}
                />
                <label htmlFor="files" className="btn">
                  {!newProfile_resume ? (
                    'Upload resume'
                  ) : (
                    <i
                      style={{
                        fontSize: '1.4rem',
                        color: 'green',
                        paddingLeft: '20px',
                      }}
                      className="far fa-check-circle"
                    ></i>
                  )}
                </label>
              </Flex>
            </Flex>
            <Flex w="653px" mx="auto" justify="flex-start">
              <FormHelperText w="653px" mb="30px" color="#9194A8">
                Must be a .pdf file
              </FormHelperText>
            </Flex>

            {/* //// */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="35px"
              justify="flex-start"
              borderTop="1px solid #DADADD"
            >
              <Text
                fontFamily="Poppins"
                fontWeight="600"
                fontSize="24px"
                lineHeight="36px"
                color="#BBBDC6"
              >
                Employment
              </Text>
            </Flex>

            {/* EMPLOYED CHECK */}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb={employed ? '30px' : '80px'}
              justify="space-between"
            >
              <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                Are you currently employed in your field of study?
              </FormLabel>
              <Flex justify="space-between" w="131px">
                <Radio
                  name="employed"
                  id="employed-1"
                  value={true}
                  isChecked={employed === true}
                  onClick={isEmployed}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  Yes
                </Radio>
                <Radio
                  name="employed"
                  id="employed-2"
                  value={false}
                  isChecked={employed === false}
                  onClick={notEmployed}
                  borderRadius="md"
                  borderColor="#D9D9D9"
                  _checked={{ bg: '#344CD0' }}
                >
                  No
                </Radio>
              </Flex>
            </Flex>

            {/* EMPLOYED COMPANY NAME AND JOB TITLE */}
            {employed ? (
              <Flex wrap="wrap" w="653" justify="center">
                <FormControl>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Company name
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    mr="17px"
                    type="text"
                    name="employed_company"
                    label="employed_company"
                    placeholder="Enter the company name"
                    autoCapitalize="none"
                    ref={register}
                  />
                </FormControl>
                <FormControl>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Job title
                  </FormLabel>
                  <SignupLoginInput
                    w="318px"
                    mb="30px"
                    type="text"
                    name="employed_title"
                    label="employed_title"
                    placeholder="Enter your job title"
                    autoCapitalize="none"
                    ref={register}
                  />
                </FormControl>
              </Flex>
            ) : null}

            {/* REMOTE WORK CHECK */}
            {employed ? (
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb="30px"
                justify="space-between"
              >
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  Are you working remotely?
                </FormLabel>
                <Flex justify="space-between" w="131px">
                  <Radio
                    name="employed_remote"
                    id="employed_remote-1"
                    value={true}
                    ref={register}
                    isChecked={remote === true}
                    onChange={() => setRemote(true)}
                    borderRadius="md"
                    borderColor="#D9D9D9"
                    _checked={{ bg: '#344CD0' }}
                  >
                    Yes
                  </Radio>
                  <Radio
                    name="employed_remote"
                    id="employed_remote-2"
                    value={false}
                    ref={register}
                    isChecked={remote === false}
                    onChange={() => setRemote(false)}
                    borderRadius="md"
                    borderColor="#D9D9D9"
                    _checked={{ bg: '#344CD0' }}
                  >
                    No
                  </Radio>
                </Flex>
              </Flex>
            ) : null}

            {/* EMPLOYMENT START DATE */}
            {employed ? (
              <Flex
                wrap="wrap"
                w="653px"
                mx="auto"
                mb="80px"
                justify="space-between"
                align="center"
              >
                <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                  When did you start?
                </FormLabel>
                <Flex align="center" alignContent="center">
                  <FormControl>
                    <Select
                      mr="17px"
                      h="68px"
                      py="16px"
                      w="159px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="workMonth"
                      label="workMonth"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Month
                      </option>
                      <option fontFamily="Muli" value="01">
                        Jan
                      </option>
                      <option fontFamily="Muli" value="02">
                        Feb
                      </option>
                      <option fontFamily="Muli" value="03">
                        Mar
                      </option>
                      <option fontFamily="Muli" value="04">
                        Apr
                      </option>
                      <option fontFamily="Muli" value="05">
                        May
                      </option>
                      <option fontFamily="Muli" value="06">
                        Jun
                      </option>
                      <option fontFamily="Muli" value="07">
                        Jul
                      </option>
                      <option fontFamily="Muli" value="08">
                        Aug
                      </option>
                      <option fontFamily="Muli" value="09">
                        Sep
                      </option>
                      <option fontFamily="Muli" value="10">
                        Oct
                      </option>
                      <option fontFamily="Muli" value="11">
                        Nov
                      </option>
                      <option fontFamily="Muli" value="12">
                        Dec
                      </option>
                    </Select>
                  </FormControl>
                  <FormControl>
                    <Select
                      h="68px"
                      py="16px"
                      w="159px"
                      rounded="2px"
                      variant="outline"
                      backgroundColor="#FDFDFF"
                      focusBorderColor="#344CD0"
                      borderColor="#EAF0FE"
                      color="#BBBDC6"
                      _focus={{ color: '#17171B' }}
                      _hover={{ borderColor: '#BBBDC6' }}
                      name="workYear"
                      label="workYear"
                      ref={register}
                    >
                      <option fontFamily="Muli" value="">
                        Year
                      </option>
                      {years.map((year, index) => (
                        <option key={`year${index}`} value={year}>
                          {year}
                        </option>
                      ))}
                    </Select>
                  </FormControl>
                </Flex>
              </Flex>
            ) : null}
            <Flex
              wrap="wrap"
              w="653px"
              mx="auto"
              mb="35px"
              justify="flex-start"
              borderTop="1px solid #DADADD"
            >
              <Text
                fontFamily="Poppins"
                fontWeight="600"
                fontSize="24px"
                lineHeight="36px"
                color="#BBBDC6"
              >
                Online Presence
              </Text>
            </Flex>

            {/* PORTFOLIO URL */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Portfolio URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="portfolio_URL"
                label="portfolio_URL"
                placeholder="Enter your portfolio URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* LINKEDIN URL */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                LinkedIn URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="linked_in"
                label="linked_in"
                placeholder="Enter your LinkedIn URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* SLACK USERNAME */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Slack ID
                <Tooltip hasArrow label={info} placement="top">
                  <i
                    style={{ paddingLeft: '10px' }}
                    className="fas fa-question"
                  ></i>
                </Tooltip>
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="slack"
                label="slack"
                placeholder="Enter your Slack ID"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* GITHUB USERNAME */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Github URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="github"
                label="github"
                placeholder="Enter your Github URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>

            {/* DRIBBBLE URL */}
            <Flex
              wrap="wrap"
              w="653px"
              mb="15px"
              mx="auto"
              justify="space-between"
              align="center"
            >
              <Text
                color="#131C4D"
                fontSize="18px"
                align="center"
                fontFamily="Muli"
              >
                Dribbble URL
              </Text>
              <SignupLoginInput
                w="318px"
                type="text"
                name="dribble"
                label="dribble"
                placeholder="Enter your Dribbble URL"
                autoCapitalize="none"
                ref={register}
              />
            </Flex>
            <Flex
              w="100%"
              style={{ alignItems: 'center' }}
              justify="center"
              direction="column"
            >
              <Button
                border="none"
                rounded="50px"
                h="58px"
                w="653px"
                my="2%"
                size="lg"
                color="white"
                backgroundColor="#344CD0"
                _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                isLoading={formState.isSubmitting}
                type="submit"
                data-cy="registerSubmit"
              >
                Save
              </Button>
              <Button
                mb="30px"
                border="none"
                rounded="50px"
                h="58px"
                w="653px"
                my="2%"
                size="lg"
                color="#9194A8"
                backgroundColor="#FDFDFF"
                _hover={{ cursor: 'pointer' }}
                onClick={returnToProfile}
                data-cy="cancelUpdate"
              >
                Cancel
              </Button>
            </Flex>
          </Flex>
        </form>
      </Flex>
    </>
  )
}
Example #10
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 #11
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 #12
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>
  );
}