Client: init page displaying workouts list - #3
This commit is contained in:
parent
5bd7314b22
commit
7c0bb285db
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
79
fittrackee_client/src/components/Activities/index.jsx
Normal file
79
fittrackee_client/src/components/Activities/index.jsx
Normal 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)
|
@ -164,7 +164,7 @@ input, textarea {
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard {
|
.dashboard, .history {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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} />
|
||||||
|
@ -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)
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user