Merge pull request #108 from GSG-G8/107-logout-AddEditForm

Pass logout props to Admin Container
GSG-G8 · Jun 2, 2020 · 4241afa · 4241afa
2 parents efc2fb7 + 5452b73
commit 4241afa
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 50 deletions.
diff --git a/client/src/Contexts/LogoutContext.js b/client/src/Contexts/LogoutContext.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LogoutContext = createContext();
+
+export default LogoutContext;
diff --git a/client/src/app/index.js b/client/src/app/index.js
@@ -8,6 +8,7 @@ import {
 import axios from 'axios';
 
 import * as ROUTES from '../constants/routes';
+import LogoutContext from '../Contexts/LogoutContext';
 import LoginPage from '../containers/loginPage';
 import CohortPage from '../containers/CohortPage';
 import StudentPage from '../containers/StudentPage';
@@ -82,33 +83,21 @@ class App extends Component {
               }
             />
             {isAuth ? (
-              <>
-                <Route
-                  exact
-                  path={ROUTES.HOME_PAGE}
-                  render={(props) => (
-                    <Statistics {...props} logout={this.logout} />
-                  )}
-                />
-                <Route
-                  path={ROUTES.COHORT_PAGE}
-                  exact
-                  render={() => <CohortPage logout={this.logout} />}
-                />
+              <LogoutContext.Provider value={{ logout: this.logout }}>
+                <Route exact path={ROUTES.HOME_PAGE} component={Statistics} />
+
+                <Route path={ROUTES.COHORT_PAGE} exact component={CohortPage} />
+
                 <Route
                   path={ROUTES.COHORT_STUDENTS_PAGE}
                   exact
-                  render={(props) => (
-                    <StudentPage {...props} logout={this.logout} />
-                  )}
+                  component={StudentPage}
                 />
 
                 <Route
                   path={ROUTES.COHORT_PROJECTS_PAGE}
                   exact
-                  render={(props) => (
-                    <AdminProject {...props} logout={this.logout} />
-                  )}
+                  component={AdminProject}
                 />
 
                 <Route
@@ -186,7 +175,7 @@ class App extends Component {
                     />
                   )}
                 />
-              </>
+              </LogoutContext.Provider>
             ) : redirect ? (
               <Route render={() => <Redirect to={ROUTES.LOGIN_PAGE} />} />
             ) : null}

diff --git a/client/src/components/AdminContainer/index.js b/client/src/components/AdminContainer/index.js
@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
 import { Layout, Button } from 'antd';
 import logo from '../../assets/images/logo.png';
 import './style.css';
+import LogoutContext from '../../Contexts/LogoutContext';
 
 const { Header } = Layout;
 
-const AdminContainer = ({ children, buttonContent, buttonRoute, logout }) => {
+const AdminContainer = ({ children, buttonContent, buttonRoute }) => {
   return (
     <>
       <Layout>
@@ -48,15 +49,17 @@ const AdminContainer = ({ children, buttonContent, buttonRoute, logout }) => {
                 </li>
               </ul>
               <div className="admin-side-btn">
-                <Button
-                  className="logout-btn"
-                  type="primary"
-                  onClick={() => {
-                    logout();
-                  }}
-                >
-                  Logout
-                </Button>
+                <LogoutContext.Consumer>
+                  {({ logout }) => (
+                    <Button
+                      className="logout-btn"
+                      type="primary"
+                      onClick={logout}
+                    >
+                      Logout
+                    </Button>
+                  )}
+                </LogoutContext.Consumer>
               </div>
             </div>
           </div>
@@ -76,7 +79,6 @@ AdminContainer.propTypes = {
   buttonContent: PropTypes.string,
   buttonRoute: PropTypes.string,
   children: PropTypes.node.isRequired,
-  logout: PropTypes.func.isRequired,
 };
 
 export default AdminContainer;
diff --git a/client/src/containers/AdminProjectPage/index.js b/client/src/containers/AdminProjectPage/index.js
@@ -85,7 +85,6 @@ class AdminProject extends Component {
 
   render() {
     const { data, total, startPage, endPage } = this.state;
-    const { logout } = this.props;
     const {
       match: {
         params: { cohortId },
@@ -97,7 +96,6 @@ class AdminProject extends Component {
         <AdminContainer
           buttonContent="Add Project"
           buttonRoute={`/admin/cohorts/${cohortId}/projects/add`}
-          logout={logout}
         >
           {data.length === 0 ? (
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="empty" />
@@ -144,7 +142,6 @@ AdminProject.propTypes = {
   cohortId: PropTypes.number.isRequired,
   match: PropTypes.func.isRequired,
   location: PropTypes.func.isRequired,
-  logout: PropTypes.func.isRequired,
 };
 
 export default AdminProject;
diff --git a/client/src/containers/CohortPage/index.js b/client/src/containers/CohortPage/index.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import axios from 'axios';
 import { notification, Modal, Empty, List, Pagination } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
@@ -72,14 +71,12 @@ class Cohort extends Component {
 
   render() {
     const { data, startPage, endPage, total } = this.state;
-    const { logout } = this.props;
     const list = data.slice(startPage, endPage);
     return (
       <div>
         <AdminContainer
           buttonContent="Add Cohort"
           buttonRoute="/admin/cohorts/add"
-          logout={logout}
         >
           {data.length === 0 ? (
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="empty" />
@@ -124,8 +121,5 @@ class Cohort extends Component {
     );
   }
 }
-Cohort.propTypes = {
-  logout: PropTypes.func.isRequired,
-};
 
 export default Cohort;
diff --git a/client/src/containers/StudentPage/index.js b/client/src/containers/StudentPage/index.js
@@ -82,14 +82,12 @@ class Student extends Component {
       },
     } = this.props;
     const { data, startPage, endPage, total } = this.state;
-    const { logout } = this.props;
     const list = data.slice(startPage, endPage);
     return (
       <div>
         <AdminContainer
           buttonContent="Add Student"
           buttonRoute={`/admin/cohorts/${cohortId}/students/add`}
-          logout={logout}
         >
           {data.length === 0 ? (
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="empty" />
@@ -141,7 +139,6 @@ Student.defaultProps = {
 };
 
 Student.propTypes = {
-  logout: PropTypes.func.isRequired,
   cohortId: PropTypes.number,
   match: PropTypes.node,
   params: PropTypes.node,

diff --git a/client/src/containers/statisticsPage/index.js b/client/src/containers/statisticsPage/index.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Progress, notification } from 'antd';
 import axios from 'axios';
-import PropTypes from 'prop-types';
 
 import AdminContainer from '../../components/AdminContainer';
 import Chart from '../../components/Charts';
@@ -40,10 +39,9 @@ class Statistics extends Component {
 
   render() {
     const { cohortsCount, studentsCount, projectsCount } = this.state;
-    const { logout } = this.props;
     return (
       <div>
-        <AdminContainer logout={logout}>
+        <AdminContainer>
           <div className="state-container">
             <Chart />
             <div className="state">
@@ -71,8 +69,4 @@ class Statistics extends Component {
   }
 }
 
-Statistics.propTypes = {
-  logout: PropTypes.func.isRequired,
-};
-
 export default Statistics;