Client: init page displaying workouts list - #3

This commit is contained in:
Sam 2018-06-07 17:06:41 +02:00
parent 5bd7314b22
commit 7c0bb285db
7 changed files with 151 additions and 5 deletions

View File

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

View File

@ -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>
)
}

View File

@ -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)

View File

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

View File

@ -3,7 +3,8 @@ import { Redirect, Route, Switch } from 'react-router-dom'
import './App.css' import './App.css'
import Admin from './Admin' import Admin from './Admin'
import Activity from './Activity/index' import Activity from './Activity'
import Activities from './Activities'
import Dashboard from './Dashboard' import Dashboard from './Dashboard'
import Logout from './User/Logout' import Logout from './User/Logout'
import NavBar from './NavBar' 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="/activities" component={Activity} />
<Route path="/admin" component={Admin} /> <Route path="/admin" component={Admin} />
<Route component={NotFound} /> <Route component={NotFound} />

View File

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

View File

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