@chakra-ui/core#Image JavaScript Examples
The following examples show how to use
@chakra-ui/core#Image.
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: launch.js From space-rockets-challenge with MIT License | 6 votes |
|
function Gallery({ images }) {
return (
<SimpleGrid my="6" minChildWidth="350px" spacing="4">
{images.map((image) => (
<a href={image} key={image}>
<Image src={image.replace("_o.jpg", "_z.jpg")} />
</a>
))}
</SimpleGrid>
);
}
Example #2
| 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 #3
| Source File: launch.js From space-rockets-challenge with MIT License | 5 votes |
|
function Header({ launch }) {
return (
<Flex
bgImage={`url(${launch.links.flickr_images[0]})`}
bgPos="center"
bgSize="cover"
bgRepeat="no-repeat"
minHeight="30vh"
position="relative"
p={[2, 6]}
alignItems="flex-end"
justifyContent="space-between"
>
<Image
position="absolute"
top="5"
right="5"
src={launch.links.mission_patch_small}
height={["85px", "150px"]}
objectFit="contain"
objectPosition="bottom"
/>
<Heading
color="white"
display="inline"
backgroundColor="#718096b8"
fontSize={["lg", "5xl"]}
px="4"
py="2"
borderRadius="lg"
>
{launch.mission_name}
</Heading>
<Stack isInline spacing="3">
<Badge variantColor="purple" fontSize={["xs", "md"]}>
#{launch.flight_number}
</Badge>
{launch.launch_success ? (
<Badge variantColor="green" fontSize={["xs", "md"]}>
Successful
</Badge>
) : (
<Badge variantColor="red" fontSize={["xs", "md"]}>
Failed
</Badge>
)}
</Stack>
</Flex>
);
}
Example #4
| Source File: launches.js From space-rockets-challenge with MIT License | 5 votes |
|
export function LaunchItem({ launch }) {
return (
<Box
as={Link}
to={`/launches/${launch.flight_number.toString()}`}
boxShadow="md"
borderWidth="1px"
rounded="lg"
overflow="hidden"
position="relative"
>
<Image
src={
launch.links.flickr_images[0]?.replace("_o.jpg", "_z.jpg") ??
launch.links.mission_patch_small
}
alt={`${launch.mission_name} launch`}
height={["200px", null, "300px"]}
width="100%"
objectFit="cover"
objectPosition="bottom"
/>
<Image
position="absolute"
top="5"
right="5"
src={launch.links.mission_patch_small}
height="75px"
objectFit="contain"
objectPosition="bottom"
/>
<Box p="6">
<Box d="flex" alignItems="baseline">
{launch.launch_success ? (
<Badge px="2" variant="solid" variantColor="green">
Successful
</Badge>
) : (
<Badge px="2" variant="solid" variantColor="red">
Failed
</Badge>
)}
<Box
color="gray.500"
fontWeight="semibold"
letterSpacing="wide"
fontSize="xs"
textTransform="uppercase"
ml="2"
>
{launch.rocket.rocket_name} • {launch.launch_site.site_name}
</Box>
</Box>
<Box
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
{launch.mission_name}
</Box>
<Flex>
<Text fontSize="sm">{formatDate(launch.launch_date_utc)} </Text>
<Text color="gray.500" ml="2" fontSize="sm">
{timeAgo(launch.launch_date_utc)}
</Text>
</Flex>
</Box>
</Box>
);
}
Example #5
| Source File: Signup-Additional.js From allay-fe with MIT License | 4 votes |
|
SignupAdditional = ({
register,
errors,
location,
setNewLocation,
stateHelper,
validateFieldOfStudy,
uploadImage,
profile_image,
uploadResume,
profile_resume,
}) => {
// graduated state/helpers
const [graduated, setGraduated] = useState(false)
const isGraduated = () => {
setGraduated(true)
}
const notGraduated = () => {
setGraduated(false)
}
// employed state/helpers
const [employed, setEmployed] = useState(false)
const isEmployed = () => {
setEmployed(true)
}
const notEmployed = () => {
setEmployed(false)
}
//radio button state
const [priorExp, setPriorExp] = useState(false)
const [tlsl, setTlsl] = useState(false)
const [remote, setRemote] = useState(false)
//location helper
useEffect(() => {
setNewLocation({ ...location, myState: location.myState })
// removes numbers, commas, and whitespaces from city
if (location.myCity) {
if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
const tempCity = location.myCity
setNewLocation({
...location,
myCity: tempCity.replace(/^[\s,\d]+/, ''),
})
}
}
}, [location, setNewLocation])
///info for slack ID
const info = (
<Box>
<Image
objectFit="fit"
width="300px"
height="300px"
src={require('../../icons/slack.gif')}
alt="slack info"
/>
</Box>
)
return (
<>
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="61px"
justify="flex-start"
fontSize="16px"
>
<Text color="#131C4D" fontFamily="Muli">
The information below will be visible on your profile page by others
</Text>
</Flex>
{/* CLOUDINARY IMAGE UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="55px"
justify="space-evenly"
alignItems="center"
>
{!profile_image ? (
<Image size="100px" src={require('../../icons/user.svg')} />
) : (
<Image
size="100px"
style={{ borderRadius: '50px' }}
src={profile_image}
/>
)}
<Flex alignItems="center">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={uploadImage}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label for="files" class="btn">
Upload profile image
</label>
</Flex>
</Flex>
{/* LOCATION OF USER */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Location (City, State)
</FormLabel>
<CustomAutocomplete
stateHelper={stateHelper}
w="653px"
h="58px"
mb="30px"
rounded="2px"
variant="outline"
bgColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#17171B"
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
id="location"
name="location"
label="location"
placeholder="e.g. Los Angeles, CA"
ref={register}
/>
</FormControl>
</Flex>
{/* GRADUATED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={graduated ? '20px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Have you graduated from Lambda yet?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="graduated"
id="graduated-1"
value={true}
isChecked={graduated === true}
onClick={isGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="graduated"
id="graduated-2"
value={false}
isChecked={graduated === false}
onClick={notGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* GRADUATED MONTH AND YEAR */}
{graduated ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you graduate?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradMonth"
label="gradMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradYear"
label="gradYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Background
</Text>
</Flex>
{/* HIGHEST LEVEL OF EDUCATION */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Highest level of education
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="highest_ed"
label="highest_ed"
ref={register}
>
<option fontFamily="Muli" value="">
Select your education level
</option>
<option fontFamily="Muli" value="High school diploma">
High school diploma
</option>
<option fontFamily="Muli" value="Associate's degree">
Associate's degree
</option>
<option fontFamily="Muli" value="Bachelor's degree">
Bachelor's degree
</option>
<option fontFamily="Muli" value="Master's degree">
Master's degree
</option>
<option fontFamily="Muli" value="PhD">
PhD
</option>
</Select>
</FormControl>
{/* FIELD OF STUDY */}
<FormControl isInvalid={errors.fieldOfStudy}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Field of study
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="field_of_study"
label="field_of_study"
placeholder="Enter your field of study"
autoCapitalize="none"
ref={register({ validate: validateFieldOfStudy })}
/>
<FormErrorMessage>
{errors.fieldOfStudy && errors.fieldOfStudy.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PRIOR EXPERIENCE */}
<Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Prior to Lambda did you have any experience in your track?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="prior_experience"
id="priorExp-1"
ref={register}
value={true}
isChecked={priorExp === true}
onChange={() => setPriorExp(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="prior_experience"
id="priorExp-2"
ref={register}
value={false}
isChecked={priorExp === false}
onChange={() => setPriorExp(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* DID YOU TL/SL */}
<Flex wrap="wrap" w="653px" mx="auto" mb="100px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Have you been a TL/SL while at Lambda?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="tlsl_experience"
id="TLSL-1"
value={true}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="tlsl_experience"
id="TLSL-2"
value={false}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Employment
</Text>
</Flex>
{/* EMPLOYED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={employed ? '30px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you currently employed in your field of study?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed"
id="employed-1"
value={true}
isChecked={employed === true}
onClick={isEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed"
id="employed-2"
value={false}
isChecked={employed === false}
onClick={notEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* EMPLOYED COMPANY NAME AND JOB TITLE */}
{employed ? (
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Company name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="employed_company"
label="employed_company"
placeholder="Enter the company name"
autoCapitalize="none"
ref={register}
/>
</FormControl>
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Job title
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="employed_title"
label="employed_title"
placeholder="Enter your job title"
autoCapitalize="none"
ref={register}
/>
</FormControl>
</Flex>
) : null}
{/* REMOTE WORK CHECK */}
{employed ? (
<Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you working remotely?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed_remote"
id="employed_remote-1"
value={true}
ref={register}
isChecked={remote === true}
onChange={() => setRemote(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed_remote"
id="employed_remote-2"
value={false}
ref={register}
isChecked={remote === false}
onChange={() => setRemote(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
) : null}
{/* EMPLOYMENT START DATE */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you start?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workMonth"
label="workMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workYear"
label="workYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Online Presence
</Text>
</Flex>
{/* RESUME UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" color="#131C4D" fontSize="18px" fontFamily="Muli">
Resume
</Text>
<Flex width="270px" justify="flex-end">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={uploadResume}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label for="files" class="btn">
{!profile_resume ? (
'Upload resume'
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
class="far fa-check-circle"
></i>
)}
</label>
</Flex>
</Flex>
<Flex w="653px" mx="auto" justify="flex-start">
<FormHelperText w="653px" mb="30px" color="#9194A8">
Must be a .pdf file
</FormHelperText>
</Flex>
{/* CONTACT EMAIL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Email address
</Text>
<SignupLoginInput
w="318px"
type="email"
name="contact_email"
label="contact_email"
placeholder="Enter your email address"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* PORTFOLIO URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Portfolio URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="portfolio_URL"
label="portfolio_URL"
placeholder="Enter your portfolio URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* LINKEDIN URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
LinkedIn URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="linked_in"
label="linked_in"
placeholder="Enter your LinkedIn URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* SLACK USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Slack ID
<Tooltip hasArrow label={info} placement="top">
<i style={{ paddingLeft: '10px' }} class="fas fa-question"></i>
</Tooltip>
</Text>
<SignupLoginInput
w="318px"
type="text"
name="slack"
label="slack"
placeholder="Enter your Slack ID"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* GITHUB USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Github URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="github"
label="github"
placeholder="Enter your Github URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* DRIBBBLE URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Dribbble URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="dribble"
label="dribble"
placeholder="Enter your Dribbble URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
</>
)
}
Example #6
| Source File: FormController.js From allay-fe with MIT License | 4 votes |
|
FormController = ({ history }) => {
// initialize AOS
AOS.init()
// state to show interview review
const [showInterview, setShowInterview] = useState(false)
// state to show company review
const [showCompanyReview, setShowCompanyReview] = useState(false)
//progress bar
const [progress] = useState({
prec: 99,
prog: 0,
})
return (
// main container
<>
<ProgressHeader progress={progress} />
{/* Start of messenger */}
{/* form container */}
<Flex margin="0 auto" width="80%">
<Flex flexDir="column" pt="5%" width="100%">
<Flex
align="center"
p="1%"
ml="2%"
w="45%"
mt="20%"
mb="2%"
bg="#F2F6FE"
position="relative"
right="0"
bottom=" 0"
left="0"
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="false"
data-aos-once="false"
>
<p>
Hi {localStorage.getItem('username')},{' '}
<span role="img" aria-label="smile">
?
</span>{' '}
Thank you for choosing to post.
</p>
</Flex>
<Flex
align="center"
p="1%"
ml="2%"
w="50%"
mb="2%"
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="false"
>
<p>
Sharing your experience through your posts encourages others to do
the same and promotes the exchange of helpful information
</p>
</Flex>
<Flex
align="center"
p="1%"
ml="2%"
w="45%"
mb="8%"
bg="#F2F6FE"
rounded="20px"
data-aos="fade-right"
data-aos-offset="200"
data-aos-delay="2500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
>
<p>What do you want to post about?</p>
</Flex>
{/* company container */}
<Flex w="100%" justify="flex-end" pb="5%">
{/* company box */}
<Flex
w="36%"
px="6%"
py="5%"
border="1px solid #EAF0FE"
rounded="6px"
flexDir="column"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="1500"
data-aos-duration="2000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
align="center"
>
<Flex w="100%" color="#494B5B" fontSize="20px" fontWeight="light">
Choose a topic
</Flex>
<Flex justify="space-between" mt="3%" align="center" width="60%">
<Flex
justify="center"
align="center"
w="100px"
h="100px"
onClick={() => {
setShowInterview(true)
setShowCompanyReview(false)
}}
data-cy="interviewReviewButton"
>
<Image src={interviewIcon} alt="Interview Review Icon" />
</Flex>
<Flex
justify="center"
ml="40%"
w="100px"
h="100px"
mb="10%"
onClick={() => {
setShowInterview(false)
setShowCompanyReview(true)
}}
data-cy="companyReviewButton"
>
<Image src={companyIcon} alt="Company Review Icon" />
</Flex>
</Flex>
<Flex w="100%" mt="1%" justify="space-evenly">
<Flex
as="h4"
w="96px"
h="44px"
textAlign="center"
color="#494B5B"
fontWeight="light"
fontSize="16px"
>
Interview Review
</Flex>
<Flex
as="h4"
w="96px"
h="44px"
textAlign="center"
color="#494B5B"
fontWeight="light"
fontSize="16px"
>
Company Review
</Flex>
</Flex>
</Flex>
{/* avatar */}
<Flex
align="flex-end"
ml="1%"
mr="2%"
data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="3000"
data-aos-duration="2000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
justify="flex-end"
>
<Flex align="center" justify="space-evenly" width="40%" mt="3%">
<Avatar size="md" src="https://bit.ly/broken-link" />
</Flex>
</Flex>
</Flex>
{showInterview ? <InterviewForm history={history} /> : null}
{showCompanyReview ? <CompanyReviewForm history={history} /> : null}
</Flex>
</Flex>
</>
)
}
Example #7
| 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 #8
| 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 #9
| 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 #10
| Source File: ProfilePage.js From allay-fe with MIT License | 4 votes |
|
ProfilePage = (props) => {
const id = props.match.params.id
const userId = window.localStorage.getItem('userId')
//
const dispatch = useDispatch()
const isLoading = useSelector((state) => state.user.isLoading)
const isUpdated = useSelector((state) => state.user.isUpdated)
const userData = useSelector((state) => state.user.userData)
//
const _midSectionStyles = {
width: '40%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0% 6% 0 3%',
height: '40px',
}
const _emp = {
padding: '0 0 0 22%',
opacity: 0.5,
}
// box that shows on profile update
let changes_div = {
position: 'absolute',
width: '1048px',
marginTop: '25px',
borderRadius: '20px 20px 0 0',
height: '50px',
backgroundColor: '#77E0B5',
textAlign: 'center',
color: '#fff',
fontSize: '16px',
fontFamily: 'Muli',
fontWeight: 'bold',
}
//array to get the correct track name
const track = ['arrayStartsWithZero :D', 'android', 'ds', 'web', 'ios', 'ux'][
userData.track_id
]
// formating graduated date
let graduated = userData.graduated
graduated = new Date(graduated).toUTCString()
graduated = graduated.split(' ').slice(2, 4).join(' ')
// formating employed date
let hired = userData.employed_start
hired = new Date(hired).toUTCString()
hired = hired.split(' ').slice(2, 4).join(' ')
//slack link helper
const slackID = userData.slack
const slackLink = `https://lambda-students.slack.com/app_redirect?channel=${slackID}`
useEffect(() => {
dispatch(getUser(id))
}, [dispatch, id])
//send location: null receive undefiend send again empty recieve the same with white space, backend fix but itll do for now
const lazySolution =
userData.location != 'undefined undefined ' &&
userData.location != 'undefined undefined'
? userData.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>
<Image
size="58px"
style={{ opacity: '0.6', borderRadius: '50%' }}
src={userData.profile_image}
fallbackSrc={require('../../../icons/user.svg')}
/>
</Flex>
) : null}
</Flex>
{!isLoading ? (
<>
<Flex Flex w="100%" pt="3%" justify="center">
<SimpleGrid width="1048px" columns={1}>
<Box style={{ textAlign: 'end', paddingRight: '1%' }}>
{Number(id) === Number(userId) && (
<Link
style={{
textDecoration: 'none',
color: 'black',
}}
to={`/profile/${id}/edit`}
>
<i
style={{ opacity: 0.3, paddingRight: '10px' }}
className="far fa-edit"
data-cy="editProfile"
></i>
Edit profile
</Link>
)}
</Box>
<div
id="changesDiv"
style={isUpdated ? changes_div : { display: 'none' }}
>
Changes successfully saved
</div>
<Box
style={{
borderRadius: '20px 20px 0 0',
display: 'inline-flex',
}}
bg="#F7F9FF"
height="220px"
>
<Flex w="20%" style={{ padding: '55px 0 0 90px' }}>
<Avatar
size="2xl"
name={userData.first_name}
src={userData.profile_image}
/>
</Flex>
<Flex w="80%" pl="6%">
<SimpleGrid width="100%" row={2} pr="70px">
<Flex
height="113px"
style={{
display: 'flex',
}}
>
<Box
height="27px"
style={{
alignSelf: 'flex-end',
marginLeft: '42px',
}}
>
<h3
id="profileNames"
style={{
fontSize: '27px',
fontFamily: 'Poppins',
color: ' #131C4D',
width: '210px',
}}
>
{userData.first_name} {userData.last_name}
</h3>
</Box>
<Box
width="47%"
height="53px"
style={{
display: 'flex',
alignSelf: 'flex-end',
alignItems: 'baseline',
justifyContent: 'space-between',
}}
>
<span
style={{
borderRadius: '20px',
width: '75px',
height: '36px',
backgroundColor: '#259BF8',
color: '#17171b',
fontSize: '16px',
textTransform: 'uppercase',
textAlign: 'center',
marginLeft: '15%',
paddingTop: '6px',
}}
>
{track}
</span>
<h6
style={{
fontFamily: 'Muli',
fontWeight: 300,
paddingRight: '10px',
}}
>
{userData.graduated ? 'Alumni' : 'Student'}
</h6>
</Box>
<Box
width="120px"
style={{
alignSelf: 'flex-end',
textAlign: 'end',
}}
height="60px"
>
<h6
style={{
fontFamily: 'Muli',
fontWeight: 300,
paddingTop: '6px',
}}
>
<i
style={{ opacity: 0.2, paddingRight: '5px' }}
className="fas fa-map-marker-alt"
></i>
{lazySolution}
</h6>
</Box>
</Flex>
<Box>
<SimpleGrid width="100%" columns={2}>
<Flex
width="55%"
justify="space-between"
pl="42px"
style={{ fontWeight: 'bold' }}
>
<a
style={{
textDecoration: 'none',
color: '#344CD0',
}}
target="blank"
href={userData.portfolio}
>
Portfolio
</a>
<a
style={{
textDecoration: 'none',
color: '#344CD0',
}}
target="blank"
href={userData.resume}
>
Resume
</a>
</Flex>
<Flex
width="62%"
justify="space-around"
justifySelf="flex-end"
alignItems="center"
>
{userData.linked_in ? (
<a target="blank" href={userData.linked_in}>
<Image
size="20px"
style={{ borderRadius: '60%' }}
src={require('../../../icons/linkedIn.png')}
/>
</a>
) : (
<Image
size="20px"
opacity=".3"
style={{ borderRadius: '60%' }}
src={require('../../../icons/linkedIn.png')}
/>
)}
{userData.slack ? (
<a target="blank" href={slackLink}>
<Image
size="20px"
src={require('../../../icons/slack.svg')}
/>
</a>
) : (
<Image
opacity="0.3"
size="20px"
src={require('../../../icons/slack.svg')}
/>
)}
{userData.github ? (
<a
style={{ height: '20px' }}
target="blank"
href={userData.github}
>
<i
style={{ fontSize: 'larger' }}
className="fab fa-github"
/>
</a>
) : (
<i
style={{ fontSize: 'larger', opacity: '0.3' }}
className="fab fa-github"
></i>
)}
{userData.dribble ? (
<a target="blank" href={userData.dribble}>
<Image
size="20px"
style={{ borderRadius: '60%' }}
src={require('../../../icons/dribble.png')}
/>
</a>
) : (
<Image
size="20px"
opacity="0.3"
style={{ borderRadius: '60%' }}
src={require('../../../icons/dribble.png')}
/>
)}
</Flex>
</SimpleGrid>
</Box>
</SimpleGrid>
</Flex>
</Box>
<Box
bg="#F7F9FF"
pl="70px"
height="107px"
style={{ fontSize: '16px' }}
>
<h4
style={{
padding: ' 2% 0% 1% 3%',
fontSize: '14px',
color: ' #131C4D',
}}
>
Lambda Information
</h4>
<Flex>
<Box style={_midSectionStyles}>
<span style={{ opacity: '.5' }}>Cohort:</span>
{userData.cohort}
</Box>
<Box
style={{
width: '35.5%',
display: ' flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0% 0% 1% 11%',
height: '40px',
}}
>
<span style={{ opacity: '.5' }}>Graduated:</span>
{userData.graduated ? graduated : 'N/A'}
</Box>
</Flex>
</Box>
</SimpleGrid>
</Flex>
<Flex
Flex
w="100%"
justify="center"
mb="3%"
style={{ fontSize: '16px' }}
>
<SimpleGrid width="1048px" columns={2}>
<Box
bg="#F7F9FF"
height="260px"
pl="70px"
style={{ borderRadius: '0 0 0 20px' }}
>
<h4
style={{
padding: ' 6% 2% 5% 6%',
fontSize: '14px',
color: ' #131C4D',
}}
>
Background
</h4>
<SimpleGrid
columns={2}
spacing={5}
style={{ paddingLeft: '6%' }}
>
<Box height="20px" style={{ opacity: 0.5 }}>
Degree:
</Box>
<Box height="20px">{userData.highest_ed || 'N/A'}</Box>
<Box height="20px" style={{ opacity: 0.5 }}>
Field of Study:
</Box>
<Box height="20px">{userData.field_of_study || 'N/A'}</Box>
<Box height="20px" style={{ opacity: 0.5 }}>
Prior web experience:
</Box>
<Box height="20px">
{userData.prior_experience ? 'Yes' : 'None'}
</Box>
<Box height="20px" style={{ opacity: 0.5 }}>
Lambda TL/SL position:
</Box>
<Box height="20px">
{userData.tlsl_experience ? 'Yes' : 'None'}
</Box>
</SimpleGrid>
</Box>
<Box
bg="#F7F9FF"
height="260px"
style={{ borderRadius: '0 0 20px 0' }}
>
<h4
style={{
padding: ' 6% 0% 4% 8%',
fontSize: '14px',
color: ' #131C4D',
}}
>
Current employment
</h4>
<SimpleGrid
columns={2}
spacing={5}
style={{ padding: '0 20% 0 0%' }}
>
<Box height="20px" style={_emp}>
Company:
</Box>
<Box height="20px">{userData.employed_company || 'N/A'}</Box>
<Box height="20px" style={_emp}>
Job tittle:
</Box>
<Box height="20px">{userData.employed_title || 'N/A'}</Box>
<Box height="20px" style={_emp}>
Start date:
</Box>
<Box height="20px">
{userData.employed_start ? hired : 'N/A'}
</Box>
<Box height="20px" style={_emp}>
Remote
</Box>
<Box height="20px">
{userData.employed_remote ? 'Yes' : 'No'}
</Box>
</SimpleGrid>
</Box>
</SimpleGrid>
</Flex>
<Flex justify="center">
<Box width="1048px">
Reviews written by {userData.first_name} {userData.last_name}
</Box>
</Flex>
<ProfilePageReview userReviews={userData.reviews} />
</>
) : (
<Flex justify="center" pt="15%">
<GridLoader size={50} color={'#259bf8'} />
</Flex>
)}
</>
)
}
