48 src/components/auth/LoginForm.js
View file
@@ -1,6 +1,6 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Row, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import { login } from 'APP/src/reducers/actions/users'
import './Form.css'

@@ -40,28 +40,30 @@ class LoginForm extends Component {
render() {
return (
<Row className='LoginForm'>
<h1 className='LoginForm-header'>Log In</h1>
<form className='LoginForm-body' onSubmit={this.handleSubmit}>
<FormGroup controlId='email'>
<ControlLabel>Email</ControlLabel>
<FormControl
type='email'
value={this.state.email}
onChange={this.handleChange('email')}
/>
</FormGroup>
<FormGroup controlId='password'>
<ControlLabel>Password</ControlLabel>
<FormControl
type='password'
value={this.state.password}
onChange={this.handleChange('password')}
/>
</FormGroup>
<Button disabled={this.isInvalid()} className='primary' type='submit'>
Log In
</Button>
</form>
<Col xs={12} sm={6} md={6} lg={6}>
<h1 className='LoginForm-header'>Log In</h1>
<form className='LoginForm-body' onSubmit={this.handleSubmit}>
<FormGroup controlId='email'>
<ControlLabel>Email</ControlLabel>
<FormControl
type='email'
value={this.state.email}
onChange={this.handleChange('email')}
/>
</FormGroup>
<FormGroup controlId='password'>
<ControlLabel>Password</ControlLabel>
<FormControl
type='password'
value={this.state.password}
onChange={this.handleChange('password')}
/>
</FormGroup>
<Button disabled={this.isInvalid()} className='primary' type='submit'>
Log In
</Button>
</form>
</Col>
</Row>
)
}
61 src/components/auth/RegisterForm.js
View file
@@ -1,6 +1,6 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Row, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import axios from 'axios'
import { creatingNewUser } from 'APP/src/reducers/actions/users'
import EmployerFields from './EmployerRegisterFields'
@@ -51,6 +51,7 @@ class RegisterForm extends Component {
? this.state.employment_type.delete(value)
: this.state.employment_type.add(value)
const employment_type = new Set([...this.state.employment_type])
/* ^Using a Set instead of an array because we need the data values to be unique */
this.setState({employment_type})
} else if (type === 'work_auth' || type === 'company_role') {
value === 'select'
@@ -159,34 +160,36 @@ class RegisterForm extends Component {
render() {
return (
<Row className='RegisterForm'>
<h1 className='RegisterForm-header'>Register</h1>
<form className='RegisterForm-body' onSubmit={this.handleSubmit}>
<FormGroup controlId='is_employer' onChange={this.toggleAccountType}>
<ControlLabel>What type of account would you like to create?</ControlLabel>
<FormControl componentClass="select">
<option>select an account type</option>
<option value='employer'>Employer</option>
<option value='applicant'>Applicant</option>
</FormControl>
</FormGroup>
{
this.state.showEmployer &&
<EmployerFields
state={this.state}
handleChange={this.handleChange}
validate={this.getValidationState}
/>
}
{
this.state.showApplicant &&
<ApplicantFields
state={this.state}
handleChange={this.handleChange}
validate={this.getValidationState}
/>
}
<Button disabled={this.isInvalid()} className='primary' type='submit'>Create Account</Button>
</form>
<Col xs={12} sm={6} md={6} lg={6}>
<h1 className='RegisterForm-header'>Register</h1>
<form className='RegisterForm-body' onSubmit={this.handleSubmit}>
<FormGroup controlId='is_employer' onChange={this.toggleAccountType}>
<ControlLabel>What type of account would you like to create?</ControlLabel>
<FormControl componentClass="select">
<option>select an account type</option>
<option value='employer'>Employer</option>
<option value='applicant'>Applicant</option>
</FormControl>
</FormGroup>
{
this.state.showEmployer &&
<EmployerFields
state={this.state}
handleChange={this.handleChange}
validate={this.getValidationState}
/>
}
{
this.state.showApplicant &&
<ApplicantFields
state={this.state}
handleChange={this.handleChange}
validate={this.getValidationState}
/>
}
<Button disabled={this.isInvalid()} className='primary' type='submit'>Create Account</Button>
</form>
</Col>
</Row>
)
}
3 src/components/dashboard/Dashboard.js
View file
@@ -1,7 +1,6 @@
import React, {Component} from 'react'
import React, { Component } from 'react'
import EmployerDashboard from './EmployerDashboard'
import { connect } from 'react-redux'
import { whoami } from '../../reducers/actions/users'

class Dashboard extends Component {

1 src/components/dashboard/EmployerDashboard.js
View file
@@ -4,7 +4,6 @@ import { Button } from 'react-bootstrap'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { gettingUserJobs } from '../../reducers/actions/jobs'
import { whoami } from '../../reducers/actions/users'

class EmployerDashboard extends Component {

19 src/components/home/Home.css
View file
@@ -22,6 +22,7 @@
background: url("../../img/hero.jpg") no-repeat;
background-size: cover;
background-position: top;
background-attachment: fixed;
}

.parallax-content {
@@ -42,13 +43,23 @@

.JobBoard {
min-height: 100vh;
background: #EEEEEE;
z-index: 2;
padding: 15px;
padding: 0 0 35px 0;
}

.JobBoard-search {
margin: 25px auto;
.JobBoard-filter-container {
height: 100px;
background: #12CD6A;
padding: 32px 10px;
box-shadow: 0 -17px 15px -17px #099b4e inset;
}

.Select {
margin: 0;
}

.JobBoard-filter {
margin: 0 auto;
}

@media only screen
39 src/components/home/JobBoard.js
View file
@@ -114,23 +114,24 @@ class JobBoard extends Component {

return (
<Row className='JobBoard'>
<VirtualizedSelect
className='JobBoard-search'
arrowRenderer={arrowRenderer}
autofocus
clearable={true}
searchable={true}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={skills}
onInputChange={(data) => this._handleChange(data)}
onChange={(selectValue) => this._selectSkill( selectValue )}
value={this.state.selectValue}
placeholder="Filter Jobs..."
/>
<div className='JobBoard-filter-container'>
<VirtualizedSelect
className='JobBoard-filter'
arrowRenderer={arrowRenderer}
clearable={true}
searchable={true}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={skills}
onInputChange={(data) => this._handleChange(data)}
onChange={(selectValue) => this._selectSkill( selectValue )}
value={this.state.selectValue}
placeholder="Filter Jobs..."
/>
</div>
{
this.props.loading
? <p>Loading....</p>
@@ -152,6 +153,4 @@ const mapDispatchToProps = dispatch => ({
getSkills: post => dispatch(gettingAllSkills())
})

const JobBoardContainer = connect(mapStateToProps, mapDispatchToProps)(JobBoard)

export default JobBoardContainer
export default connect(mapStateToProps, mapDispatchToProps)(JobBoard)
66 src/components/home/JobCard.css
View file
@@ -0,0 +1,66 @@
@import url(../../fonts.css);

.JobCard {
border-bottom: 2px solid #E4E4E4;
transition: border-bottom .3s ease-in;
padding: 40px 0;
width: 90vw;
margin: auto;
}

.JobCard:hover {
border-bottom: 2px solid #12CD6A;
}

.JobCard-title,
.JobCard-payrate {
font-size: 17px;
font-family: Open Sans Bold;
margin-top: 10px;
}

.JobCard-title,
.JobCard-skills {
margin-left: 10%;
text-align: left;
}

.JobCard-skills {
color: #909090;
font-size: 13px;
}

.JobCard-payrate {
margin-top: 35px;
text-align: right;
}

.JobCard-location {
font-size: 12px;
margin-top: 0px;
font-family: Helvetica Neue;
}

.JobCard-type {
background: #12CD6A;
border-radius: 25px;
color: #FFFFFF;
font-size: 11px;
font-family: Open Sans Bold;
padding: 5px 10px;
margin: 0 5px;
}

@media only screen
and (max-width: 767px) {
.JobCard-title,
.JobCard-skills,
.JobCard-payrate {
margin: 5px;
text-align: center;
}

.JobCard {
padding: 20px 0;
}
}
66 src/components/home/JobList.js
View file
@@ -1,31 +1,43 @@
import React, { Component } from 'react'
import React from 'react'
import './Home.css'
import { Link } from 'react-router-dom'
import { Row, Col } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import './JobCard.css'


class JobList extends Component {

render(){
let jobs = [];
if(this.props.jobs){
this.props.jobs.forEach((data)=>{
const job = data._source
let url = "/job/"+job.id
jobs.push(
<li key={job.id}>
<Link to={url}>{job.title}</Link>
</li>
)
})
}
return(
<div className='JobBoard-cards'>
<ul>
{jobs}
</ul>
</div>
)
}
}
const JobList = props => (
<div className='JobList'>
{props.jobs && props.jobs.map((data, i) => {
const job = data._source
return (
<LinkContainer className='JobCard' key={i} to={`/jobs/${job.id}`}>
<Row>
<Col xs={12} sm={6} md={6} lg={6}>
<h2 className='JobCard-title'>{job.title}</h2>
<p className='JobCard-skills'>{job.skills.map(skill => skill.title).join(', ')}</p>
</Col>
<Col xs={12} sm={6} md={6} lg={6}>
<Row>
<Col xs={12} sm={6} md={6} lg={6}>
<h2 className='JobCard-payrate'>
{job.compensation_type === 'Hourly'
? `${job.pay_rate}/hr`
: job.pay_rate
}
</h2>
</Col>
<Col xs={12} sm={6} md={6} lg={6}>
<p className='JobCard-location'>{`${job.city}, ${job.state}`}</p>
{job.employment_types && job.employment_types.map((type, i) => (
<span key={i} className='JobCard-type'>{type}</span>
))}
</Col>
</Row>
</Col>
</Row>
</LinkContainer>
)
})}
</div>
)

export default JobList
36 src/components/jobs/CreditCard.js
View file
@@ -1,10 +1,11 @@
import React, { Component } from 'react';
import Payment from 'payment';
import { FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { getStripeToken } from './getStripeToken';
import Card from './Card'
import CardLogos from './CardLogos'
import './CreditCard.css'
import '../auth/Form.css'
const Stripe = window.Stripe;
Stripe.setPublishableKey('API_KEY');

@@ -82,25 +83,22 @@ export default class CreditCard extends Component {
const { number, exp_month, exp_year, cvc, token } = this.state;

return (
<div className="CreditCard">
<div className="CreditCardForm-body">
<CardLogos />
<form className="CardForm" onSubmit={ this.handleSubmit }>
<FormGroup>
<ControlLabel>Card Number</ControlLabel>
<FormControl onKeyUp={this.setCardType} ref="number" />
<FormGroup>
<ControlLabel>Card Number</ControlLabel>
<FormControl onKeyUp={this.setCardType} ref="number" />
</FormGroup>
<FormGroup>
<ControlLabel>Expiration</ControlLabel>
<FormGroup type='phone' ref="expiration">
<FormControl className='exp-cvc' placeholder='MM/YYYY' />
</FormGroup>
<FormGroup>
<ControlLabel>Expiration</ControlLabel>
<FormGroup type='phone' ref="expiration">
<FormControl className='exp-cvc' placeholder='MM/YYYY' />
</FormGroup>
</FormGroup>
<FormGroup>
<ControlLabel>CVC</ControlLabel>
<FormControl type='phone' ref="cvc" className='exp-cvc' />
</FormGroup>
<Button type="submit" block>Generate Token</Button>
</form>
</FormGroup>
<FormGroup>
<ControlLabel>CVC</ControlLabel>
<FormControl type='phone' ref="cvc" className='exp-cvc' />
</FormGroup>
{
number &&
<Card
@@ -115,5 +113,3 @@ export default class CreditCard extends Component {
)
}
}

CreditCard.propTypes = {};
76 src/components/jobs/JobDetail.css
View file
@@ -0,0 +1,76 @@
@import url(../../fonts.css);

.JobInfo {
padding: 60px 0 35px 0;
}

.JobInfo-header {
background: #12CD6A;
height: auto;
padding: 25px;
color: #FFFFFF;
font-family: Open Sans Regular;
box-shadow: 0 -17px 15px -17px #099b4e inset;
}

.header-left {
text-align: left;
}

.JobInfo-title {
margin: 0;
font-size: 2em;
}

.JobInfo-employer,
.JobInfo-payrate {
font-size: 17px;
font-family: Open Sans Bold;
margin-top: 10px;
}

.JobInfo-location {
font-size: .75em;
}

.header-right {
text-align: right;
}

.JobInfo-type {
font-size: 11px;
font-family: Open Sans Bold;
color: #12CD6A;
background: #FFFFFF;
border-radius: 25px;
padding: 5px 10px;
margin: 0 0 0 10px;
}

.JobInfo-date {
margin-top: 15px;
font-size: .75em;
}

.JobInfo-summary {
padding: 25px;
}

@media only screen
and (max-width: 767px) {
.JobInfo-header {
padding: 20px;
}
.JobInfo-title {
font-size: 1.5em;
text-align: center;
}
.JobInfo-date {
margin-top: 10px;
}

.header-left,
.header-right {
text-align: center;
}
}
50 src/components/jobs/JobDetailPage.js
View file
@@ -1,50 +1,38 @@
import React, {Component} from 'react'
import JobInfoDisplay from './JobInfoDisplay';
import JobUpdateDisplay from './JobUpdateDisplay';
import React, { Component } from 'react'
import JobInfoDisplay from './JobInfoDisplay'
import JobUpdateDisplay from './JobUpdateDisplay'
import { gettingJobById } from 'APP/src/reducers/actions/jobs'
import { connect } from 'react-redux'

class JobDetailPage extends Component {
componentDidMount(){
this.props.getJob(this.props.match.params.id);
componentDidMount() {
const {id} = this.props.match.params
this.props.getJob(id)
}

render(){
const user = this.props.user
return(
render() {
const {user, job, skills} = this.props
return (
<div className='JobDetailPage'>
{!this.props.loading && this.props.job && this.props.skills &&
<div>
{user && user.is_employer &&
<JobUpdateDisplay user={user} skills={this.props.skills} job={this.props.job}/>
}
{user && !user.is_employer &&
<JobInfoDisplay user={user} skills={this.props.skills} job={this.props.job} />
}
{user === "" &&
<JobInfoDisplay user={null} skills={this.props.skills} job={this.props.job} />
}
</div>
{(user && user.is_employer) && job
&& <JobUpdateDisplay user={user} skills={skills} job={job} />
}
{this.props.loading &&
<div>
Loading...
</div>
{((user && !user.is_employer) || !user) && job
&& <JobInfoDisplay skills={skills} job={job} />
}
</div>
)}
)
}
}

const mapStateToProps = state => ({
user: state.users.currentUser,
skills: state.skills.all,
job: state.jobs.currentJob,
loading: state.loading,
job: state.jobs.currentJob
})

const mapDispatchToProps = dispatch => ({
getJob: job_id => dispatch(gettingJobById(job_id)),
getJob: job_id => dispatch(gettingJobById(job_id))
})

const JobDetailPageContainer = connect(mapStateToProps, mapDispatchToProps)(JobDetailPage)

export default JobDetailPageContainer
export default connect(mapStateToProps, mapDispatchToProps)(JobDetailPage)
110 src/components/jobs/JobInfoDisplay.js
View file
@@ -1,59 +1,85 @@
import React, {Component} from 'react'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Row, Col, Button } from 'react-bootstrap'
import { applyingToJob } from 'APP/src/reducers/actions/jobs'
import './JobDetail.css'

class JobInfoDisplay extends Component {
applyToJob(){
this.props.sendApplication(this.props.user.id, this.props.job.id, this.props.history)

applyToJob = () => {
this.props.sendApplication(
this.props.user.id,
this.props.job.id,
this.props.history
)
}

render(){
const job = this.props.job
const employer = job ? this.props.job.employer : null
const skills = job ? this.props.job.skills : null
const skill_list = []
if (skills) {
skills.forEach((skill) => {
skill_list.push(
<li key={skill.id}>{skill.title}</li>
)
})
render() {
const {job} = this.props
let skill_list, employer, datePosted

if (job) {
employer = job.employer
datePosted = new Date(job.created_at).toDateString()
if (job.skills) {
skill_list = job.skills.map((skill, i) => {
return <li key={i}>{skill.title}</li>
})
}
}
console.log("PROPS", this.props)
return(
<div id='job-display'>
<div>
<h1>Title: {job.title}</h1>
{employer &&
<h3>Company: {employer.name}</h3>}
<p>Description: {job.description}</p>
{job.state && job.city &&
<p>{job.city}, {job.state} {job.country}</p>
}
<p>Telecommute: {job.remote ? "Yes" : "No"}</p>
<p>Pay Rate: {job.pay_rate}</p>
<p>Compensation: {job.compensation}</p>
<p>Travel Requirements: {job.travel_requirements}</p>
<p>Posted Since: {job.created_at}</p>

{skills && <ul>{skill_list.map(skill => skill)}</ul>}
{this.props.user && this.props.user.is_employer === false &&
<button onClick={this.applyToJob.bind(this)}>Apply</button>
}
</div>
</div>

return (
<Row className='JobInfo'>
{job &&
<Col xs={12} sm={12} md={12} lg={12}>
<Row className='JobInfo-header'>
<Col className='header-left' xs={12} sm={6} md={6} lg={6}>
<h1 className='JobInfo-title'>{job.title}</h1>
<h5 className='JobInfo-employer'>{employer.name}</h5>
<p className='JobInfo-location'>{`${job.city}, ${job.state}`}</p>
</Col>
<Col className='header-right' xs={12} sm={6} md={3} mdOffset={3} lg={3} lgOffset={3}>
<h5 className='JobInfo-payrate'>
{job.compensation_type === 'Hourly'
? `Pay: ${job.pay_rate}/hr`
: `Pay: ${job.pay_rate}/yr`
}
</h5>
{job.employment_types && job.employment_types.map((type, i) => (
<span key={i} className='JobInfo-type'>{type}</span>
))}
<p className='JobInfo-date'>{`Posted on ${datePosted}`}</p>
</Col>
</Row>
<Row className='JobInfo-summary'>
<Col xs={12} sm={8} md={8} lg={8}>
<p>{`Description: ${job.description}`}</p>
<p>Key Skills</p>
{skill_list && <ul>{skill_list.map(skill => skill)}</ul>}
</Col>
<Col xs={12} sm={4} md={4} lg={4}>
<Button className='btn-oval' onClick={this.applyToJob}>
APPLY FOR JOB
</Button>
<Button className='btn-oval btn-oval__black'>
SAVE JOB
</Button>
</Col>
</Row>
</Col>
}
</Row>
)
}
}

const mapStateToProps = state => ({
history: state.router.history,
user: state.user,
history: state.router.history
})

const mapDispatchToProps = dispatch => ({
sendApplication: (user_id, job_id, history) => dispatch(applyingToJob(user_id, job_id, history)),
sendApplication: (user_id, job_id, history) => dispatch(applyingToJob(user_id, job_id, history))
})

const JobInfoDisplayContainer = connect(mapStateToProps, mapDispatchToProps)(JobInfoDisplay)

export default JobInfoDisplayContainer
export default connect(mapStateToProps, mapDispatchToProps)(JobInfoDisplay)
63 src/components/jobs/JobUpdateDisplay.js
View file
@@ -1,8 +1,5 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import { updatingJob } from 'APP/src/reducers/actions/skills'
import CreditCard from './CreditCard';
import VirtualizedSelect from 'react-virtualized-select'
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
@@ -30,22 +27,22 @@ class JobUpdateDisplay extends Component {
constructor(props) {
super(props)
this.state = {
title: this.props.job.title || '',
description: this.props.job.description || '',
application_email: this.props.job.application_email || '',
cc_email:this.props.job.cc_email || '',
application_url:this.props.job.application_url || '',
city:this.props.job.city || '',
zip_code:this.props.job.zip_code || '',
selectValue:this.props.job.selectValue || '',
jobValue:this.props.job.jobValue || '',
number: this.props.job.number || null,
exp_month: this.props.job.exp_month || null,
exp_year: this.props.job.exp_year || null,
remote:this.props.job.remote || false,
cvc: this.props.job.cvc || null,
token: this.props.job.token || null,
app_method:this.props.job.app_method || 'email'
title: this.props.job.title || '',
description: this.props.job.description || '',
application_email: this.props.job.application_email || '',
cc_email: this.props.job.cc_email || '',
application_url: this.props.job.application_url || '',
city: this.props.job.city || '',
zip_code: this.props.job.zip_code || '',
selectValue: this.props.job.selectValue || '',
jobValue: this.props.job.jobValue || '',
number: this.props.job.number || null,
exp_month: this.props.job.exp_month || null,
exp_year: this.props.job.exp_year || null,
remote: this.props.job.remote || false,
cvc: this.props.job.cvc || null,
token: this.props.job.token || null,
app_method:this.props.job.app_method || 'email'
}
}

@@ -130,6 +127,7 @@ class JobUpdateDisplay extends Component {
}

render() {
const {job} = this.props
let state_options = []
let skills = []
this.props.skills.forEach((s) => {
@@ -139,6 +137,7 @@ class JobUpdateDisplay extends Component {
state_options.push(<option key={s}>{s}</option>)
})
return (
job &&
<div>
<h1 className='PostJobForm-header'>Post a new job</h1>
<form className='PostJobForm-body' onSubmit={this.handleSubmit}>
@@ -229,19 +228,19 @@ class JobUpdateDisplay extends Component {
<FormGroup controlId='job_types'>
<ControlLabel>Job Types</ControlLabel>
<VirtualizedSelect
arrowRenderer={arrowRenderer}
autofocus
searchable={false}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={job_types}
onChange={(data) => this._selectJobType(data)}
value={this.state.jobValue}
placeholder="Job Types"
/>
arrowRenderer={arrowRenderer}
autofocus
searchable={false}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={job_types}
onChange={(data) => this._selectJobType(data)}
value={this.state.jobValue}
placeholder="Job Types"
/>
</FormGroup>
<FormGroup controlId='compensation'>
<ControlLabel>Compensation Type</ControlLabel>
285 src/components/jobs/PostNewJobForm.js
View file
@@ -1,9 +1,9 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Row, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'
import { creatingNewJob } from 'APP/src/reducers/actions/jobs'
import { gettingAllSkills } from 'APP/src/reducers/actions/skills'
import CreditCard from './CreditCard';
import CreditCardFormControls from './CreditCard';
import VirtualizedSelect from 'react-virtualized-select'
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
@@ -63,7 +63,7 @@ class PostJobForm extends Component {

toggleRemote(){
const remote = !this.state.remote
this.setState({state:remote})
this.setState({state: remote})
}

switchAppMethod(method){
@@ -77,25 +77,25 @@ class PostJobForm extends Component {

clearForm = () => {
this.setState({
title: '',
description: '',
application_email: '',
cc_email: '',
application_url:'',
city:'',
state: '',
zip_code:'',
selectValue:[],
jobValue:[],
pay_rate: '',
compensation_type: 'Salary',
travel_requirements: 'None',
number: null,
exp_month: null,
exp_year: null,
cvc: null,
token: null,
app_method:'email'
title: '',
description: '',
application_email: '',
cc_email: '',
application_url:'',
city:'',
state: '',
zip_code:'',
selectValue:[],
jobValue:[],
pay_rate: '',
compensation_type: 'Salary',
travel_requirements: 'None',
number: null,
exp_month: null,
exp_year: null,
cvc: null,
token: null,
app_method:'email'
})
}

@@ -176,134 +176,133 @@ class PostJobForm extends Component {

return (
<Row className='PostJobForm'>
<h1 className='PostJobForm-header'>Post a new job</h1>
<form className='PostJobForm-body' onSubmit={this.handleSubmit}>
<FormGroup controlId='title'>
<ControlLabel>Job Title</ControlLabel>
<FormControl
type='text'
value={this.state.title}
onChange={this.handleChange('title')}
/>
</FormGroup>
<ControlLabel>
Required Skills (type below and hit 'Enter' to select and 'Backspace to deselect')
</ControlLabel>
<VirtualizedSelect
arrowRenderer={arrowRenderer}
autofocus
clearable={true}
searchable={true}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={skills}
onChange={(data) => this._selectSkill(data)}
value={this.state.selectValue}
/>
<FormGroup controlId='description'>
<ControlLabel>Job Description and Requirements</ControlLabel>
<FormControl
type='text'
componentClass='textarea'
value={this.state.description}
onChange={this.handleChange('description')}
/>
</FormGroup>
<FormGroup controlId='application_email'>
<ControlLabel>Application Email</ControlLabel>
<FormControl
type='email'
value={this.state.application_email}
onChange={this.handleChange('application_email')}
/>
</FormGroup>
<FormGroup controlId='cc_email'>
<ControlLabel>CC Email</ControlLabel>
<FormControl
type='email'
value={this.state.cc_email}
onChange={this.handleChange('cc_email')}
/>
</FormGroup>
<FormGroup controlId='application_url'>
<ControlLabel>Application URL</ControlLabel>
<FormControl
type='url'
value={this.state.application_url}
onChange={this.handleChange('application_url')}
/>
</FormGroup>
<FormGroup controlId='city'>
<ControlLabel>Job City</ControlLabel>
<FormControl
type='city'
value={this.state.city}
onChange={this.handleChange('city')}
/>
</FormGroup>
<FormGroup controlId='state'>
<ControlLabel>State</ControlLabel>
<FormControl componentClass="select">
{state_options}
</FormControl>
</FormGroup>
<FormGroup controlId='zip_code'>
<ControlLabel>Zip Code</ControlLabel>
<FormControl
type='phone'
value={this.state.zip_code}
onChange={this.handleChange('zip_code')}
/>
</FormGroup>
<FormGroup controlId='job_types'>
<ControlLabel>Job Types (select all that apply)</ControlLabel>
<VirtualizedSelect
<Col xs={12} sm={6} md={6} lg={6}>
<h1 className='PostJobForm-header'>Post a new job</h1>
<form className='PostJobForm-body' onSubmit={this.handleSubmit}>
<FormGroup controlId='title'>
<ControlLabel>Job Title</ControlLabel>
<FormControl
type='text'
value={this.state.title}
onChange={this.handleChange('title')}
/>
</FormGroup>
<ControlLabel>
Required Skills (type below and hit 'Enter' to select and 'Backspace to deselect')
</ControlLabel>
<VirtualizedSelect
arrowRenderer={arrowRenderer}
autofocus
searchable={false}
clearable={true}
searchable={true}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={job_types}
onChange={(data) => this._selectJobType(data)}
value={this.state.jobValue}
/>
</FormGroup>
<FormGroup controlId='compensation'>
<ControlLabel>Compensation Type</ControlLabel>
<FormControl componentClass='select' ref='compensation'>
<option value='Salary'>Salary</option>
<option value='Hourly'>Hourly</option>
</FormControl>
</FormGroup>
<FormGroup controlId='pay_rate'>
<ControlLabel>Pay Rate</ControlLabel>
<FormControl
type='phone'
value={this.state.pay_rate}
onChange={this.handleChange('pay_rate')}
options={skills}
onChange={(data) => this._selectSkill(data)}
value={this.state.selectValue}
/>
</FormGroup>
<FormGroup controlId='travel_requirements'>
<ControlLabel>Travel Requirements</ControlLabel>
<FormControl componentClass='select' ref='travel_requirements'>
<option value='None'>None</option>
<option value='Occasional'>Occasional</option>
<option value='25%'>25%</option>
<option value='50%'>50%</option>
<option value='75%'>75%</option>
<option value='100%'>100%</option>
</FormControl>
</FormGroup>
<input type='checkbox' checked={this.state.checked}/>
<Button className='primary' type='submit'>Post Job</Button>
</form>
<CreditCard ref='card' />
<FormGroup controlId='description'>
<ControlLabel>Job Description and Requirements</ControlLabel>
<FormControl
type='text'
componentClass='textarea'
value={this.state.description}
onChange={this.handleChange('description')}
/>
</FormGroup>
<FormGroup controlId='application_email'>
<ControlLabel>Application Email</ControlLabel>
<FormControl
type='email'
value={this.state.application_email}
onChange={this.handleChange('application_email')}
/>
</FormGroup>
<FormGroup controlId='cc_email'>
<ControlLabel>CC Email</ControlLabel>
<FormControl
type='email'
value={this.state.cc_email}
onChange={this.handleChange('cc_email')}
/>
</FormGroup>
<FormGroup controlId='application_url'>
<ControlLabel>Application URL</ControlLabel>
<FormControl
type='url'
value={this.state.application_url}
onChange={this.handleChange('application_url')}
/>
</FormGroup>
<FormGroup controlId='city'>
<ControlLabel>Job City</ControlLabel>
<FormControl
type='city'
value={this.state.city}
onChange={this.handleChange('city')}
/>
</FormGroup>
<FormGroup controlId='state'>
<ControlLabel>State</ControlLabel>
<FormControl componentClass="select">
{state_options}
</FormControl>
</FormGroup>
<FormGroup controlId='zip_code'>
<ControlLabel>Zip Code</ControlLabel>
<FormControl
type='phone'
value={this.state.zip_code}
onChange={this.handleChange('zip_code')}
/>
</FormGroup>
<FormGroup controlId='job_types'>
<ControlLabel>Job Types (select all that apply)</ControlLabel>
<VirtualizedSelect
arrowRenderer={arrowRenderer}
searchable={false}
simpleValue
labelKey='label'
valueKey='value'
ref="job_search"
multi={true}
options={job_types}
onChange={(data) => this._selectJobType(data)}
value={this.state.jobValue}
/>
</FormGroup>
<FormGroup controlId='compensation'>
<ControlLabel>Compensation Type</ControlLabel>
<FormControl componentClass='select' ref='compensation'>
<option value='Salary'>Salary</option>
<option value='Hourly'>Hourly</option>
</FormControl>
</FormGroup>
<FormGroup controlId='pay_rate'>
<ControlLabel>Pay Rate</ControlLabel>
<FormControl
type='phone'
value={this.state.pay_rate}
onChange={this.handleChange('pay_rate')}
/>
</FormGroup>
<FormGroup controlId='travel_requirements'>
<ControlLabel>Travel Requirements</ControlLabel>
<FormControl componentClass='select' ref='travel_requirements'>
<option value='None'>None</option>
<option value='Occasional'>Occasional</option>
<option value='25%'>25%</option>
<option value='50%'>50%</option>
<option value='75%'>75%</option>
<option value='100%'>100%</option>
</FormControl>
</FormGroup>
<CreditCardFormControls ref='card' />
<Button className='primary' type='submit'>Post Job</Button>
</form>
</Col>
</Row>
)
}
3 src/index.css
View file
@@ -1,7 +1,6 @@
@import url(./fonts.css);

body {
background: #F9F9F9;
font-family: Open Sans Semibold;
font-size:21px;
margin: 0;
@@ -14,5 +13,5 @@ body.modal-open {
}

a, a:hover, .active {
text-decoration: none;
text-decoration: none;
}
2 src/index.js
View file
@@ -36,7 +36,7 @@ const App = () => (
<Route exact path='/register' component={RegisterForm} />
<Route exact path='/login' component={LoginForm} />
<Route exact path='/post-new-job' component={PostNewJobForm} />
<Route exact path='/job/:id' component={JobDetailPage} />
<Route exact path='/jobs/:id' component={JobDetailPage} />
<Route exact path='/dashboard' component={Dashboard} />
</Switch>
</Container>
3 src/reducers/actions/jobs.js
View file
@@ -44,9 +44,8 @@ export const applyingToJob = (user_id, job_id, history) => dispatch => {
}

export const gettingUserJobs = (employer) => dispatch => {
console.log('here');
dispatch(requestUserJobs())
axios.get('/api/jobs/employer/'+employer.id)
axios.get(`/api/jobs/employer/${employer.id}`)
.then(res => res.data)
.then(jobs => dispatch(receiveUserJobs(jobs)))
.catch(err => console.error(`Mang, I couldn't find the jobs! ${err.stack}`))
1 src/reducers/actions/users.js
View file
@@ -34,7 +34,6 @@ export const whoami = (history) => dispatch => {
axios.get('/api/auth/whoami')
.then(response => {
const user = response.data
console.log("USER", user)
dispatch(authenticated(user))
if (history) {
typeof user !== 'string'
5 src/reducers/loadingReducer.js
View file
@@ -2,9 +2,10 @@
// and loading animations

import { REQUEST_ALL_JOBS, REQUEST_JOB, CREATE_JOB,
UPDATE_JOB, DELETE_JOB, RECEIVE_ALL_JOBS, RECEIVE_JOB,
UPDATE_JOB, DELETE_JOB, RECEIVE_ALL_JOBS,
RECEIVE_ALL_USERS, AUTHENTICATED,
CREATE_USER, UPDATE_USER, DELETE_USER, REQUEST_ALL_USERS, RECEIVE_ALL_SKILLS } from './constants'
CREATE_USER, UPDATE_USER, DELETE_USER, REQUEST_ALL_USERS,
RECEIVE_ALL_SKILLS } from './constants'

const loadingReducer = (state = false, action) => {
switch (action.type) {
1 src/store.js
View file
@@ -16,5 +16,4 @@ const store = createStore(
export default store

const history = store.getState().router.history || null
console.log("HISTORY", history)
store.dispatch(whoami(history))