Admin: refactor (WIP)

mpwo_client/src/components/Admin/AdminPage.jsx

@@ -0,0 +1,59 @@
+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/AdminSports.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
 import { getData } from '../../actions/index'
+import AdminPage from './AdminPage'
 
 class AdminSports extends React.Component {
   componentDidMount() {
@@ -12,26 +12,10 @@ class AdminSports extends React.Component {
     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 className="sport-items">
-                {sports.map(sport => (
-                  <li key={sport.id}>
-                      {sport.label}
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div className="col-md-2" />
-          </div>
-        </div>
-
+        <AdminPage
+          data={sports}
+          target="sports"
+        />
       </div>
     )
   }
@@ -39,7 +23,7 @@ class AdminSports extends React.Component {
 
 export default connect(
   state => ({
-    sports: state.sports.data,
+    sports: state.sports,
     user: state.user,
   }),
   dispatch => ({