Dashboard: init activities display

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)