Skip to content

Commit f11a198

Browse files
ALukoninALukonin
authored
175-add-resources-to-application-from (#229)
1 parent 9cfc7de commit f11a198

File tree

5 files changed

+21971
-56
lines changed

5 files changed

+21971
-56
lines changed

‎components/form/index.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { CheckCircle } from 'phosphor-react'
44
import { rem } from 'polished'
55
import styled from 'styled-components'
66

7-
import { Button, Input, Text, TextArea } from 'components'
7+
import { Button, Input, MultiSelect, Text, TextArea } from 'components'
88
import { TABLET_SMALL_SIZE } from 'styles/constants'
99

1010
const FormContainer = styled.div`
@@ -31,23 +31,30 @@ const Form = () => {
3131
email: '',
3232
info: '',
3333
name: '',
34+
resources: null,
3435
})
3536

3637
const onChange = (e) => {
3738
setState({ ...state, [e.target.name]: e.target.value })
3839
}
3940

41+
const onMultiSelect = (e) => {
42+
setState({...state, resources: e })
43+
}
44+
4045
const onClick = async (e) => {
4146
e.preventDefault()
4247
setHasErrors(false)
4348
try {
49+
// Convert to a readable string for the Google Sheet
50+
const parsedResources = state.resources ? state.resources.map( res => res.label).join(', ') : null
4451
const res = await fetch(process.env.NEXT_PUBLIC_HELIX_HOST, {
4552
method: 'POST',
4653
headers: {
4754
Accept: 'application/json',
4855
'Content-Type': 'application/json',
4956
},
50-
body: JSON.stringify(state),
57+
body: JSON.stringify({...state, resources: parsedResources }),
5158
})
5259
if (res.status !== 200) {
5360
return setHasErrors(true)
@@ -112,8 +119,24 @@ const Form = () => {
112119
value: state.email,
113120
}}
114121
/>
122+
<MultiSelect {... {
123+
name: 'selectResources',
124+
onChange: onMultiSelect,
125+
value: state.resources,
126+
options: [
127+
{ value: 'angellist', label: 'AngelList' },
128+
{ value: 'blog', label: 'Blog' },
129+
{ value: 'event', label: 'Event' },
130+
{ value: 'linkedin', label: 'LinkedIn' },
131+
{ value: 'linkedin_connection', label: 'LinkedIn Connection' },
132+
{ value: 'twitter', label: 'Twitter' },
133+
{ value: 'wordofmouth', label: 'Word of Mouth' },
134+
{ value: 'youtube', label: 'YouTube' },
135+
],
136+
}} />
115137
<TextArea
116138
{...{
139+
maxlength: 1024,
117140
name: 'info',
118141
onChange,
119142
placeholder:

‎components/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export * from './media'
22
export { default as ArticlePreview } from './article-preview'
3-
export { Button, ApplyLink } from './button'
3+
export { ApplyLink, Button } from './button'
44
export { default as CompanyLogo } from './company-logo'
55
export { default as Footer } from './footer'
66
export { default as Form } from './form'
@@ -11,6 +11,7 @@ export { default as Logo } from './logo'
1111
export { default as Page } from './page'
1212
export { default as RowContainer } from './row-container'
1313
export { default as SectionSeparator } from './section-separator'
14+
export { default as MultiSelect } from './select/multiselect'
1415
export { default as SiteHeader } from './site-header'
1516
export { default as SiteLinks } from './site-links'
1617
export { default as SocialIcons } from './social-icons'

‎components/select/multiselect.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { array } from 'prop-types'
2+
import Select from 'react-select'
3+
4+
const selectStyles = {
5+
control: styles => ({
6+
...styles,
7+
backgroundColor: 'rgba(236, 236, 236, 0.1)',
8+
width: '100%',
9+
minHeight: '50px',
10+
border: '0',
11+
padding: '6px 24px',
12+
borderRadius: '4px',
13+
marginBottom: '2rem',
14+
fontFamily: 'lato',
15+
fontWeight: '400',
16+
fontSize: '14px',
17+
textAlign: 'left',
18+
}),
19+
placeholder: styles => ({
20+
...styles,
21+
fontFamily: 'lato',
22+
fontWeight: '400',
23+
fontSize: '15px',
24+
opacity: '0.3 !important',
25+
}),
26+
menu: styles => ({
27+
...styles,
28+
backgroundColor: 'rgba(32,28,68, 0.8)',
29+
}),
30+
valueContainer: (styles) => ({
31+
...styles,
32+
overflow: 'inherit',
33+
padding: '0 0 0 0',
34+
}),
35+
multiValue: (styles) => ({
36+
...styles,
37+
color: '#fff',
38+
backgroundColor: 'transparent',
39+
}),
40+
multiValueLabel: (styles) => ({
41+
...styles,
42+
color: '#fff',
43+
fontFamily: 'lato',
44+
fontWeight: '400',
45+
fontSize: '14px',
46+
padding: '0 0 0 0',
47+
}),
48+
multiValueRemove: (styles) => ({
49+
...styles,
50+
':hover': {
51+
color:'#aaa',
52+
backgroundColor: 'transparent',
53+
},
54+
}),
55+
option: (styles, { isFocused, isSelected }) => {
56+
const optionsStyles = {
57+
...styles,
58+
':active': {
59+
...styles,
60+
backgroundColor: '#452643',
61+
},
62+
}
63+
if ( isFocused ) {
64+
optionsStyles.backgroundColor = '#0a0b24'
65+
} else if ( isSelected ) {
66+
optionsStyles.color = '#fff'
67+
optionsStyles.backgroundColor = 'transparent'
68+
}
69+
return optionsStyles
70+
},
71+
}
72+
73+
const MultiSelect = ({ options, ...props}) => (
74+
<Select
75+
{...props}
76+
isMulti
77+
placeholder='What Commit resources have you seen prior to applying?'
78+
closeMenuOnSelect={false}
79+
styles={selectStyles}
80+
options={options}
81+
/>
82+
)
83+
84+
MultiSelect.propTypes = {
85+
options: array.isRequired,
86+
}
87+
88+
export default MultiSelect

0 commit comments

Comments
 (0)