Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client: activities - refactor

Browse Source
This commit is contained in:
Sam 2018-05-08 16:42:10 +02:00
parent 9b1335233d
commit 23aa501785
2 changed files with 76 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
mpwo_client/src/components/Activities/ActivityAdd.jsx
View File

@ -2,9 +2,8 @@ import React from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { addActivity } from '../../actions/activities' import FormWithGpx from './ActivityForms/FormWithGpx'
import { getData } from '../../actions/index' import { getData } from '../../actions/index'
import { history } from '../../index'
class AddActivity extends React.Component { class AddActivity extends React.Component {
@ -13,8 +12,7 @@ class AddActivity extends React.Component {
} }
render() { render() {
const { message, onAddSport, sports } = this.props const { message, sports } = this.props
return ( return (
<div> <div>
<Helmet> <Helmet>
@ -34,53 +32,7 @@ class AddActivity extends React.Component {
Add a sport Add a sport
</h2> </h2>
<div className="card-body"> <div className="card-body">
<form <FormWithGpx sports={sports} />
encType="multipart/form-data"
method="post"
onSubmit={event => event.preventDefault()}
>
<div className="form-group">
<label>
Sport:
<select
className="form-control input-lg"
name="sport"
required
>
<option value="" />
{sports.map(sport => (
<option key={sport.id} value={sport.id}>
{sport.label}
</option>
))}
</select>
</label>
</div>
<div className="form-group">
<label>
GPX file:
<input
accept=".gpx"
className="form-control input-lg"
name="gpxFile"
required
type="file"
/>
</label>
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
onClick={event => onAddSport(event)}
value="Submit"
/>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
onClick={() => history.go(-1)}
value="Cancel"
/>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -102,13 +54,5 @@ export default connect(
loadSports: () => { loadSports: () => {
dispatch(getData('sports')) dispatch(getData('sports'))
}, },
onAddSport: event => {
const form = new FormData()
form.append('file', event.target.form.gpxFile.files[0])
form.append(
'data', `{"sport_id": ${event.target.form.sport.value}}`
)
dispatch(addActivity(form))
},
}) })
)(AddActivity) )(AddActivity)

73
mpwo_client/src/components/Activities/ActivityForms/FormWithGpx.jsx Normal file
View File

@ -0,0 +1,73 @@
import React from 'react'
import { connect } from 'react-redux'
import { addActivity } from '../../../actions/activities'
import { history } from '../../../index'
function FormWithGpx (props) {
const { onAddSport, sports } = props
return (
<form
encType="multipart/form-data"
method="post"
onSubmit={event => event.preventDefault()}
>
<div className="form-group">
<label>
Sport:
<select
className="form-control input-lg"
name="sport"
required
>
<option value="" />
{sports.map(sport => (
<option key={sport.id} value={sport.id}>
{sport.label}
</option>
))}
</select>
</label>
</div>
<div className="form-group">
<label>
GPX file:
<input
accept=".gpx"
className="form-control input-lg"
name="gpxFile"
required
type="file"
/>
</label>
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
onClick={event => onAddSport(event)}
value="Submit"
/>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
onClick={() => history.go(-1)}
value="Cancel"
/>
</form>
)
}
export default connect(
() => ({ }),
dispatch => ({
onAddSport: event => {
const form = new FormData()
form.append('file', event.target.form.gpxFile.files[0])
form.append(
'data', `{"sport_id": ${event.target.form.sport.value}}`
)
dispatch(addActivity(form))
},
})
)(FormWithGpx)