refactor App - LessonPool components

client/src/components/App.js

@@ -8,9 +8,8 @@ import LessonPool from './LessonPool';
 import Profile from './Profile';
 import Roster from './Roster';
 import LessonPage from './LessonPage';
-import Feedback from './Feedback';
 
-function App() {
+const App = () => {
   return (
     <div>
       <BrowserRouter>
@@ -19,30 +18,28 @@ function App() {
             <Route exact path="/Login" component={Login} />
             <Route exact path="/SignUp" component={SignUp} />
             <Route exact path="/">
-              <AuthComponent component={SiteLessons} />
+              <AuthComponent Component={SiteLessons} />
             </Route>
             <Route path="/SiteLessons">
-              <AuthComponent component={SiteLessons} />
+              <AuthComponent Component={SiteLessons} />
             </Route>
             <Route path="/LessonPool">
-              <AuthComponent component={LessonPool} />
+              <AuthComponent Component={LessonPool} />
             </Route>
             <Route path="/Profile">
-              <AuthComponent component={Profile} />
+              <AuthComponent Component={Profile} />
             </Route>
             <Route path="/Roster">
-              <AuthComponent component={Roster} />
+              <AuthComponent Component={Roster} />
             </Route>
             <Route path="/LessonPage/:id">
-              <AuthComponent component={LessonPage} />
-            </Route>
-            <Route path="/Feedback/:id">
-              <AuthComponent component={Feedback} />
+              <AuthComponent Component={LessonPage} />
             </Route>
           </Switch>
         </div>
       </BrowserRouter>
     </div>
   );
-}
+};
+
 export default App;

client/src/components/AuthComponent.js

@@ -1,81 +1,64 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 import * as decode from 'jwt-decode';
 import { getAnovaToken, removeAnovaToken } from '../utils/utils';
 import NavBar from './NavBar';
 
-class AuthComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      message: undefined,
-      mentor: null,
-      mounted: false,
-    };
-  }
+const AuthComponent = props => {
+  const { history, match, Component } = props;
+
+  const [mentor, setMentor] = useState(null);
+  const [mounted, setMounted] = useState(false);
 
-  componentDidMount() {
+  useEffect(() => {
     let decodedAnovaToken;
     try {
       decodedAnovaToken = decode(getAnovaToken());
     } catch (err) {
       // if local storage doesn't have token
       removeAnovaToken();
-      this.props.history.push(`/login`);
+      history.push(`/Login`);
       return;
     }
 
     fetch('/api/v1/profile/' + decodedAnovaToken.id + '?uid=' + decodedAnovaToken.id)
       .then(res => res.json())
       .then(profile => {
-        this.setState({
-          mentor: profile[0].role === 'mentor',
-          mounted: true,
-        });
+        setMentor(profile[0].role === 'mentor');
+        setMounted(true);
       });
 
     const anovaToken = getAnovaToken();
 
     if (!anovaToken) {
-      this.props.history.replace('/login');
+      history.replace('/Login');
     } else {
       axios
         .post('/api/v1/auth', {
           anovaToken: anovaToken,
         })
-        .then(res => {
-          // as long as the bearer is authorized, all the children props will render
-          this.setState({
-            message: res.data.message,
-          });
-        })
         .catch(err => {
           removeAnovaToken();
-          this.props.history.push('/login');
+          history.push('/Login');
         });
     }
-  }
+  }, [history]);
 
-  render() {
-    if (!getAnovaToken() || !this.state.mounted) {
-      return (
-        <div>
-          <h1>Loading . . .</h1>
-        </div>
-      );
-    } else {
-      return (
-        <div>
-          <NavBar />
-          <this.props.component
-            ismentor={this.state.mentor}
-            id={this.props.match.params.id}
-          />
-        </div>
-      );
-    }
+  if (!getAnovaToken() || !mounted) {
+    return (
+      <div>
+        <h1>Loading . . .</h1>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <NavBar />
+        <Component ismentor={mentor} id={match.params.id} />
+      </div>
+    );
   }
-}
+};
 
 export default withRouter(AuthComponent);