diff --git a/fittrackee_client/src/actions/activities.js b/fittrackee_client/src/actions/activities.js
index e48dbba8..3fde50e6 100644
--- a/fittrackee_client/src/actions/activities.js
+++ b/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) {
diff --git a/fittrackee_client/src/components/Activities/ActivitiesList.jsx b/fittrackee_client/src/components/Activities/ActivitiesList.jsx
new file mode 100644
index 00000000..978ee840
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ |
+ Workout |
+ Date |
+ Distance |
+ Duration |
+ Ave. speed |
+
+
+
+ { sports && activities.map((activity, idx) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+
+ s.id === activity.sport_id)
+ .map(s => s.img)}
+ alt="activity sport logo"
+ />
+ |
+
+
+ {activity.title}
+
+ |
+ {format(activity.activity_date, 'DD/MM/YYYY HH:mm')} |
+ {activity.distance} 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
new file mode 100644
index 00000000..f6364b89
--- /dev/null
+++ b/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 (
+
+
+ FitTrackee - Workouts
+
+ {message ? (
+
{message}
+ ) : (
+
+
+
+
+
+ {!paginationEnd &&
+
{
+ loadMoreActivities(page + 1)
+ this.setState({ page: page + 1 })
+ }}
+ />
+ }
+
+
+
+ )}
+
+ )
+ }
+}
+
+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)
diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css
index 9c322e4d..7e2955d5 100644
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@@ -164,7 +164,7 @@ input, textarea {
margin-right: 5px;
}
-.dashboard {
+.dashboard, .history {
margin-top: 30px;
}
diff --git a/fittrackee_client/src/components/App.jsx b/fittrackee_client/src/components/App.jsx
index 6e09dabf..0308a795 100644
--- a/fittrackee_client/src/components/App.jsx
+++ b/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 {
)
)}
/>
+
diff --git a/fittrackee_client/src/components/Dashboard/index.jsx b/fittrackee_client/src/components/Dashboard/index.jsx
index 6f00b507..aba60195 100644
--- a/fittrackee_client/src/components/Dashboard/index.jsx
+++ b/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)
diff --git a/fittrackee_client/src/components/NavBar/index.jsx b/fittrackee_client/src/components/NavBar/index.jsx
index 66fc4f62..6608a5fe 100644
--- a/fittrackee_client/src/components/NavBar/index.jsx
+++ b/fittrackee_client/src/components/NavBar/index.jsx
@@ -34,6 +34,18 @@ function NavBar(props) {
Dashboard
+ {props.user.isAuthenticated && (
+
+
+ Workouts
+
+
+ )}
{props.user.isAuthenticated && (