Stephanie testing

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^16.13.0",
     "react-motion": "^0.5.2",
     "react-redux": "^7.2.0",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.3",
     "redux": "^4.0.5",

src/App.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import "./App.css";
 
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, Redirect } from "react-router-dom";
 import Navigation from "./components/Navigation";
 import Loading from "./components/Loading";
 import MessageBox from "./components/MessageBox";
@@ -23,17 +23,32 @@ function App() {
     dispatch(getUserWithStoredToken());
   }, [dispatch]);
 
+  const protectedRoutes = (Component, routerProps) => {
+    const isAuthenticated = localStorage.getItem("token");
+    return isAuthenticated ? (
+      <Component {...routerProps} />
+    ) : (
+      <Redirect to="/login" />
+    );
+  };
+
   return (
     <div className="App">
       <Navigation />
       <MessageBox />
       {isLoading ? <Loading /> : null}
       <Switch>
         <Route exact path="/" component={Welcome} />
-        <Route path="/homepage" component={Homepage} />
         <Route path="/signup" component={SignUp} />
         <Route path="/login" component={Login} />
-        <Route path="/exercise/:id" component={Exercise} />
+        <Route
+          path="/homepage"
+          render={(routerProps) => protectedRoutes(Homepage, routerProps)}
+        />
+        <Route
+          path="/exercise/:id"
+          render={(routerProps) => protectedRoutes(Exercise, routerProps)}
+        />
       </Switch>
     </div>
   );

src/components/Navigation/LoggedIn.js

@@ -1,17 +1,37 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
+// import { useHistory } from "react-router";
 import { logOut } from "../../store/user/actions";
-import Button from "react-bootstrap/Button";
 import { selectUser } from "../../store/user/selectors";
 import Nav from "react-bootstrap/Nav";
+import Homepage from "../../pages/Homepage";
 
 export default function LoggedIn() {
   const dispatch = useDispatch();
+  // const history = useHistory();
   const user = useSelector(selectUser);
   return (
     <>
       <Nav.Item style={{ padding: ".5rem 1rem" }}>{user.email}</Nav.Item>
-      <Button onClick={() => dispatch(logOut())}>Logout</Button>
+      <button
+        style={{
+          backgroundColor: "#009973",
+          color: "#fff",
+          border: "none",
+          padding: "10px 20px",
+          textAlign: "center",
+          textDecoration: "none",
+          display: "inline-block",
+          fontSize: "16px",
+          borderRadius: "8px",
+        }}
+        onClick={() => {
+          dispatch(logOut());
+          // history.push(Homepage);
+        }}
+      >
+        Logout
+      </button>
     </>
   );
 }

src/components/Navigation/index.js

@@ -10,7 +10,6 @@ import LoggedOut from "./LoggedOut";
 
 export default function Navigation() {
   const token = useSelector(selectToken);
-
   const loginLogoutControls = token ? <LoggedIn /> : <LoggedOut />;
 
   return (
@@ -25,7 +24,6 @@ export default function Navigation() {
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav style={{ width: "100%" }} fill>
           <NavbarItem path="/homepage" linkText="Home" />
-          <NavbarItem path="/other" linkText="Other" />
           {loginLogoutControls}
         </Nav>
       </Navbar.Collapse>

src/pages/Exercise/index.js

@@ -10,11 +10,14 @@ import QuizCode from "../../components/QuizCode";
 
 export default function Exercise() {
   const param = useParams();
+  console.log("param", param);
   const exerciseId = param.id;
+  console.log("ex id test", exerciseId);
   const dispatch = useDispatch();
   const allCurrentExercises = useSelector(selectExercise);
   const completedExercises = useSelector(selectCompletedExercises);
   const [currentExercise, setCurrentExercise] = useState("");
+  console.log("all ex", allCurrentExercises);
 
   useEffect(() => {
     completedExercises.forEach((item) => {
@@ -40,7 +43,7 @@ export default function Exercise() {
     dispatch(getCompletedExercises());
     dispatch(getExerciseById(exerciseId));
   }, [dispatch, exerciseId]);
-  // console.log("current exercise", currentExercise)
+  console.log("current exercise", currentExercise);
 
   const questionFormat = () => {
     if (currentExercise && currentExercise.level === "level 1") {
@@ -49,6 +52,7 @@ export default function Exercise() {
       return <QuizCode exercise={currentExercise} />;
     } else {
       //return some loading indicator would be better
+      console.log("test");
       return null;
     }
   };

src/pages/Homepage/index.js

@@ -15,8 +15,10 @@ export default function Homepage() {
   const [searchResults, setSearchResults] = useState([]);
 
   useEffect(() => {
-    dispatch(getExercises());
-  }, [dispatch]);
+    if (exercises.length === 0) {
+      dispatch(getExercises());
+    }
+  }, []);
 
   useEffect(() => {
     if (!searchTerm) {
@@ -26,7 +28,8 @@ export default function Homepage() {
         exercise.name.toLowerCase().includes(searchTerm.toLowerCase())
       );
       setSearchResults(results);
-  }, [searchTerm]);
+    }
+  }, [searchTerm, exercises]);
 
   const handleChange = (event) => {
     setSearchTerm(event.target.value);
@@ -47,16 +50,16 @@ export default function Homepage() {
 
       {data.map((exercise) => {
         return (
-          <Card className="hpCard" key={exercise.id}>
-            <Card.Body className="homeCard">
-              <Link className="hpLink" to={`/exercise/${exercise.id}`}>
+          <Link className="hpLink" to={`/exercise/${exercise.id}`}>
+            <Card className="hpCard" key={exercise.id}>
+              <Card.Body className="homeCard">
                 <b className="cardTitle">{exercise.name}</b>
-              </Link>
-              <br />
-              Exercises: <br />
-              MonkeyMaster:
-            </Card.Body>
-          </Card>
+                <br />
+                Exercises: 3 <br />
+                MonkeyMaster:
+              </Card.Body>
+            </Card>
+          </Link>
         );
       })}
       <Card className="hpCard">

src/pages/Login/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Form from "react-bootstrap/Form";
 import Container from "react-bootstrap/Container";
-import Button from "react-bootstrap/Button";
 import { login } from "../../store/user/actions";
 import { selectToken } from "../../store/user/selectors";
 import { useDispatch, useSelector } from "react-redux";
@@ -39,7 +38,7 @@ export default function SignUp() {
           <Form.Label>Email address</Form.Label>
           <Form.Control
             value={email}
-            onChange={event => setEmail(event.target.value)}
+            onChange={(event) => setEmail(event.target.value)}
             type="email"
             placeholder="Enter email"
             required
@@ -50,18 +49,33 @@ export default function SignUp() {
           <Form.Label>Password</Form.Label>
           <Form.Control
             value={password}
-            onChange={event => setPassword(event.target.value)}
+            onChange={(event) => setPassword(event.target.value)}
             type="password"
             placeholder="Password"
             required
           />
         </Form.Group>
         <Form.Group className="mt-5">
-          <Button variant="primary" type="submit" onClick={submitForm}>
+          <button
+            style={{
+              backgroundColor: "#009973",
+              color: "#fff",
+              border: "none",
+              padding: "10px 20px",
+              textAlign: "center",
+              textDecoration: "none",
+              display: "inline-block",
+              fontSize: "16px",
+              margin: "4px 2px",
+              borderRadius: "8px",
+            }}
+            type="submit"
+            onClick={submitForm}
+          >
             Log in
-          </Button>
+          </button>
         </Form.Group>
-        <Link to="/signup" style={{ textAlign: "center" }}>
+        <Link style={{ color: "#009973" }} to="/signup">
           Click here to sign up
         </Link>
       </Form>

src/pages/SignUp/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Form from "react-bootstrap/Form";
 import Container from "react-bootstrap/Container";
-import Button from "react-bootstrap/Button";
 import { signUp } from "../../store/user/actions";
 import { selectToken } from "../../store/user/selectors";
 import { useDispatch, useSelector } from "react-redux";
@@ -40,7 +39,7 @@ export default function SignUp() {
           <Form.Label>Name</Form.Label>
           <Form.Control
             value={name}
-            onChange={event => setName(event.target.value)}
+            onChange={(event) => setName(event.target.value)}
             type="text"
             placeholder="Enter name"
             required
@@ -50,7 +49,7 @@ export default function SignUp() {
           <Form.Label>Email address</Form.Label>
           <Form.Control
             value={email}
-            onChange={event => setEmail(event.target.value)}
+            onChange={(event) => setEmail(event.target.value)}
             type="email"
             placeholder="Enter email"
             required
@@ -64,18 +63,35 @@ export default function SignUp() {
           <Form.Label>Password</Form.Label>
           <Form.Control
             value={password}
-            onChange={event => setPassword(event.target.value)}
+            onChange={(event) => setPassword(event.target.value)}
             type="password"
             placeholder="Password"
             required
           />
         </Form.Group>
         <Form.Group className="mt-5">
-          <Button variant="primary" type="submit" onClick={submitForm}>
+          <button
+            style={{
+              backgroundColor: "#009973",
+              color: "#fff",
+              border: "none",
+              padding: "10px 20px",
+              textAlign: "center",
+              textDecoration: "none",
+              display: "inline-block",
+              fontSize: "16px",
+              margin: "4px 2px",
+              borderRadius: "8px",
+            }}
+            type="submit"
+            onClick={submitForm}
+          >
             Sign up
-          </Button>
+          </button>
         </Form.Group>
-        <Link to="/login">Click here to log in</Link>
+        <Link style={{ color: "#009973" }} to="/login">
+          Click here to log in
+        </Link>
       </Form>
     </Container>
   );