Client - reformat js files w/ prettier

2019-08-28 15:35:22 +02:00
parent c8ea44eecc
commit 2a52b9081d
57 changed files with 1148 additions and 1252 deletions
--- a/fittrackee_client/src/components/Activity/ActivityAdd.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityAdd.jsx
@ -3,24 +3,17 @@ import { connect } from 'react-redux'

 import ActivityAddOrEdit from './ActivityAddOrEdit'

-
-function ActivityAdd (props) {
+function ActivityAdd(props) {
  const { message, sports } = props
  return (
    <div>
-      <ActivityAddOrEdit
-        activity={null}
-        message={message}
-        sports={sports}
-      />
+      <ActivityAddOrEdit activity={null} message={message} sports={sports} />
    </div>
  )
 }

-export default connect(
-  state => ({
-    message: state.message,
-    sports: state.sports.data,
-    user: state.user,
-  }),
-)(ActivityAdd)
+export default connect(state => ({
+  message: state.message,
+  sports: state.sports.data,
+  user: state.user,
+}))(ActivityAdd)
--- a/fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityAddOrEdit.jsx
@ -13,11 +13,12 @@ class ActivityAddEdit extends React.Component {
    }
  }

-  handleRadioChange (changeEvent) {
+  handleRadioChange(changeEvent) {
    this.setState({
      withGpx:
        changeEvent.target.name === 'withGpx'
-          ? changeEvent.target.value : !changeEvent.target.value
+          ? changeEvent.target.value
+          : !changeEvent.target.value,
    })
  }

@ -27,15 +28,13 @@ class ActivityAddEdit extends React.Component {
    return (
      <div>
        <Helmet>
-          <title>FitTrackee - {activity
-            ? 'Edit a workout'
-            : 'Add a workout'}
-            </title>
+          <title>
+            FitTrackee - {activity ? 'Edit a workout' : 'Add a workout'}
+          </title>
        </Helmet>
-        <br /><br />
-        {message && (
-          <code>{message}</code>
-        )}
+        <br />
+        <br />
+        {message && <code>{message}</code>}
        <div className="container">
          <div className="row">
            <div className="col-md-2" />
@ -57,27 +56,31 @@ class ActivityAddEdit extends React.Component {
                        <div className="form-group row">
                          <div className="col">
                            <label className="radioLabel">
-                            <input
-                              className="add-activity-radio"
-                              type="radio"
-                              name="withGpx"
-                              disabled={loading}
-                              checked={withGpx}
-                              onChange={event => this.handleRadioChange(event)}
-                            />
+                              <input
+                                className="add-activity-radio"
+                                type="radio"
+                                name="withGpx"
+                                disabled={loading}
+                                checked={withGpx}
+                                onChange={event =>
+                                  this.handleRadioChange(event)
+                                }
+                              />
                              with gpx file
                            </label>
                          </div>
                          <div className="col">
                            <label className="radioLabel">
-                            <input
-                              className="add-activity-radio"
-                              type="radio"
-                              name="withoutGpx"
-                              disabled={loading}
-                              checked={!withGpx}
-                              onChange={event => this.handleRadioChange(event)}
-                            />
+                              <input
+                                className="add-activity-radio"
+                                type="radio"
+                                name="withoutGpx"
+                                disabled={loading}
+                                checked={!withGpx}
+                                onChange={event =>
+                                  this.handleRadioChange(event)
+                                }
+                              />
                              without gpx file
                            </label>
                          </div>
@ -101,8 +104,6 @@ class ActivityAddEdit extends React.Component {
  }
 }

-export default connect(
-  state => ({
-    loading: state.loading
-  }),
-)(ActivityAddEdit)
+export default connect(state => ({
+  loading: state.loading,
+}))(ActivityAddEdit)
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCardHeader.jsx
@ -4,26 +4,30 @@ import { Link } from 'react-router-dom'
 import { getDateWithTZ } from '../../../utils'
 import { formatActivityDate } from '../../../utils/activities'

-
 export default function ActivityCardHeader(props) {
  const {
-    activity, dataType, displayModal, segmentId, sport, title, user
+    activity,
+    dataType,
+    displayModal,
+    segmentId,
+    sport,
+    title,
+    user,
  } = props
  const activityDate = activity
-    ? formatActivityDate(
-        getDateWithTZ(activity.activity_date, user.timezone)
-      )
+    ? formatActivityDate(getDateWithTZ(activity.activity_date, user.timezone))
    : null

-  const previousUrl = dataType === 'segment' && segmentId !== 1
-    ? `/activities/${activity.id}/segment/${segmentId - 1}`
-    : dataType === 'activity' && activity.previous_activity
+  const previousUrl =
+    dataType === 'segment' && segmentId !== 1
+      ? `/activities/${activity.id}/segment/${segmentId - 1}`
+      : dataType === 'activity' && activity.previous_activity
      ? `/activities/${activity.previous_activity}`
      : null
-    const nextUrl =
-      dataType === 'segment' && segmentId < activity.segments.length
-    ? `/activities/${activity.id}/segment/${segmentId + 1}`
-    : dataType === 'activity' && activity.next_activity
+  const nextUrl =
+    dataType === 'segment' && segmentId < activity.segments.length
+      ? `/activities/${activity.id}/segment/${segmentId + 1}`
+      : dataType === 'activity' && activity.next_activity
      ? `/activities/${activity.next_activity}`
      : null

@ -32,10 +36,7 @@ export default function ActivityCardHeader(props) {
      <div className="row">
        <div className="col-auto">
          {previousUrl ? (
-            <Link
-              className="unlink"
-              to={previousUrl}
-            >
+            <Link className="unlink" to={previousUrl}>
              <i
                className="fa fa-chevron-left"
                aria-hidden="true"
@ -51,35 +52,29 @@ export default function ActivityCardHeader(props) {
          )}
        </div>
        <div className="col-auto col-activity-logo">
-          <img
-            className="sport-img-medium"
-            src={sport.img}
-            alt="sport logo"
-          />
+          <img className="sport-img-medium" src={sport.img} alt="sport logo" />
        </div>
        <div className="col">
          {dataType === 'activity' ? (
-          <>
-            {title}{' '}
-            <Link
-              className="unlink"
-              to={`/activities/${activity.id}/edit`}
-            >
+            <>
+              {title}{' '}
+              <Link className="unlink" to={`/activities/${activity.id}/edit`}>
+                <i
+                  className="fa fa-edit custom-fa"
+                  aria-hidden="true"
+                  title="Edit activity"
+                />
+              </Link>
              <i
-                className="fa fa-edit custom-fa"
+                className="fa fa-trash custom-fa"
                aria-hidden="true"
-                title="Edit activity"
+                onClick={() => displayModal(true)}
+                title="Delete activity"
              />
-            </Link>
-            <i
-              className="fa fa-trash custom-fa"
-              aria-hidden="true"
-              onClick={() => displayModal(true)}
-              title="Delete activity"
-            />
-          </>
+            </>
          ) : (
            <>
+              {/* prettier-ignore */}
              <Link
                to={`/activities/${activity.id}`}
              >
@ -91,16 +86,13 @@ export default function ActivityCardHeader(props) {
          <br />
          {activityDate && (
            <span className="activity-date">
-          {`${activityDate.activity_date} - ${activityDate.activity_time}`}
-        </span>
+              {`${activityDate.activity_date} - ${activityDate.activity_time}`}
+            </span>
          )}
        </div>
        <div className="col-auto">
          {nextUrl ? (
-            <Link
-              className="unlink"
-              to={nextUrl}
-            >
+            <Link className="unlink" to={nextUrl}>
              <i
                className="fa fa-chevron-right"
                aria-hidden="true"
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx
@ -2,20 +2,26 @@ import { format } from 'date-fns'
 import React from 'react'
 import { connect } from 'react-redux'
 import {
-   Area, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis
+  Area,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from 'recharts'

 import {
-  getActivityChartData, getSegmentChartData
+  getActivityChartData,
+  getSegmentChartData,
 } from '../../../actions/activities'

-
 class ActivityCharts extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      displayDistance: true,
-      dataToHide: []
+      dataToHide: [],
    }
  }

@ -28,13 +34,15 @@ class ActivityCharts extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    if (this.props.dataType === 'activity' && (
-      prevProps.activity.id !== this.props.activity.id)
+    if (
+      this.props.dataType === 'activity' &&
+      prevProps.activity.id !== this.props.activity.id
    ) {
-        this.props.loadActivityData(this.props.activity.id)
+      this.props.loadActivityData(this.props.activity.id)
    }
-    if (this.props.dataType === 'segment' && (
-      prevProps.segmentId !== this.props.segmentId)
+    if (
+      this.props.dataType === 'segment' &&
+      prevProps.segmentId !== this.props.segmentId
    ) {
      this.props.loadSegmentData(this.props.activity.id, this.props.segmentId)
    }
@ -44,16 +52,16 @@ class ActivityCharts extends React.Component {
    this.props.loadActivityData(null)
  }

-  handleRadioChange (changeEvent) {
+  handleRadioChange(changeEvent) {
    this.setState({
      displayDistance:
        changeEvent.target.name === 'distance'
          ? changeEvent.target.value
-          : !changeEvent.target.value
+          : !changeEvent.target.value,
    })
  }

-  handleLegendChange (e) {
+  handleLegendChange(e) {
    const { dataToHide } = this.state
    const name = e.target.name // eslint-disable-line prefer-destructuring
    if (dataToHide.find(d => d === name)) {
@ -64,7 +72,7 @@ class ActivityCharts extends React.Component {
    this.setState({ dataToHide })
  }

-  displayData (name) {
+  displayData(name) {
    const { dataToHide } = this.state
    return !dataToHide.find(d => d === name)
  }
@ -141,22 +149,27 @@ class ActivityCharts extends React.Component {
                    label={{ value: xDataKey, offset: 0, position: 'bottom' }}
                    scale={xScale}
                    interval={xInterval}
-                    tickFormatter={value => displayDistance
-                                            ? value
-                                            : format(value, 'HH:mm:ss')}
+                    tickFormatter={value =>
+                      displayDistance ? value : format(value, 'HH:mm:ss')
+                    }
                    type="number"
                  />
                  <YAxis
                    label={{
-                      value: 'speed (km/h)', angle: -90, position: 'left'
+                      value: 'speed (km/h)',
+                      angle: -90,
+                      position: 'left',
                    }}
                    yAxisId="left"
                  />
                  <YAxis
                    label={{
-                      value: 'altitude (m)', angle: -90, position: 'right'
+                      value: 'altitude (m)',
+                      angle: -90,
+                      position: 'right',
                    }}
-                    yAxisId="right" orientation="right"
+                    yAxisId="right"
+                    orientation="right"
                  />
                  {this.displayData('elevation') && (
                    <Area
@ -181,9 +194,11 @@ class ActivityCharts extends React.Component {
                    />
                  )}
                  <Tooltip
-                    labelFormatter={value => displayDistance
-                                    ? `distance: ${value} km`
-                                    : `duration: ${format(value, 'HH:mm:ss')}`}
+                    labelFormatter={value =>
+                      displayDistance
+                        ? `distance: ${value} km`
+                        : `duration: ${format(value, 'HH:mm:ss')}`
+                    }
                  />
                </ComposedChart>
              </ResponsiveContainer>
@ -202,7 +217,7 @@ class ActivityCharts extends React.Component {

 export default connect(
  state => ({
-    chartData: state.chartData
+    chartData: state.chartData,
  }),
  dispatch => ({
    loadActivityData: activityId => {
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityDetails.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityDetails.jsx
@ -8,20 +8,14 @@ export default function ActivityDetails(props) {
  return (
    <div className="activity-details">
      <p>
-        <i
-          className="fa fa-clock-o custom-fa"
-          aria-hidden="true"
-        />
+        <i className="fa fa-clock-o custom-fa" aria-hidden="true" />
        Duration: {activity.moving}
-        {activity.records && activity.records.find(r => r.record_type === 'LD'
-        ) && (
-          <sup>
-            <i
-              className="fa fa-trophy custom-fa"
-              aria-hidden="true"
-            />
-          </sup>
-        )}
+        {activity.records &&
+          activity.records.find(r => r.record_type === 'LD') && (
+            <sup>
+              <i className="fa fa-trophy custom-fa" aria-hidden="true" />
+            </sup>
+          )}
        {withPauses && (
          <span>
            <br />
@ -30,47 +24,32 @@ export default function ActivityDetails(props) {
        )}
      </p>
      <p>
-        <i
-          className="fa fa-road custom-fa"
-          aria-hidden="true"
-        />
+        <i className="fa fa-road custom-fa" aria-hidden="true" />
        Distance: {activity.distance} km
-        {activity.records && activity.records.find(r => r.record_type === 'FD'
-        ) && (
-          <sup>
-            <i
-              className="fa fa-trophy custom-fa"
-              aria-hidden="true"
-            />
-          </sup>
-        )}
+        {activity.records &&
+          activity.records.find(r => r.record_type === 'FD') && (
+            <sup>
+              <i className="fa fa-trophy custom-fa" aria-hidden="true" />
+            </sup>
+          )}
      </p>
      <p>
-        <i
-          className="fa fa-tachometer custom-fa"
-          aria-hidden="true"
-        />
+        <i className="fa fa-tachometer custom-fa" aria-hidden="true" />
        Average speed: {activity.ave_speed} km/h
-        {activity.records && activity.records.find(r => r.record_type === 'AS'
-        ) && (
-          <sup>
-            <i
-              className="fa fa-trophy custom-fa"
-              aria-hidden="true"
-            />
-          </sup>
-        )}
+        {activity.records &&
+          activity.records.find(r => r.record_type === 'AS') && (
+            <sup>
+              <i className="fa fa-trophy custom-fa" aria-hidden="true" />
+            </sup>
+          )}
        <br />
        Max speed : {activity.max_speed} km/h
-        {activity.records && activity.records.find(r => r.record_type === 'MS'
-        ) && (
-          <sup>
-            <i
-              className="fa fa-trophy custom-fa"
-              aria-hidden="true"
-            />
-          </sup>
-        )}
+        {activity.records &&
+          activity.records.find(r => r.record_type === 'MS') && (
+            <sup>
+              <i className="fa fa-trophy custom-fa" aria-hidden="true" />
+            </sup>
+          )}
      </p>
      {activity.min_alt && activity.max_alt && (
        <p>
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityMap.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityMap.jsx
@ -8,7 +8,6 @@ import { thunderforestApiKey } from '../../../utils'
 import { getGeoJson } from '../../../utils/activities'

 class ActivityMap extends React.Component {
-
  constructor(props, context) {
    super(props, context)
    this.state = {
@ -25,13 +24,15 @@ class ActivityMap extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    if (this.props.dataType === 'activity' && (
-      prevProps.activity.id !== this.props.activity.id)
+    if (
+      this.props.dataType === 'activity' &&
+      prevProps.activity.id !== this.props.activity.id
    ) {
-        this.props.loadActivityGpx(this.props.activity.id)
+      this.props.loadActivityGpx(this.props.activity.id)
    }
-    if (this.props.dataType === 'segment' && (
-      prevProps.segmentId !== this.props.segmentId)
+    if (
+      this.props.dataType === 'segment' &&
+      prevProps.segmentId !== this.props.segmentId
    ) {
      this.props.loadSegmentGpx(this.props.activity.id, this.props.segmentId)
    }
@ -42,13 +43,11 @@ class ActivityMap extends React.Component {
  }

  render() {
-    const {
-      activity, coordinates, gpxContent
-    } = this.props
+    const { activity, coordinates, gpxContent } = this.props
    const { jsonData } = getGeoJson(gpxContent)
    const bounds = [
      [activity.bounds[0], activity.bounds[1]],
-      [activity.bounds[2], activity.bounds[3]]
+      [activity.bounds[2], activity.bounds[3]],
    ]

    return (
@ -78,14 +77,13 @@ class ActivityMap extends React.Component {
          </Map>
        )}
      </div>
-
    )
  }
 }

 export default connect(
  state => ({
-    gpxContent: state.gpx
+    gpxContent: state.gpx,
  }),
  dispatch => ({
    loadActivityGpx: activityId => {
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityNoMap.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityNoMap.jsx
@ -1,9 +1,5 @@
 import React from 'react'

 export default function ActivityNoMap() {
-  return (
-    <div className="activity-no-map text-center">
-      No Map
-    </div>
-  )
+  return <div className="activity-no-map text-center">No Map</div>
 }
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityNotes.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityNotes.jsx
@ -8,9 +8,7 @@ export default function ActivityNotes(props) {
        <div className="card activity-card">
          <div className="card-body">
            Notes
-            <div className="activity-notes">
-              {notes ? notes : 'No notes'}
-            </div>
+            <div className="activity-notes">{notes ? notes : 'No notes'}</div>
          </div>
        </div>
      </div>
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivitySegments.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivitySegments.jsx
@ -18,8 +18,8 @@ export default function ActivitySegments(props) {
                    key={`segment-${index}`}
                  >
                    <Link
-                      to={`/activities/${
-                        segment.activity_id}/segment/${index + 1}`}
+                      to={`/activities/${segment.activity_id}/segment/${index +
+                        1}`}
                    >
                      segment {index + 1}
                    </Link>{' '}
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityWeather.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityWeather.jsx
@ -5,9 +5,7 @@ export default function ActivityWeather(props) {
  return (
    <div className="container">
      {activity.weather_start && activity.weather_end && (
-        <table
-          className="table table-borderless weather-table text-center"
-        >
+        <table className="table table-borderless weather-table text-center">
          <thead>
            <tr>
              <th />
@ -42,12 +40,8 @@ export default function ActivityWeather(props) {
                  alt="Temperatures"
                />
              </td>
-              <td>
-                {Number(activity.weather_start.temperature).toFixed(1)}°C
-              </td>
-              <td>
-                {Number(activity.weather_end.temperature).toFixed(1)}°C
-              </td>
+              <td>{Number(activity.weather_start.temperature).toFixed(1)}°C</td>
+              <td>{Number(activity.weather_end.temperature).toFixed(1)}°C</td>
            </tr>
            <tr>
              <td>
@ -60,9 +54,7 @@ export default function ActivityWeather(props) {
              <td>
                {Number(activity.weather_start.humidity * 100).toFixed(1)}%
              </td>
-              <td>
-                {Number(activity.weather_end.humidity * 100).toFixed(1)}%
-              </td>
+              <td>{Number(activity.weather_end.humidity * 100).toFixed(1)}%</td>
            </tr>
            <tr>
              <td>
@ -72,12 +64,8 @@ export default function ActivityWeather(props) {
                  alt="Temperatures"
                />
              </td>
-              <td>
-                {Number(activity.weather_start.wind).toFixed(1)}m/s
-              </td>
-              <td>
-                {Number(activity.weather_end.wind).toFixed(1)}m/s
-              </td>
+              <td>{Number(activity.weather_start.wind).toFixed(1)}m/s</td>
+              <td>{Number(activity.weather_end.wind).toFixed(1)}m/s</td>
            </tr>
          </tbody>
        </table>
--- a/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx
@ -30,8 +30,9 @@ class ActivityDisplay extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    if (prevProps.match.params.activityId !==
-      this.props.match.params.activityId) {
+    if (
+      prevProps.match.params.activityId !== this.props.match.params.activityId
+    ) {
      this.props.loadActivity(this.props.match.params.activityId)
    }
  }
@ -39,23 +40,24 @@ class ActivityDisplay extends React.Component {
  displayModal(value) {
    this.setState(prevState => ({
      ...prevState,
-      displayModal: value
+      displayModal: value,
    }))
  }

  updateCoordinates(activePayload) {
-    const coordinates = (activePayload && activePayload.length > 0)
-      ? {
-          latitude: activePayload[0].payload.latitude,
-          longitude: activePayload[0].payload.longitude,
-        }
-      : {
-          latitude: null,
-          longitude: null,
-        }
+    const coordinates =
+      activePayload && activePayload.length > 0
+        ? {
+            latitude: activePayload[0].payload.latitude,
+            longitude: activePayload[0].payload.longitude,
+          }
+        : {
+            latitude: null,
+            longitude: null,
+          }
    this.setState(prevState => ({
      ...prevState,
-      coordinates
+      coordinates,
    }))
  }

@ -68,9 +70,7 @@ class ActivityDisplay extends React.Component {
      ? sports.filter(s => s.id === activity.sport_id)
      : []
    const segmentId = parseInt(this.props.match.params.segmentId)
-    const dataType = segmentId >= 0
-      ? 'segment'
-      : 'activity'
+    const dataType = segmentId >= 0 ? 'segment' : 'activity'
    return (
      <div className="activity-page">
        <Helmet>
@ -80,16 +80,17 @@ class ActivityDisplay extends React.Component {
          <code>{message}</code>
        ) : (
          <div className="container">
-            {displayModal &&
-            <CustomModal
-              title="Confirmation"
-              text="Are you sure you want to delete this activity?"
-              confirm={() => {
-                onDeleteActivity(activity.id)
-                this.displayModal(false)
-              }}
-              close={() => this.displayModal(false)}
-            />}
+            {displayModal && (
+              <CustomModal
+                title="Confirmation"
+                text="Are you sure you want to delete this activity?"
+                confirm={() => {
+                  onDeleteActivity(activity.id)
+                  this.displayModal(false)
+                }}
+                close={() => this.displayModal(false)}
+              />
+            )}
            {activity && sport && activities.length === 1 && (
              <div>
                <div className="row">
@ -122,9 +123,11 @@ class ActivityDisplay extends React.Component {
                          </div>
                          <div className="col">
                            <ActivityDetails
-                              activity={dataType === 'activity'
-                                ? activity
-                                : activity.segments[segmentId - 1]}
+                              activity={
+                                dataType === 'activity'
+                                  ? activity
+                                  : activity.segments[segmentId - 1]
+                              }
                            />
                          </div>
                        </div>
@ -144,8 +147,8 @@ class ActivityDisplay extends React.Component {
                                activity={activity}
                                dataType={dataType}
                                segmentId={segmentId}
-                                updateCoordinates={
-                                  e => this.updateCoordinates(e)
+                                updateCoordinates={e =>
+                                  this.updateCoordinates(e)
                                }
                              />
                            </div>
--- a/fittrackee_client/src/components/Activity/ActivityEdit.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityEdit.jsx
@ -4,12 +4,9 @@ import { connect } from 'react-redux'
 import ActivityAddOrEdit from './ActivityAddOrEdit'
 import { getOrUpdateData } from '../../actions'

-
 class ActivityEdit extends React.Component {
  componentDidMount() {
-    this.props.loadActivity(
-      this.props.match.params.activityId
-    )
+    this.props.loadActivity(this.props.match.params.activityId)
  }

  render() {
--- a/fittrackee_client/src/components/Activity/ActivityForms/FormWithGpx.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityForms/FormWithGpx.jsx
@ -6,11 +6,8 @@ import { addActivity, editActivity } from '../../../actions/activities'
 import { history } from '../../../index'
 import { gpxLimit } from '../../../utils'

-
-function FormWithGpx (props) {
-  const {
-    activity, loading, onAddActivity, onEditActivity, sports
-  } = props
+function FormWithGpx(props) {
+  const { activity, loading, onAddActivity, onEditActivity, sports } = props
  const sportId = activity ? activity.sport_id : ''
  return (
    <form
@ -52,9 +49,10 @@ function FormWithGpx (props) {
      ) : (
        <div className="form-group">
          <label>
-            <strong>gpx</strong> file or <strong>zip</strong>{' '}
-            file containing <strong>gpx</strong> (no folder inside, {
-            gpxLimit} files max):
+            {/* prettier-ignore */}
+            <strong>gpx</strong> file or <strong>zip</strong> file containing
+            {/* prettier-ignore */}
+            <strong> gpx</strong> (no folder inside, {gpxLimit} files max):
            <input
              accept=".gpx, .zip"
              className="form-control form-control-file gpx-file"
@ -85,10 +83,8 @@ function FormWithGpx (props) {
          <input
            type="submit"
            className="btn btn-primary btn-lg btn-block"
-            onClick={
-              event => activity
-                ? onEditActivity(event, activity)
-                : onAddActivity(event)
+            onClick={event =>
+              activity ? onEditActivity(event, activity) : onAddActivity(event)
            }
            value="Submit"
          />
@ -106,13 +102,14 @@ function FormWithGpx (props) {

 export default connect(
  state => ({
-    loading: state.loading
+    loading: state.loading,
  }),
  dispatch => ({
    onAddActivity: e => {
      dispatch(setLoading(true))
      const form = new FormData()
      form.append('file', e.target.form.gpxFile.files[0])
+      /* prettier-ignore */
      form.append(
        'data',
        `{"sport_id": ${e.target.form.sport.value
@ -121,12 +118,14 @@ export default connect(
      dispatch(addActivity(form))
    },
    onEditActivity: (e, activity) => {
-      dispatch(editActivity({
-        id: activity.id,
-        notes: e.target.form.notes.value,
-        sport_id: +e.target.form.sport.value,
-        title: e.target.form.title.value,
-      }))
+      dispatch(
+        editActivity({
+          id: activity.id,
+          notes: e.target.form.notes.value,
+          sport_id: +e.target.form.sport.value,
+          title: e.target.form.title.value,
+        })
+      )
    },
  })
 )(FormWithGpx)
--- a/fittrackee_client/src/components/Activity/ActivityForms/FormWithoutGpx.jsx
+++ b/fittrackee_client/src/components/Activity/ActivityForms/FormWithoutGpx.jsx
@ -2,14 +2,17 @@ import React from 'react'
 import { connect } from 'react-redux'

 import {
-  addActivityWithoutGpx, editActivity
+  addActivityWithoutGpx,
+  editActivity,
 } from '../../../actions/activities'
 import { history } from '../../../index'
 import { formatActivityDate } from '../../../utils/activities'

-function FormWithoutGpx (props) {
+function FormWithoutGpx(props) {
  const { activity, onAddOrEdit, sports } = props
-  let activityDate, activityTime, sportId = ''
+  let activityDate,
+    activityTime,
+    sportId = ''
  if (activity) {
    const activityDateTime = formatActivityDate(
      activity.activity_date,
@ -21,9 +24,7 @@ function FormWithoutGpx (props) {
  }

  return (
-    <form
-      onSubmit={event => event.preventDefault()}
-    >
+    <form onSubmit={event => event.preventDefault()}>
      <div className="form-group">
        <label>
          Title:
@ -78,15 +79,15 @@ function FormWithoutGpx (props) {
      <div className="form-group">
        <label>
          Duration:
-            <input
-              name="duration"
-              defaultValue={activity ? activity.duration : ''}
-              className="form-control col-xs-4"
-              pattern="^([0-9]*[0-9]):([0-5][0-9]):([0-5][0-9])$"
-              placeholder="hh:mm:ss"
-              required
-              type="text"
-            />
+          <input
+            name="duration"
+            defaultValue={activity ? activity.duration : ''}
+            className="form-control col-xs-4"
+            pattern="^([0-9]*[0-9]):([0-5][0-9]):([0-5][0-9])$"
+            placeholder="hh:mm:ss"
+            required
+            type="text"
+          />
        </label>
      </div>
      <div className="form-group">
@ -131,12 +132,13 @@ function FormWithoutGpx (props) {
 }

 export default connect(
-  () => ({ }),
+  () => ({}),
  dispatch => ({
    onAddOrEdit: (e, activity) => {
      const d = e.target.form.duration.value.split(':')
      const duration = +d[0] * 60 * 60 + +d[1] * 60 + +d[2]

+      /* prettier-ignore */
      const activityDate = `${e.target.form.activity_date.value
        } ${ e.target.form.activity_time.value}`

--- a/fittrackee_client/src/components/Activity/index.jsx
+++ b/fittrackee_client/src/components/Activity/index.jsx
@ -9,7 +9,7 @@ import ActivityEdit from './ActivityEdit'
 import NotFound from './../Others/NotFound'
 import { isLoggedIn } from '../../utils'

-function Activity () {
+function Activity() {
  return (
    <div>
      <Helmet>
@ -19,11 +19,13 @@ function Activity () {
        <Switch>
          <Route exact path="/activities/add" component={ActivityAdd} />
          <Route
-            exact path="/activities/:activityId"
+            exact
+            path="/activities/:activityId"
            component={ActivityDisplay}
          />
          <Route
-            exact path="/activities/:activityId/edit"
+            exact
+            path="/activities/:activityId/edit"
            component={ActivityEdit}
          />
          <Route
@ -32,13 +34,13 @@ function Activity () {
          />
          <Route component={NotFound} />
        </Switch>
-      ) : (<Redirect to="/login" />)}
+      ) : (
+        <Redirect to="/login" />
+      )}
    </div>
  )
 }

-export default connect(
-  state => ({
-    user: state.user,
-  })
-)(Activity)
+export default connect(state => ({
+  user: state.user,
+}))(Activity)