Admin: get sports list

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;
 }