Dashboard: init activities display

mpwo_api/mpwo_api/activities/activities.py

@@ -18,7 +18,8 @@ activities_blueprint = Blueprint('activities', __name__)
 @authenticate
 def get_activities(auth_user_id):
     """Get all activities for authenticated user"""
-    activities = Activity.query.filter_by(user_id=auth_user_id).all()
+    activities = Activity.query.filter_by(user_id=auth_user_id)\
+        .order_by(Activity.activity_date.desc()).all()
     activities_list = []
     for activity in activities:
         activities_list.append(activity.serialize())

mpwo_api/mpwo_api/tests/test_activities.py

@@ -51,18 +51,18 @@ def test_get_all_activities_for_authenticated_user(app):
     assert len(data['data']['activities']) == 2
 
     assert 'creation_date' in data['data']['activities'][0]
-    assert 'Mon, 01 Jan 2018 00:00:00 GMT' == data['data']['activities'][0]['activity_date']  # noqa
+    assert 'Sun, 01 Apr 2018 00:00:00 GMT' == data['data']['activities'][0]['activity_date']  # noqa
     assert 1 == data['data']['activities'][0]['user_id']
-    assert 2 == data['data']['activities'][0]['sport_id']
+    assert 1 == data['data']['activities'][0]['sport_id']
-    assert '0:17:04' == data['data']['activities'][0]['duration']
+    assert '1:40:00' == data['data']['activities'][0]['duration']
     assert data['data']['activities'][0]['with_gpx'] is False
 
     assert 'creation_date' in data['data']['activities'][1]
-    assert 'Sun, 01 Apr 2018 00:00:00 GMT' == data['data']['activities'][1]['activity_date']  # noqa
+    assert 'Mon, 01 Jan 2018 00:00:00 GMT' == data['data']['activities'][1]['activity_date']  # noqa
     assert 1 == data['data']['activities'][1]['user_id']
-    assert 1 == data['data']['activities'][1]['sport_id']
+    assert 2 == data['data']['activities'][1]['sport_id']
-    assert '1:40:00' == data['data']['activities'][1]['duration']
+    assert '0:17:04' == data['data']['activities'][1]['duration']
-    assert data['data']['activities'][0]['with_gpx'] is False
+    assert data['data']['activities'][1]['with_gpx'] is False
 
 
 def test_get_activities_for_authenticated_user_no_activity(app):

mpwo_client/src/components/App.css

@@ -57,6 +57,10 @@ input, textarea {
   text-align: center;
 }
 
+.activity-card {
+    margin-bottom: 15px;
+}
+
 .add-activity {
   margin-top: 50px;
 }

mpwo_client/src/components/Dashboard/ActivityCard.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default function ActivityCard (props) {
+  const { activity, sports } = props
+
+  return (
+    <div className="card activity-card">
+      <div className="card-header">
+        <Link to={`/activities/${activity.id}`}>
+        {sports.filter(sport => sport.id === activity.sport_id)
+               .map(sport => sport.label)} -{' '}
+        {activity.activity_date}
+        </Link>
+      </div>
+      <div className="card-body">
+        <p>
+          <i className="fa fa-calendar" aria-hidden="true" />{' '}
+          Start at {activity.activity_date}
+        </p>
+        <p>
+          <i className="fa fa-clock-o" aria-hidden="true" />{' '}
+          Duration: {activity.duration} -{' '}
+          <i className="fa fa-road" aria-hidden="true" />{' '}
+          Distance: {activity.distance} km
+        </p>
+      </div>
+    </div>
+  )
+}

mpwo_client/src/components/Dashboard/Statistics.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+
+export default function ActivityCard () {
+  return (
+    <div className="card activity-card">
+      <div className="card-header">
+        Statistics
+      </div>
+      <div className="card-body">
+        coming soon...
+      </div>
+    </div>
+  )
+}

mpwo_client/src/components/Dashboard/index.jsx

@@ -2,15 +2,43 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
+import ActivityCard from './ActivityCard'
+import Statistics from './Statistics'
+import { getData } from '../../actions/index'
+
 class DashBoard extends React.Component {
-  componentDidMount() {}
+  componentDidMount() {
+    this.props.loadActivities()
+  }
+
   render() {
+    const { activities, sports } = this.props
     return (
       <div>
         <Helmet>
           <title>mpwo - Dashboard</title>
         </Helmet>
         <h1 className="page-title">Dashboard</h1>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-6">
+              {activities.length > 0 ? (
+                activities.map(activity => (
+                  <ActivityCard
+                    activity={activity}
+                    key={activity.id}
+                    sports={sports}
+                  />
+                ))
+              ) : (
+                'No activities for now'
+              )}
+            </div>
+            <div className="col-md-6">
+              <Statistics />
+            </div>
+          </div>
+        </div>
       </div>
     )
   }
@@ -18,6 +46,15 @@ class DashBoard extends React.Component {
 
 export default connect(
   state => ({
+    activities: state.activities.data,
+    message: state.message,
+    sports: state.sports.data,
     user: state.user,
+  }),
+  dispatch => ({
+    loadActivities: () => {
+      dispatch(getData('activities'))
+      dispatch(getData('sports'))
+    },
   })
 )(DashBoard)