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 ( +
+
+ + + + + + + + + + + + { sports && activities.map((activity, idx) => ( + // eslint-disable-next-line react/no-array-index-key + + + + + + + + + ))} + +
+ WorkoutDateDistanceDurationAve. speed
+ 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 && (