Admin: add and delete a sport (WIP)

2018-04-30 21:38:09 +02:00
parent b69a55362d
commit e423c355b5
10 changed files with 256 additions and 47 deletions
--- a/mpwo_client/src/actions/index.js
+++ b/mpwo_client/src/actions/index.js
@ -1,4 +1,5 @@
 import mpwoApi from '../mwpoApi/index'
+import { history } from '../index'


 export const setData = (target, data) => ({
@ -30,6 +31,24 @@ export function getData(target, id = null) {
  }
 }

+export function addData(target, data) {
+  return function(dispatch) {
+    if (isNaN(data.id)) {
+      return dispatch(setError(target, `${target}: Incorrect id`))
+    }
+    return mpwoApi
+    .addData(target, data)
+    .then(ret => {
+      if (ret.status === 'created') {
+        dispatch(setData(target, ret.data))
+      } else {
+        dispatch(setError(`${target}: ${ret.status}`))
+      }
+    })
+    .catch(error => dispatch(setError(`${target}: ${error}`)))
+  }
+}
+
 export function updateData(target, data) {
  return function(dispatch) {
    if (isNaN(data.id)) {
@ -47,3 +66,21 @@ export function updateData(target, data) {
    .catch(error => dispatch(setError(`${target}: ${error}`)))
  }
 }
+
+export function deleteData(target, id) {
+  return function(dispatch) {
+    if (isNaN(id)) {
+      return dispatch(setError(target, `${target}: Incorrect id`))
+    }
+    return mpwoApi
+    .deleteData(target, id)
+    .then(ret => {
+      if (ret.status === 204) {
+        history.push(`/admin/${target}`)
+      } else {
+        dispatch(setError(`${target}: ${ret.status}`))
+      }
+    })
+    .catch(error => dispatch(setError(`${target}: ${error}`)))
+  }
+}
--- a/mpwo_client/src/components/Admin/Sports/AdminMenu.jsx
+++ b/mpwo_client/src/components/Admin/Sports/AdminMenu.jsx
@ -16,17 +16,19 @@ class AdminMenu extends React.Component {
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-8 card">
-              <ul className="admin-items">
-                <li>
-                  <Link
-                    to={{
-                      pathname: '/admin/sports',
-                    }}
-                  >
-                    Sports
-                  </Link>
-                </li>
-              </ul>
+              <div className="card-body">
+                <ul className="admin-items">
+                  <li>
+                    <Link
+                      to={{
+                        pathname: '/admin/sports',
+                      }}
+                    >
+                      Sports
+                    </Link>
+                  </li>
+                </ul>
+              </div>
            </div>
            <div className="col-md-2" />
          </div>
--- a/mpwo_client/src/components/Admin/Sports/AdminSport.jsx
+++ b/mpwo_client/src/components/Admin/Sports/AdminSport.jsx
@ -1,8 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'

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

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

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

 class AdminSports extends React.Component {
  componentDidMount() {
--- a/mpwo_client/src/components/Admin/generic/AdminDetail.jsx
+++ b/mpwo_client/src/components/Admin/generic/AdminDetail.jsx
@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'

-import { updateData } from '../../../actions/index'
+import { deleteData, updateData } from '../../../actions/index'

 class AdminDetail extends React.Component {

@ -18,6 +18,7 @@ class AdminDetail extends React.Component {
    const {
      message,
      onDataUpdate,
+      onDataDelete,
      results,
      target,
    } = this.props
@ -92,12 +93,12 @@ class AdminDetail extends React.Component {
                        <input
                          type="submit"
                          className="btn btn-danger btn-lg btn-block"
+                          onClick={event => onDataDelete(event, target)}
                          value="Delete"
                        />
                      </div>
                    )}
                  </form>
-                  <Link to={`/admin/${target}`}>Back to the list</Link>
                </div>
              </div>
              <div className="col-md-2" />
@ -115,6 +116,10 @@ export default connect(
    message: state.message,
  }),
  dispatch => ({
+    onDataDelete: (e, target) => {
+      const id = e.target.form.id.value
+      dispatch(deleteData(target, id))
+    },
    onDataUpdate: (e, target) => {
      const data = [].slice
        .call(e.target.form.elements)
--- a/mpwo_client/src/components/Admin/generic/AdminPage.jsx
+++ b/mpwo_client/src/components/Admin/generic/AdminPage.jsx
@ -28,34 +28,37 @@ export default function AdminPage(props) {
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-8 card">
-              <table className="table">
-                <thead>
-                  <tr>
-                    {tbKeys.map(
-                      tbKey => <th key={tbKey} scope="col">{tbKey}</th>
-                    )}
-                  </tr>
-                </thead>
-                <tbody>
-                  { results.map((result, idx) => (
-                    <tr key={idx}>
-                      { Object.keys(result).map(key => {
-                        if (key === 'id') {
-                          return (
-                            <th key={key} scope="row">
-                            <Link to={`/admin/${detailLink}/${result[key]}`}>
-                              {result[key]}
-                            </Link>
-                            </th>
-                          )
-                        }
-                        return <td key={key}>{result[key]}</td>
-                        })
-                      }
+              <div className="card-body">
+                <table className="table">
+                  <thead>
+                    <tr>
+                      {tbKeys.map(
+                        tbKey => <th key={tbKey} scope="col">{tbKey}</th>
+                      )}
                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody>
+                    { results.map((result, idx) => (
+                      <tr key={idx}>
+                        { Object.keys(result).map(key => {
+                          if (key === 'id') {
+                            return (
+                              <th key={key} scope="row">
+                              <Link to={`/admin/${detailLink}/${result[key]}`}>
+                                {result[key]}
+                              </Link>
+                              </th>
+                            )
+                          }
+                          return <td key={key}>{result[key]}</td>
+                          })
+                        }
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                <Link to={`/admin/${target}/add`}>Add new item</Link>
+              </div>
            </div>
          <div className="col-md-2" />
        </div>
--- a/mpwo_client/src/components/Admin/index.jsx
+++ b/mpwo_client/src/components/Admin/index.jsx
@ -3,9 +3,9 @@ import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 import { Redirect, Route, Switch } from 'react-router-dom'

-import AdminMenu from './AdminMenu'
-import AdminSport from './AdminSport'
-import AdminSports from './AdminSports'
+import AdminMenu from './Sports/AdminMenu'
+import AdminSport from './Sports/AdminSport'
+import AdminSports from './Sports/AdminSports'
 import AccessDenied from './../Others/AccessDenied'
 import NotFound from './../Others/NotFound'
 import { isLoggedIn } from '../../utils'
--- a/mpwo_client/src/mwpoApi/index.js
+++ b/mpwo_client/src/mwpoApi/index.js
@ -15,6 +15,20 @@ export default class MpwoApi {
      .catch(error => error)
  }

+  static addData(target, data) {
+    const request = new Request(`${apiUrl}${target}`, {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${window.localStorage.getItem('authToken')}`,
+      }),
+      body: JSON.stringify(data)
+    })
+    return fetch(request)
+      .then(response => response.json())
+      .catch(error => error)
+  }
+
  static updateData(target, data) {
    const request = new Request(`${apiUrl}${target}/${data.id}`, {
      method: 'PATCH',
@ -28,4 +42,17 @@ export default class MpwoApi {
      .then(response => response.json())
      .catch(error => error)
  }
+
+  static deleteData(target, id) {
+    const request = new Request(`${apiUrl}${target}/${id}`, {
+      method: 'DELETE',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${window.localStorage.getItem('authToken')}`,
+      }),
+    })
+    return fetch(request)
+      .then(response => response)
+      .catch(error => error)
+  }
 }