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/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>