Admin: refactor (WIP)

.eslintrc.json

@@ -31,11 +31,7 @@
     "no-console": [
       "error",
       {
-        "allow": [
+        "allow": ["warn", "error", "info"]
-          "warn",
-          "error",
-          "info"
-        ]
       }
     ],
     "no-const-assign": "error",
@@ -172,69 +168,43 @@
     "no-warning-comments": [
       "warn",
       {
-        "terms": [
+        "terms": ["todo", "fixme", "xxx"],
-          "todo",
-          "fixme",
-          "xxx"
-        ],
         "location": "start"
       }
     ],
     "no-with": "off",
-    "array-bracket-spacing": [
+    "array-bracket-spacing": ["error", "never"],
-      "error",
-      "never"
-    ],
     "array-callback-return": "off",
-    "arrow-body-style": [
+    "arrow-body-style": ["error", "as-needed"],
-      "error",
+    "arrow-parens": ["error", "as-needed"],
-      "as-needed"
-    ],
-    "arrow-parens": [
-      "error",
-      "as-needed"
-    ],
     "arrow-spacing": "error",
     "accessor-pairs": "off",
     "block-scoped-var": "warn",
     "block-spacing": "error",
-    "brace-style": [
+    "brace-style": ["error", "1tbs"],
-      "error",
-      "1tbs"
-    ],
     "callback-return": "off",
     "camelcase": [
-      "warn", {
+      "warn",
+      {
         "properties": "never"
-    }],
+      }
+    ],
     "capitalized-comments": "off",
     "class-methods-use-this": "off",
     "comma-dangle": "off",
     "comma-spacing": "error",
-    "comma-style": [
+    "comma-style": ["error", "last"],
-      "error",
-      "last"
-    ],
     "complexity": "off",
-    "computed-property-spacing": [
+    "computed-property-spacing": ["error", "never"],
-      "error",
-      "never"
-    ],
     "consistent-return": "off",
     "consistent-this": "off",
     "constructor-super": "error",
     "curly": "error",
     "default-case": "off",
-    "dot-location": [
+    "dot-location": ["warn", "property"],
-      "warn",
-      "property"
-    ],
     "dot-notation": "error",
     "eol-last": "error",
-    "eqeqeq": [
+    "eqeqeq": ["error", "smart"],
-      "error",
-      "smart"
-    ],
     "func-call-spacing": "error",
     "func-names": "off",
     "func-name-matching": "off",
@@ -256,11 +226,8 @@
     "lines-around-comment": "off",
     "lines-around-directive": "off",
     "max-depth": "warn",
-    "max-len": "error",
+    "max-len": "warn",
-    "max-lines": [
+    "max-lines": ["warn", 500],
-      "warn",
-      500
-    ],
     "max-nested-callbacks": "warn",
     "max-params": "off",
     "max-statements": "off",
@@ -272,10 +239,7 @@
     "newline-before-return": "off",
     "newline-per-chained-call": "off",
     "object-curly-newline": "off",
-    "object-curly-spacing": [
+    "object-curly-spacing": ["error", "always"],
-      "error",
-      "always"
-    ],
     "object-property-newline": [
       "error",
       {
@@ -297,13 +261,11 @@
     "prefer-rest-params": "error",
     "prefer-spread": "error",
     "prefer-template": "warn",
-    "quote-props": [
+    "quote-props": ["error", "as-needed"],
-      "error",
-      "as-needed"
-    ],
     "quotes": [
       "warn",
-      "single", {
+      "single",
+      {
         "avoidEscape": true
       }
     ],
@@ -312,10 +274,7 @@
     "require-jsdoc": "off",
     "require-yield": "error",
     "rest-spread-spacing": "error",
-    "semi": [
+    "semi": ["error", "never"],
-      "error",
-      "never"
-    ],
     "semi-spacing": "error",
     "sort-keys": "off",
     "sort-imports": "off",
@@ -371,21 +330,12 @@
     "react/sort-comp": "error",
     "react/sort-prop-types": "error",
     "react/style-prop-object": "off",
-    "react/jsx-boolean-value": [
+    "react/jsx-boolean-value": ["error", "never"],
-      "error",
-      "never"
-    ],
     "react/jsx-closing-bracket-location": "error",
-    "react/jsx-curly-spacing": [
+    "react/jsx-curly-spacing": ["error", "never"],
-      "error",
-      "never"
-    ],
     "react/jsx-equals-spacing": "error",
     "react/jsx-filename-extension": "error",
-    "react/jsx-first-prop-new-line": [
+    "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
-      "error",
-      "multiline-multiprop"
-    ],
     "react/jsx-handler-names": "error",
     "react/jsx-indent": "off",
     "react/jsx-indent-props": "off",
@@ -397,9 +347,12 @@
     "react/jsx-no-literals": "off",
     "react/jsx-no-target-blank": "error",
     "react/jsx-no-undef": "error",
-    "react/jsx-pascal-case": ["error", {
+    "react/jsx-pascal-case": [
+      "error",
+      {
         "ignore": ["_"]
-    }],
+      }
+    ],
     "react/jsx-sort-props": "off",
     "react/jsx-tag-spacing": [
       "error",
@@ -431,21 +384,13 @@
     "import/no-nodejs-modules": "off",
     "import/first": "warn",
     "import/no-duplicates": "error",
-    "import/no-namespace": "warn",
+    "import/no-namespace": "off",
     "import/extensions": "warn",
     "import/order": [
       "error",
       {
         "newlines-between": "always",
-        "groups": [
+        "groups": ["builtin", "external", ["parent", "sibling", "index"]]
-          "builtin",
-          "external",
-          [
-            "parent",
-            "sibling",
-            "index"
-          ]
-        ]
       }
     ],
     "import/newline-after-import": [
@@ -460,17 +405,11 @@
     "import/no-named-default": "warn",
     "import/no-anonymous-default-export": "off"
   },
-  "plugins": [
+  "plugins": ["react", "import"],
-    "react",
-    "import"
-  ],
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions": [
+        "extensions": [".js", ".jsx"]
-          ".js",
-          ".jsx"
-        ]
       }
     }
   }

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>
+        <AdminPage
-          <title>mpwo - Admin</title>
+          data={sports}
-        </Helmet>
+          target="sports"
-        <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>
-
       </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 => ({