Client: init page displaying workouts list - #3

fittrackee_client/src/actions/activities.js

@@ -122,8 +122,8 @@ export const editActivity = form => dispatch => FitTrackeeGenericApi
   .catch(error => dispatch(setError(`activities: ${error}`)))
 
 
-export const getMoreActivities = page => dispatch => FitTrackeeGenericApi
-  .getData('activities', { page })
+export const getMoreActivities = params => dispatch => FitTrackeeGenericApi
+  .getData('activities', params)
   .then(ret => {
     if (ret.status === 'success') {
       if (ret.data.activities.length > 0) {

fittrackee_client/src/components/Activities/ActivitiesList.jsx

@@ -0,0 +1,50 @@
+import { format } from 'date-fns'
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default function ActivitiesList (props) {
+  const { activities, sports } = props
+  return (
+    <div className="card">
+      <div className="card-bord">
+        <table className="table">
+          <thead>
+            <tr>
+              <th scope="col" />
+              <th scope="col">Workout</th>
+              <th scope="col">Date</th>
+              <th scope="col">Distance</th>
+              <th scope="col">Duration</th>
+              <th scope="col">Ave. speed</th>
+            </tr>
+          </thead>
+          <tbody>
+            { sports && activities.map((activity, idx) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <tr key={idx}>
+                <td >
+                  <img
+                    className="activity-sport"
+                    src={sports
+                      .filter(s => s.id === activity.sport_id)
+                      .map(s => s.img)}
+                    alt="activity sport logo"
+                  />
+                </td>
+                <td >
+                  <Link to={`/activities/${activity.id}`}>
+                    {activity.title}
+                  </Link>
+                  </td>
+                <td >{format(activity.activity_date, 'DD/MM/YYYY HH:mm')}</td>
+                <td >{activity.distance} km</td>
+                <td >{activity.duration}</td>
+                <td >{activity.ave_speed} km/h</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

fittrackee_client/src/components/Activities/index.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { connect } from 'react-redux'
+
+import ActivitiesList from './ActivitiesList'
+import { getData } from '../../actions'
+import { getMoreActivities } from '../../actions/activities'
+
+
+class Activities extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      page: 1,
+    }
+  }
+
+  componentDidMount() {
+    this.props.loadActivities()
+  }
+
+  render() {
+    const { activities, loadMoreActivities, message, sports } = this.props
+    const { page } = this.state
+    const paginationEnd = activities.length > 0
+      ? activities[activities.length - 1].previous_activity === null
+      : true
+    return (
+      <div>
+        <Helmet>
+          <title>FitTrackee - Workouts</title>
+        </Helmet>
+        {message ? (
+          <code>{message}</code>
+        ) : (
+          <div className="container history">
+            <div className="row">
+              <div className="col-md-3" />
+              <div className="col-md-9">
+                <ActivitiesList
+                  activities={activities}
+                  sports={sports}
+                />
+                {!paginationEnd &&
+                  <input
+                    type="submit"
+                    className="btn btn-default btn-md btn-block"
+                    value="Load more activities"
+                    onClick={() => {
+                      loadMoreActivities(page + 1)
+                      this.setState({ page: page + 1 })
+                    }}
+                  />
+                }
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    activities: state.activities.data,
+    message: state.message,
+    sports: state.sports.data,
+  }),
+  dispatch => ({
+    loadActivities: () => {
+      dispatch(getData('activities', { page: 1, per_page: 10 }))
+      dispatch(getData('records'))
+    },
+    loadMoreActivities: page => {
+      dispatch(getMoreActivities({ page, per_page: 10 }))
+    },
+  })
+)(Activities)

fittrackee_client/src/components/App.css

@@ -164,7 +164,7 @@ input, textarea {
   margin-right: 5px;
 }
 
-.dashboard {
+.dashboard, .history {
   margin-top: 30px;
 }
 

fittrackee_client/src/components/App.jsx

@@ -3,7 +3,8 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 
 import './App.css'
 import Admin from './Admin'
-import Activity from './Activity/index'
+import Activity from './Activity'
+import Activities from './Activities'
 import Dashboard from './Dashboard'
 import Logout from './User/Logout'
 import NavBar from './NavBar'
@@ -84,6 +85,10 @@ export default class App extends React.Component {
               )
             )}
           />
+          <Route
+            exact path="/activities/history"
+            component={Activities}
+          />
           <Route path="/activities" component={Activity} />
           <Route path="/admin" component={Admin} />
           <Route component={NotFound} />

fittrackee_client/src/components/Dashboard/index.jsx

@@ -101,7 +101,7 @@ export default connect(
       dispatch(getData('records'))
     },
     loadMoreActivities: page => {
-      dispatch(getMoreActivities(page))
+      dispatch(getMoreActivities({ page }))
     },
   })
 )(DashBoard)

fittrackee_client/src/components/NavBar/index.jsx

@@ -34,6 +34,18 @@ function NavBar(props) {
                   Dashboard
                 </Link>
               </li>
+              {props.user.isAuthenticated && (
+                <li className="nav-item">
+                  <Link
+                    className="nav-link"
+                    to={{
+                      pathname: '/activities/history',
+                    }}
+                  >
+                    Workouts
+                  </Link>
+                </li>
+              )}
               {props.user.isAuthenticated && (
                 <li className="nav-item">
                   <Link