From eab356a2c4fe1e44ae34230689eea35d5b23dd6e Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 7 Jun 2018 17:50:22 +0200 Subject: [PATCH] Client: filter component init - #3 --- .../Activities/ActivitiesFilter.jsx | 136 ++++++++++++++++++ .../components/Activities/ActivitiesList.jsx | 10 +- .../src/components/Activities/index.jsx | 7 +- fittrackee_client/src/components/App.css | 8 ++ 4 files changed, 156 insertions(+), 5 deletions(-) create mode 100644 fittrackee_client/src/components/Activities/ActivitiesFilter.jsx diff --git a/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx b/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx new file mode 100644 index 00000000..fdda6468 --- /dev/null +++ b/fittrackee_client/src/components/Activities/ActivitiesFilter.jsx @@ -0,0 +1,136 @@ +import React from 'react' + +export default function ActivitiesList (props) { + const { sports } = props + return ( +
+
+
event.preventDefault()}> +
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ ) +} diff --git a/fittrackee_client/src/components/Activities/ActivitiesList.jsx b/fittrackee_client/src/components/Activities/ActivitiesList.jsx index 978ee840..60bb15ee 100644 --- a/fittrackee_client/src/components/Activities/ActivitiesList.jsx +++ b/fittrackee_client/src/components/Activities/ActivitiesList.jsx @@ -36,10 +36,12 @@ export default function ActivitiesList (props) { {activity.title} - {format(activity.activity_date, 'DD/MM/YYYY HH:mm')} - {activity.distance} km - {activity.duration} - {activity.ave_speed} km/h + {format(activity.activity_date, 'DD/MM/YYYY HH:mm')} + + {Number(activity.distance).toFixed(2)} km + + {activity.duration} + {activity.ave_speed} km/h ))} diff --git a/fittrackee_client/src/components/Activities/index.jsx b/fittrackee_client/src/components/Activities/index.jsx index f6364b89..0a48489d 100644 --- a/fittrackee_client/src/components/Activities/index.jsx +++ b/fittrackee_client/src/components/Activities/index.jsx @@ -2,6 +2,7 @@ import React from 'react' import { Helmet } from 'react-helmet' import { connect } from 'react-redux' +import ActivitiesFilter from './ActivitiesFilter' import ActivitiesList from './ActivitiesList' import { getData } from '../../actions' import { getMoreActivities } from '../../actions/activities' @@ -35,7 +36,11 @@ class Activities extends React.Component { ) : (
-
+
+ +