Skip to content

Commit 8c29a06

Browse files
mattwr18joaopapereira
mattwr18
authored and
joaopapereira
committed
Refactor to make CreateEventPage the parent component
1 parent 88436fb commit 8c29a06

File tree

5 files changed

+282
-245
lines changed

5 files changed

+282
-245
lines changed

‎src/components/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import PremiumF2FMembershipPage from '../containers/PremiumF2FMembershipPage'
1919
import GettingStartedPage from '../containers/GettingStartedPage'
2020
import EventsList from '../containers/EventsList'
2121
import EventInfo from '../containers/EventInfo'
22-
import EventForm from '../containers/EventForm'
22+
import CreateEventPage from '../containers/CreateEventPage'
2323
import { withCookies } from 'react-cookie'
2424

2525
class App extends Component {
@@ -77,7 +77,7 @@ class App extends Component {
7777
<Route exact path='/events' component={EventsList} />
7878
<Route path='/events/new' render={props => {
7979
return (
80-
<EventForm
80+
<CreateEventPage
8181
{...props}
8282
cookies={this.props.cookies}
8383
/>)

‎src/components/CreateEventPage.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/components/EventForm.js‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React, { Fragment } from 'react'
2+
import { Button, Form, Grid, Container } from 'semantic-ui-react'
3+
import DatePicker from 'react-datepicker'
4+
import { Link } from 'react-router-dom'
5+
import TimezonesSelect from './TimezonesSelect'
6+
import ProjectsSelect from './ProjectsSelect'
7+
import EventCategorySelect from './EventCategorySelect'
8+
import EventForSelect from './EventForSelect'
9+
import EventRepeatsSelect from './EventRepeatsSelect'
10+
import DaysOfTheWeekSelect from './DaysOfTheWeekSelect'
11+
import EventRepeatEndsSelect from './EventRepeatEndsSelect'
12+
13+
import 'react-datepicker/dist/react-datepicker.css'
14+
import '../assets/eventForm.css'
15+
export const EventForm = props => {
16+
const {
17+
name,
18+
category,
19+
eventFor,
20+
projects,
21+
projectId,
22+
description,
23+
startDate,
24+
endDate,
25+
timezones,
26+
duration,
27+
repeats,
28+
repeatEnds,
29+
handleChange,
30+
handleStartDateChange,
31+
handleEndDateChange,
32+
handleSubmit
33+
} = props
34+
return (
35+
<Container>
36+
<Form onSubmit={handleSubmit}>
37+
<Grid columns={2}>
38+
<Grid.Column width={8}>
39+
<Form.Input
40+
label='Name'
41+
name='name'
42+
value={name}
43+
onChange={handleChange}
44+
required
45+
/>
46+
<Form.TextArea
47+
label='Description'
48+
name='description'
49+
value={description}
50+
onChange={handleChange}
51+
/>
52+
<Grid columns={2}>
53+
<Grid.Row>
54+
<Grid.Column>
55+
<div className='field'>
56+
<label>Start Date</label>
57+
<DatePicker
58+
selected={startDate}
59+
onChange={handleStartDateChange}
60+
name='startDate'
61+
/>
62+
</div>
63+
</Grid.Column>
64+
<Grid.Column>
65+
<div className='field'>
66+
<label>Start Time</label>
67+
<DatePicker
68+
selected={startDate}
69+
onChange={handleStartDateChange}
70+
showTimeSelect
71+
showTimeSelectOnly
72+
timeIntervals={15}
73+
dateFormat='h:mm aa'
74+
timeCaption='Time'
75+
/>
76+
</div>
77+
</Grid.Column>
78+
</Grid.Row>
79+
</Grid>
80+
<TimezonesSelect timezones={timezones} handleChange={handleChange} />
81+
<Form.Input
82+
label='Duration'
83+
name='duration'
84+
type='number'
85+
value={duration}
86+
onChange={handleChange}
87+
required
88+
/>
89+
</Grid.Column>
90+
<Grid.Column width={8} >
91+
<EventCategorySelect category={category} handleChange={handleChange} />
92+
<EventForSelect eventFor={eventFor} handleChange={handleChange} />
93+
<ProjectsSelect projectId={projectId} projects={projects} handleChange={handleChange} />
94+
<EventRepeatsSelect repeats={repeats} handleChange={handleChange} />
95+
{repeats && repeats !== 'never' ? (
96+
<Fragment>
97+
<DaysOfTheWeekSelect handleChange={handleChange} />
98+
<EventRepeatEndsSelect handleChange={handleChange} />
99+
</Fragment>
100+
) : null}
101+
{repeats && repeatEnds === 'on' ? (
102+
<Fragment>
103+
<div className='field'>
104+
<label>End Date</label>
105+
<DatePicker
106+
selected={endDate}
107+
onChange={handleEndDateChange}
108+
name='endDate'
109+
/>
110+
</div>
111+
</Fragment>
112+
) : null}
113+
<br />
114+
</Grid.Column>
115+
<Grid.Column width={8}>
116+
<Link to={'/events'}>
117+
<Button fluid className='event-cancel-button' primary>Cancel</Button>
118+
</Link>
119+
</Grid.Column>
120+
<Grid.Column width={8}>
121+
<Button type='submit' fluid className='event-save-button' secondary>Save</Button>
122+
</Grid.Column>
123+
</Grid>
124+
</Form>
125+
</Container>
126+
)
127+
}
128+
129+
export default EventForm

‎src/containers/CreateEventPage.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import React, { Component, Fragment } from 'react'
2+
import { connect } from 'react-redux'
3+
import { Header } from 'semantic-ui-react'
4+
import EventForm from '../components/EventForm'
5+
import { fetchActiveProjects } from '../actions/fetchActiveProjectsAction'
6+
import { setLastLocation } from '../actions/setLastLocationAction'
7+
import { createEvent } from '../actions/createEventAction'
8+
import moment from 'moment'
9+
import momentTZ from 'moment-timezone'
10+
11+
export class CreateEventPage extends Component {
12+
state = {
13+
projects: null,
14+
startDate: new Date(),
15+
endDate: new Date(),
16+
name: '',
17+
category: 'PairProgramming',
18+
eventFor: 'All',
19+
projectId: 64,
20+
description: '',
21+
timezones: momentTZ.tz.guess(),
22+
duration: 30,
23+
repeats: 'never',
24+
weekdays: [],
25+
repeatEnds: ''
26+
};
27+
28+
componentDidMount () {
29+
const path = this.props.location.pathname
30+
this.props.setLastLocation(path)
31+
if (!this.props.cookies.get('_WebsiteOne_session') && !this.props.loggedInUser.data) {
32+
this.props.history.push({ pathname: '/login' })
33+
}
34+
if (!this.props.projects.length) {
35+
this.props.fetchActiveProjects()
36+
} else {
37+
this.setState({ projects: this.props.projects })
38+
}
39+
}
40+
41+
componentWillReceiveProps (nextProps) {
42+
if (this.props.projects !== nextProps.projects) {
43+
this.setState({ projects: nextProps.projects })
44+
}
45+
}
46+
47+
handleChange = (e, { name, value }) => {
48+
this.setState({ [name]: value })
49+
};
50+
51+
handleStartDateChange = date => {
52+
this.setState({ startDate: date })
53+
};
54+
55+
handleEndDateChange = date => {
56+
this.setState({ endDate: date })
57+
};
58+
59+
handleSubmit = event => {
60+
event.preventDefault()
61+
const {
62+
name,
63+
category,
64+
eventFor,
65+
projectId,
66+
description,
67+
startDate,
68+
timezones,
69+
duration,
70+
repeats,
71+
weekdays,
72+
repeatEnds,
73+
endDate
74+
} = this.state
75+
const startTime = moment(startDate).format('h:mm a')
76+
const startDateFormatted = moment(startDate).format('YYYYMMDD')
77+
const weekdaysLowerCase = weekdays.map(day => day.toLowerCase())
78+
const { history, createEvent } = this.props
79+
const headers = this.props.cookies.get('_WebsiteOne_session')
80+
createEvent({
81+
headers,
82+
history,
83+
name,
84+
category,
85+
eventFor,
86+
projectId,
87+
description,
88+
startDate,
89+
startDateFormatted,
90+
startTime,
91+
timezones,
92+
duration,
93+
repeats,
94+
weekdaysLowerCase,
95+
repeatEnds,
96+
endDate
97+
})
98+
};
99+
100+
render () {
101+
const {
102+
name,
103+
category,
104+
eventFor,
105+
projectId,
106+
description,
107+
startDate,
108+
timezones,
109+
duration,
110+
repeats,
111+
weekdays,
112+
repeatEnds,
113+
endDate
114+
} = this.state
115+
return (
116+
<Fragment>
117+
<Header as='h1' textAlign='center'>
118+
Creating a new Event
119+
</Header>
120+
<EventForm
121+
handleSubmit={this.handleSubmit}
122+
handleChange={this.handleChange}
123+
handleStartDateChange={this.handleStartDateChange}
124+
handleEndDateChange={this.handleEndDateChange}
125+
name={name}
126+
category={category}
127+
eventFor={eventFor}
128+
projectId={projectId}
129+
description={description}
130+
startDate={startDate}
131+
timezones={timezones}
132+
duration={duration}
133+
repeats={repeats}
134+
weekdays={weekdays}
135+
repeatEnds={repeatEnds}
136+
endDate={endDate}
137+
/>
138+
</Fragment>
139+
)
140+
}
141+
}
142+
143+
const mapStateToProps = (store, ownProps) => ({
144+
projects: store.projects,
145+
cookies: ownProps.cookies,
146+
loggedInUser: store.loggedInUser
147+
})
148+
export default connect(
149+
mapStateToProps,
150+
{ fetchActiveProjects, createEvent, setLastLocation }
151+
)(CreateEventPage)

0 commit comments

Comments
 (0)