Merge pull request #284 from STEM-C/revert-283-revert-282-feature/react_router_update

Revert "Revert "Refactored routes to be more like standard practice react router""

Author: gatorpazz

client/src/App.js

@@ -28,19 +28,37 @@ const App = () => {
     return (
         <div>
             <Switch>
-                <Route exact path={"/"} render={() => <Home history={history}/>}/>
-                <Route exact path={"/about"} render={() => <About history={history}/>}/>
-                <Route exact path={"/teacherlogin"} render={() => <TeacherLogin history={history}/>}/>
-                <Route exact path={"/login"} render={() => <StudentLogin history={history} />}/>
-                <PrivateRoute exact path={"/dashboard"} render={() => <Dashboard history={history}/>}/>
-                <PrivateRoute exact path={"/student"} render={() => <Student history={history} /> } />
-                <Route path={"/workspace"} render={() => <Workspace history={history} />}/>
-                <Route path={"/sandbox"} render={() => <Sandbox history={history}/>} />
-                <PrivateRoute exact path={"/day"} render={() => <Day history={history} /> } />
-                <PrivateRoute path={"/classroom/:id"} render={() => <Classroom history={history} /> } />
-                <Route exact path={"/ccdashboard"} render={() => <ContentCreator history={history} />}/>
-                <Route exact path={"/unitcreator"} render={() => <UnitCreator history={history} />}/>
-                <Route exact path={"/addblocks"} render={() => <UploadBlocks history={history} />}/>
+                <Route exact path="/">
+                    <Home />
+                </Route>
+                <Route exact path="/about">
+                    <About/>
+                </Route>
+                <Route exact path="/teacherlogin">
+                    <TeacherLogin history={history}/>
+                </Route>
+                <Route exact path="/login">
+                    <StudentLogin history={history} />
+                </Route>
+                <PrivateRoute exact path="/dashboard" render={() => <Dashboard history={history}/>}/>
+                <PrivateRoute exact path="/student" render={() => <Student history={history} /> } />
+                <Route path="/workspace">
+                    <Workspace history={history} />
+                </Route>
+                <Route path="/sandbox">
+                    <Sandbox history={history}/>
+                </Route>
+                <PrivateRoute exact path="/day" render={() => <Day history={history} /> } />
+                <PrivateRoute path="/classroom/:id" render={() => <Classroom history={history} /> } />
+                <Route exact path="/ccdashboard">
+                    <ContentCreator history={history} />
+                </Route>
+                <Route exact path="/unitcreator">
+                    <UnitCreator history={history} />
+                </Route>
+                <Route exact path="/addblocks">
+                    <UploadBlocks history={history} />
+                </Route>
 
                 <Route component={NotFound}/>
             </Switch>

client/src/views/Home/Home.js

@@ -4,15 +4,14 @@ import Logo from "../../assets/casmm_logo.png"
 import HomeJoin from "./HomeJoin"
 import NavBar from "../../components/NavBar/NavBar";
 
-export default function Home(props) {
-
-    return(
-        <div className='container nav-padding'>
-            <NavBar />
-            <div id='join-wrapper'>
-                <img src={Logo} id='casmm-logo' alt='logo'/>
-                <HomeJoin history={props.history}/>
-            </div>
+const Home = () => (
+    <div className='container nav-padding'>
+        <NavBar />
+        <div id='join-wrapper'>
+            <img src={Logo} id='casmm-logo' alt='logo'/>
+            <HomeJoin />
         </div>
-    )
-}
+    </div>
+)
+
+export default Home;

client/src/views/Home/HomeJoin.js

@@ -1,20 +1,21 @@
 import React, {useState} from 'react'
+import { useHistory } from 'react-router';
 import {message} from 'antd'
 import './Home.less'
 import { getStudents } from "../../Utils/requests";
 
 export default function HomeJoin(props) {
     const [loading, setLoading] = useState(false);
     const [joinCode, setJoinCode] = useState('');
-
+    const history = useHistory();
     const handleLogin = () => {
         setLoading(true);
 
         getStudents(joinCode).then(res => {
             if(res.data){
                 setLoading(false);
                 localStorage.setItem('join-code', joinCode);
-                props.history.push('/login');
+                history.push('/login');
             } else {
                 setLoading(false);
                 message.error('Join failed. Please input a valid join code.');