@chakra-ui/core#AlertDialogBody JavaScript Examples

The following examples show how to use @chakra-ui/core#AlertDialogBody. 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: ContentButton.js    From allay-fe with MIT License 5 votes vote down vote up
export default function ContentButton({ isAdmin, submitDelete }) {
	const [isOpen, setIsOpen] = React.useState();
	const onClose = () => setIsOpen(false);
	const cancelRef = React.useRef();

	return (
		<>
			{isAdmin && (
				<Button
					variantColor='red'
					data-cy='adminDeleteReview'
					onClick={() => setIsOpen(true)}
				>
					Delete Content
				</Button>
			)}

			<AlertDialog
				isOpen={isOpen}
				leastDestructiveRef={cancelRef}
				onClose={onClose}
			>
				<AlertDialogOverlay />
				<AlertDialogContent>
					<AlertDialogHeader fontSize='lg' fontWeight='bold'>
						You are about to delete this content.
					</AlertDialogHeader>

					<AlertDialogBody>Are you sure?</AlertDialogBody>

					<AlertDialogFooter>
						<Button ref={cancelRef} onClick={onClose}>
							Cancel
						</Button>
						<Button
							variantColor='red'
							onClick={submitDelete}
							ml={3}
							data-cy='adminDeleteReviewConfirm'
						>
							Delete
						</Button>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
		</>
	);
}
Example #2
Source File: BlockButton.js    From allay-fe with MIT License 4 votes vote down vote up
export default function BlockButton({ user_id }) {
  const [isOpen, setIsOpen] = React.useState()
  const onClose = () => setIsOpen(false)
  const cancelRef = React.useRef()
  const dispatch = useDispatch()

  // get admin status and user status
  const admin = useSelector((state) => state.auth.isAdmin)
  const blocked = useSelector((state) => state.user.isUserBlocked)
  // func to block/unblock user
  const block = (id) => {
    dispatch(blockUser(id))
    setIsOpen(false)
  }
  return (
    <>
      {admin && (
        <>
          {blocked ? (
            <Button
              data-cy="unblockUserButton"
              variantColor="green"
              onClick={() => setIsOpen(true)}
            >
              Unblock User
            </Button>
          ) : (
            <Button
              data-cy="blockUserButton"
              variantColor="red"
              onClick={() => setIsOpen(true)}
            >
              Block User
            </Button>
          )}
        </>
      )}

      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay />
        <AlertDialogContent>
          {blocked ? (
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              You are about to unblock this user.
            </AlertDialogHeader>
          ) : (
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              You are about to block this user.
            </AlertDialogHeader>
          )}

          <AlertDialogBody>Are you sure?</AlertDialogBody>

          <AlertDialogFooter>
            <Button ref={cancelRef} onClick={onClose}>
              Cancel
            </Button>
            {blocked ? (
              <Button
                data-cy="unblockUserButtonConfirm"
                variantColor="green"
                onClick={() => block(user_id)}
                ml={3}
              >
                Unblock
              </Button>
            ) : (
              <Button
                data-cy="blockUserButtonConfirm"
                variantColor="red"
                onClick={() => block(user_id)}
                ml={3}
              >
                Block
              </Button>
            )}
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}
Example #3
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 #4
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 #5
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 #6
Source File: ReviewCard.js    From allay-fe with MIT License 4 votes vote down vote up
ReviewCard = ({ review, history, deleteReview, isAdmin }) => {
  const singleReview = review

  //deletes the review in question
  const submitDelete = (user_id, review_id) => {
    if (review.user_id && review.review_id) {
      deleteReview(review.user_id, review.review_id).then(() => {
        // window.location.reload();
        history.push('/dashboard')
      })
    } else {
      deleteReview(user_id, review_id).then(() => {
        // window.location.reload();
        history.push('/dashboard')
      })
    }

    ReactGA.event({
      category: 'Review Delete',
      action: `Submit delete`,
    })
  }
  // useEffect(() => {}, [submitDelete])
  // basic usage for the SingleReview modal
  const { isOpen, onOpen, onClose } = useDisclosure()
  const loginId = localStorage.getItem('userId')

  // specifically for the cancel review delete button functionality
  const [isOpen2, setIsOpen2] = useState()
  const onClose2 = () => setIsOpen2(false)
  const cancelRef = useRef()

  //routes to single review
  const navToEditRoute = () =>
    review.review_type === 'Company'
      ? history.push({
          pathname: `/dashboard/review/${review.review_id}`,
          state: singleReview,
        })
      : history.push(`/dashboard/interview/${review.review_id}`)

  //routes to user's profile page
  const navToProfile = (e) => {
    e.preventDefault()
    history.push(`/profile/${review.user_id}`)
  }

  // adjust logo for api call
  // const adjustedName = review.company_name.replace(' ', '+')

  // adjust date of posting
  let tempDate = new Date(review.created_at).toUTCString()
  const tempDay = tempDate.split(' ').slice(1, 2)
  const tempMonth = tempDate.split(' ').slice(2, 3)
  const tempYear = tempDate.split(' ').slice(3, 4)
  const adjustedDate = `${tempMonth} ${tempDay}, ${tempYear}`

  //track name font color picker
  const trackFontColor = (trackName) => {
    switch (trackName) {
      case 'DS':
        return '#35694F'
        break
      case 'WEB':
        return '#474EA7'
        break
      case 'iOS' || 'IOS':
        return '#8E3D19'
        break
      case 'Android':
        return '#4B3569'
        break
      case 'UX':
        return '#9F3A5A'
        break
      default:
        return
    }
  }
  //track name background color picker
  const trackColorPicker = (trackName) => {
    switch (trackName) {
      case 'DS':
        return '#D3F2CD'
        break
      case 'WEB':
        return '#DBEBFD'
        break
      case 'iOS' || 'IOS':
        return '#F4E6BE'
        break
      case 'Android':
        return '#E9D9FF'
        break
      case 'UX':
        return '#F9E3DE'
        break
      default:
        return
    }
  }

  //remove white space from company name for logo usage
  let stripped = review.company_name.replace(/ /g, '')
  let com = '.com'
  const logo = stripped.concat(com)

  const created = moment(review.created_at).fromNow()

  return (
    <>
      {/* ------------------------------------------------------------------------------------------------ */}
      {/* ---------------------------------------Modal Cards (for edit)----------------------------------- */}
      {/* ------------------------------------------------------------------------------------------------ */}

      <Modal
        preserveScrollBarGap
        isOpen={isOpen}
        onClose={onClose}
        size="950px"
      >
        <ModalOverlay />
        <ModalContent w="100%" wrap="nowrap">
          <ModalCloseButton
            data-cy="reviewCloseButton"
            background="none"
            border="none"
          />

          {/* LEFT SIDE MODAL */}
          <Flex
            direction="column"
            justify="space-between"
            align="flex-start"
            position="relative"
            w="261px"
            height="100%"
            top="0"
            left="0"
            pb="50px"
            pt="35px"
            pl="40px"
            bg="#F2F6FE"
            borderRadius="0px 40px 40px 0px"
          >
            {/* USER AVATAR AND NAME */}
            <Flex
              justify="space-evenly"
              align="center"
              mb="30px"
              onClick={navToProfile}
              style={{ cursor: 'pointer' }}
            >
              {review.user_profile_image === 'h' ? (
                <Image
                  size="40px"
                  mr="7px"
                  style={{ opacity: '0.6' }}
                  src={require('../../icons/user.svg')}
                />
              ) : (
                <Image
                  size="40px"
                  mr="7px"
                  style={{ opacity: '0.6', borderRadius: '50%' }}
                  src={review.user_profile_image}
                />
              )}
              <Text color="#131C4D" fontSize="14px" fontFamily="Muli">
                By {review.user_first_name} {review.user_last_name}
              </Text>
            </Flex>
            {/* COMPANY LOGO AND REVIEW STARS */}
            <Flex
              direction="column"
              justify="center"
              align="flex-start"
              mb="20px"
            >
              <Image
                w="148px"
                h="70px"
                src={`https://logo.clearbit.com/${
                  review.logo !== 'unknown' ? review.logo : logo
                }`}
                fallbackSrc={`http://samscct.com/wp-content/uploads/2014/09/no-logo.png`}
              />

              <Flex mt="13px">
                {Array(5)
                  .fill('')
                  .map((_, i) => (
                    <Icon
                      name="star"
                      key={i}
                      color={i < review.overall_rating ? '#F9DC76' : '#DADADD'}
                      ml="4px"
                    />
                  ))}
              </Flex>
            </Flex>
            {/* COMPANY LOCATION AND NAME */}
            <Flex
              direction="column"
              justify="center"
              align="flex-start"
              mb="40px"
            >
              <Flex mb="5px">
                <Box as={GoLocation} size="21px" color="#BBBDC6" mr="7px" />
                <Text color="#BBBDC6" fontSize="14px" fontFamily="Muli">
                  {review.city}, {review.state_name}
                </Text>
              </Flex>
              <Flex>
                <Box as={FaRegBuilding} size="21px" color="#BBBDC6" mr="7px" />
                <Text color="#BBBDC6" fontSize="14px" fontFamily="Muli">
                  {review.company_name}
                </Text>
              </Flex>
            </Flex>
            {/* JOB/INTERVIEW INFORMATION */}
            <Flex direction="column" justify="space-between" align="flex-start">
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                <Text
                  color="#131C4C"
                  fontSize="18px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  {review.job_title}
                </Text>
                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  Job title
                </Text>
              </Flex>
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                <Text
                  color="#131C4C"
                  fontSize="18px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >{`${review.salary}.00`}</Text>
                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  Salary
                </Text>
              </Flex>
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                {review.review_type === 'Company' ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    {review.work_status}
                  </Text>
                ) : review.difficulty_rating === 1 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Very easy
                  </Text>
                ) : review.difficulty_rating === 2 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Easy
                  </Text>
                ) : review.difficulty_rating === 3 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Somewhat easy
                  </Text>
                ) : review.difficulty_rating === 4 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Somewhat hard
                  </Text>
                ) : review.difficulty_rating === 5 ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    Hard
                  </Text>
                ) : (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    N/A
                  </Text>
                )}

                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  {review.review_type === 'Company'
                    ? 'Status'
                    : 'Interview difficulty'}
                </Text>
              </Flex>
              <Flex
                direction="column"
                justify="flex-start"
                align="flex-start"
                mb="20px"
              >
                {review.review_type === 'Company' ? (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    {review.start_date} -{' '}
                    {review.end_date ? review.end_date : 'Present'}
                  </Text>
                ) : (
                  <Text
                    color="#131C4C"
                    fontSize="18px"
                    fontFamily="Muli"
                    fontWeight="bold"
                  >
                    {review.offer_status}
                  </Text>
                )}
                <Text
                  color="#9194A8"
                  fontSize="14px"
                  fontFamily="Muli"
                  fontWeight="bold"
                >
                  {review.review_type === 'Company' ? 'Dates' : 'Job offer?'}
                </Text>
              </Flex>
            </Flex>
            <Flex>
              {Number(loginId) === Number(review.user_id) ? (
                <Image
                  src={require('../../icons/edit.png')}
                  onClick={navToEditRoute}
                  cursor="pointer"
                  size="1.5em"
                  mr="12px"
                  data-cy="editModalReview"
                />
              ) : null}
              {Number(loginId) === Number(review.user_id) ? (
                <Image
                  data-cy="deleteModalReview"
                  src={require('../../icons/trash.png')}
                  onClick={() => setIsOpen2(true)}
                  cursor="pointer"
                  size="1.5em"
                />
              ) : null}
              <AlertDialog
                isOpen={isOpen2}
                leastDestructiveRef={cancelRef}
                onClose={onClose2}
              >
                <AlertDialogOverlay />
                <AlertDialogContent>
                  <AlertDialogHeader fontSize="lg" fontWeight="bold">
                    Delete review
                  </AlertDialogHeader>

                  <AlertDialogBody>
                    Are you sure? You can't undo this action afterwards.
                  </AlertDialogBody>

                  <AlertDialogFooter>
                    <Flex
                      align="center"
                      justify="center"
                      height="56px"
                      width="30%"
                      color="#344CD0"
                      fontSize="16px"
                      fontWeight="bold"
                      ref={cancelRef}
                      onClick={onClose2}
                    >
                      Cancel
                    </Flex>
                    <Button
                      data-cy="confirmDeleteModalReview"
                      h="56px"
                      rounded="10px"
                      border="none"
                      color="white"
                      variantColor="red"
                      ml={3}
                      onClick={submitDelete}
                    >
                      Delete
                    </Button>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </Flex>
          </Flex>
          {/* RIGHT SIDE MODAL */}
          <Flex
            direction="column"
            justify="flex-start"
            align="flex-start"
            position="absolute"
            w="575px"
            h="100%"
            ml="291px"
            mb="50px"
            mt="35px"
          >
            {/* TYPE OF REVIEW, TRACK, DATE POSTED */}
            <Flex justify="space-between" w="100%" mb="70px">
              <Flex justify="space-between">
                <Box as={MdRateReview} size="24px" color="#BBBDC6" mr="4px" />
                <Text
                  mr="40px"
                  color="#131C4D"
                  fontFamily="Muli"
                  fontSize="14px"
                >
                  {review.review_type === 'Company'
                    ? 'Company Review'
                    : 'Interview Review'}
                </Text>
                <Badge
                  backgroundColor={
                    review.track_name === 'WEB'
                      ? '#DBEBFD'
                      : review.track_name === 'iOS'
                      ? '#F4E6BE'
                      : review.track_name === 'UX'
                      ? '#F9E3DE'
                      : review.track_name === 'DS'
                      ? '#D3F2CD'
                      : review.track_name === 'Android'
                      ? '#E9D9FF'
                      : '#DBEBFD'
                  }
                  color={
                    review.track_name === 'WEB'
                      ? '#474EA7'
                      : review.track_name === 'iOS'
                      ? '#8E3D19'
                      : review.track_name === 'UX'
                      ? '#9F3A5A '
                      : review.track_name === 'DS'
                      ? '#35694F'
                      : review.track_name === 'Android'
                      ? '#4B3569'
                      : '#474EA7'
                  }
                  fontSize="16px "
                  fontWeight="light"
                  fontFamily="Muli"
                  rounded="full"
                  px="15px"
                  pt="2px"
                  overflow="hidden"
                >
                  {review.track_name}
                </Badge>
              </Flex>
              <Text color="#9194A8" fontSize="14px" fontFamily="Muli">
                {adjustedDate}
              </Text>
            </Flex>
            {/* INTERVIEW TYPES */}
            {review.review_type === 'Interview' ? (
              <Flex color="#9194A8" fontSize="14px" fontFamily="Muli">
                Interviews
              </Flex>
            ) : null}
            {review.review_type === 'Interview' ? (
              <Flex
                justify="flex-start"
                wrap="wrap"
                whiteSpace="nowrap"
                width="100%"
                mb="50px"
              >
                {review.phone_interview ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Phone screening
                  </Flex>
                ) : null}
                {review.resume_review ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Resume review
                  </Flex>
                ) : null}
                {review.take_home_assignments ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Take home assignments
                  </Flex>
                ) : null}
                {review.online_coding_assignments ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Online coding assignments
                  </Flex>
                ) : null}
                {review.portfolio_review ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Portfolio review
                  </Flex>
                ) : null}
                {review.screen_share ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Screen share
                  </Flex>
                ) : null}
                {review.open_source_contribution ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Open source contribution
                  </Flex>
                ) : null}
                {review.side_projects ? (
                  <Flex
                    as="p"
                    color="#131C4D"
                    fontSize="16px"
                    fontFamily="Muli"
                    bg="#EAF0FE"
                    px="1%"
                    mt="1.5%"
                    mr="3%"
                    rounded="3px"
                  >
                    Side projects
                  </Flex>
                ) : null}
              </Flex>
            ) : null}
            {/* DESCRIPTION */}
            <Flex direction="column">
              <Text color="#9194A8" fontSize="14px" fontFamily="Muli" mb="7px">
                Description
              </Text>
              <Text
                color="#131C4D"
                fontSize="16px"
                fontFamily="Muli"
                lineHeight="23px"
              >
                {review.comment}
              </Text>
            </Flex>
          </Flex>
          {/* ADMIN BUTTONS */}
          <ModalFooter
            w="689px"
            ml="261px"
            mb="20px"
            position="absolute"
            bottom="0"
          >
            <BlockButton user_id={review.user_id} isAdmin={isAdmin} />
            <ContentButton
              isAdmin={isAdmin}
              submitDelete={submitDelete}
              user_id={review.user_id}
              review_id={review.review_id}
            />
          </ModalFooter>
        </ModalContent>
      </Modal>

      {/* ------------------------------------------------------------------------------------------------ */}
      {/* ---------------------------------------DashBoard Cards------------------------------------------ */}
      {/* ------------------------------------------------------------------------------------------------ */}

      {/* Review container */}
      <PseudoBox
        mb="3%"
        mx="2.5%"
        px="1%"
        py="1%"
        border="1px solid #E9F0FF"
        width="408px"
        height="309px"
        borderRadius="12px"
        display="flex"
        flexDir="column"
        _hover={{ bg: '#E9F0FF' }}
        onClick={onOpen}
        data-cy="modalCard"
      >
        {/* Review content container */}
        <Flex flexDir="column">
          {/* headline container  */}
          <Flex maxW="530px">
            <Flex
              height="115px"
              justify="space-between"
              maxW="391px"
              p="2% 5%"
              wrap="wrap"
            >
              <Flex maxW="300px">
                {review.review_type === 'Company' ? (
                  <Image
                    width="106px"
                    height="40px"
                    src={`https://logo.clearbit.com/${
                      review.logo !== 'unknown' ? review.logo : logo
                    }`}
                    fallbackSrc={`http://samscct.com/wp-content/uploads/2014/09/no-logo.png`}
                  />
                ) : (
                  <Text style={{ fontSize: '22px', fontWeight: 'bold' }}>
                    {' '}
                    {review.job_title}
                  </Text>
                )}
              </Flex>
              <i
                style={{ alignSelf: 'center', fontSize: '22px', opacity: '.2' }}
                className="far fa-heart"
              ></i>
              <Flex justify="space-between" width="391px" pt="2%">
                <Flex align="center">
                  {Array(5)
                    .fill('')
                    .map((_, i) => (
                      <Icon
                        name="star"
                        key={i}
                        color={i < review.overall_rating ? '#F9DC76' : '#fff'}
                        ml="8%"
                      />
                    ))}
                </Flex>
                <Flex>
                  <Text
                    style={{
                      color: '#BBBDC6',
                      fontSize: '14px',
                      fontWeight: 'bold',
                    }}
                  >
                    {created}
                  </Text>
                  {/* )} */}
                </Flex>
              </Flex>
              <Flex width="391px" height="45px" pt="15px">
                <Box as={MdRateReview} size="24px" color="#BBBDC6" mr="4px" />
                <span style={{ paddingLeft: '5px' }}>
                  {review.review_type} review
                </span>
              </Flex>
            </Flex>
          </Flex>
        </Flex>
        {/* summary container */}
        <Flex width="100%" height="100px">
          <Flex m="10px 20px" w="348px" h="55px" overflow="hidden">
            <p style={{ fontSize: '14px', color: 'gray' }}>{review.comment}</p>
          </Flex>
        </Flex>
        <Flex
          margin="0px 12px 0px 20px"
          align="center"
          pt="5px"
          height="40px"
          justify="space-between"
        >
          <Flex alignItems="center">
            <Avatar size="md" src={review.user_profile_image} />
            <Text pl="5px" fontSize="14px">
              {review.user_first_name} {review.user_last_name}
            </Text>
          </Flex>
          <Badge
            backgroundColor={trackColorPicker(review.track_name)}
            color={trackFontColor(review.track_name)}
            fontSize="1em"
            fontWeight="light"
            rounded="full"
            textAlign="center"
            pt="5px"
            overflow="hidden"
            ml="10px"
            width="58px"
            height="36px"
          >
            <span>{review.track_name}</span>
          </Badge>
        </Flex>
      </PseudoBox>
    </>
  )
}