@chakra-ui/core#Input JavaScript Examples
The following examples show how to use
@chakra-ui/core#Input.
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: EditReviewInput.js From allay-fe with MIT License | 6 votes |
|
EditReviewInput = React.forwardRef(({ ...props }, ref) => {
return (
<Input
w={props.w ? props.w : '100%'}
mb={props.mb ? props.mb : '4'}
h='58px'
py='32px'
pl={props.pl ? props.pl : '2%'}
rounded='3px'
variant='outline'
bgColor='#FDFDFF'
name={props.name}
type={props.type ? props.type : 'text'}
placeholder={props.placeholder}
autoCapitalize='none'
ref={ref}
value={props.value}
onChange={props.onChange}
/>
);
})
Example #2
| Source File: OnboardingInput.js From allay-fe with MIT License | 6 votes |
|
function OnboardingInput({ ...props }, ref) {
return (
<Input
w='100%'
h='58px'
py='32px'
rounded='3px'
variant='outline'
bgColor='#FDFDFF'
mb={props.mb}
type={props.type ? props.type : 'text'}
name={props.name}
label={props.label}
placeholder={props.placeholder}
ref={ref}
/>
);
}
Example #3
| Source File: ReviewFormInput.js From allay-fe with MIT License | 6 votes |
|
ReviewFormInput = React.forwardRef(({ ...props }, ref) => {
return (
<Input
h='56px'
mb='6'
mr={props.mr}
w={props.w}
variant='filled'
rounded='6px'
label={props.label}
list={props.list}
type={props.type ? props.type : 'text'}
name={props.name}
placeholder={props.placeholder}
ref={ref}
autoCapitalize='none'
min={props.min}
max={props.max}
onChange={props.onChange}
onKeyUp={props.onKeyUp}
/>
);
})
Example #4
| Source File: SignupLoginInput.js From allay-fe with MIT License | 6 votes |
|
SignupLoginInput = React.forwardRef(({ ...props }, ref) => {
return (
<Input
w={props.w ? props.w : '404px'}
h='58px'
py='32px'
rounded='2px'
mb={props.mb}
mr={props.mr ? props.mr : '0'}
variant='outline'
bgColor='#FDFDFF'
focusBorderColor='#344CD0'
borderColor='#EAF0FE'
color='#17171B'
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
type={props.type ? props.type : 'text'}
name={props.name}
label={props.label}
placeholder={props.placeholder}
autoCapitalize='none'
ref={ref}
/>
);
})
Example #5
| Source File: SearchBar.js From CubeMail with MIT License | 6 votes |
|
SearchBar = () => {
const { getMessagesQuery, loading } = useContext(EmailContext);
const [query, setQuery] = useState("");
const handleOnChange = (e) => setQuery(e.target.value);
const handleQuery = (e) => {
if (!query) return;
if (e.keyCode === 13 || e.type === "click") getMessagesQuery(query);
};
return (
<Box py='5px' bg='white' border='1px' borderColor='gray.200'>
<InputGroup size='lg'>
<IconButton
icon='search'
variant='ghost'
variantColor='blue'
marginLeft='5px'
aria-label='Search messages'
onClick={handleQuery}
isLoading={loading}
/>
<Input
type='text'
placeholder='Search mail'
borderWidth='0px'
borderRadius='0px'
focusBorderColor='white'
value={query}
onChange={handleOnChange}
onKeyDown={handleQuery}
/>
</InputGroup>
</Box>
);
}
Example #6
| 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 #7
| 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 #8
| 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 #9
| 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 #10
| Source File: Autocomplete.js From allay-fe with MIT License | 4 votes |
|
// To disable any eslint 'google not defined' errors
/*global google */
function CustomAutocomplete({ ...props }, ref) {
let autocomplete = null;
let [state, setState] = useState({ myCity: "", myState: "" });
useEffect(() => {
props.stateHelper(state);
}, [state, props]);
const handleScriptLoad = () => {
// Declare Options For Autocomplete
const options = {
types: ["(cities)"],
componentRestrictions: { country: "us" },
};
// Initialize Google Autocomplete settings
let searchValue = document.getElementById(props.id);
autocomplete = new google.maps.places.Autocomplete(searchValue, options);
/* Avoid paying for data that you don't need by restricting the set of
place fields that are returned to just the address components and formatted
address.*/
autocomplete.setFields(["address_components", "formatted_address"]);
// Fire Event when a suggested name is selected
autocomplete.addListener("place_changed", handlePlaceSelect);
};
function handlePlaceSelect() {
// Extract City & State From Address Object
const locationObject = autocomplete.getPlace();
const location = locationObject.address_components;
const locationCity = location[0].long_name;
if (location[2].short_name.includes("US")) {
var locationState = location[1].short_name;
} else {
// eslint-disable-next-line no-redeclare
var locationState = location[2].short_name.includes("County")
? location[3].short_name
: location[2].short_name;
}
// Set state if address exists
if (locationObject) {
setState({
myCity: locationCity,
myState: locationState,
});
}
}
return (
<>
<Script
type="text/javascript"
url="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkA6IWP37R_cBkFM3qugagg0pJmPGgVUQ&libraries=places"
onLoad={handleScriptLoad}
/>
<Input
w={props.w}
h={props.h ? props.h : "56px"}
mb={props.mb}
id={props.id}
name={props.name}
label={props.label}
placeholder={props.placeholder}
variant={props.variant ? props.variant : "filled"}
bgColor={props.bgColor}
focusBorderColor={props.focusBorderColor}
borderColor={props.borderColor}
color={props.color}
_hover={props._hover}
_placeholder={props._placeholder}
rounded={props.rounded ? props.rounded : "6px"}
ref={ref}
onChange={props.onChange}
/>
</>
);
}
Example #11
| 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 #12
| 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 #13
| 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 #14
| Source File: index.js From here-covid-19-tracker with MIT License | 4 votes |
|
Combobox = ({ items = [] }) => {
const updateMapFocus = useMapFocus(state => state.updateMapFocus)
const [inputItems, setInputItems] = useState(items)
const {
isOpen,
// selectedItem,
// getToggleButtonProps,
// getLabelProps,
getMenuProps,
getInputProps,
getComboboxProps,
highlightedIndex,
getItemProps,
inputValue,
setInputValue,
} = useCombobox({
items: inputItems,
onSelectedItemChange: ({selectedItem}) => {
if (selectedItem && selectedItem.simpleLabel) {
fetch(`${geoCodeBaseUrl}?apiKey=${apiKey}&locationId=${selectedItem.locationId}`)
.then(d => d.json())
.then(d => {
const coordinates = d.Response.View[0].Result[0].Location.DisplayPosition
updateMapFocus([coordinates.Latitude, coordinates.Longitude], null, 7)
})
setInputValue(selectedItem.simpleLabel.replace(/<[^>]*>/g, ""))
} else {
setInputValue("")
}
},
onInputValueChange: ({ inputValue }) => {
fetch(`${baseUrl}?apiKey=${apiKey}&language=en&maxresults=10&matchLevel=city&query=${inputValue.split(" ").join("+")}&beginHighlight=<strong>&endHighlight=</strong>`)
.then(d => d.json())
.then(d => {
if (d.suggestions) {
setInputItems(d.suggestions.filter(d => d.matchLevel === "city").map(d => {
return {
...d,
simpleLabel: d.address.city
? `${d.address.city}${d.address.state ? ", " + d.address.state : ""}, ${d.address.country}`
: d.address.country
}
}))
} else {
setInputItems([])
}
})
},
})
return (
<>
<Box position="relative">
<Box {...getComboboxProps()}>
<InputGroup boxShadow="lg" size="lg">
<Input
{...getInputProps({ placeholder: "Search the map", className: "main-combobox" })}
style={{ WebkitAppearance: "none" }}
borderColor="transparent"
borderRadius="md"
_hover={{ borderColor: "transparent" }}
_focus={{ borderColor: "rgba(236,97,14, 1)", boxShadow: `0 0 0 0.0625rem rgba(236,97,14, 1), 0 0 0 0.25rem rgba(236,97,14, 0.25)` }}
_placeholder={{ color: "gray.500" }}
/>
<InputRightElement>
{
inputValue ? (
<IconButton
icon="close"
isRound
size="sm"
aria-label={"toggle menu"}
onClick={() => setInputValue("")}
/>
) : (
<Icon name="search" color="gray.500" />
)
}
</InputRightElement>
</InputGroup>
</Box>
{
isOpen && inputItems.length ?
<Box
position="absolute"
top="100%"
left={0}
right={0}
mt="0.5rem"
bg="white"
borderRadius="md"
shadow="md"
maxHeight="14rem"
overflow="scroll"
py="0.75rem"
>
<List {...getMenuProps()}>
{!inputItems.length
? (
<ListItem py="0.5rem" px="1rem" color="gray.500" alignItems="center" display="flex">
<Icon name="not-allowed" mr="0.25rem" />{ "Address not found" }
</ListItem>
)
: null}
{inputItems.map((item, index) => {
const val = item.simpleLabel
return (
<ListItem
isTruncated
key={`${val}${index}`}
style={{
backgroundColor: highlightedIndex === index ? colors.orange[50] : "transparent",
}}
py="0.5rem"
px="1rem"
{...getItemProps({ item: val, index })}
dangerouslySetInnerHTML={{ __html: val }}
/>
)
})
}
</List>
</Box> : null
}
</Box>
</>
)
}
Example #15
| Source File: ClientSearch.js From opensource.builders with MIT License | 4 votes |
|
render() {
const {
searchResults,
searchQuery,
category,
language,
license,
} = this.state
const queryResults =
searchQuery === `` && license === `` && language === `` && category === ``
? this.props.comps
: searchResults
const compLoad =
searchQuery === `` && license === `` && language === `` && category === ``
? this.props.mainInfo.slice(0, this.props.loadCount)
: this.props.mainInfo
const categories = [
"E-commerce",
"Developer Tools",
"Social Media",
"Communication",
"Analytics",
"Password Managers",
"Form Builder",
"Cloud",
"Deployment",
"Product Management",
"Automation",
"CRM",
]
const licenses = [
"GPL V3",
"BSD-3",
"GPL",
"MIT",
"OSL-3.0",
"APACHE 2.0",
"AGPL V3",
"CUSTOM",
]
const languages = [
"GO",
"JS",
"PYTHON",
"PHP",
"ELIXIR",
"RUBY",
"C",
"C#",
"C++",
"SHELL",
"TS",
"PERL",
]
return (
<Box>
<Box
bg="white"
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
display="flex"
flexWrap="wrap"
justifyContent="space-between"
alignItems="center"
px="1rem"
>
<Box py={5}>
<Heading as="h2" size="lg">
Open-source alternatives
</Heading>
<Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
Find open-source alternatives for your favorite apps
</Text>
</Box>
</Box>
</Box>
</Box>
<Box ml="auto" mr="auto" maxWidth="80rem" px={2} py={4}>
<Box>
<InputGroup size="lg" mx={1} mb={6}>
<InputLeftElement
children={<Icon name="search" color="gray.300" />}
/>
<Input
pr="4.5rem"
placeholder="Search for anything"
value={searchQuery}
onChange={(e) => {
this.searchData(e.target.value)
}}
boxShadow="sm"
/>
</InputGroup>
<Box
display="flex"
alignItems="flex-start"
flexDirection={{ base: "column", md: "row" }}
>
<Box
p={3}
maxWidth={{ base: "100%", md: "18rem" }}
// bg="#122a4f"
bg="white"
boxShadow="md"
borderRadius={4}
mx={1}
mb={6}
>
<Box>
<Box display="flex" flexDirection="column">
<Box mb={5}>
<Box color="gray.600" mx={2} mb={1} fontWeight={500}>
Categories
</Box>
<Box display="flex" flexWrap="wrap">
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
fontSize="sm"
letterSpacing="wide"
bg={category === "" ? "#122a4f" : "#2b4a7b"}
textTransform="uppercase"
_hover={category !== "" && { bg: "#1a3765" }}
onClick={() => this.categoryFilter("")}
cursor="pointer"
>
All
</PseudoBox>
{categories.map((c) => (
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
letterSpacing="wide"
fontSize="sm"
bg={category === c ? "#122a4f" : "#2b4a7b"}
textTransform="uppercase"
_hover={category !== c && { bg: "#1a3765" }}
onClick={() => this.categoryFilter(c)}
cursor="pointer"
>
{c}
</PseudoBox>
))}
</Box>
</Box>
<Box mb={5}>
<Box color="gray.600" mx={2} mb={1} fontWeight={500}>
License
</Box>
<Box display="flex" flexWrap="wrap">
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
letterSpacing="wide"
fontSize="sm"
bg={license === "" ? "#122a4f" : "#00bf70"}
textTransform="uppercase"
_hover={license !== "" && { bg: "#029c5d" }}
onClick={() => this.licenseFilter("")}
cursor="pointer"
>
All
</PseudoBox>
{licenses.map((c) => (
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
fontSize="sm"
letterSpacing="wide"
bg={license === c ? "#122a4f" : "#00bf70"}
textTransform="uppercase"
_hover={license !== c && { bg: "#029c5d" }}
onClick={() => this.licenseFilter(c)}
cursor="pointer"
>
{c}
</PseudoBox>
))}
</Box>
</Box>
<Box>
<Box color="gray.600" mx={2} mb={1} fontWeight={500}>
Language
</Box>
<Box display="flex" flexWrap="wrap">
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontSize="sm"
fontWeight={600}
letterSpacing="wide"
bg={language === "" ? "#122a4f" : "orange.500"}
textTransform="uppercase"
_hover={language !== "" && { bg: "#af5417" }}
onClick={() => this.languageFilter("")}
cursor="pointer"
>
All
</PseudoBox>
{languages.map((c) => (
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
letterSpacing="wide"
fontSize="sm"
bg={language === c ? "#122a4f" : "orange.500"}
textTransform="uppercase"
_hover={language !== c && { bg: "#af5417" }}
onClick={() => this.languageFilter(c)}
cursor="pointer"
>
{c}
</PseudoBox>
))}
</Box>
</Box>
</Box>
</Box>
</Box>
<Box display="flex" flexWrap="wrap" width="100%">
{compLoad.map((comp) => {
const match = queryResults.filter(
(alt) => alt.mainID === comp.id
)
if (match.length > 0) {
return (
<CompGroup
comp={comp}
commercial={comp.commercial}
alts={match}
/>
)
}
})}
</Box>
</Box>
</Box>
</Box>
</Box>
)
}
