@chakra-ui/core#AlertDialogOverlay JavaScript Examples
The following examples show how to use
@chakra-ui/core#AlertDialogOverlay.
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
</>
)
}
