API & Client: activities - pagination

+ minor fix
2018-05-10 23:39:59 +02:00 · 2018-05-10 23:39:59 +02:00 · 0e9c9105e6
commit 0e9c9105e6
parent d82a730029
11 changed files with 130 additions and 44 deletions
--- a/mpwo_api/mpwo_api/activities/activities.py
+++ b/mpwo_api/mpwo_api/activities/activities.py
@ -18,18 +18,30 @@ activities_blueprint = Blueprint('activities', __name__)
@authenticate
 def get_activities(auth_user_id):
    """Get all activities for authenticated user"""
-    activities = Activity.query.filter_by(user_id=auth_user_id)\
-        .order_by(Activity.activity_date.desc()).all()
-    activities_list = []
-    for activity in activities:
-        activities_list.append(activity.serialize())
-    response_object = {
-        'status': 'success',
-        'data': {
-            'activities': activities_list
+    try:
+        params = request.args.copy()
+        page = 1 if len(params) == 0 else int(params.pop('page'))
+        activities = Activity.query.filter_by(user_id=auth_user_id)\
+            .order_by(Activity.activity_date.desc()).paginate(
+            page, 5, False).items
+        activities_list = []
+        for activity in activities:
+            activities_list.append(activity.serialize())
+        response_object = {
+            'status': 'success',
+            'data': {
+                'activities': activities_list
+            }
        }
-    }
-    return jsonify(response_object), 200
+        code = 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'])
--- a/mpwo_client/src/actions/activities.js
+++ b/mpwo_client/src/actions/activities.js
@ -3,6 +3,15 @@ import mpwoApi from '../mwpoApi/activities'
 import { history } from '../index'
 import { setError } from './index'

+export const endPagination = () => ({
+  type: 'END_PAGINATION'
+})
+
+export const pushActivities = activities => ({
+  type: 'PUSH_ACTIVITIES',
+  activities,
+})
+
 export const setGpx = gpxContent => ({
  type: 'SET_GPX',
  gpxContent,
@ -70,3 +79,19 @@ export const editActivity = form => dispatch => mpwoGenericApi
    }
  })
  .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}`)))
--- a/mpwo_client/src/actions/index.js
+++ b/mpwo_client/src/actions/index.js
@ -13,17 +13,17 @@ export const setError = message => ({
  message,
 })

-export const getData = (target, id = null) => dispatch => {
+export const getData = (target, id = null, data = null) => dispatch => {
  if (id !== null && isNaN(id)) {
    return dispatch(setError(target, `${target}: Incorrect id`))
  }
  return mpwoApi
-  .getData(target, id)
+  .getData(target, id, data)
  .then(ret => {
    if (ret.status === 'success') {
      dispatch(setData(target, ret.data))
    } else {
-      dispatch(setError(`${target}: ${ret.status}`))
+      dispatch(setError(`${target}: ${ret.message}`))
    }
  })
  .catch(error => dispatch(setError(`${target}: ${error}`)))
@ -50,7 +50,7 @@ export const updateData = (target, data) => dispatch => {
    if (ret.status === 'success') {
      dispatch(setData(target, ret.data))
    } else {
-      dispatch(setError(`${target}: ${ret.status}`))
+      dispatch(setError(`${target}: ${ret.message}`))
    }
  })
  .catch(error => dispatch(setError(`${target}: ${error}`)))
@ -66,7 +66,7 @@ export const deleteData = (target, id) => dispatch => {
    if (ret.status === 204) {
      history.push(`/admin/${target}`)
    } else {
-      dispatch(setError(`${target}: ${ret.status}`))
+      dispatch(setError(`${target}: ${ret.message}`))
    }
  })
  .catch(error => dispatch(setError(`${target}: ${error}`)))
--- a/mpwo_client/src/components/Activities/ActivityDisplay.jsx
+++ b/mpwo_client/src/components/Activities/ActivityDisplay.jsx
@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'

 import ActivityMap from './ActivityMap'
 import CustomModal from './../Others/CustomModal'
-import { getData } from '../../actions/index'
+import { getData } from '../../actions'
 import { deleteActivity } from '../../actions/activities'

 class ActivityDisplay extends React.Component {
--- a/mpwo_client/src/components/Activities/ActivityEdit.jsx
+++ b/mpwo_client/src/components/Activities/ActivityEdit.jsx
@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'

 import ActivityAddOrEdit from './ActivityAddOrEdit'
-import { getData } from '../../actions/index'
+import { getData } from '../../actions'


 class ActivityEdit extends React.Component {
--- a/mpwo_client/src/components/Admin/Sports/AdminSport.jsx
+++ b/mpwo_client/src/components/Admin/Sports/AdminSport.jsx
@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'

-import { getData } from '../../../actions/index'
+import { getData } from '../../../actions'
 import AdminDetail from '../generic/AdminDetail'

 class AdminSports extends React.Component {
--- a/mpwo_client/src/components/Admin/Sports/AdminSports.jsx
+++ b/mpwo_client/src/components/Admin/Sports/AdminSports.jsx
@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'

-import { getData } from '../../../actions/index'
+import { getData } from '../../../actions'
 import AdminPage from '../generic/AdminPage'

 class AdminSports extends React.Component {
--- a/mpwo_client/src/components/Dashboard/index.jsx
+++ b/mpwo_client/src/components/Dashboard/index.jsx
@ -4,41 +4,66 @@ import { connect } from 'react-redux'

 import ActivityCard from './ActivityCard'
 import Statistics from './Statistics'
-import { getData } from '../../actions/index'
+import { getData } from '../../actions'
+import { getMoreActivities } from '../../actions/activities'

 class DashBoard extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      page: 1,
+    }
+  }
+
  componentDidMount() {
    this.props.loadActivities()
  }

  render() {
-    const { activities, sports } = this.props
+    const {
+      activities, loadMoreActivities, message, paginationEnd, sports
+    } = this.props
+    const { page } = this.state
    return (
      <div>
        <Helmet>
          <title>mpwo - Dashboard</title>
        </Helmet>
        <h1 className="page-title">Dashboard</h1>
-        {activities.length > 0 ? (
-          <div className="container">
-            <div className="row">
-              <div className="col-md-6">
-                {activities.map(activity => (
-                  <ActivityCard
-                    activity={activity}
-                    key={activity.id}
-                    sports={sports}
-                  />
-                ))}
-              </div>
-              <div className="col-md-6">
-                <Statistics />
+        {message ? (
+          <code>{message}</code>
+        ) : (
+          activities.length > 0 ? (
+            <div className="container">
+              <div className="row">
+                <div className="col-md-6">
+                  {activities.map(activity => (
+                    <ActivityCard
+                      activity={activity}
+                      key={activity.id}
+                      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 className="col-md-6">
+                  <Statistics />
+                </div>
              </div>
            </div>
-          </div>
        ) : (
          'No activities for now'
-        )}
+        ))}
      </div>
    )
  }
@ -47,13 +72,16 @@ class DashBoard extends React.Component {
 export default connect(
  state => ({
    activities: state.activities.data,
+    paginationEnd: state.activities.pagination_end,
    message: state.message,
    sports: state.sports.data,
-    user: state.user,
  }),
  dispatch => ({
    loadActivities: () => {
-      dispatch(getData('activities'))
+      dispatch(getData('activities', null, 1))
+    },
+    loadMoreActivities: page => {
+      dispatch(getMoreActivities(page))
    },
  })
 )(DashBoard)
--- a/mpwo_client/src/mwpoApi/index.js
+++ b/mpwo_client/src/mwpoApi/index.js
@ -2,8 +2,14 @@ import { apiUrl } from '../utils'

 export default class MpwoApi {

-  static getData(target, id = null) {
-    const request = new Request(`${apiUrl}${target}${id ? `/${id}` : ''}`, {
+  static getData(target, id = null, page = null) {
+    let url = `${apiUrl}${target}`
+    if (id) {
+      url = `${url}/${id}`
+    } else if (page) {
+      url = `${url}?page=${page}`
+    }
+    const request = new Request(url, {
      method: 'GET',
      headers: new Headers({
        'Content-Type': 'application/json',
--- a/mpwo_client/src/reducers/index.js
+++ b/mpwo_client/src/reducers/index.js
@ -19,8 +19,22 @@ const handleDataAndError = (state, type, action) => {
  }
 }

-const activities = (state = initial.activities, action) =>
-  handleDataAndError(state, 'activities', action)
+const activities = (state = initial.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) => {
  switch (action.type) {
--- a/mpwo_client/src/reducers/initial.js
+++ b/mpwo_client/src/reducers/initial.js
@ -40,6 +40,7 @@ export default {
  },
  activities: {
    ...emptyData,
+    pagination_end: false
  },
  // check if storing gpx content is OK
  gpx: null,