Admin: get sports list

mpwo_client/src/actions/index.js

@@ -0,0 +1,31 @@
+import mpwoApi from '../mwpoApi/index'
+
+
+export const setData = (target, data) => ({
+  type: 'SET_DATA',
+  data,
+  target,
+})
+
+export const setError = (target, error) => ({
+  type: 'SET_ERROR',
+  error,
+  target,
+})
+
+export function getData(target) {
+  return function(dispatch) {
+    return mpwoApi
+      .getData(target)
+    .then(ret => {
+      if (ret.status === 'success') {
+        dispatch(setData(target, ret.data))
+      } else {
+        dispatch(setError(target, ret.message))
+      }
+    })
+    .catch(error => {
+      throw error
+    })
+  }
+}

mpwo_client/src/components/Admin/AdminSports.jsx

@@ -2,15 +2,36 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
+import { getData } from '../../actions/index'
+
 class AdminSports extends React.Component {
-  componentDidMount() {}
+  componentDidMount() {
+      this.props.loadSport()
+  }
   render() {
+    const { sports } = this.props
     return (
       <div>
         <Helmet>
           <title>mpwo - Admin</title>
         </Helmet>
         <h1 className="page-title">Administration - Sports</h1>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-2" />
+            <div className="col-md-8 card">
+              <ul>
+                {sports.map(sport => (
+                  <li key={sport.id}>
+                      {sport.label}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="col-md-2" />
+          </div>
+        </div>
+
       </div>
     )
   }
@@ -18,6 +39,12 @@ class AdminSports extends React.Component {
 
 export default connect(
   state => ({
+    sports: state.sports.data,
     user: state.user,
+  }),
+  dispatch => ({
+    loadSport: () => {
+      dispatch(getData('sports'))
+    },
   })
 )(AdminSports)

mpwo_client/src/components/App.css

@@ -40,6 +40,7 @@
 }
 
 .card {
+  padding-top: 15px;
   text-align: left;
 }
 

mpwo_client/src/mwpoApi/index.js

@@ -0,0 +1,17 @@
+import { apiUrl } from '../utils'
+
+export default class MpwoApi {
+
+  static getData(target) {
+    const request = new Request(`${apiUrl}${target}`, {
+      method: 'GET',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${window.localStorage.getItem('authToken')}`,
+      }),
+    })
+    return fetch(request)
+      .then(response => response.json())
+      .catch(error => error)
+  }
+}

mpwo_client/src/reducers/index.js

@@ -4,6 +4,28 @@ import { combineReducers } from 'redux'
 
 import initial from './initial'
 
+const handleDataAndError = (state, type, action) => {
+  if (action.target !== type) {
+    return state
+  }
+  switch (action.type) {
+    case 'SET_DATA':
+      return {
+        ...state,
+        data: action.data[action.target],
+        error: null,
+      }
+    case 'SET_ERROR':
+      return {
+        ...state,
+        data: { ...initial[type].data },
+        error: action.error,
+      }
+    default:
+      return state
+  }
+}
+
 const formData = (state = initial.formData, action) => {
   switch (action.type) {
     case 'UPDATE_USER_FORMDATA':
@@ -77,6 +99,9 @@ const messages = (state = initial.messages, action) => {
   }
 }
 
+const sports = (state = initial.sports, action) =>
+  handleDataAndError(state, 'sports', action)
+
 const user = (state = initial.user, action) => {
   switch (action.type) {
     case 'AUTH_ERROR':
@@ -123,6 +148,7 @@ const reducers = combineReducers({
   message,
   messages,
   router: routerReducer,
+  sports,
   user,
 })
 

mpwo_client/src/reducers/initial.js

@@ -1,3 +1,8 @@
+const emptyData = {
+  data: [],
+  error: null,
+}
+
 export default {
   message: '',
   messages: [],
@@ -34,4 +39,7 @@ export default {
       passwordConf: '',
     }
   },
+  sports: {
+    ...emptyData,
+  }
 }