Client: refactor

mpwo_client/e2e/activities.test.js

@@ -24,7 +24,7 @@ test('standard user should be able to add a workout (w/o gpx)', async t => {
   await t
     .navigateTo(`${TEST_URL}/activities/add`)
     .expect(Selector('H1').withText('Dashboard').exists).notOk()
-    .expect(Selector('H2').withText('Add a sport').exists).ok()
+    .expect(Selector('H2').withText('Add an activity').exists).ok()
     .click(Selector('input[name="withoutGpx"]'))
     .click(Selector('select').filter('[name="sport_id"]'))
     .click(Selector('option').filter('[value="1"]'))

mpwo_client/src/components/Activities/ActivityAdd.jsx

@@ -1,91 +1,24 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
-import FormWithGpx from './ActivityForms/FormWithGpx'
-import FormWithoutGpx from './ActivityForms/FormWithoutGpx'
+import ActivityAddOrEdit from './ActivityAddOrEdit'
 import { getData } from '../../actions/index'
 
 
-class AddActivity extends React.Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      withGpx: true,
-    }
-  }
-
+class ActivityAdd extends React.Component {
   componentDidMount() {
       this.props.loadSports()
   }
 
-  handleRadioChange (changeEvent) {
-    this.setState({
-      withGpx:
-        changeEvent.target.name === 'withGpx'
-          ? changeEvent.target.value : !changeEvent.target.value
-    })
-  }
-
   render() {
     const { message, sports } = this.props
-    const { withGpx } = this.state
     return (
       <div>
-        <Helmet>
-          <title>mpwo - Add an activity</title>
-        </Helmet>
-        <br /><br />
-        {message && (
-          <code>{message}</code>
-        )}
-
-        <div className="container">
-          <div className="row">
-            <div className="col-md-2" />
-            <div className="col-md-8">
-              <div className="card add-activity">
-                <h2 className="card-header text-center">
-                  Add a sport
-                </h2>
-                <div className="card-body">
-                  <form>
-                    <div className="form-group row">
-                      <div className="col">
-                        <label className="radioLabel">
-                        <input
-                          type="radio"
-                          name="withGpx"
-                          checked={withGpx}
-                          onChange={event => this.handleRadioChange(event)}
-                        />
-                          with gpx file
-                        </label>
-                      </div>
-                      <div className="col">
-                        <label className="radioLabel">
-                        <input
-                          type="radio"
-                          name="withoutGpx"
-                          checked={!withGpx}
-                          onChange={event => this.handleRadioChange(event)}
-                        />
-                          without gpx file
-                        </label>
-                      </div>
-                    </div>
-                  </form>
-                  {withGpx ? (
-                    <FormWithGpx sports={sports} />
-                  ) : (
-                    <FormWithoutGpx sports={sports} />
-                  )}
-                </div>
-              </div>
-            </div>
-            <div className="col-md-2" />
-          </div>
-        </div>
+        <ActivityAddOrEdit
+          activity={null}
+          message={message}
+          sports={sports}
+        />
       </div>
     )
   }
@@ -102,4 +35,4 @@ export default connect(
       dispatch(getData('sports'))
     },
   })
-)(AddActivity)
+)(ActivityAdd)

mpwo_client/src/components/Activities/ActivityAddOrEdit.jsx

@@ -21,14 +21,20 @@ export default class ActivityAddEdit extends React.Component {
   }
 
   render() {
-    const { activity, sports } = this.props
+    const { activity, message, sports } = this.props
     const { withGpx } = this.state
     return (
       <div>
         <Helmet>
-          <title>mpwo - Add an activity</title>
+          <title>mpwo - {activity
+            ? 'Edit an activity'
+            : 'Add an activity'}
+            </title>
         </Helmet>
         <br /><br />
+        {message && (
+          <code>{message}</code>
+        )}
         <div className="container">
           <div className="row">
             <div className="col-md-2" />

mpwo_client/src/components/Activities/ActivityEdit.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
 import ActivityAddOrEdit from './ActivityAddOrEdit'
@@ -18,16 +17,10 @@ class ActivityEdit extends React.Component {
     const [activity] = activities
     return (
       <div>
-        <Helmet>
-          <title>mpwo - Edit activity</title>
-        </Helmet>
-        <br /><br />
-        {message && (
-          <code>{message}</code>
-        )}
         {sports.length > 0 && (
           <ActivityAddOrEdit
             activity={activity}
+            message={message}
             sports={sports}
           />
         )}

mpwo_client/src/components/App.css

@@ -58,7 +58,7 @@ input, textarea {
 }
 
 .activity-card {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
 }
 
 .add-activity {

mpwo_client/src/components/Dashboard/ActivityCard.jsx

@@ -5,7 +5,7 @@ export default function ActivityCard (props) {
   const { activity, sports } = props
 
   return (
-    <div className="card activity-card">
+    <div className="card activity-card text-center">
       <div className="card-header">
         <Link to={`/activities/${activity.id}`}>
         {sports.filter(sport => sport.id === activity.sport_id)