Client - refactor admin (wip)

fittrackee_client/src/components/Admin/AdminDashboard.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+export default function AdminDashboard() {
+  return (
+    <div>
+      <Helmet>
+        <title>FitTrackee - Administration</title>
+      </Helmet>
+      <div className="card activity-card">
+        <div className="card-header">
+          <strong>FitTrackee administration</strong>
+        </div>
+        <div className="card-body">TODO</div>
+      </div>
+    </div>
+  )
+}

fittrackee_client/src/components/Admin/AdminMenu.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import { capitalize } from '../../utils/index'
+
+const menuItems = ['application', 'sports', 'users']
+
+export default function AdminMenu() {
+  return (
+    <div>
+      <ul className="admin-items">
+        {menuItems.map(item => (
+          <li key={item}>
+            <Link
+              to={{
+                pathname: `/admin/${item}`,
+              }}
+            >
+              {capitalize(item)}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

fittrackee_client/src/components/Admin/Sports/AdminMenu.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Helmet } from 'react-helmet'
-import { Link } from 'react-router-dom'
-
-export default function AdminMenu() {
-  return (
-    <div>
-      <Helmet>
-        <title>FitTrackee - Admin - Sports</title>
-      </Helmet>
-      <h1 className="page-title">Administration</h1>
-      <div className="container">
-        <div className="row">
-          <div className="col-md-2" />
-          <div className="col-md-8 card">
-            <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>
-      </div>
-    </div>
-  )
-}

fittrackee_client/src/components/Admin/Sports/AdminSports.jsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { Route, Switch } from 'react-router-dom'
 
 import { getOrUpdateData } from '../../../actions'
 import AdminPage from '../generic/AdminPage'
+import AdminSport from './AdminSport'
+import AdminSportsAdd from './AdminSportsAdd'
+import NotFound from '../../Others/NotFound'
 
 class AdminSports extends React.Component {
   componentDidMount() {
@@ -10,11 +14,17 @@ class AdminSports extends React.Component {
   }
   render() {
     const { sports } = this.props
-
     return (
-      <div>
+      <Switch>
-        <AdminPage data={sports} target="sports" />
+        <Route
-      </div>
+          exact
+          path="/admin/sports"
+          render={() => <AdminPage data={sports} target="sports" />}
+        />
+        <Route exact path="/admin/sports/add" component={AdminSportsAdd} />
+        <Route exact path="/admin/sports/:sportId" component={AdminSport} />
+        <Route component={NotFound} />
+      </Switch>
     )
   }
 }

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

@@ -16,22 +16,18 @@ class AdminDetail extends React.Component {
   render() {
     const { message, onDataUpdate, onDataDelete, results, target } = this.props
     const { isInEdition } = this.state
-    const title = target.charAt(0).toUpperCase() + target.slice(1)
-
     return (
       <div>
         <Helmet>
           <title>FitTrackee - 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 card">
-                <div className="col-md-8 card">
                   <div className="card-body">
                     <form onSubmit={event => event.preventDefault()}>
                       {Object.keys(results[0])
@@ -112,7 +108,6 @@ class AdminDetail extends React.Component {
                     </form>
                   </div>
                 </div>
-                <div className="col-md-2" />
               </div>
             </div>
           )

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

@@ -14,21 +14,17 @@ export default function AdminPage(props) {
       .filter(key => key.charAt(0) !== '_')
       .map(key => tbKeys.push(key))
   }
-  const title = target.charAt(0).toUpperCase() + target.slice(1)
-
   return (
     <div>
       <Helmet>
         <title>FitTrackee - 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 card">
-            <div className="col-md-8 card">
               <div className="card-body">
                 <table className="table">
                   <thead>
@@ -90,7 +86,6 @@ export default function AdminPage(props) {
                 />
               </div>
             </div>
-            <div className="col-md-2" />
           </div>
         </div>
       )}

fittrackee_client/src/components/Admin/index.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Link, Redirect, Route, Switch } from 'react-router-dom'
 
-import AdminMenu from './Sports/AdminMenu'
+import AdminDashboard from './AdminDashboard'
-import AdminSport from './Sports/AdminSport'
+import AdminMenu from './AdminMenu'
 import AdminSports from './Sports/AdminSports'
-import AdminSportsAdd from './Sports/AdminSportsAdd'
 import AccessDenied from './../Others/AccessDenied'
 import NotFound from './../Others/NotFound'
 import { isLoggedIn } from '../../utils'
@@ -18,21 +17,41 @@ function Admin(props) {
       <Helmet>
         <title>FitTrackee - Admin</title>
       </Helmet>
-      {isLoggedIn() ? (
+      <div className="container dashboard">
-        user.admin ? (
+        <div className="row">
-          <Switch>
+          <div className="col-md-3">
-            <Route exact path="/admin" component={AdminMenu} />
+            <div className="card activity-card">
-            <Route exact path="/admin/sports" component={AdminSports} />
+              <div className="card-header">
-            <Route exact path="/admin/sports/add" component={AdminSportsAdd} />
+                <Link
-            <Route exact path="/admin/sports/:sportId" component={AdminSport} />
+                  to={{
-            <Route component={NotFound} />
+                    pathname: '/admin/',
-          </Switch>
+                  }}
-        ) : (
+                >
-          <AccessDenied />
+                  Administration
-        )
+                </Link>
-      ) : (
+              </div>
-        <Redirect to="/login" />
+              <div className="card-body">
-      )}
+                <AdminMenu />
+              </div>
+            </div>
+          </div>
+          <div className="col-md-9">
+            {isLoggedIn() ? (
+              user.admin ? (
+                <Switch>
+                  <Route exact path="/admin" component={AdminDashboard} />
+                  <Route path="/admin/sports" component={AdminSports} />
+                  <Route component={NotFound} />
+                </Switch>
+              ) : (
+                <AccessDenied />
+              )
+            ) : (
+              <Redirect to="/login" />
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

fittrackee_client/src/components/App.css

@@ -166,6 +166,10 @@ label {
   max-height: 35px;
 }
 
+.admin-items {
+ list-style-type: square;
+}
+
 .card {
   text-align: left;
 }

fittrackee_client/src/components/App.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 
 import './App.css'
-// import Admin from './Admin'
+import Admin from './Admin'
 import Activity from './Activity'
 import Activities from './Activities'
 import Dashboard from './Dashboard'
@@ -74,7 +74,7 @@ export default class App extends React.Component {
           <Route exact path="/activities/history" component={Activities} />
           <Route exact path="/activities/statistics" component={Statistics} />
           <Route path="/activities" component={Activity} />
-          {/* <Route path="/admin" component={Admin} /> */}
+          <Route path="/admin" component={Admin} />
           <Route component={NotFound} />
         </Switch>
         <Footer />

fittrackee_client/src/components/NavBar/index.jsx

@@ -8,7 +8,7 @@ import { apiUrl } from '../../utils'
 
 class NavBar extends React.PureComponent {
   render() {
-    const { id, isAuthenticated, picture, t, username } = this.props
+    const { admin, id, isAuthenticated, picture, t, username } = this.props
     return (
       <header>
         <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -76,18 +76,18 @@ class NavBar extends React.PureComponent {
                     </Link>
                   </li>
                 )}
-                {/* {user.admin && ( */}
+                {admin && (
-                {/* <li className="nav-item"> */}
+                  <li className="nav-item">
-                {/* <Link */}
+                    <Link
-                {/* className="nav-link" */}
+                      className="nav-link"
-                {/* to={{ */}
+                      to={{
-                {/* pathname: '/admin', */}
+                        pathname: '/admin',
-                {/* }} */}
+                      }}
-                {/* > */}
+                    >
-                {/* Admin */}
+                      Admin
-                {/* </Link> */}
+                    </Link>
-                {/* </li> */}
+                  </li>
-                {/* )} */}
+                )}
               </ul>
               {/* prettier-ignore */}
               <ul
@@ -160,6 +160,7 @@ class NavBar extends React.PureComponent {
 
 export default withTranslation()(
   connect(({ user }) => ({
+    admin: user.admin,
     id: user.id,
     isAuthenticated: user.isAuthenticated,
     picture: user.picture,

fittrackee_client/src/utils/index.js

@@ -76,3 +76,6 @@ export const getDateWithTZ = (date, tz) => {
     new Date()
   )
 }
+
+export const capitalize = target =>
+  target.charAt(0).toUpperCase() + target.slice(1)