API & Client: activities - pagination

+ minor fix
This commit is contained in:
Sam 2018-05-10 23:39:59 +02:00
parent d82a730029
commit 0e9c9105e6
11 changed files with 130 additions and 44 deletions

View File

@ -18,18 +18,30 @@ activities_blueprint = Blueprint('activities', __name__)
@authenticate @authenticate
def get_activities(auth_user_id): def get_activities(auth_user_id):
"""Get all activities for authenticated user""" """Get all activities for authenticated user"""
activities = Activity.query.filter_by(user_id=auth_user_id)\ try:
.order_by(Activity.activity_date.desc()).all() params = request.args.copy()
activities_list = [] page = 1 if len(params) == 0 else int(params.pop('page'))
for activity in activities: activities = Activity.query.filter_by(user_id=auth_user_id)\
activities_list.append(activity.serialize()) .order_by(Activity.activity_date.desc()).paginate(
response_object = { page, 5, False).items
'status': 'success', activities_list = []
'data': { for activity in activities:
'activities': activities_list activities_list.append(activity.serialize())
response_object = {
'status': 'success',
'data': {
'activities': activities_list
}
} }
} code = 200
return jsonify(response_object), 200 except Exception as e:
appLog.error(e)
response_object = {
'status': 'error',
'message': 'Error. Please try again or contact the administrator.'
}
code = 500
return jsonify(response_object), code
@activities_blueprint.route('/activities/<int:activity_id>', methods=['GET']) @activities_blueprint.route('/activities/<int:activity_id>', methods=['GET'])

View File

@ -3,6 +3,15 @@ import mpwoApi from '../mwpoApi/activities'
import { history } from '../index' import { history } from '../index'
import { setError } from './index' import { setError } from './index'
export const endPagination = () => ({
type: 'END_PAGINATION'
})
export const pushActivities = activities => ({
type: 'PUSH_ACTIVITIES',
activities,
})
export const setGpx = gpxContent => ({ export const setGpx = gpxContent => ({
type: 'SET_GPX', type: 'SET_GPX',
gpxContent, gpxContent,
@ -70,3 +79,19 @@ export const editActivity = form => dispatch => mpwoGenericApi
} }
}) })
.catch(error => dispatch(setError(`activities: ${error}`))) .catch(error => dispatch(setError(`activities: ${error}`)))
export const getMoreActivities = page => dispatch => mpwoGenericApi
.getData('activities', null, page)
.then(ret => {
if (ret.status === 'success') {
if (ret.data.activities.length > 0) {
dispatch(pushActivities(ret.data.activities))
} else {
dispatch(endPagination())
}
} else {
dispatch(setError(`activities: ${ret.message}`))
}
})
.catch(error => dispatch(setError(`activities: ${error}`)))

View File

@ -13,17 +13,17 @@ export const setError = message => ({
message, message,
}) })
export const getData = (target, id = null) => dispatch => { export const getData = (target, id = null, data = null) => dispatch => {
if (id !== null && isNaN(id)) { if (id !== null && isNaN(id)) {
return dispatch(setError(target, `${target}: Incorrect id`)) return dispatch(setError(target, `${target}: Incorrect id`))
} }
return mpwoApi return mpwoApi
.getData(target, id) .getData(target, id, data)
.then(ret => { .then(ret => {
if (ret.status === 'success') { if (ret.status === 'success') {
dispatch(setData(target, ret.data)) dispatch(setData(target, ret.data))
} else { } else {
dispatch(setError(`${target}: ${ret.status}`)) dispatch(setError(`${target}: ${ret.message}`))
} }
}) })
.catch(error => dispatch(setError(`${target}: ${error}`))) .catch(error => dispatch(setError(`${target}: ${error}`)))
@ -50,7 +50,7 @@ export const updateData = (target, data) => dispatch => {
if (ret.status === 'success') { if (ret.status === 'success') {
dispatch(setData(target, ret.data)) dispatch(setData(target, ret.data))
} else { } else {
dispatch(setError(`${target}: ${ret.status}`)) dispatch(setError(`${target}: ${ret.message}`))
} }
}) })
.catch(error => dispatch(setError(`${target}: ${error}`))) .catch(error => dispatch(setError(`${target}: ${error}`)))
@ -66,7 +66,7 @@ export const deleteData = (target, id) => dispatch => {
if (ret.status === 204) { if (ret.status === 204) {
history.push(`/admin/${target}`) history.push(`/admin/${target}`)
} else { } else {
dispatch(setError(`${target}: ${ret.status}`)) dispatch(setError(`${target}: ${ret.message}`))
} }
}) })
.catch(error => dispatch(setError(`${target}: ${error}`))) .catch(error => dispatch(setError(`${target}: ${error}`)))

View File

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
import ActivityMap from './ActivityMap' import ActivityMap from './ActivityMap'
import CustomModal from './../Others/CustomModal' import CustomModal from './../Others/CustomModal'
import { getData } from '../../actions/index' import { getData } from '../../actions'
import { deleteActivity } from '../../actions/activities' import { deleteActivity } from '../../actions/activities'
class ActivityDisplay extends React.Component { class ActivityDisplay extends React.Component {

View File

@ -2,7 +2,7 @@ import React from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import ActivityAddOrEdit from './ActivityAddOrEdit' import ActivityAddOrEdit from './ActivityAddOrEdit'
import { getData } from '../../actions/index' import { getData } from '../../actions'
class ActivityEdit extends React.Component { class ActivityEdit extends React.Component {

View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { getData } from '../../../actions/index' import { getData } from '../../../actions'
import AdminDetail from '../generic/AdminDetail' import AdminDetail from '../generic/AdminDetail'
class AdminSports extends React.Component { class AdminSports extends React.Component {

View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { getData } from '../../../actions/index' import { getData } from '../../../actions'
import AdminPage from '../generic/AdminPage' import AdminPage from '../generic/AdminPage'
class AdminSports extends React.Component { class AdminSports extends React.Component {

View File

@ -4,41 +4,66 @@ import { connect } from 'react-redux'
import ActivityCard from './ActivityCard' import ActivityCard from './ActivityCard'
import Statistics from './Statistics' import Statistics from './Statistics'
import { getData } from '../../actions/index' import { getData } from '../../actions'
import { getMoreActivities } from '../../actions/activities'
class DashBoard extends React.Component { class DashBoard extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
page: 1,
}
}
componentDidMount() { componentDidMount() {
this.props.loadActivities() this.props.loadActivities()
} }
render() { render() {
const { activities, sports } = this.props const {
activities, loadMoreActivities, message, paginationEnd, sports
} = this.props
const { page } = this.state
return ( return (
<div> <div>
<Helmet> <Helmet>
<title>mpwo - Dashboard</title> <title>mpwo - Dashboard</title>
</Helmet> </Helmet>
<h1 className="page-title">Dashboard</h1> <h1 className="page-title">Dashboard</h1>
{activities.length > 0 ? ( {message ? (
<div className="container"> <code>{message}</code>
<div className="row"> ) : (
<div className="col-md-6"> activities.length > 0 ? (
{activities.map(activity => ( <div className="container">
<ActivityCard <div className="row">
activity={activity} <div className="col-md-6">
key={activity.id} {activities.map(activity => (
sports={sports} <ActivityCard
/> activity={activity}
))} key={activity.id}
</div> sports={sports}
<div className="col-md-6"> />
<Statistics /> ))}
{!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 className="col-md-6">
<Statistics />
</div>
</div> </div>
</div> </div>
</div>
) : ( ) : (
'No activities for now' 'No activities for now'
)} ))}
</div> </div>
) )
} }
@ -47,13 +72,16 @@ class DashBoard extends React.Component {
export default connect( export default connect(
state => ({ state => ({
activities: state.activities.data, activities: state.activities.data,
paginationEnd: state.activities.pagination_end,
message: state.message, message: state.message,
sports: state.sports.data, sports: state.sports.data,
user: state.user,
}), }),
dispatch => ({ dispatch => ({
loadActivities: () => { loadActivities: () => {
dispatch(getData('activities')) dispatch(getData('activities', null, 1))
},
loadMoreActivities: page => {
dispatch(getMoreActivities(page))
}, },
}) })
)(DashBoard) )(DashBoard)

View File

@ -2,8 +2,14 @@ import { apiUrl } from '../utils'
export default class MpwoApi { export default class MpwoApi {
static getData(target, id = null) { static getData(target, id = null, page = null) {
const request = new Request(`${apiUrl}${target}${id ? `/${id}` : ''}`, { let url = `${apiUrl}${target}`
if (id) {
url = `${url}/${id}`
} else if (page) {
url = `${url}?page=${page}`
}
const request = new Request(url, {
method: 'GET', method: 'GET',
headers: new Headers({ headers: new Headers({
'Content-Type': 'application/json', 'Content-Type': 'application/json',

View File

@ -19,8 +19,22 @@ const handleDataAndError = (state, type, action) => {
} }
} }
const activities = (state = initial.activities, action) => const activities = (state = initial.activities, action) => {
handleDataAndError(state, 'activities', action) switch (action.type) {
case 'END_PAGINATION':
return {
...state,
pagination_end: true
}
case 'PUSH_ACTIVITIES':
return {
...state,
data: state.data.concat(action.activities),
}
default:
return handleDataAndError(state, 'activities', action)
}
}
const formData = (state = initial.formData, action) => { const formData = (state = initial.formData, action) => {
switch (action.type) { switch (action.type) {

View File

@ -40,6 +40,7 @@ export default {
}, },
activities: { activities: {
...emptyData, ...emptyData,
pagination_end: false
}, },
// check if storing gpx content is OK // check if storing gpx content is OK
gpx: null, gpx: null,