Stephanie homepage

package.json

@@ -10,14 +10,17 @@
     "bootstrap": "^4.4.1",
     "codemirror": "^5.57.0",
     "react": "^16.13.0",
+    "react-animations": "^1.0.0",
     "react-bootstrap": "^1.0.0-beta.17",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.0",
+    "react-motion": "^0.5.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.3",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -8,6 +8,7 @@ import MessageBox from "./components/MessageBox";
 import SignUp from "./pages/SignUp";
 import Login from "./pages/Login";
 import Welcome from "./pages/Welcome";
+import Homepage from "./pages/Homepage";
 import Exercise from "./pages/Exercise";
 
 import { useDispatch, useSelector } from "react-redux";
@@ -30,6 +31,7 @@ function App() {
       {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} />

src/components/Navigation/index.js

@@ -24,7 +24,7 @@ export default function Navigation() {
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav style={{ width: "100%" }} fill>
-          <NavbarItem path="/" linkText="Home" />
+          <NavbarItem path="/homepage" linkText="Home" />
           <NavbarItem path="/other" linkText="Other" />
           {loginLogoutControls}
         </Nav>

src/pages/Homepage/homepage.css

@@ -0,0 +1,31 @@
+.hpCard {
+  width: 26.5%;
+  float: left;
+  margin: 0 0 2% 5%;
+}
+
+.homeCard {
+  background-color: #009973;
+}
+
+.hpLink {
+  color: #fff;
+}
+.hpLink:hover {
+  color: #000;
+}
+
+.searchBar {
+  border: 1px solid black;
+  padding: 2px 20px;
+  text-decoration: none;
+  font-size: 14px;
+  margin: 10px 50px 50px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.hpTitle {
+  margin-left: 50px;
+  margin-top: 10px;
+}

src/pages/Homepage/index.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getExercises } from "../../store/exercise/actions";
+import { selectMethod } from "../../store/exercise/selectors";
+import "./homepage.css";
+
+import Card from "react-bootstrap/Card";
+import { Link } from "react-router-dom";
+import { headShake } from "react-animations";
+import styled, { keyframes } from "styled-components";
+
+export default function Homepage() {
+  const dispatch = useDispatch();
+  const exercises = useSelector(selectMethod);
+
+  const [searchTerm, setSearchTerm] = useState();
+  const [searchResults, setSearchResults] = useState([]);
+
+  const [isShown, setIsShown] = useState(false);
+  const Bounce = styled.div`
+    animation: 0.7s ${keyframes`${headShake}`};
+  `;
+
+  useEffect(() => {
+    dispatch(getExercises());
+  }, []);
+
+  useEffect(() => {
+    if (!searchTerm) {
+      setSearchResults(exercises);
+    } else {
+      const results = exercises.filter((exercise) =>
+        exercise.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setSearchResults(results);
+    }
+  }, [searchTerm]);
+  console.log("test", searchResults);
+  console.log("search", searchTerm);
+  console.log("exercises", exercises);
+
+  const handleChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const data = !searchTerm ? exercises : searchResults;
+
+  return (
+    <div>
+      <h3 className="hpTitle">Exercises</h3>
+      <input
+        className="searchBar"
+        placeholder="Search method"
+        value={searchTerm || ""}
+        onChange={handleChange}
+      />
+      <br />
+
+      {data.map((exercise) => {
+        return (
+          <Bounce
+            onMouseEnter={() => setIsShown(true)}
+            onMouseLeave={() => setIsShown(false)}
+          >
+            <Card className="hpCard" key={exercise.id}>
+              <Card.Body className="homeCard">
+                <Link className="hpLink" to={`/exercise/${exercise.id}`}>
+                  <b className="cardTitle">{exercise.name}</b>
+                </Link>
+                <br />
+                Exercises: <br />
+                MonkeyMaster:
+              </Card.Body>
+            </Card>
+          </Bounce>
+        );
+      })}
+      <Bounce
+        onMouseEnter={() => setIsShown(true)}
+        onMouseLeave={() => setIsShown(false)}
+      >
+        <Card className="hpCard">
+          <Card.Body className="homeCard">
+            <b>Random</b>
+            <br />
+            Exercises: <br />
+            MonkeyMaster:
+          </Card.Body>
+        </Card>
+      </Bounce>
+    </div>
+  );
+}