@chakra-ui/core#Button JavaScript Examples
The following examples show how to use
@chakra-ui/core#Button.
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: load-more-button.js From space-rockets-challenge with MIT License | 6 votes |
|
export default function LoadMoreButton({
loadMore,
data,
pageSize,
isLoadingMore,
}) {
const isReachingEnd =
data?.[0]?.length === 0 ||
(data && data[data.length - 1]?.length < pageSize);
return (
<Flex justifyContent="center" my="100px">
<Button onClick={loadMore} disabled={isReachingEnd || isLoadingMore}>
{isLoadingMore ? (
<Spinner />
) : isReachingEnd ? (
"That's all!"
) : (
"Show more..."
)}
</Button>
</Flex>
);
}
Example #2
| Source File: index.js From dashboard with MIT License | 6 votes |
|
Home = () => {
return (
<Flex direction="column" justify="center" align="center">
<Heading
as="h1"
mb={2}
size="2xl"
fontStyle="italic"
fontWeight="extrabold"
>
{MY_APP}
</Heading>
<Button
as="a"
href="/dashboard"
backgroundColor="gray.900"
color="white"
fontWeight="medium"
mt={4}
maxW="200px"
_hover={{ bg: 'gray.700' }}
_active={{
bg: 'gray.800',
transform: 'scale(0.95)'
}}
>
View Dashboard
</Button>
</Flex>
);
}
Example #3
| Source File: header.js From dashboard with MIT License | 6 votes |
|
export default function Header() {
const bgColor = useColorModeValue('white', 'gray.900');
return (
<Flex
pos="fixed"
as="header"
align="center"
justify="center"
top={0}
insetX={0}
h={16}
px={[4, 6, null, 8]}
bg={bgColor}
borderBottomWidth="1px"
>
<Flex w="full" align="center" justify="center">
<Flex w="full" maxW="5xl" align="center" justify="center">
<Flex w="full" align="center" justify="space-between">
<Flex align="center">
<NextLink href="/" passHref>
<Button as="a" variant="ghost" px={0} fontWeight="bold">
{MY_APP}
</Button>
</NextLink>
</Flex>
<Flex>
<ThemeToggle />
</Flex>
</Flex>
</Flex>
</Flex>
</Flex>
);
}
Example #4
| Source File: header.js From dashboard with MIT License | 6 votes |
|
export default function Header() {
const bgColor = useColorModeValue('white', 'gray.800');
return (
<Flex
as="header"
position="fixed"
top={0}
left={[0, 0, 64]}
right={0}
align="center"
h={16}
px={[4, 6, 8]}
bg={bgColor}
zIndex="docked"
>
<Flex w="full" align="center" justify="center">
<Flex w="full" align="center" justify="space-between">
<Flex align="center">
<NextLink href="/dashboard" passHref>
<Button as="a" variant="ghost" px={0} fontWeight="bold">
{MY_APP}
</Button>
</NextLink>
</Flex>
<Flex>
<ThemeToggle mr={`-${3}`} />
<MobileNav />
</Flex>
</Flex>
</Flex>
</Flex>
);
}
Example #5
| Source File: index.js From covid-19-website with MIT License | 6 votes |
|
render() {
return ( <Layout>
<SEO title="Home" />
<Section
backgroundColor={"purple"}
paddingY={[1,8]}
>
<Flex>
<Box {...headerContainerProps}>
<Text {...headerStyling}>We're making some changes, you will be redirected to our sister website</Text>
<Link href="https://covidtechsupport.com/">
<Button {...buttonStyling}>Click here if not redirected</Button>
</Link>
</Box>
</Flex>
</Section>
</Layout>)
}
Example #6
| Source File: header.js From covid-19-website with MIT License | 6 votes |
|
NavLink = props => {
const isExternal = props.to.startsWith('http');
const linkElement = isExternal ? Link : GatsbyLink;
const adjustedProps = {
...props,
target: isExternal ? '_blank' : null,
href: isExternal ? props.to : null,
};
return <Button variant="ghost" fontSize="20px" as={linkElement} fontWeight={500} {...adjustedProps} />
}
Example #7
| Source File: SignIn.js From CubeMail with MIT License | 6 votes |
|
SignIn = ({ handleAuthClick, loading }) => (
<Flex h='100vh' justify='center' alignItems='center' bg='#e5f4f1'>
<Button
isLoading={loading}
leftIcon={FcGoogle}
height='50px'
variantColor='blue'
variant='outline'
backgroundColor='white'
onClick={handleAuthClick}
>
Sign in with Google
</Button>
</Flex>
)
Example #8
| Source File: BlockedModal.js From allay-fe with MIT License | 6 votes |
|
export default function Blocked() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>Add Review</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>
{" "}
<span style={{ fontSize: "30px" }}>{`\u2639`}</span>
</ModalHeader>
<ModalCloseButton />
<ModalBody>You've gone and got yourself blocked !</ModalBody>
<ModalFooter>
<Button variantColor="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Contact Admin</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
Example #9
| 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 #10
| Source File: tech-volunteers.js From covid-19-website with MIT License | 5 votes |
|
TechVolunteers = () => {
return (
<Layout>
<SEO title="Tech Volunteers" />
<Section
backgroundColor={"purple"}
paddingY={[1,8]}
>
<Heading {...headerStyling}>Hello and welcome,<br/> fellow Technologists!</Heading>
<Text {...textStyling}>
The number of people who are volunteering for this effort is fantastic, and we want to ensure this energy gets directed to the right place and optimised.
</Text>
<Text {...textStyling}>
So tell us what skills you have and your realistic availability, and we'll add you to the Slack group to get you started!
</Text>
</Section>
<Section
fontSize={[16, 16, 24]}
paddingY={[1,8]}
>
<Text paddingY={5}>
So you’re a:
</Text>
<List>
<ListItem>• Developer</ListItem>
<ListItem>• Data Scientist</ListItem>
<ListItem>• Designer</ListItem>
<ListItem>• Product / Project Manager</ListItem>
<ListItem>• Content Creator, Writer</ListItem>
<ListItem>• Marketing / PR / Marketplace Specialist</ListItem>
</List>
<Text>etc!</Text>
<Text paddingY={[5]}>...and you want to help in the Covid19 crisis?</Text>
<Text>This is what you can find here:</Text>
<List>
<ListItem>• Offer your skills to existing projects by code4covid group</ListItem>
<ListItem>• Ask for tech resources for your project to code4covid group</ListItem>
<ListItem>• Check the Coronavirus Tech Handbook by TechForUK group</ListItem>
<ListItem>• Explore List Of Existing Tech Communities</ListItem>
</List>
<Link to="/tech-volunteers-form/">
<Button {...buttonStyling}>CLICK TO START!</Button>
</Link>
</Section>
</Layout>
)
}
Example #11
| Source File: ProgressHeader.js From allay-fe with MIT License | 5 votes |
|
ProgressHeader = ({ progress }) => {
//progress bar
const history = useHistory()
return (
<Flex
justify="center"
px="10%"
w="100%"
h="198px"
background="#F2F6FE"
top="0"
position="fixed"
overflow="hidden"
zIndex="999"
direction="column"
>
<Flex w="100%" justify="space-between" pb="3%">
<h2 fontSize="24px" color="#131C4D" fontFamily="poppins">
Write a review
</h2>
<Button
border="none"
backgroundColor="#F2F6FE"
color="#344CD0"
fontSize="1.3em"
rounded="50px"
_hover={{ color: '#3B4DA6', cursor: 'pointer' }}
onClick={() => {
history.push('/dashboard')
}}
>
Cancel
</Button>
</Flex>
<Flex w="100%" justify="space-between" mb="1%">
{progress && progress.prec === 100 ? (
<>
<Flex as="h4" fontFamily="muli" color="#131C4D" w="50%">
{progress && progress.prec}% Completed!
</Flex>
</>
) : (
<>
<Flex as="h4" fontFamily="muli" color="#131C4D" w="50%">
{progress && 100 - progress.prec}% completed
</Flex>
</>
)}
<Flex width="100px" justify="space-evenly" align="flex-end">
<Image src={require('../../../icons/clock.png')} /> {progress.time}{' '}
min
</Flex>
</Flex>
<ProgressBar value={progress && progress.prog} />
</Flex>
)
}
Example #12
| Source File: Email.js From CubeMail with MIT License | 4 votes |
|
Email = () => {
const { message } = useContext(EmailContext);
const headers = message ? message.payload.headers : [];
const toast = useToast();
React.useEffect(() => {
if (message) {
addToFrame(message);
}
// eslint-disable-next-line
}, [message]);
const formatReplayData = (headers) => {
const replayTo =
getHeader(headers, "Reply-to") !== undefined
? getHeader(headers, "Reply-to")
: getHeader(headers, "From");
const replaySubject = getHeader(headers, "Subject");
const replayMsgId = getHeader(headers, "Message-ID");
return {
to: `${replayTo}`,
subject: `Re: ${replaySubject}`,
msgId: `${replayMsgId}`,
};
};
const handleTrashBtn = (userId, messageId) => {
return window.gapi.client.gmail.users.messages
.trash({
userId: userId,
id: messageId,
})
.then((resp) => {
if (resp.status === 200) {
toast({
title: "Message Deleted",
status: "error",
duration: 3000,
isClosable: true,
});
}
})
.catch((error) => {
console.log("error: ", error);
toast({
title: "An error occurred.",
description: "Unable to Delete Message.",
status: "warning",
duration: 3000,
isClosable: true,
});
});
};
const handleArchiveBtn = (ids, labelIds) => {
return window.gapi.client.gmail.users.messages
.batchModify({
userId: "me",
resource: {
ids: ids,
removeLabelIds: labelIds,
},
})
.then((resp) => {
if (resp.status === 204) {
toast({
title: "Message Archived",
description: "The Message is now in archive category.",
status: "success",
duration: 3000,
isClosable: true,
});
}
})
.catch((error) => {
console.log("error: ", error);
toast({
title: "An error occurred.",
description: "Unable to Archive Message.",
status: "error",
duration: 3000,
isClosable: true,
});
});
};
const addToFrame = (message) => {
let ifrm = document.getElementById("iframe").contentWindow.document;
ifrm.body.innerHTML = getMessageBody(message.payload);
};
const getMessageBody = (message) => {
const encodedBody =
typeof message.parts === "undefined"
? message.body.data
: getHTMLPart(message.parts);
return Base64.decode(encodedBody);
};
const getHTMLPart = (arr) => {
for (var x = 0; x <= arr.length; x++) {
if (typeof arr[x].parts === "undefined") {
if (arr[x].mimeType === "text/html") {
return arr[x].body.data;
}
} else {
return getHTMLPart(arr[x].parts);
}
}
return "";
};
return (
<Flex
direction='column'
wrap='no-wrap'
w='58%'
h='100%'
p='0.6rem 1rem'
bg='white'
color='black'
border='1px'
borderColor='gray.200'
borderTopRightRadius='md'
borderBottomRightRadius='md'
>
{!message ? (
<EmptyMail />
) : (
<Fragment>
{/* Header Buttons */}
<Flex justify='space-around' wrap='no-wrap' mb={2}>
<ReplyModel replayData={formatReplayData(headers)} />
<ForwardModel
forwardData={message}
getMessageBody={getMessageBody}
/>
<Button
rightIcon={MdArchive}
variantColor='blue'
variant='outline'
onClick={() => handleArchiveBtn([message.id], ["INBOX"])}
>
Archive
</Button>
<Button
rightIcon='delete'
variantColor='blue'
variant='outline'
onClick={() => handleTrashBtn("me", message.id)}
>
Delete
</Button>
</Flex>
{/* Mail Container */}
<Flex
className='mailContainer'
flexGrow='2'
direction='column'
wrap='no-wrap'
p={2}
>
<Box className='mailHeader' mb={2}>
<Text fontSize='lg' fontWeight='bold' color='gray.700' mb={1}>
{getHeader(headers, "Subject")}
</Text>
<Flex wrap='no-wrap' justify='flex-start'>
<Avatar
name={removeQuote(getHeader(headers, "From").split("<")[0])}
src='https://bit.ly/tioluwani-kolawole'
mr={4}
/>
<Box w='80%'>
<Text fontSize='md' color='gray.700'>
{getHeader(headers, "From")}
</Text>
<Text fontSize='sm' color='gray.500'>
{formatDate(getHeader(headers, "Date"))}
</Text>
</Box>
</Flex>
<Text fontSize='sm' color='gray.700' mt={1}>
{`To: ${getHeader(headers, "To")}`}
</Text>
</Box>
<Box className='mailBody' flexGrow='2'>
<AspectRatioBox ratio={16 / 9} h='100%'>
<Box as='iframe' id='iframe' title='messageBody'>
<p>Your browser does not support iframes.</p>
</Box>
</AspectRatioBox>
</Box>
</Flex>
</Fragment>
)}
</Flex>
);
}
Example #13
| Source File: header.js From opensource.builders with MIT License | 4 votes |
|
export default function Header({ children, location }) {
const { colorMode, toggleColorMode } = useColorMode()
const { isOpen, onOpen, onClose } = useDisclosure()
const btnRef = React.useRef()
const navItem = ({ name, to, my, onClick }) => (
<Link to={to} onClick={onClick}>
<PseudoBox
fontSize=".875rem"
color="white"
fontWeight="500"
bg={location.pathname === to && "#304571"}
_hover={{ color: "gray.50", bg: location.pathname != to && "#1a294c" }}
px={2}
py={1}
mx={2}
borderRadius={3}
my={my}
>
{name}
</PseudoBox>
</Link>
)
return (
<Box
bg="gray.800"
boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
>
<Box px={{ md: "2rem" }}>
<Box
as="nav"
position="relative"
display="flex"
flexWrap="wrap"
justifyContent="space-between"
alignItems="center"
p=".75rem"
>
<Box flex={3}>
<Link to="/">
<Box display="flex" my={3} pr={2}>
<Box minWidth="46px" maxWidth="0px">
<Logo />
</Box>
<Box>
<Text
color="gray.200"
pl=".6rem"
fontWeight={800}
fontSize="sm"
lineHeight=".8rem"
letterSpacing="widest"
>
OPENSOURCE
</Text>
<Text
color="white"
pl={2}
fontWeight={500}
fontSize="4xl"
lineHeight="2.3rem"
letterSpacing=".5px"
>
Builders
</Text>
</Box>
</Box>
</Link>
</Box>
<>
<Popover>
{({ isOpen, onClose }) => (
<>
<PopoverTrigger>
<Button
ml="auto"
px={1}
bg="transparent"
color="#9fa6b2"
display={{
base: "flex",
sm: "none",
}}
_hover={{ bg: "#374151", color: "#fff" }}
ref={btnRef}
onClick={onOpen}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 6H20M4 12H20M4 18H20"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent zIndex={4} width="200px" py={2} bg="gray.800">
<PopoverBody>
{process.env.NODE_ENV === "development" &&
navItem({
to: "/edit",
name: "Edit",
my: 2,
onClick: onClose,
})}
{navItem({
to: "/",
name: "Alternatives",
my: 2,
onClick: onClose,
})}
{navItem({
to: "/requests",
name: "Requests",
my: 2,
onClick: onClose,
})}
{navItem({
to: "/about",
name: "About",
my: 2,
onClick: onClose,
})}
<PseudoBox
display="flex"
alignItems="center"
borderRadius={4}
mx={2}
px={2}
py={1}
as="a"
href="https://github.com/junaid33/opensource.builders"
target="_blank"
_hover={{ color: "gray.50", bg: "#1a294c" }}
>
<svg
stroke="#ffffff"
fill="#ffffff"
strokeWidth="0"
version="1.1"
viewBox="0 0 32 32"
height="1.2em"
width="1.2em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z"></path>
</svg>
</PseudoBox>
</PopoverBody>
</PopoverContent>
</>
)}
</Popover>
</>
<Box display={{ base: "none", sm: "flex" }}>
{process.env.NODE_ENV === "development" &&
navItem({ to: "/edit", name: "Edit" })}
{navItem({ to: "/", name: "Alternatives" })}
{navItem({ to: "/requests", name: "Requests" })}
{navItem({ to: "/about", name: "About" })}
<PseudoBox
display="flex"
alignItems="center"
borderRadius={4}
px={2}
as="a"
href="https://github.com/junaid33/opensource.builders"
target="_blank"
_hover={{ color: "gray.50", bg: "#1a294c" }}
>
<svg
stroke="#ffffff"
fill="#ffffff"
strokeWidth="0"
version="1.1"
viewBox="0 0 32 32"
height="1.2em"
width="1.2em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z"></path>
</svg>
</PseudoBox>
</Box>
</Box>
</Box>
</Box>
)
}
Example #14
| Source File: SendModel.js From CubeMail with MIT License | 4 votes |
|
SendModel = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const emailTo = form.elements["emailTo"].value;
const subject = form.elements["subject"].value;
const message = form.elements["message"].value;
// Send Simple Mail && Display Toast
sendMessage(
{
To: emailTo,
Subject: subject,
},
message,
displayToast
);
onClose();
};
const sendMessage = (headers_obj, message, callback) => {
let email = "";
for (var header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
const base64EncodedEmail = Base64.encodeURI(email);
const request = window.gapi.client.gmail.users.messages.send({
userId: "me",
resource: {
raw: base64EncodedEmail,
},
});
request.execute(callback);
};
const displayToast = ({ result }) => {
if (result.labelIds.indexOf("SENT") !== -1) {
toast({
title: "Message Sent.",
description: "We've Sent your email.",
status: "success",
duration: 9000,
isClosable: true,
});
} else {
toast({
title: "An error occurred.",
description: "Unable to sent your email.",
status: "error",
duration: 9000,
isClosable: true,
});
}
};
return (
<Fragment>
<Button
w='100%'
h='48px'
leftIcon={BsPlusCircle}
borderRadius='20px'
variant='solid'
variantColor='blue'
onClick={onOpen}
>
New Message
</Button>
<Modal
isOpen={isOpen}
size='xl'
onClose={onClose}
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>New Message</ModalHeader>
<ModalCloseButton />
<form id='form' onSubmit={handleSubmit}>
<ModalBody>
<FormControl isRequired>
<Input
type='email'
id='emailTo'
placeholder='To'
aria-describedby='email-helper-text'
/>
</FormControl>
<FormControl isRequired>
<Input
type='text'
id='subject'
placeholder='Subject'
aria-describedby='subject-email-helper-text'
/>
</FormControl>
<FormControl isRequired>
<Textarea
id='message'
minH='280px'
size='xl'
resize='vertical'
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button type='submit' variantColor='green'>
Send
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
</Fragment>
);
}
Example #15
| Source File: MailboxList.js From CubeMail with MIT License | 4 votes |
|
MailboxList = () => {
const { getMessages, setCurrentLabel } = useContext(EmailContext);
const [active, setActive] = useState("INBOX");
const handleClick = (e) => {
const categoryId = e.target.id;
setActive(categoryId);
setCurrentLabel(categoryId);
// Get Messages using clicked category
getMessages(categoryId);
};
return (
<Box
w='16%'
h='100%'
bg='white'
border='1px'
borderColor='gray.200'
borderTopLeftRadius='md'
borderBottomLeftRadius='md'
>
<List>
{/* Send Model */}
<ListItem p='0.5rem 1rem 1rem'>
<SendModel />
</ListItem>
{/* Labels Buttons */}
<ListItem>
<Button
id='INBOX'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdInbox}
variantColor='blue'
variant={active === "INBOX" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Inbox
</Button>
</ListItem>
<ListItem>
<Button
id='STARRED'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdStar}
variantColor='blue'
variant={active === "STARRED" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Starred
</Button>
</ListItem>
<ListItem>
<Button
id='IMPORTANT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdLabel}
variantColor='blue'
variant={active === "IMPORTANT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Important
</Button>
</ListItem>
<ListItem>
<Button
id='SENT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={FiSend}
variantColor='blue'
variant={active === "SENT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Sent
</Button>
</ListItem>
<ListItem>
<Button
id='DRAFT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={FiFile}
variantColor='blue'
variant={active === "DRAFT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Drafts
</Button>
</ListItem>
<ListItem>
<Button
id='TRASH'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon='delete'
variantColor='blue'
variant={active === "TRASH" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Trash
</Button>
</ListItem>
<ListItem>
<Button
id='CATEGORY_SOCIAL'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdPeople}
variantColor='blue'
variant={active === "CATEGORY_SOCIAL" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Social
</Button>
</ListItem>
<ListItem>
<Button
id='CATEGORY_PROMOTIONS'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdLoyalty}
variantColor='blue'
variant={active === "CATEGORY_PROMOTIONS" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Promotions
</Button>
</ListItem>
</List>
</Box>
);
}
Example #16
| Source File: ReplyModel.js From CubeMail with MIT License | 4 votes |
|
ReplyModel = ({ replayData }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const emailTo = form.elements["emailTo"].value;
const subject = form.elements["subject"].value;
const replayMsgId = form.elements["reply-message-id"].value;
const message = form.elements["message"].value;
// Send Replay
sendMessage(
{
To: emailTo,
Subject: subject,
"In-Reply-To": replayMsgId,
},
message,
displayToast
);
onClose();
};
const sendMessage = (headers_obj, message, callback) => {
let email = "";
for (let header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
const base64EncodedEmail = Base64.encodeURI(email);
const request = window.gapi.client.gmail.users.messages.send({
userId: "me",
resource: {
raw: base64EncodedEmail,
},
});
request.execute(callback);
};
const displayToast = ({ result }) => {
if (result.labelIds.indexOf("SENT") !== -1) {
toast({
title: "Message Sent.",
status: "success",
duration: 3000,
isClosable: true,
});
} else {
toast({
title: "An error occurred.",
description: "Unable to sent your replay.",
status: "error",
duration: 3000,
isClosable: true,
});
}
};
return (
<Fragment>
<Button
rightIcon={MdReplay}
variantColor='blue'
variant='outline'
onClick={onOpen}
>
Replay
</Button>
<Modal
isOpen={isOpen}
size='xl'
onClose={onClose}
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Replay </ModalHeader>
<ModalCloseButton />
<form id='form' onSubmit={handleSubmit}>
<ModalBody>
<Input
type='hidden'
id='reply-message-id'
value={replayData.msgId}
readOnly
/>
<FormControl isRequired>
<Input
type='email'
id='emailTo'
placeholder='To'
aria-describedby='email-helper-text'
value={replayData.to}
readOnly
/>
</FormControl>
<FormControl isRequired>
<Input
type='text'
id='subject'
placeholder='Subject'
aria-describedby='subject-email-helper-text'
value={replayData.subject}
readOnly
/>
</FormControl>
<FormControl isRequired>
<Textarea
id='message'
minH='280px'
size='xl'
resize='vertical'
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button type='submit' variantColor='green'>
Send
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
</Fragment>
);
}
Example #17
| Source File: ForwardModel.js From CubeMail with MIT License | 4 votes |
|
ForwardModel = ({ forwardData, getMessageBody }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const forwardTo = form.elements["emailTo"].value;
handleForwardMsg(
forwardTo,
forwardData.payload.headers,
getMessageBody(forwardData.payload)
);
onClose();
};
const handleForwardMsg = (forwardTo, headers, body) => {
let email = "";
email += `From: ${getHeader(headers, "From")} \r\n`;
email += `Date: ${getHeader(headers, "Date")} \r\n`;
email += `Subject: ${getHeader(headers, "Subject")} \r\n`;
email += `To: ${forwardTo} \r\n`;
email += `Content-Type: text/html; charset=UTF-8 \r\n`;
email += `\r\n ${body}`;
sendMessage("me", email, displayToast);
};
const sendMessage = (userId, email, callback) => {
const base64EncodedEmail = Base64.encodeURI(email);
const request = window.gapi.client.gmail.users.messages.send({
userId: userId,
resource: {
raw: base64EncodedEmail,
},
});
request.execute(callback);
};
const displayToast = ({ result }) => {
if (result.labelIds.indexOf("SENT") !== -1) {
toast({
title: "Email forwarded Successfully.",
status: "success",
duration: 3000,
isClosable: true,
});
} else {
toast({
title: "An error occurred.",
description: "Unable to sent your mail.",
status: "error",
duration: 3000,
isClosable: true,
});
}
};
const getForwardHead = (headers) => {
let msg = "";
msg += "From: " + getHeader(headers, "From") + "\r\n";
msg += "Date: " + getHeader(headers, "Date") + "\r\n";
msg += "Subject: " + getHeader(headers, "Subject") + "\r\n";
msg += "To: " + getHeader(headers, "To") + "\r\n";
return msg;
};
return (
<Fragment>
<Button
rightIcon={MdArrowForward}
variantColor='blue'
variant='outline'
onClick={onOpen}
>
Forward
</Button>
<Modal
isOpen={isOpen}
size='xl'
onClose={onClose}
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Forward </ModalHeader>
<ModalCloseButton />
<form id='form' onSubmit={handleSubmit}>
<ModalBody>
<FormControl isRequired>
<Input
type='email'
id='emailTo'
placeholder='To'
aria-describedby='email-helper-text'
/>
</FormControl>
<FormControl isRequired>
<Input
type='text'
id='subject'
placeholder='Subject'
aria-describedby='subject-email-helper-text'
value={getHeader(forwardData.payload.headers, "Subject")}
readOnly
/>
</FormControl>
<FormControl isRequired>
<Textarea
id='message'
minH='280px'
size='xl'
resize='vertical'
value={
"------Forward Message------\r\n" +
getForwardHead(forwardData.payload.headers)
}
readOnly
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button type='submit' variantColor='green'>
Send
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
</Fragment>
);
}
Example #18
| Source File: Login.js From allay-fe with MIT License | 4 votes |
|
Login = ({ login, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = React.useState(false)
const handleClick = () => setShow(!show)
function validateEmail(value) {
let error
if (!value) {
error = 'email is required'
} else if (value.length < 5) {
error = 'email needed'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
const submitForm = (creds) => {
// action function here
login(creds).then(() => history.push('/dashboard'))
ReactGA.event({
category: 'User',
action: `Button Login`,
})
}
const gaSignup = () => {
ReactGA.event({
category: 'User',
action: `Link Don't have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100%" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Stack
wrap="wrap"
w="60%"
ml="6.5%"
mb="15%"
justify="center"
align="center"
>
<Text
as="h1"
w="100%"
fontFamily="Poppins"
fontSize="80px"
fontWeight="bold"
>
Allay
</Text>
<Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
We're stronger together.
</Text>
</Stack>
<Flex
w="40%"
mb="10%"
mr="8%"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="473px"
h="480px"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
fontSize="36px"
fontFamily="Poppins"
justify="center"
mx="1"
my="2%"
>
Welcome back!
</Flex>
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
mb="30px"
type="text"
name="email"
label="email"
placeholder="lambda1"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={errors.password}>
<Flex flexDir="column">
<FormLabel
color="#131C4D"
fontSize="18px"
fontFamily="Muli"
>
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
mb="30px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</Flex>
</FormControl>
<Flex width="100%" justify="center">
<Button
width="85%"
mb="30px"
border="none"
rounded="50px"
h="58px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="loginSubmit"
>
Login
</Button>
</Flex>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Don't have an account?{' '}
<Link
to="/signup"
onClick={gaSignup}
data-cy="signupLink"
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign up here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
Example #19
| Source File: EditUserProfile.js From allay-fe with MIT License | 4 votes |
|
EditUserProfile = ({ match, history, userData, updateUser }) => {
const id = match.params.id
const userId = window.localStorage.getItem('userId')
// creating form state, setting default values
const { handleSubmit, errors, register, formState } = useForm({
defaultValues: {
firstName: userData.first_name,
lastName: userData.last_name,
gradMonth: userData.graduated ? userData.graduated.slice(5, 7) : null,
gradYear: userData.graduated ? userData.graduated.slice(0, 4) : null,
highest_ed: userData.highest_ed,
field_of_study: userData.field_of_study,
employed_company: userData.employed_company,
employed_title: userData.employed_title,
workMonth: userData.employed_start
? userData.employed_start.slice(5, 7)
: null,
workYear: userData.employed_start
? userData.employed_start.slice(0, 4)
: null,
resume: userData.resume ? userData.resume : null,
portfolio_URL: userData.portfolio ? userData.portfolio : null,
linked_in: userData.linked_in ? userData.linked_in : null,
slack: userData.slack ? userData.slack : null,
github: userData.github ? userData.github : null,
dribble: userData.dribble ? userData.dribble : null,
profile_image: userData.profile_image ? userData.profile_image : null,
},
})
//location state/helpers
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateHelper = (value) => {
setLocation(value)
}
// cloudinary stuff
const [newProfile_image, setNewProfile_Image] = useState('')
const [newProfile_resume, setNewProfile_resume] = useState('')
// graduated state/helpers
const [graduated, setGraduated] = useState(userData.graduated ? true : false)
const isGraduated = () => {
setGraduated(true)
}
const notGraduated = () => {
setGraduated(false)
}
// employed state/helpers
const [employed, setEmployed] = useState(
userData.employed_start ? true : false
)
const isEmployed = () => {
setEmployed(true)
}
const notEmployed = () => {
setEmployed(false)
}
//radio button state
const [priorExp, setPriorExp] = useState(
userData.prior_experience ? userData.prior_experience : false
)
const [tlsl, setTlsl] = useState(
userData.tlsl_experience ? userData.tlsl_experience : false
)
const [remote, setRemote] = useState(
userData.employed_remote ? userData.employed_remote : false
)
//location helper
useEffect(() => {
setNewLocation({ ...location, myState: location.myState })
// removes numbers, commas, and whitespaces from city
if (location.myCity) {
if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
const tempCity = location.myCity
setNewLocation({
...location,
myCity: tempCity.replace(/^[\s,\d]+/, ''),
})
}
}
}, [location])
///info for slack ID
const info = (
<Box>
<Image
objectFit="fit"
width="300px"
height="300px"
src={require('../../../icons/slack.gif')}
alt="slack info"
/>
</Box>
)
//validation
function validateFirstName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'First Name is required'
} else if (value.length < 2) {
error = 'First Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'First Name can only contain letters'
}
return error || true
}
function validateLastName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'Last Name is required'
} else if (value.length < 2) {
error = 'Last Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'Last Name can only contain letters'
}
return error || true
}
function validateFieldOfStudy(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (nameRegex.test(value)) {
error = 'Field of study can only contain letters'
}
return error || true
}
//end validation
//add image to cloudinary
const updateImage = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setNewProfile_Image(...newProfile_image, file.secure_url)
}
//upload resume to cloudinary
const updateResume = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setNewProfile_resume(...newProfile_resume, file.secure_url)
}
// FORM SUBMISSION
const submitForm = (creds) => {
// correcting grad date format
let graduated = null
if (creds.gradMonth && creds.gradYear) {
graduated = `${creds.gradYear}-${creds.gradMonth}-01`
}
// correcting employed date format
let employed_start = null
if (creds.workMonth && creds.workYear) {
employed_start = `${creds.workYear}-${creds.workMonth}-01`
}
// formatting the signup state to match the back end columns
updateUser(id, {
first_name: creds.firstName,
last_name: creds.lastName,
location: newLocation
? `${newLocation.myCity || userData.location} ${newLocation.myState}`
: creds.location,
graduated: graduated,
highest_ed: creds.highest_ed || null,
field_of_study: creds.field_of_study || null,
prior_experience: creds.prior_experience
? JSON.parse(creds.prior_experience)
: false,
tlsl_experience: creds.tlsl_experience
? JSON.parse(creds.tlsl_experience)
: false,
employed_company: creds.employed_company || null,
employed_title: creds.employed_title || null,
employed_remote: creds.employed_remote
? JSON.parse(creds.employed_remote)
: false,
employed_start: employed_start,
resume: newProfile_resume || userData.resume,
linked_in: creds.linked_in || null,
slack: creds.slack || null,
github: creds.github || null,
dribble: creds.dribble || null,
profile_image: newProfile_image || userData.profile_image,
portfolio: creds.portfolio_URL || null,
}).then(() => history.push(`/profile/${id}`))
ReactGA.event({
category: 'User',
action: `Button Update Profile`,
})
}
const returnToProfile = (e) => {
e.preventDefault()
history.push(`/profile/${id}`)
}
//see profilePage component for details
const lazySolution =
userData.location != 'undefined undefined ' &&
userData.location != 'undefined undefined'
? userData.location
: 'Enter your location'
return (
<>
{/* //Top Section */}
<Flex
maxW="1440px"
w="100%"
px="40px"
py="28px"
m="0 auto"
justify="space-between"
align="center"
borderBottom="1px solid #EAF0FE"
>
<Flex>
<Link
style={{
textDecoration: 'none',
color: '#344CD0',
fontFamily: 'Poppins',
fontWeight: '600',
fontSize: '32px',
}}
to="/dashboard"
>
<h1> Allay </h1>
</Link>
</Flex>
{Number(userId) === Number(userData.id) ? (
<Flex>
{userData.profile_image === 'h' ? (
<Image
size="58px"
style={{ opacity: '0.6' }}
src={require('../../../icons/user.svg')}
/>
) : (
<Image
size="58px"
style={{ opacity: '0.6', borderRadius: '50%' }}
src={userData.profile_image}
/>
)}
</Flex>
) : null}
</Flex>
<Flex
w="833px"
mx="auto"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="833px"
p="6"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex w="653px" justify="space-between" my="68px" mx="auto">
<Text
as="h2"
fontSize="24px"
fontWeight="600"
fontFamily="Poppins"
>
Edit Profile
</Text>
<Flex w="150px" justify="space-between">
<Text
as="h3"
fontFamily="Muli"
fontSize="22px"
fontWeight="normal"
color="#9194A8"
style={{ cursor: 'pointer' }}
onClick={returnToProfile}
>
Cancel
</Text>
<Text
as="h3"
fontFamily="Muli"
fontSize="22px"
fontWeight="bold"
color="#344CD0"
style={{ cursor: 'pointer' }}
onClick={handleSubmit(submitForm)}
>
Save
</Text>
</Flex>
</Flex>
{/* CLOUDINARY IMAGE UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="55px"
justify="space-evenly"
alignItems="center"
>
{!newProfile_image ? (
<Avatar
size="2xl"
name={userData.first_name}
style={{ borderRadius: '50%' }}
src={userData.profile_image}
/>
) : (
<Avatar
size="2xl"
style={{ borderRadius: '50%' }}
src={newProfile_image}
/>
)}
<Flex alignItems="center">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={updateImage}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
{!newProfile_image ? (
<label htmlFor="files" className="btn">
Update profile image
</label>
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
className="far fa-check-circle"
></i>
)}
</Flex>
</Flex>
{/* FIRST NAME, LAST NAME */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
First Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="firstName"
label="firstName"
placeholder="John"
autoCapitalize="none"
ref={register({ validate: validateFirstName })}
/>
<FormErrorMessage>
{errors.firstName && errors.firstName.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Last Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="lastName"
label="lastName"
placeholder="Doe"
autoCapitalize="none"
ref={register({ validate: validateLastName })}
/>
<FormErrorMessage>
{errors.lastName && errors.lastName.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* LOCATION OF USER */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Location (City, State)
</FormLabel>
<CustomAutocomplete
stateHelper={stateHelper}
w="653px"
h="58px"
mb="30px"
rounded="2px"
variant="outline"
bgColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#17171B"
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
id="location"
name="location"
label="location"
placeholder={lazySolution}
ref={register}
/>
</FormControl>
</Flex>
{/* GRADUATED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={graduated ? '20px' : '80px'}
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Have you graduated from Lambda yet?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="graduated"
id="graduated-1"
value={true}
isChecked={graduated === true}
onClick={isGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="graduated"
id="graduated-2"
value={false}
isChecked={graduated === false}
onClick={notGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* GRADUATED MONTH AND YEAR */}
{graduated ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
When did you graduate?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradMonth"
label="gradMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradYear"
label="gradYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Background
</Text>
</Flex>
{/* HIGHEST LEVEL OF EDUCATION */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Highest level of education
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="highest_ed"
label="highest_ed"
ref={register}
>
<option fontFamily="Muli" value="">
Select your education level
</option>
<option fontFamily="Muli" value="High school diploma">
High school diploma
</option>
<option fontFamily="Muli" value="Associate's degree">
Associate's degree
</option>
<option fontFamily="Muli" value="Bachelor's degree">
Bachelor's degree
</option>
<option fontFamily="Muli" value="Master's degree">
Master's degree
</option>
<option fontFamily="Muli" value="PhD">
PhD
</option>
</Select>
</FormControl>
{/* FIELD OF STUDY */}
<FormControl isInvalid={errors.fieldOfStudy}>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Field of study
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="field_of_study"
label="field_of_study"
placeholder="Enter your field of study"
autoCapitalize="none"
ref={register({ validate: validateFieldOfStudy })}
/>
<FormErrorMessage>
{errors.fieldOfStudy && errors.fieldOfStudy.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PRIOR EXPERIENCE */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="30px"
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Prior to Lambda did you have any experience in your track?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="prior_experience"
id="priorExp-1"
ref={register}
value={true}
isChecked={priorExp === true}
onChange={() => setPriorExp(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="prior_experience"
id="priorExp-2"
ref={register}
value={false}
isChecked={priorExp === false}
onChange={() => setPriorExp(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* DID YOU TL/SL */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="100px"
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Have you been a TL/SL while at Lambda?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="tlsl_experience"
id="TLSL-1"
value={true}
ref={register}
isChecked={tlsl === true}
onChange={() => setTlsl(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="tlsl_experience"
id="TLSL-2"
value={false}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* RESUME UPLOAD */}
{/* /// */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
justify="space-between"
align="center"
>
<Text
fontSize="18px"
color="#131C4D"
align="center"
fontFamily="Muli"
>
Resume
</Text>
<Flex width="270px" justify="flex-end">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={updateResume}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label htmlFor="files" className="btn">
{!newProfile_resume ? (
'Upload resume'
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
className="far fa-check-circle"
></i>
)}
</label>
</Flex>
</Flex>
<Flex w="653px" mx="auto" justify="flex-start">
<FormHelperText w="653px" mb="30px" color="#9194A8">
Must be a .pdf file
</FormHelperText>
</Flex>
{/* //// */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Employment
</Text>
</Flex>
{/* EMPLOYED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={employed ? '30px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you currently employed in your field of study?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed"
id="employed-1"
value={true}
isChecked={employed === true}
onClick={isEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed"
id="employed-2"
value={false}
isChecked={employed === false}
onClick={notEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* EMPLOYED COMPANY NAME AND JOB TITLE */}
{employed ? (
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Company name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="employed_company"
label="employed_company"
placeholder="Enter the company name"
autoCapitalize="none"
ref={register}
/>
</FormControl>
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Job title
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="employed_title"
label="employed_title"
placeholder="Enter your job title"
autoCapitalize="none"
ref={register}
/>
</FormControl>
</Flex>
) : null}
{/* REMOTE WORK CHECK */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="30px"
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you working remotely?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed_remote"
id="employed_remote-1"
value={true}
ref={register}
isChecked={remote === true}
onChange={() => setRemote(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed_remote"
id="employed_remote-2"
value={false}
ref={register}
isChecked={remote === false}
onChange={() => setRemote(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
) : null}
{/* EMPLOYMENT START DATE */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you start?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workMonth"
label="workMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workYear"
label="workYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Online Presence
</Text>
</Flex>
{/* PORTFOLIO URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Portfolio URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="portfolio_URL"
label="portfolio_URL"
placeholder="Enter your portfolio URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* LINKEDIN URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
LinkedIn URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="linked_in"
label="linked_in"
placeholder="Enter your LinkedIn URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* SLACK USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Slack ID
<Tooltip hasArrow label={info} placement="top">
<i
style={{ paddingLeft: '10px' }}
className="fas fa-question"
></i>
</Tooltip>
</Text>
<SignupLoginInput
w="318px"
type="text"
name="slack"
label="slack"
placeholder="Enter your Slack ID"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* GITHUB USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Github URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="github"
label="github"
placeholder="Enter your Github URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* DRIBBBLE URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Dribbble URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="dribble"
label="dribble"
placeholder="Enter your Dribbble URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
<Flex
w="100%"
style={{ alignItems: 'center' }}
justify="center"
direction="column"
>
<Button
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="registerSubmit"
>
Save
</Button>
<Button
mb="30px"
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="#9194A8"
backgroundColor="#FDFDFF"
_hover={{ cursor: 'pointer' }}
onClick={returnToProfile}
data-cy="cancelUpdate"
>
Cancel
</Button>
</Flex>
</Flex>
</form>
</Flex>
</>
)
}
Example #20
| 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>
</>
)
}
Example #21
| Source File: NavBar.js From allay-fe with MIT License | 4 votes |
|
function NavBar({
history,
isLoading,
isBlocked,
setSearchResults,
trackFilters,
setTrackFilters,
typeFilters,
setTypeFilters,
getUser,
userData,
}) {
const userId = window.localStorage.getItem('userId')
// use to navigate to review form
const navToReviewForm = () => {
history.push('/dashboard/add-review')
ReactGA.event({
category: 'Review',
action: `Add new review`,
})
}
// image helper
const [imageTimeout, setImageTimeout] = useState(true)
useEffect(() => {
setTimeout(function () {
setImageTimeout(false)
}, 1500)
}, [])
const logout = () => {
localStorage.clear('token')
localStorage.clear('userId')
history.push('/')
}
const handleInputChange = (event) => {
event.preventDefault()
setSearchResults(event.target.value.toLowerCase())
}
// We could get this fronm the DB if we had endpoints
const types = [
{ id: 1, criteria: 'type', name: 'Interview' },
{ id: 2, criteria: 'type', name: 'Company' },
]
const tracks = [
{ id: 1, criteria: 'track', name: 'WEB' },
{ id: 2, criteria: 'track', name: 'UX' },
{ id: 3, criteria: 'track', name: 'DS' },
{ id: 4, criteria: 'track', name: 'iOS' },
{ id: 5, criteria: 'track', name: 'Android' },
]
//track badge colors and background 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
}
}
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
}
}
///
//// handle type filter and state for the badge / show
const [type, setType] = useState([])
const handleType = (name) => {
if (typeFilters.includes(name)) {
setTypeFilters(typeFilters.filter((item) => item !== name))
setType(type.filter((x) => x !== name))
} else {
setTypeFilters(typeFilters.filter((item) => item !== name))
setTypeFilters([...typeFilters, name])
setType([...type, name])
}
}
const typeBadge = (name) => {
return name.map((typeName, index) => (
<Badge
key={`ReviewBadge-${index}`}
backgroundColor="#E2E2E2"
color="#131C4D"
fontFamily="Muli"
fontWeight="normal"
p="5px 15px"
m="5px"
style={{ borderRadius: '50px' }}
variantColor="green"
>
{typeName}
</Badge>
))
}
//// handle track filter and state for the badge color / show
const [track, setTrack] = useState([])
const handleTrack = (name) => {
if (trackFilters.includes(name)) {
setTrackFilters(trackFilters.filter((item) => item !== name))
setTrack(track.filter((x) => x !== name))
} else {
setTrackFilters(trackFilters.filter((item) => item !== name))
setTrackFilters([...trackFilters, name])
setTrack([...track, name])
}
}
const trackBadge = (name) => {
return name
.map((typeName, index) => {
if (index < 2) {
return (
<Badge
key={`TrackBadge-${index}`}
p="5px 15px"
m="2px"
fontFamily="Muli"
fontWeight="normal"
backgroundColor={trackColorPicker(typeName)}
color={trackFontColor(typeName)}
style={{ borderRadius: '50px' }}
variantColor="green"
>
{typeName}
</Badge>
)
} else {
return (
<Badge
key={`TrackBadge-${index}`}
backgroundColor="#E2E2E2"
color="#131C4D"
fontFamily="Muli"
fontWeight="normal"
p="5px 15px"
m="2px"
style={{ borderRadius: '50px' }}
variantColor="green"
>
. . .
</Badge>
)
}
})
.filter((item, index) => index < 3)
}
useEffect(() => {
getUser(userId)
}, [getUser, userId])
return (
<Flex
maxW="1440px"
w="100%"
background="#FFFFFF"
top="0"
position="fixed"
zIndex="999"
direction="column"
>
<Flex
align="center"
justify="space-between"
py="28px"
mb="4%"
h="100px"
borderBottom="1px solid #EAF0FE"
>
<Flex color="#344CD0" align="center" pl="40px">
<h1 fontFamily="Poppins" fontWeight="600" fontSize="32px">
Allay
</h1>
</Flex>
{/* Search bar*/}
<InputGroup w="40%">
<InputRightElement>
<Icon name="search-2" color="#344CD0" />
</InputRightElement>
<Input
width="100%"
placeholder="Search for company or position..."
name="searchbar"
type="text"
rounded="20px"
borderColor="rgba(149, 149, 149, 0.2)"
borderWidth="1px"
onChange={handleInputChange}
/>
</InputGroup>
{/* Profile Icon and user menu*/}
<Flex pr="40px">
<Menu position="absolute" height="226px">
{imageTimeout ? (
<Spinner />
) : (
<MenuButton
data-cy="profileButton"
as={Image}
size="58px"
cursor="pointer"
style={{
borderRadius: '50%',
}}
src={userData.profile_image}
fallbackSrc={require('../../icons/user.svg')}
/>
)}
<MenuList>
<MenuItem
border="none"
backgroundColor="#FFF"
onClick={() => history.push(`/profile/${userId}`)}
data-cy="profileLink"
>
Profile
</MenuItem>
<MenuItem
border="none"
backgroundColor="#FFF"
onClick={() => history.push(`/profile/${userId}/edit`)}
data-cy="editProfileMenuOption"
>
Account settings
</MenuItem>
<MenuItem
border="none"
backgroundColor="#FFF"
onClick={logout}
data-cy="signOut"
>
Log out
</MenuItem>
</MenuList>
</Menu>
</Flex>
</Flex>
<Box>
{/* Filtered Search Buttons */}
<Flex
align="center"
width="100%"
margin="0 auto"
justify="space-between"
px="40px"
>
<Heading
as="h1"
fontSize="36px"
fontFamily="Poppins"
fontWeight="600"
color="#131C4D"
>
Reviews
</Heading>
<Flex>
<Menu margin="3%" closeOnSelect={false}>
<MenuButton
outline="none"
w="309px"
h="65px"
bg="#FFFFFF"
mr="20px"
border="2px solid #EAF0FE"
rounded="32px"
fontFamily="Muli"
fontSize="20px"
fontWeight="bold"
>
<Flex
justify="space-between"
align="center"
pl={track.length > 0 ? '10px' : '30px'}
pr="18px"
>
<Flex w="100%">
{type.length > 0
? typeBadge(type)
: 'Filter by review type'}
</Flex>
<Icon name="triangle-down" color="#344CD0" fontSize="16px" />
</Flex>
</MenuButton>
<MenuList minWidth="240px">
{types.map((type) => (
<MenuOptionGroup
key={type.name}
defaultValue={typeFilters}
type="checkbox"
>
<MenuItemOption
border="none"
backgroundColor="#FFF"
value={type.name}
onClick={() => handleType(type.name)}
>
{type.name}
</MenuItemOption>
</MenuOptionGroup>
))}
</MenuList>
</Menu>
<Menu closeOnSelect={false}>
<MenuButton
outline="none"
w="260px"
h="65px"
bg="#FFFFFF"
border="2px solid #EAF0FE"
rounded="32px"
fontFamily="Muli"
fontSize="20px"
fontWeight="bold"
>
<Flex
justify="space-between"
align="center"
pl={track.length > 0 ? '10px' : '30px'}
pr="18px"
>
<Flex w="100%">
{track.length > 0 ? trackBadge(track) : 'Filter by field'}
</Flex>
<Icon name="triangle-down" color="#344CD0" fontSize="16px" />
</Flex>
</MenuButton>
<MenuList minWidth="240px">
{tracks.map((track) => (
<MenuOptionGroup
key={track.name}
defaultValue={trackFilters}
type="checkbox"
>
<MenuItemOption
border="none"
backgroundColor="#FFF"
value={track.name}
onClick={() => handleTrack(track.name)}
>
{track.name}
</MenuItemOption>
</MenuOptionGroup>
))}
</MenuList>
</Menu>
</Flex>
{isBlocked ? (
<Blocked />
) : (
<Button
background="#344CD0"
color="#FDFDFF"
_hover={{ bg: '#4254BA', cursor: 'pointer' }}
fontFamily="Muli"
fontWeight="bold"
fontSize="20px"
rounded="35px"
p="19px 20px"
w="180px"
h="63px"
border="none"
size="lg"
isLoading={isLoading}
onClick={navToReviewForm}
data-cy="addReviewButton"
>
Write a review
</Button>
)}
</Flex>
</Box>
</Flex>
)
}
Example #22
| Source File: InterviewForm.js From allay-fe with MIT License | 4 votes |
|
InterviewForm = ({
loadingCompanies,
getCompanies,
companies,
postReview,
history,
}) => {
//initialize animations
AOS.init()
const { register, handleSubmit, formState } = useForm()
// state "state"
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateSelectorHelper = (value) => {
setLocation(value)
}
// thinking state
const [thinking, setThinking] = useState(false)
const dots = () => {
setThinking(true)
}
// search state
const [searchTerm, setSearchTerm] = useState('')
const [searchResults, setSearchResults] = useState([])
// no company state
const [noCompany, setNoCompany] = useState(false)
// star rating
const [starState, setStarState] = useState(0)
// custom radio button state offer status
const [offer, setOffer] = useState(1)
//progress bar
const [progress, setProgress] = useState({
prec: 99,
time: 8,
prog: 2,
})
// company search function
useEffect(() => {
if (searchTerm.length >= 3) {
const results = companies.filter((company) =>
company.company_name.toLowerCase().startsWith(searchTerm.toLowerCase())
)
setSearchResults(results)
if (results.length === 0) {
setNoCompany(true)
} else {
setNoCompany(false)
}
}
}, [searchTerm, companies])
// state confirmation search function
useEffect(() => {
if (location.myState) {
const stateId = states.filter((i) =>
i.state_name.toLowerCase().startsWith(location.myState.toLowerCase())
)
setNewLocation({ ...location, myState: stateId[0].id })
}
}, [location])
// state for visibility
const [Tag2, setTag2] = useState(false)
const [Tag3, setTag3] = useState(false)
const [Tag4, setTag4] = useState(false)
const [Tag5, setTag5] = useState(false)
const [Tag6, setTag6] = useState(false)
const [Tag7, setTag7] = useState(false)
const [Tag8, setTag8] = useState(false)
const [Tag9, setTag9] = useState(false)
// brings to top on render
useEffect(() => {
getCompanies()
setProgress({
prec: 95,
time: 7,
prog: 5,
})
const element = document.getElementById('Tag1')
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
}, [getCompanies])
// timers for moves
let timer = null
let dotTimer = null
// 2nd tag
const time1 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo2, 1000)
}
const routeTo2 = () => {
setTag2(true)
setProgress({
prec: 80,
time: 6,
prog: 20,
})
const element = document.getElementById('Tag2')
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
setThinking(false)
}
// 3rd tag
const time2 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo3, 1000)
}
const routeTo3 = () => {
setTag3(true)
setProgress({
prec: 70,
time: 5,
prog: 30,
})
const element = document.getElementById('Tag3')
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
setThinking(false)
}
//4th tag
const time3 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo4, 1000)
}
const routeTo4 = () => {
setTag4(true)
setProgress({
prec: 60,
time: 4,
prog: 40,
})
const element = document.getElementById('Tag4')
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
setThinking(false)
}
// 5th tag
const time4 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo5, 1000)
}
const routeTo5 = () => {
setTag5(true)
setProgress({
prec: 50,
time: 3,
prog: 50,
})
const element = document.getElementById('Tag5')
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
setThinking(false)
}
// 6th tag
const time5 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo6, 1000)
}
const routeTo6 = () => {
setTag6(true)
setProgress({
prec: 40,
time: 2,
prog: 60,
})
const element = document.getElementById('Tag6')
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
setThinking(false)
}
// 7th tag
const time6 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo7, 1000)
}
const routeTo7 = () => {
setTag7(true)
setProgress({
prec: 30,
time: 1,
prog: 70,
})
const element = document.getElementById('Tag7')
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
setThinking(false)
}
// 8th tag
const time7 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo8, 1000)
}
const routeTo8 = () => {
setTag8(true)
setProgress({
prec: 20,
time: 1,
prog: 85,
})
const element = document.getElementById('Tag8')
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
setThinking(false)
}
// 9th tag
const time8 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo9, 1000)
}
const routeTo9 = () => {
setTag9(true)
setProgress({
prec: 100,
time: 0,
prog: 100,
})
const element = document.getElementById('Tag9')
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
setThinking(false)
}
// custom select for offer accepted
const CustomRadio = React.forwardRef((props, ref) => {
const { isChecked, isDisabled, value, ...rest } = props
return (
<Button
ref={ref}
variantColor={isChecked ? 'blue' : 'gray'}
aria-checked={isChecked}
role="radio"
isDisabled={isDisabled}
{...rest}
/>
)
})
//push to dashboard and send info to DS for review
const sendInfoToDS = (data) => {
var dataForDS = JSON.stringify(data)
axiosToDS()
.post('/check_review', dataForDS)
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
history.push('/dashboard')
}
//submit handler
const submitForm = (data) => {
postReview(localStorage.getItem('userId'), {
...data,
review_type_id: 2,
overall_rating: starState,
offer_status_id: offer,
city: newLocation.myCity,
state_id: newLocation.myState,
}).then(() => sendInfoToDS(data))
ReactGA.event({
category: 'Review',
action: `Submit review`,
})
}
return (
// main container
<div>
<Flex justify="center">
<ProgressHeader progress={progress} />
</Flex>
<Flex w="100%" margin="0 auto" minH="100vh">
{thinking ? (
<>
<Flex
bottom="0"
position="fixed"
overflow="hidden"
zIndex="999"
pt="5%"
pl="15%"
>
<ThinkingDots />
</Flex>
</>
) : null}
{/* form container */}
<Flex
w="100%"
bg="#FFF"
flexDir="column"
px="2%"
pt="10%"
margin="0 auto"
>
{/*--------------- start of form --------------- */}
<form onSubmit={handleSubmit(submitForm)}>
<FormControl isRequired>
{/* first prompt */}
<Flex
id="Tag1"
align="center"
h="5%"
p="1%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Great! I will need some general details to get started.</p>
</Flex>
{/* company container */}
<Flex w="100%" justify="flex-end">
{/* company box */}
<Flex
w="459px"
h="379px"
px="6"
py="10"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag1"
>
<FormLabel>1. Company name</FormLabel>
{loadingCompanies ? (
<>
<Flex justify="center" w="100%">
<CustomSpinner />
</Flex>
</>
) : (
<>
<Input
h="56px"
variant="filled"
rounded="6px"
textTransform="capitalize"
type="text"
label="company_name"
name="company_name"
list="company_name"
ref={register}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<datalist id="company_name">
{searchResults.map((company) => (
<option value={company.company_name} key={company.id}>
{company.company_name}
</option>
))}
</datalist>
{noCompany ? (
<>
<Link mb="3" color="grey" href="/add-company">
Oops, you need to add that company!
</Link>
</>
) : (
<Flex mb="6" />
)}
</>
)}
<FormLabel>2. Job title</FormLabel>
<Input
h="56px"
mb="6"
rounded="6px"
type="text"
variant="filled"
label="job_title"
name="job_title"
autoCapitalize="none"
ref={register}
/>
<FormLabel>3. Place of interview</FormLabel>
<CustomAutoComplete
stateHelper={stateSelectorHelper}
id="Company Headquarters"
name="Company Headquarters"
label="Company Headquarters"
placeholder="e.g. Los Angeles, CA"
textTransform="capitalize"
h="56px"
mb="6"
/>
</Flex>
{/* avatar */}
<Flex
h="379px"
mt="5px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag1"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag1"
>
<Button
data-cy="interviewReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time1}
>
Next
</Button>
</Flex>
{/* second prompt */}
{Tag2 ? (
<>
<Flex
id="Tag2"
align="center"
h="5%"
w="416px"
py="1%"
px="1%"
mb="2%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Thank you for that information.</p>
</Flex>
<Flex
id="roundsTag"
justify="center"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
For the quality of this review I will ask some in depth
questions. Let’s begin with how many rounds of interviews
you had? Please include phone interviews and onsite
interviews.
</p>
</Flex>
{/* rounds container */}
<Flex w="100%" justify="flex-end">
{/* rounds box */}
<Flex
w="459px"
h="150px"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="roundsTag"
>
<FormLabel>Select rounds of interviews</FormLabel>
<Select
h="56px"
mb="6"
rounded="6px"
variant="filled"
label="interview_rounds"
name="interview_rounds"
placeholder="Select one"
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
<option value={6}>6</option>
<option value={7}>7</option>
<option value={8}>8</option>
<option value={9}>9</option>
<option value={10}>10</option>
</Select>
</Flex>
{/* avatar */}
<Flex
h="150px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="2000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="roundsTag"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="2000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="roundsTag"
>
<Button
data-cy="interviewReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time2}
>
Next
</Button>
</Flex>
</>
) : null}
{/* third prompt */}
{Tag3 ? (
<>
<Flex
id="Tag3"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
To better assist you I have included several different
interview types to choose from. Please select all types
that best describes the interview process you went
through.
</p>
</Flex>
<Flex w="100%" justify="flex-end">
{/* types of interview box */}
<Flex
w="459px"
h="220px"
px="6"
py="8"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag3"
>
<FormLabel>Select types of interviews</FormLabel>
<CheckboxGroup>
<Flex>
<Flex direction="column" pr="0.5%">
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="phone_interview"
ref={register}
>
Phone interview
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="resume_review"
ref={register}
>
Resume review
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="take_home_assignments"
ref={register}
>
Take home assignments
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="online_coding_assignments"
ref={register}
>
Online coding tests
</Checkbox>
</Flex>
<Flex direction="column">
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="portfolio_review"
ref={register}
>
Portfolio review
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="screen_share"
ref={register}
>
Screen share
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="open_source_contribution"
ref={register}
>
Open source contribution
</Checkbox>
<Checkbox
size="md"
border="rgba(72, 72, 72, 0.1)"
name="side_projects"
ref={register}
>
Side projects
</Checkbox>
</Flex>
</Flex>
</CheckboxGroup>
</Flex>
{/* avatar */}
<Flex
h="220px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="0"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
id="Tag3"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="0"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
id="Tag3"
>
<Button
data-cy="interviewReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time3}
>
Next
</Button>
</Flex>
</>
) : null}
{/* fourth prompt */}
{Tag4 ? (
<>
<Flex
id="Tag4"
align="center"
p="1%"
mb="2%"
h="5%"
w="416px"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Great!</p>
</Flex>
<Flex
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="1200"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Use this section to describe your interview experience
using the options selected above for reference.
</p>
</Flex>
<Flex w="100%" justify="flex-end">
{/* long hand interview box */}
<Flex
w="459px"
h="242px"
px="6"
py="8"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2600"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag4"
>
<FormLabel>Describe the interview process</FormLabel>
<Textarea
variant="filled"
h="144px"
rowsMax={6}
type="text"
name="comment"
placeholder="What questions came up? What did you discuss? What did you come away with from this interview? "
rounded="6px"
resize="none"
ref={register}
data-cy="interviewComment"
/>
</Flex>
{/* avatar */}
<Flex
h="242px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2600"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag4"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2600"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag4"
>
<Button
data-cy="interviewReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time4}
>
Next
</Button>
</Flex>
</>
) : null}
{/* 5th prompt */}
{Tag5 ? (
<>
<Flex
align="center"
h="5%"
p="1%"
w="416px"
mb="2%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Thanks! Your opinion is very valuable and helps Lambda
job-seekers be better prepared.
</p>
</Flex>
<Flex
id="Tag5"
align="center"
h="5%"
p="1%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Please provide a difficulty rating for your interview. How
easy or hard was the interview?
</p>
</Flex>
{/* diff container */}
<Flex w="100%" justify="flex-end">
{/* diff box */}
<Flex
w="459px"
h="150px"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="3000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag5"
>
<FormLabel>Rate the difficulty</FormLabel>
<Select
h="56px"
mb="6"
rounded="6px"
variant="filled"
label="difficulty_rating"
name="difficulty_rating"
placeholder="Select one"
ref={register}
>
<option value={5}>Very difficult</option>
<option value={4}>Difficult</option>
<option value={3}>Average</option>
<option value={2}>Easy</option>
<option value={1}>Very easy</option>
</Select>
</Flex>
{/* avatar */}
<Flex
h="150px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="3000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag5"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="8%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="2700"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag5"
>
<Button
data-cy="interviewReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time5}
>
Next
</Button>
</Flex>
</>
) : null}
{/* 6th prompt */}
{Tag6 ? (
<>
<Flex
id="Tag6"
justify="center"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Your review is almost complete. Tell me how your interview
process ended. Did you recieve an offer?
</p>
</Flex>
{/* offer container */}
<Flex w="100%" justify="flex-end">
{/* diff box */}
<Flex
w="459px"
h="176px"
mb="8%"
py="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Flex w="100%" justify="center">
<RadioButtonGroup
display="flex"
flexDir="column"
spacing={0}
label="offer_status_id"
name="offer_status_id"
defaultValue="1"
onChange={(val) => {
setOffer(val)
time6()
}}
>
<CustomRadio value="1" w="100%">
No offer
</CustomRadio>
<CustomRadio value="2" w="100%" data-cy="accepted">
Accepted
</CustomRadio>
<CustomRadio value="3" w="100%">
Declined
</CustomRadio>
</RadioButtonGroup>
</Flex>
</Flex>
{/* avatar */}
<Flex
h="176px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
</>
) : null}
{/* 7th prompt */}
{Tag7 ? (
<>
<Flex
id="Tag7"
align="center"
h="5%"
p="1%"
w="416px"
mb="2%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Thank you for that information.</p>
</Flex>
<Flex
id="salaryTag"
align="center"
h="5%"
p="1%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
If you were offered, asked, or negotiated a salary,
including it in your review increases the helpfulness of
this post.
</p>
</Flex>
{/* salary container */}
<Flex w="100%" justify="flex-end">
{/* salary box */}
<Flex
w="459px"
h="150px"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="3000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="salaryTag"
>
<FormLabel>Salary</FormLabel>
<InputGroup>
<InputLeftElement
mb="4"
py="28px"
color="gray.300"
fontSize="1.2em"
children="$"
/>
<Input
h="56px"
rounded="6px"
type="number"
variant="filled"
label="salary"
name="salary"
autoCapitalize="none"
ref={register}
/>
</InputGroup>
</Flex>
{/* avatar */}
<Flex
h="150px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="3000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="salaryTag"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="3000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="salaryTag"
>
<Button
data-cy="interviewReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time7}
>
Next
</Button>
</Flex>
</>
) : null}
{/* 8th prompt */}
{Tag8 ? (
<>
<Flex
id="Tag8"
align="center"
h="5%"
w="416px"
p="1%"
mb="2%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Thanks!</p>
</Flex>
<Flex
id="ratingTag"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="900"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Last question. How would you rate your overall interview
experience?
</p>
</Flex>
{/* overall container */}
<Flex w="100%" justify="flex-end">
{/* overall box */}
<Flex
w="459px"
h="136px"
mb="8%"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<FormLabel mb="4">Rate overall experience</FormLabel>
<Flex justify="center" w="100%">
<BeautyStars
name="interviewRating"
value={starState}
activeColor="#344CD0"
onChange={(value) => {
setStarState(value)
time8()
}}
/>
</Flex>
</Flex>
{/* avatar */}
<Flex
h="136px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
</>
) : null}
{Tag9 ? (
<>
<Flex
id="Tag9"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="#ratingTag"
>
<p>Thank you! Don’t forget to hit submit.</p>
</Flex>
{/* submit container */}
<Flex w="100%" justify="flex-end">
{/* submit box */}
<Flex
w="459px"
h="136px"
mb="8%"
p="6"
justify="center"
align="center"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Button
bg="#344CD0"
color="white"
type="submit"
isLoading={formState.isSubmitting}
rounded="6px"
border="none"
data-cy="interviewReviewSubmit"
>
Submit
</Button>
</Flex>
{/* avatar */}
<Flex
h="136px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
</>
) : null}
</FormControl>
</form>
</Flex>
</Flex>
</div>
)
}
Example #23
| 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 #24
| 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 #25
| Source File: CompanyReviewForm.js From allay-fe with MIT License | 4 votes |
|
ReviewForm2 = ({
history,
loadingCompanies,
companies,
getCompanies,
postReview,
}) => {
//initialize animations
AOS.init()
const { register, handleSubmit, formState } = useForm()
// thinking state
const [thinking, setThinking] = useState(false)
const dots = () => {
setThinking(true)
}
// search state
const [searchTerm, setSearchTerm] = useState('')
const [searchResults, setSearchResults] = useState([])
// no company state
const [noCompany, setNoCompany] = useState(false)
// location "state"
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateSelectorHelper = (value) => {
setLocation(value)
}
// star rating
const [starState, setStarState] = useState(0)
//progress bar
const [progress, setProgress] = useState({
prec: 99,
time: 8,
prog: 2,
})
// state for visibility
const [Tag2, setTag2] = useState(false)
const [Tag3, setTag3] = useState(false)
const [Tag4, setTag4] = useState(false)
const [Tag5, setTag5] = useState(false)
const [Tag6, setTag6] = useState(false)
// brings to top on render
useEffect(() => {
getCompanies()
setProgress({
prec: 95,
time: 7,
prog: 5,
})
const element = document.getElementById('Tag1')
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
}, [getCompanies])
// company search function
useEffect(() => {
if (searchTerm.length >= 3) {
const results = companies.filter((company) =>
company.company_name.toLowerCase().startsWith(searchTerm.toLowerCase())
)
setSearchResults(results)
if (results.length === 0) {
setNoCompany(true)
} else {
setNoCompany(false)
}
}
}, [searchTerm, companies])
// state confirmation search function
useEffect(() => {
if (location.myState) {
const stateId = states.filter((i) =>
i.state_name.toLowerCase().startsWith(location.myState.toLowerCase())
)
setNewLocation({ ...location, myState: stateId[0].id })
}
}, [location])
// timers for moves
let timer = null
let dotTimer = null
// 2nd tag
const time1 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo2, 1000)
}
const routeTo2 = () => {
setTag2(true)
setProgress({
prec: 70,
time: 6,
prog: 20,
})
const element = document.getElementById('Tag2')
element.scrollIntoView({ behavior: 'smooth', block: 'start' })
setThinking(false)
}
// 3rd tag
const time2 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo3, 1000)
}
const routeTo3 = () => {
setTag3(true)
setProgress({
prec: 65,
time: 4,
prog: 35,
})
const element = document.getElementById('Tag3')
element.scrollIntoView({ behavior: 'smooth', block: 'start' })
setThinking(false)
}
//4th tag
const time3 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo4, 1000)
}
const routeTo4 = () => {
setTag4(true)
setProgress({
prec: 45,
time: 2,
prog: 65,
})
const element = document.getElementById('Tag4')
element.scrollIntoView({ behavior: 'smooth', block: 'start' })
setThinking(false)
}
// 5th tag
const time4 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo5, 1000)
}
const routeTo5 = () => {
setTag5(true)
setProgress({
prec: 20,
time: 1,
prog: 80,
})
const element = document.getElementById('Tag5')
element.scrollIntoView({ behavior: 'smooth', block: 'center' })
setThinking(false)
}
// 6th tag
const time5 = () => {
clearTimeout(timer)
clearTimeout(dotTimer)
dotTimer = setTimeout(dots, 300)
timer = setTimeout(routeTo6, 1000)
}
const routeTo6 = () => {
setTag6(true)
setProgress({
prec: 100,
time: 0,
prog: 100,
})
const element = document.getElementById('Tag6')
element.scrollIntoView({ behavior: 'smooth', block: 'center' })
setThinking(false)
}
//push to dashboard and send info to DS for review
const sendInfoToDS = (data) => {
var dataForDS = JSON.stringify(data)
axiosToDS()
.post('/check_review', dataForDS)
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
history.push('/dashboard')
}
//submit handler
const submitForm = (data) => {
postReview(localStorage.getItem('userId'), {
...data,
review_type_id: 1,
overall_rating: starState,
city: newLocation.myCity,
state_id: newLocation.myState,
}).then(() => sendInfoToDS(data))
ReactGA.event({
category: 'Review',
action: `Submit review`,
})
}
return (
// main container
<>
<Flex justify="center">
<ProgressHeader progress={progress} />
</Flex>
<Flex w="100%" margin="0 auto" minH="100vh">
{thinking ? (
<>
<Flex
bottom="0"
position="fixed"
overflow="hidden"
zIndex="999"
pt="5%"
pl="15%"
>
<ThinkingDots />
</Flex>
</>
) : null}
{/* form container */}
<Flex
w="100%"
bg="#FFF"
flexDir="column"
px="2%"
pt="5%"
margin="0 auto"
>
{/*--------------- start of form --------------- */}
<form onSubmit={handleSubmit(submitForm)}>
<FormControl isRequired>
{/* first prompt */}
<Flex
id="Tag1"
align="center"
h="5%"
p="1%"
w="416px"
mb="8%"
mt="5%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Tell me some details so we can get started</p>
</Flex>
{/* form container */}
<Flex w="100%" justify="flex-end">
{/* company box */}
<Flex
w="459px"
h="700px"
px="6"
py="8"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag1"
>
<FormLabel>1. Company name</FormLabel>
{loadingCompanies ? (
<>
<Flex justify="center" w="100%">
<CustomSpinner />
</Flex>
</>
) : (
<>
{' '}
<Input
h="56px"
variant="filled"
rounded="6px"
textTransform="capitalize"
type="text"
label="company_name"
name="company_name"
list="company_name"
ref={register}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<datalist id="company_name">
{searchResults.map((company) => (
<option value={company.company_name} key={company.id}>
{company.company_name}
</option>
))}
</datalist>
{noCompany ? (
<>
<Link mb="3" color="grey" href="/add-company">
Oops, you need to add that company!
</Link>
</>
) : (
<Flex mb="6" />
)}
</>
)}
<FormLabel>2. Status at the company</FormLabel>
<Select
h="56px"
mb="6"
rounded="6px"
variant="filled"
label="work_status_id"
name="work_status_id"
placeholder="Select one"
ref={register}
>
<option value={1}>Current Employee</option>
<option value={2}>Former Employee</option>
<option value={3}>Full Time</option>
<option value={4}>Part Time</option>
<option value={5}>Intern</option>
</Select>
<FormLabel>3. Job Title</FormLabel>
<Input
h="56px"
mb="6"
variant="filled"
rounded="6px"
autoCapitalize="none"
type="text"
label="job_title"
name="job_title"
list="job_title"
ref={register}
/>
<FormLabel>3. Location of company</FormLabel>
<CustomAutoComplete
stateHelper={stateSelectorHelper}
id="Company Headquarters"
name="Company Headquarters"
label="Company Headquarters"
placeholder="e.g. Los Angeles, CA"
/>
<FormLabel mt="6">5. Length of position</FormLabel>
<Flex w="100%" justify="space-between">
<Input
type="number"
min="1970"
max="2030"
h="56px"
variant="filled"
rounded="6px"
w="45%"
mr="2%"
label="start_date"
name="start_date"
placeholder="YYYY"
ref={register}
/>
<Input
h="56px"
variant="filled"
rounded="6px"
autoCapitalize="none"
type="number"
min="1970"
max="2030"
w="45%"
label="end_date"
name="end_date"
placeholder="YYYY"
ref={register}
/>
</Flex>
</Flex>
{/* avatar */}
<Flex
h="700px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag1"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag1"
>
<Button
data-cy="companyReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time1}
>
Next
</Button>
</Flex>
{/* Second prompt */}
{Tag2 ? (
<>
<Flex
id="Tag2"
align="center"
p="1%"
mb="2%"
h="5%"
w="45%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Thank you for that information.</p>
</Flex>
<Flex
id="Tag2"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="800"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Please add some comments below. Helpful comments include
information about company culture, work environment,
career growth, salary, etc.
</p>
</Flex>
<Flex w="100%" justify="flex-end">
{/* long hand interview box */}
<Flex
w="459px"
h="350px"
px="6"
py="8"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2400"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag2"
>
<FormLabel>Comments</FormLabel>
<Textarea
variant="filled"
resize="none"
h="250px"
rowsMax={6}
type="text"
name="comment"
rounded="6px"
ref={register}
data-cy="companyComment"
/>
</Flex>
{/* avatar */}
<Flex
h="350px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2400"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag2"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2400"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag2"
>
<Button
data-cy="companyReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time2}
>
Next
</Button>
</Flex>
</>
) : null}
{/* 3rd prompt */}
{Tag3 ? (
<>
<Flex
id="Tag3"
align="center"
h="5%"
p="1%"
w="416px"
mb="2%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Thank you for sharing that.</p>
</Flex>
<Flex
align="center"
h="5%"
p="1%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
To better understand company culture, would you please add
a few more details?
</p>
</Flex>
{/* hours container */}
<Flex w="100%" justify="flex-end">
{/* hours box */}
<Flex
w="459px"
h="136px"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2800"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag3"
>
<FormLabel>Working hours</FormLabel>
<Select
h="56px"
rounded="6px"
variant="filled"
label="typical_hours"
name="typical_hours"
placeholder="Select one"
ref={register}
>
<option value={29}>Less than 30 hours</option>
<option value={30}>30 hours+</option>
<option value={40}>40 hours+</option>
<option value={50}>50 hours+</option>
<option value={60}>60 hours+</option>
</Select>
</Flex>
{/* avatar */}
<Flex
h="136px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="2800"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag3"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="2800"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag3"
>
<Button
data-cy="companyReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time3}
>
Next
</Button>
</Flex>
</>
) : null}
{/* 4th prompt */}
{Tag4 ? (
<>
<Flex
id="Tag4"
align="center"
h="5%"
p="1%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>
Posting your hiring salary helps many job-seekers
negotiate fair salaries.
</p>
</Flex>
{/* salary container */}
<Flex w="100%" justify="flex-end">
{/* salary box */}
<Flex
w="459px"
h="150px"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
justify="space-evenly"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag4"
>
<FormLabel>Hiring salary</FormLabel>
<InputGroup>
<InputLeftElement
mb="4"
py="28px"
color="gray.300"
fontSize="1.2em"
children="$"
/>
<Input
h="56px"
mb="6"
variant="filled"
rounded="6px"
autoCapitalize="none"
type="number"
label="salary"
name="salary"
ref={register}
/>
</InputGroup>
</Flex>
{/* avatar */}
<Flex
h="150px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag4"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
<Flex
justify="flex-end"
mb="5%"
data-aos="fade-in"
data-aos-offset="120"
data-aos-delay="1000"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag4"
>
<Button
data-cy="companyReviewFormButton"
h="56px"
w="17%"
mt="2%"
rounded="35px"
border="1px solid #344CD0"
color="#344CD0"
backgroundColor="#FFF"
_hover={{ backgroundColor: '#F2F6FE', cursor: 'pointer' }}
onClick={time4}
>
Next
</Button>
</Flex>
</>
) : null}
{/* 5th prompt */}
{Tag5 ? (
<>
<Flex
id="Tag5"
align="center"
h="5%"
w="416px"
p="1%"
mb="2%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>Awesome! Thank you for sharing that.</p>
</Flex>
<Flex
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="1000"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<p>One last question.</p>
</Flex>
{/* overall container */}
<Flex w="100%" justify="flex-end">
{/* overall box */}
<Flex
w="459px"
h="136px"
mb="8%"
p="6"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<FormLabel mb="4">
Please rate your overall experience.
</FormLabel>
<Flex justify="center" w="100%">
<BeautyStars
name="companyOverall"
value={starState}
activeColor="#344CD0"
onChange={(value) => {
setStarState(value)
time5()
}}
/>
</Flex>
</Flex>
{/* avatar */}
<Flex
h="136px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="Tag5"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
</>
) : null}
{/* 6th prompt */}
{Tag6 ? (
<>
<Flex
id="Tag6"
align="center"
p="1%"
h="5%"
w="416px"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
data-aos-anchor="#ratingTag"
>
<p>Thank you! Don’t forget to hit submit. </p>
</Flex>
{/* submit container */}
<Flex w="100%" justify="flex-end">
{/* submit box */}
<Flex
w="459px"
h="136px"
mb="8%"
p="6"
justify="center"
align="center"
border="1px solid #BBBDC6"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Button
bg="#344CD0"
color="white"
type="submit"
isLoading={formState.isSubmitting}
rounded="6px"
border="none"
data-cy="companyReviewSubmit"
>
Submit
</Button>
</Flex>
{/* avatar */}
<Flex
h="136px"
align="flex-end"
ml="1%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true"
>
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
</>
) : null}
</FormControl>
</form>
</Flex>
</Flex>
</>
)
}
Example #26
| 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 #27
| 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 #28
| Source File: Signup.js From allay-fe with MIT License | 4 votes |
|
Signup = ({ signup, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = useState(false)
const [moreInfo, setMoreInfo] = useState(false)
const handleClick = () => setShow(!show)
//location state
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateHelper = (value) => {
setLocation(value)
}
const [profile_image, setProfile_Image] = useState('')
const [profile_resume, setProfile_resume] = useState('')
//validation
function validateFirstName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'First Name is required'
} else if (value.length < 2) {
error = 'First Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'First Name can only contain letters'
}
return error || true
}
function validateLastName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'Last Name is required'
} else if (value.length < 2) {
error = 'Last Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'Last Name can only contain letters'
}
return error || true
}
function validateEmail(value) {
let error
if (!value) {
error = 'Email is required'
} else if (!value.includes('@')) {
error = 'Must be a valid email'
}
return error || true
}
function validateTrack(value) {
let error
if (!value) {
error = 'Lambda track is required'
}
return error || true
}
function validateCohort(value) {
let error
if (!value) {
error = 'Cohort is required'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
function validateFieldOfStudy(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (nameRegex.test(value)) {
error = 'Field of study can only contain letters'
}
return error || true
}
// end validation
//add image to cloudinary
const uploadImage = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setProfile_Image(...profile_image, file.secure_url)
}
//upload resume to cloudinary
const uploadResume = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
console.log('here', file)
setProfile_resume(...profile_resume, file.secure_url)
}
const submitForm = (creds) => {
// correcting grad date format
let graduated = null
if (creds.gradMonth && creds.gradYear) {
graduated = `${creds.gradYear}-${creds.gradMonth}-01`
}
// correcting employed date format
let employed_start = null
if (creds.workMonth && creds.workYear) {
employed_start = `${creds.workYear}-${creds.workMonth}-01`
}
if (creds.confirmPassword === creds.password) {
// formatting the signup state to match the back end columns
signup({
email: creds.email,
password: creds.password,
track_id: Number(creds.track_id),
first_name: creds.firstName,
last_name: creds.lastName,
cohort: creds.cohort,
contact_email: creds.contact_email || null,
location: newLocation
? `${newLocation.myCity} ${newLocation.myState}`
: null,
graduated: graduated,
highest_ed: creds.highest_ed || null,
field_of_study: creds.field_of_study || null,
prior_experience: creds.prior_experience
? JSON.parse(creds.prior_experience)
: false,
tlsl_experience: creds.tlsl_experience
? JSON.parse(creds.tlsl_experience)
: false,
employed_company: creds.employed_company || null,
employed_title: creds.employed_title || null,
employed_remote: creds.employed_remote
? JSON.parse(creds.employed_remote)
: false,
employed_start: employed_start,
resume: profile_resume || null,
linked_in: creds.linked_in || null,
slack: creds.slack || null,
github: creds.github || null,
dribble: creds.dribble || null,
profile_image: profile_image || null,
portfolio: creds.portfolio_URL || null,
}).then(() => history.push('/dashboard'))
} else {
alert('Your Passwords must match!')
}
ReactGA.event({
category: 'User',
action: `Button Sign Up`,
})
}
const switchMoreInfo = () => {
setMoreInfo(!moreInfo)
}
const gaLogin = () => {
ReactGA.event({
category: 'User',
action: `Link Already have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100vh" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="RegisterSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Flex
w="833px"
mx="auto"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="833px"
// h='825px'
p="6"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
w="653"
fontSize="36px"
fontWeight="600"
fontFamily="Poppins"
justify="center"
my="68px"
>
Let's get started!
</Flex>
{/* FIRST NAME, LAST NAME */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
First Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="firstName"
label="firstName"
placeholder="John"
autoCapitalize="none"
ref={register({ validate: validateFirstName })}
/>
<FormErrorMessage>
{errors.firstName && errors.firstName.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Last Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="lastName"
label="lastName"
placeholder="Doe"
autoCapitalize="none"
ref={register({ validate: validateLastName })}
/>
<FormErrorMessage>
{errors.lastName && errors.lastName.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* EMAIL */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
w="653px"
mb="30px"
type="email"
name="email"
label="email"
placeholder="[email protected]"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* TRACK */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isRequired isInvalid={errors.track_name}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Track
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="track_id"
label="track_id"
ref={register({ validate: validateTrack })}
>
<option fontFamily="Muli" value="">
Select Your Lambda Track
</option>
<option fontFamily="Muli" value={1}>
Android
</option>
<option fontFamily="Muli" value={2}>
DS
</option>
<option fontFamily="Muli" value={3}>
WEB
</option>
<option fontFamily="Muli" value={4}>
IOS
</option>
<option fontFamily="Muli" value={5}>
UX
</option>
</Select>
<FormErrorMessage>
{errors.track_id && errors.track_id.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Cohort
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="cohort"
label="cohort"
placeholder="Ex: FT 1 or PT 1"
autoCapitalize="none"
ref={register({ validate: validateCohort })}
/>
<FormErrorMessage>
{errors.cohort && errors.cohort.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PASSWORD, CONFIRM PASSWORD */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isRequired isInvalid={errors.password}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
w="318px"
// mb='30px'
mr="17px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" pr="22px" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormHelperText mb="45px" color="#9194A8">
Must be at least 8 characters
</FormHelperText>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Confirm Password
</FormLabel>
<InputGroup>
<SignupLoginInput
w="318px"
mb="30px"
type={show ? 'text' : 'password'}
name="confirmPassword"
label="Confirm Password"
placeholder="********"
autoCapitalize="none"
ref={register}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
data-cy="registerSubmit"
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
</Flex>
{/* CLICK FOR LONGFORM SIGNUP */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={moreInfo ? '0' : '55px'}
cursor="pointer"
justify="flex-start"
data-cy="longFormDropdown"
onClick={switchMoreInfo}
>
<Flex justify="flex-start">
{moreInfo ? (
<Icon
fontWeight="bold"
name="chevron-down"
textAlign="left"
size="30px"
mr="5px"
ml="-8px"
pt="3px"
/>
) : (
<Icon
fontWeight="bold"
name="chevron-right"
textAlign="left"
size="30px"
mr="5px"
ml="-8px"
pt="3px"
/>
)}
<Text fontWeight="bold" fontSize="20px" fontFamily="Muli">
{' '}
Add Additional Information
</Text>
</Flex>
</Flex>
{/* ADDITIONAL INFO COMPONENT */}
{moreInfo ? (
<SignupAdditional
profile_resume={profile_resume}
profile_image={profile_image}
uploadImage={uploadImage}
uploadResume={uploadResume}
register={register}
errors={errors}
location={location}
newLocation={newLocation}
setNewLocation={setNewLocation}
stateHelper={stateHelper}
validateFieldOfStudy={validateFieldOfStudy}
/>
) : null}
<Flex w="100%" justify="center">
<Button
mb="30px"
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="registerSubmit"
>
Sign up
</Button>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Already have an account?{' '}
<Link
to="/"
onClick={gaLogin}
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign in here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
