API & Client: activities - pagination
+ minor fix
This commit is contained in:
parent
d82a730029
commit
0e9c9105e6
@ -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'])
|
||||||
|
@ -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}`)))
|
||||||
|
@ -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}`)))
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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)
|
||||||
|
@ -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',
|
||||||
|
@ -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) {
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user