Admin: sports edition

mpwo_client/src/components/Admin/AdminPage.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Helmet } from 'react-helmet'
-
-
-export default function AdminPage(props) {
-
-  const { target, data } = props
-  const error = data.error
-  const results = data.data
-  const tbKeys = []
-  if (results.length > 0) {
-    Object.keys(results[0]).map(key => tbKeys.push(key))
-  }
-  const title = target.charAt(0).toUpperCase() + target.slice(1)
-
-  return (
-    <div>
-      <Helmet>
-        <title>mpwo - Admin</title>
-      </Helmet>
-      {error && (
-        <code>{error}</code>
-      )}
-      <h1 className="page-title">
-          Administration - {title}
-      </h1>
-      <div className="container">
-        <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">{result[key]}</th>
-                      }
-                      return <td key={key}>{result[key]}</td>
-                  }) }
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <div className="col-md-2" />
-        </div>
-      </div>
-    </div>
-  )
-}

mpwo_client/src/components/Admin/AdminSport.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { getData } from '../../actions/index'
+import AdminDetail from './generic/AdminDetail'
+
+class AdminSports extends React.Component {
+  componentDidMount() {
+    this.props.loadSport(
+      this.props.location.pathname.replace('/admin/sport/', '')
+    )
+  }
+  render() {
+    const { sports } = this.props
+
+    return (
+      <div>
+        <AdminDetail
+          results={sports}
+          target="sports"
+        />
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    sports: state.sports.data,
+    user: state.user,
+  }),
+  dispatch => ({
+    loadSport: sportId => {
+      dispatch(getData('sports', sportId))
+    },
+  })
+)(AdminSports)

mpwo_client/src/components/Admin/AdminSports.jsx

@@ -2,18 +2,20 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import { getData } from '../../actions/index'
-import AdminPage from './AdminPage'
+import AdminPage from './generic/AdminPage'
 
 class AdminSports extends React.Component {
   componentDidMount() {
-      this.props.loadSport()
+      this.props.loadSports()
   }
   render() {
     const { sports } = this.props
+
     return (
       <div>
         <AdminPage
           data={sports}
+          detailLink="sport"
           target="sports"
         />
       </div>
@@ -27,7 +29,7 @@ export default connect(
     user: state.user,
   }),
   dispatch => ({
-    loadSport: () => {
+    loadSports: () => {
       dispatch(getData('sports'))
     },
   })

mpwo_client/src/components/Admin/generic/AdminDetail.jsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import { updateData } from '../../../actions/index'
+
+class AdminDetail extends React.Component {
+
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      isInEdition: false,
+    }
+  }
+
+  render() {
+    const {
+      message,
+      onDataUpdate,
+      results,
+      target,
+    } = this.props
+    const { isInEdition } = this.state
+    const title = target.charAt(0).toUpperCase() + target.slice(1)
+
+    return (
+      <div>
+        <Helmet>
+          <title>mpwo - Admin</title>
+        </Helmet>
+        <h1 className="page-title">
+            Administration - {title}
+        </h1>
+        {message ? (
+          <code>{message}</code>
+        ) : (
+          results.length === 1 && (
+          <div className="container">
+            <div className="row">
+              <div className="col-md-2" />
+              <div className="col-md-8 card">
+                <div className="card-body">
+                  <form onSubmit={event =>
+                   event.preventDefault()}
+                  >
+                    { results.map(result => (
+                      Object.keys(result).map(key => (
+                        <div className="form-group" key={key}>
+                          <label>
+                            {key}:
+                            <input
+                              className="form-control input-lg"
+                              name={key}
+                              readOnly={key === 'id' || !isInEdition}
+                              defaultValue={result[key]}
+                            />
+                          </label>
+                        </div>
+                      ))
+                    ))}
+                    {isInEdition ? (
+                      <div>
+                        <input
+                          type="submit"
+                          className="btn btn-primary btn-lg btn-block"
+                          onClick={event => {
+                              onDataUpdate(event, target)
+                              this.setState({ isInEdition: false })
+                            }
+                          }
+                          value="Submit"
+                        />
+                        <input
+                          type="submit"
+                          className="btn btn-secondary btn-lg btn-block"
+                          onClick={event => {
+                            event.target.form.reset()
+                            this.setState({ isInEdition: false })
+                          }}
+                          value="Cancel"
+                        />
+                      </div>
+                    ) : (
+                      <div>
+                        <input
+                          type="submit"
+                          className="btn btn-primary btn-lg btn-block"
+                          onClick={() => this.setState({ isInEdition: true })}
+                          value="Edit"
+                        />
+                        <input
+                          type="submit"
+                          className="btn btn-danger btn-lg btn-block"
+                          value="Delete"
+                        />
+                      </div>
+                    )}
+                  </form>
+                  <Link to={`/admin/${target}`}>Back to the list</Link>
+                </div>
+              </div>
+              <div className="col-md-2" />
+            </div>
+          </div>
+          )
+        )}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    message: state.message,
+  }),
+  dispatch => ({
+    onDataUpdate: (e, target) => {
+      const data = [].slice
+        .call(e.target.form.elements)
+        .reduce(function(map, obj) {
+          if (obj.name) {
+            map[obj.name] = obj.value
+          }
+          return map
+        }, {})
+      dispatch(updateData(target, data))
+    },
+  })
+)(AdminDetail)

mpwo_client/src/components/Admin/generic/AdminPage.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { Link } from 'react-router-dom'
+
+export default function AdminPage(props) {
+
+  const { data, detailLink, target } = props
+  const { error } = data
+  const results = data.data
+  const tbKeys = []
+  if (results.length > 0) {
+    Object.keys(results[0]).map(key => tbKeys.push(key))
+  }
+  const title = target.charAt(0).toUpperCase() + target.slice(1)
+
+  return (
+    <div>
+      <Helmet>
+        <title>mpwo - Admin</title>
+      </Helmet>
+      <h1 className="page-title">
+          Administration - {title}
+      </h1>
+      {error ? (
+        <code>{error}</code>
+      ) : (
+        <div className="container">
+          <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>
+                        })
+                      }
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          <div className="col-md-2" />
+        </div>
+      </div>
+      )}
+
+    </div>
+  )
+}

mpwo_client/src/components/Admin/index.jsx

@@ -4,6 +4,7 @@ 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 AccessDenied from './../Others/AccessDenied'
 import NotFound from './../Others/NotFound'
@@ -22,7 +23,8 @@ class Admin extends React.Component {
           user.isAdmin ? (
             <Switch>
               <Route exact path="/admin" component={AdminMenu} />
-              <Route path="/admin/sports" component={AdminSports} />
+              <Route exact path="/admin/sports" component={AdminSports} />
+              <Route path="/admin/sport" component={AdminSport} />
               <Route component={NotFound} />
             </Switch>
           ) : (