From c663b51b6db55aaad03f799b2ea9fd0f0056acda Mon Sep 17 00:00:00 2001 From: StephBerg86 Date: Tue, 25 Aug 2020 17:07:01 +0200 Subject: [PATCH 1/5] displayed the methods and some simple styling --- src/App.js | 2 + src/components/Navigation/index.js | 2 +- src/pages/Homepage/homepage.css | 13 + src/pages/Homepage/index.js | 40 +++ src/pages/Welcome/style.css | 415 ----------------------------- src/pages/Welcome/welcome.css | 2 +- src/store/appState/reducer.js | 4 +- src/store/exercise/actions.js | 12 +- src/store/exercise/reducer.js | 13 +- src/store/exercise/selectors.js | 2 + 10 files changed, 80 insertions(+), 425 deletions(-) create mode 100644 src/pages/Homepage/homepage.css create mode 100644 src/pages/Homepage/index.js delete mode 100644 src/pages/Welcome/style.css diff --git a/src/App.js b/src/App.js index 0212c5b..e8df2d0 100644 --- a/src/App.js +++ b/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 { useDispatch, useSelector } from "react-redux"; import { selectAppLoading } from "./store/appState/selectors"; @@ -35,6 +36,7 @@ function App() { {isLoading ? : null} + diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js index 497736d..aa4780c 100644 --- a/src/components/Navigation/index.js +++ b/src/components/Navigation/index.js @@ -24,7 +24,7 @@ export default function Navigation() { diff --git a/src/pages/Homepage/homepage.css b/src/pages/Homepage/homepage.css new file mode 100644 index 0000000..c665f6d --- /dev/null +++ b/src/pages/Homepage/homepage.css @@ -0,0 +1,13 @@ +.hpCard { + width: 18rem; + float: left; + margin: 0 1.5%; + width: 30%; + border: 1px solid black; +} + +.homeCard { + background-color: #009973; + + width: 300px; +} diff --git a/src/pages/Homepage/index.js b/src/pages/Homepage/index.js new file mode 100644 index 0000000..3f9d8d4 --- /dev/null +++ b/src/pages/Homepage/index.js @@ -0,0 +1,40 @@ +import React, { useEffect } 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"; + +export default function Homepage() { + const dispatch = useDispatch(); + const exercises = useSelector(selectMethod); + + useEffect(() => { + dispatch(getExercises()); + }, [dispatch]); + + console.log("exercises", exercises); + return ( +
+

Exercises

+ {exercises.map((exercise) => { + return ( + + + {exercise.name} +

Exercises:

+

MonkeyMaster:

+ + + ); + })} + + Random + + + Random + +
+ ); +} diff --git a/src/pages/Welcome/style.css b/src/pages/Welcome/style.css deleted file mode 100644 index 39ec9a2..0000000 --- a/src/pages/Welcome/style.css +++ /dev/null @@ -1,415 +0,0 @@ -/* - * Author : HIMANSHU GUPTA - * Email : himanshucse2012@gmail.com - * Website : http://www.indioweb.in/portfolio - */ - -@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600); - -/* - * Basic CSS starts - */ - -body{ - color: #474747; - font-family: 'Open Sans', sans-serif; - font-weight: 400; - -webkit-font-smoothing: antialiased; -} - -h1,h2,h3,h4,h5,h6{ - font-family: 'Open Sans', sans-serif; - font-weight: 600; -} - -p{ - margin:0; - padding:0; - font-size: 13px; - line-height: 24px; -} - -a{ - color: #898989; - text-decoration: none; -} - -a:hover{ - color: #676767; - text-decoration: none; -} - -a:hover,a:active,a:focus { - outline: 0; -} - -hr{ - -} - -:focus { - outline:none; -} - -::-moz-focus-inner { - border:0; -} - -.pad { padding: 120px 0;} - -/* - * Basic CSS ends - */ - -header .navbar-default { - margin: 0; - border-radius: 0; - border-bottom: 1px solid rgba(0,0,0,0.15); - box-shadow: 0 1px 12px rgba(0,0,0,0.3); -} -header .navbar-brand { - display: inline-block; - margin-right: 60px; -} -header .navbar-brand img { - max-width:190px; - position: relative; - top: -11px; -} -.nav .open>a, .nav .open>a:hover, .nav .open>a:focus, -header .navbar-default .navbar-nav>li>a { - border-left: 1px solid #d3d3d3; -} -header .navbar-default .navbar-nav li:last-child a { - border-right: 1px solid #d3d3d3; -} - -header .navbar-form .form-control { - box-shadow: none !important; - border: 1px solid #d3d3d3; - border-radius: 4px; -} - -/* - * main area - */ - -.main-content { - padding-top: 100px; - padding-bottom: 100px; - background: #fff url('../img/back.jpg') center center no-repeat fixed; -} -.main-content.bottom-0 { padding-bottom: 0; } -/* - * banner - */ - -.banner { - padding-top: 60px; - padding-bottom: 180px; - text-align: center; -} - -.banner h2 { - margin: 0; - font-size: 30px; - font-weight: 400; -} -.banner h2 span{ - display: inline-block; - margin-top: 10px; - padding: 3px 12px; - font-size: 38px; - font-weight: 600; - background: #ec971f; - color: #fff; -} - -.banner p { - margin-top: 15px; - font-size: 16px; - line-height: 30px; - text-transform: capitalize; - letter-spacing: 0.05em; -} - -/* - * hero - */ - -.hero { - background: #fff; - text-align: center; -} - -.hero .hero-content h2 { - margin-top: 0; - margin-bottom: 20px; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.hero .hero-content p { - margin-top: 0; - text-transform: uppercase; - letter-spacing: 0.08em; - font-style: italic; - color: #ec971f; - font-size: 14px; -} - -.hero .hero-content .btn { - margin-top: 20px; - padding: 7px 25px; - border-radius: 30px; - font-weight: 600; -} - -/* - * default heading - */ - -.default-heading { - margin-bottom: 30px; - text-align: center; -} -.default-heading h2 { - display: inline-block; - margin-top: 0; - padding: 0 20px; - padding-bottom: 10px; - font-size: 35px; - border-bottom: 2px solid #ddd; -} - -/* - * benefits - */ - -.benefits { - padding-top: 0px; - background: #fff; -} - -.benefits .benefits-item { - max-width: 360px; - margin: 0 auto; - margin-top: 40px; - text-align: center; -} -.benefits .benefits-item i { - display: block; - width: 60px; - margin: 0 auto; - text-align: center; - font-size: 50px; - color: #ec971f; -} - -.benefits .benefits-item h3 { - margin-bottom: 20px; -} - -/* - * cta - */ - -.cta { - padding-bottom: 80px; - text-align: center; - background: #fff; -} - -.cta h3 { - margin-top: 0; - text-transform: capitalize; - letter-spacing: 0.08em; - font-size: 20px; - line-height: 25px; -} - -.cta h3 span { - background: #ec971f; - padding: 0 5px; - color: #fff; -} - -.cta .cta-content p { - text-transform: uppercase; - letter-spacing: 0.08em; - font-style: italic; - color: #ec971f; -} - -/* - * testimonial - */ - -.testimonial .carousel-inner .item {text-align: center;} -.testimonial .carousel-inner .item h3 { - margin-top:0; - font-size: 23px; - margin-bottom: 10px; -} - -.testimonial .carousel-inner .item p { - max-width: 920px; - margin: 0 auto; - letter-spacing: 0.01em; - font-size: 15px; - font-style: italic; - line-height: 27px; -} - -.carousel-control.left, -.carousel-control.right { - top: 50%; - width: 5%; - margin-top: -10px; - background: transparent; - text-shadow: none; - opacity: 1; -} - -/* - * blog - */ - -.blog { - padding-bottom: 80px; - background: #fff; -} -.blog .entry { - max-width: 580px; - margin: 0 auto; - margin-top: 30px; - padding-bottom: 20px; - border-bottom: 1px dashed #ddd; -} -.blog .entry .entry-pic { - max-width: 220px; - padding: 1px; - border: 1px solid #ec971f; - border-radius: 5px; - float: left; -} -.blog .entry .entry-pic img { border-radius: 4px; } -.blog .entry .entry-post { margin-left: 240px; } -.blog .entry .entry-post .meta { - display: block; - margin-bottom: 10px; - font-size: 15px; - font-style: italic; - color: #ec971f; -} - -.blog .entry .entry-post h3 { - margin-top: 0; - margin-bottom: 10px; - font-size: 22px; - line-height: 28px; -} -.blog .entry .entry-post p { - line-height: 22px; -} - -.blog .blog-btn { - margin-top: 80px; - text-align: center; -} -.blog .blog-btn .btn { - padding: 8px 25px; - font-size: 18px; - border-radius: 30px; -} - - - -/* - * login & registration page content - */ - -.main-content .login-area, -.main-content .register-area { - max-width: 450px; - margin: 0 auto; - text-align: center; -} - -.main-content .login-area h3, -.main-content .register-area h3 { - margin-top: 0; - padding-top: 30px; - font-size: 22px; -} - -.main-content .login-area form, -.main-content .register-area form { - max-width: 300px; - margin: 0 auto; - margin-top: 20px; - margin-bottom: 30px; - text-align: left; -} - -.main-content .login-area form .form-control, -.main-content .register-area form .form-control { - box-shadow: none !important; - border: 1px solid #d3d3d3; - border-radius: 4px; -} -.main-content .login-area form .btn { - display: block; - width: 100%; - margin-top: 15px; -} -.main-content .register-area form .btn { - margin-top: 5px; -} - -/* - * footer - */ - -footer { - padding-top: 30px; - padding-bottom: 30px; - background: #353535; -} - -footer p { - color: #bbb; - font-size: 13px; - line-height: 24px; -} - -/* - * Responsive CSS - */ - -/* - * Mobile phones - */ -@media (max-width: 480px){ - .blog .entry .entry-pic { - float: none; - max-width: 400px; - margin: 0 auto; - margin-bottom: 15px; - } - .blog .entry .entry-post { margin-left: 0; } -} - -/* - * Tablets - */ -@media (max-width: 767px){ - header .navbar-form { display: block !important; } -} - -/* - * Desktop - */ -@media (max-width: 991px){ - header .navbar-form { display: none; } -} \ No newline at end of file diff --git a/src/pages/Welcome/welcome.css b/src/pages/Welcome/welcome.css index 5cb8667..7be354e 100644 --- a/src/pages/Welcome/welcome.css +++ b/src/pages/Welcome/welcome.css @@ -1,7 +1,6 @@ .welcomeHeader { background: #009973; width: 100%; - height: 20rem; } .welcomeGif { @@ -10,6 +9,7 @@ margin-right: auto; align-content: center; width: 70%; + background: #009973; } .welcomeText { diff --git a/src/store/appState/reducer.js b/src/store/appState/reducer.js index 13afc21..da8304d 100644 --- a/src/store/appState/reducer.js +++ b/src/store/appState/reducer.js @@ -2,12 +2,12 @@ import { APP_LOADING, APP_DONE_LOADING, SET_MESSAGE, - CLEAR_MESSAGE + CLEAR_MESSAGE, } from "./actions"; const initialState = { loading: false, - message: null + message: null, }; export default (state = initialState, action) => { diff --git a/src/store/exercise/actions.js b/src/store/exercise/actions.js index 297afcf..ec0bff2 100644 --- a/src/store/exercise/actions.js +++ b/src/store/exercise/actions.js @@ -5,13 +5,21 @@ import { selectToken } from "../user/selectors"; export const GET_EXERCISE_SUCCESS = "GET_EXERCISE_SUCCESS"; -const getExerciseSuccess = (exercise) => { +export const getExerciseSuccess = (exercise) => { return { type: GET_EXERCISE_SUCCESS, payload: exercise, }; }; +export const getExercises = () => { + return async (dispatch, getState) => { + const response = await axios.get(`${apiUrl}/exercises/list`); + console.log("response.data", response.data); + dispatch(getExerciseSuccess(response.data)); + }; +}; + export const getExerciseById = (id) => { console.log("what is id in actions", id); return async (dispatch, getState) => { @@ -20,7 +28,7 @@ export const getExerciseById = (id) => { dispatch(appLoading()); try { - const response = axios.get(`${apiUrl}/exercises/${id}/quiz`, { + const response = await axios.get(`${apiUrl}/exercises/${id}/quiz`, { headers: { Authorization: `Bearer ${token}` }, }); diff --git a/src/store/exercise/reducer.js b/src/store/exercise/reducer.js index e697a42..799727f 100644 --- a/src/store/exercise/reducer.js +++ b/src/store/exercise/reducer.js @@ -1,15 +1,20 @@ import { GET_EXERCISE_SUCCESS } from "./actions"; const initialState = { - name: "", - content: "", - correctAnswer: "", + exercises: [], + name: {}, + content: {}, + correctAnswer: {}, }; export default (state = initialState, action) => { switch (action.type) { case GET_EXERCISE_SUCCESS: - return { ...state, ...action.payload }; + return { + ...state, + exercises: [...state.exercises, ...action.payload], + }; + default: return state; } diff --git a/src/store/exercise/selectors.js b/src/store/exercise/selectors.js index 7954ed5..e4bd083 100644 --- a/src/store/exercise/selectors.js +++ b/src/store/exercise/selectors.js @@ -1 +1,3 @@ export const selectCorrectAnswer = (state) => state.exercise.correctAnswer; + +export const selectMethod = (state) => state.exercise.exercises; From b1c59869fe0a813a4985df5a7f129333aa379d93 Mon Sep 17 00:00:00 2001 From: StephBerg86 Date: Tue, 25 Aug 2020 19:10:30 +0200 Subject: [PATCH 2/5] added styling and searchbar --- src/pages/Homepage/homepage.css | 25 +++++++++++++---- src/pages/Homepage/index.js | 49 +++++++++++++++++++++++++-------- 2 files changed, 58 insertions(+), 16 deletions(-) diff --git a/src/pages/Homepage/homepage.css b/src/pages/Homepage/homepage.css index c665f6d..95394b9 100644 --- a/src/pages/Homepage/homepage.css +++ b/src/pages/Homepage/homepage.css @@ -1,13 +1,28 @@ .hpCard { - width: 18rem; + width: 23%; float: left; - margin: 0 1.5%; - width: 30%; - border: 1px solid black; + margin: 0 0 2% 5%; } .homeCard { background-color: #009973; +} + +.searchBar { + border: 1px solid black; + padding: 2px 20px; + text-decoration: none; + font-size: 14px; + margin: 10px 20px 50px; + border-radius: 12px; +} + +.hpTitle { + margin-left: 20px; + margin-top: 10px; +} - width: 300px; +.cardTitle { + color: white; + text-align: center; } diff --git a/src/pages/Homepage/index.js b/src/pages/Homepage/index.js index 3f9d8d4..b7b181e 100644 --- a/src/pages/Homepage/index.js +++ b/src/pages/Homepage/index.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getExercises } from "../../store/exercise/actions"; import { selectMethod } from "../../store/exercise/selectors"; @@ -10,30 +10,57 @@ export default function Homepage() { const dispatch = useDispatch(); const exercises = useSelector(selectMethod); + const [searchTerm, setSearchTerm] = useState(); + const [searchResults, setSearchResults] = useState([]); + useEffect(() => { dispatch(getExercises()); }, [dispatch]); - console.log("exercises", exercises); + useEffect(() => { + const results = exercises.filter((exercise) => + exercise.name.includes(searchTerm) + ); + setSearchResults(results); + }, [searchTerm]); + + const handleChange = (event) => { + setSearchTerm(event.target.value); + }; + + const data = !searchTerm ? exercises : searchResults; + return (
-

Exercises

- {exercises.map((exercise) => { +

Exercises

+ +
+ + {data.map((exercise) => { return ( - {exercise.name} -

Exercises:

-

MonkeyMaster:

+ {exercise.name} +
+ Exercises:
+ MonkeyMaster: ); })} - Random - - - Random + + Random +
+ Exercises:
+ MonkeyMaster: +
); From 781f922872a05f2c4fd80401123879f47384c429 Mon Sep 17 00:00:00 2001 From: StephBerg86 Date: Wed, 26 Aug 2020 10:58:33 +0200 Subject: [PATCH 3/5] searchbar works --- src/pages/Homepage/homepage.css | 19 +++++++++++-------- src/pages/Homepage/index.js | 29 +++++++++++++++++++---------- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/src/pages/Homepage/homepage.css b/src/pages/Homepage/homepage.css index 95394b9..4697f47 100644 --- a/src/pages/Homepage/homepage.css +++ b/src/pages/Homepage/homepage.css @@ -1,5 +1,5 @@ .hpCard { - width: 23%; + width: 26.5%; float: left; margin: 0 0 2% 5%; } @@ -8,21 +8,24 @@ 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 20px 50px; + margin: 10px 50px 50px; border-radius: 12px; + overflow: hidden; } .hpTitle { - margin-left: 20px; + margin-left: 50px; margin-top: 10px; } - -.cardTitle { - color: white; - text-align: center; -} diff --git a/src/pages/Homepage/index.js b/src/pages/Homepage/index.js index b7b181e..6b98c31 100644 --- a/src/pages/Homepage/index.js +++ b/src/pages/Homepage/index.js @@ -5,6 +5,7 @@ import { selectMethod } from "../../store/exercise/selectors"; import "./homepage.css"; import Card from "react-bootstrap/Card"; +import { Link } from "react-router-dom"; export default function Homepage() { const dispatch = useDispatch(); @@ -15,14 +16,21 @@ export default function Homepage() { useEffect(() => { dispatch(getExercises()); - }, [dispatch]); + }, []); useEffect(() => { - const results = exercises.filter((exercise) => - exercise.name.includes(searchTerm) - ); - setSearchResults(results); + if (!searchTerm) { + setSearchResults(exercises); + } else { + const results = exercises.filter((exercise) => + exercise.content.includes(searchTerm) + ); + setSearchResults(results); + } }, [searchTerm]); + console.log("test", searchResults); + console.log("search", searchTerm); + console.log("exercises", exercises); const handleChange = (event) => { setSearchTerm(event.target.value); @@ -36,17 +44,18 @@ export default function Homepage() {
{data.map((exercise) => { return ( - + - {exercise.name} + + {exercise.name} +
Exercises:
MonkeyMaster: @@ -56,7 +65,7 @@ export default function Homepage() { })} - Random + Random
Exercises:
MonkeyMaster: From 6172f2f5565b65901849837119c3b9f81ab93e82 Mon Sep 17 00:00:00 2001 From: StephBerg86 Date: Wed, 26 Aug 2020 12:18:45 +0200 Subject: [PATCH 4/5] added animation to the cards --- package-lock.json | 110 ++++++++++++++++++++++++++++++++++-- package.json | 5 +- src/pages/Homepage/index.js | 55 +++++++++++------- 3 files changed, 144 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index f639521..e188120 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1173,6 +1173,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2718,6 +2741,22 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, + "babel-plugin-styled-components": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz", + "integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -3392,6 +3431,11 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3639,16 +3683,11 @@ "q": "^1.1.2" } }, - "code-point-at": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" - }, "codemirror": { "version": "5.57.0", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.57.0.tgz", "integrity": "sha512-WGc6UL7Hqt+8a6ZAsj/f1ApQl3NPvHY/UQSzG6fB6l4BjExgVdhFaxd7mRTw1UCiYe/6q86zHP+kfvBQcZGvUg==" - } + }, "collection-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", @@ -4020,6 +4059,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -4110,6 +4154,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -10423,6 +10477,11 @@ "prop-types": "^15.6.2" } }, + "react-animations": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-animations/-/react-animations-1.0.0.tgz", + "integrity": "sha512-ePPpVgdKnNEXm+LP1ww5s3n0JzebBw9QdRfxRqogzeg1PDIn6kf0pmvgeTeVZQXXpGmHImkIeTiaQR1O6xjntA==" + }, "react-app-polyfill": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz", @@ -10684,6 +10743,23 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-motion": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz", + "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==", + "requires": { + "performance-now": "^0.2.0", + "prop-types": "^15.5.8", + "raf": "^3.1.0" + }, + "dependencies": { + "performance-now": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", + "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=" + } + } + }, "react-overlays": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-2.1.1.tgz", @@ -11619,6 +11695,11 @@ } } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -12305,6 +12386,23 @@ } } }, + "styled-components": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz", + "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index 0a31a9e..ada209b 100644 --- a/package.json +++ b/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", diff --git a/src/pages/Homepage/index.js b/src/pages/Homepage/index.js index 6b98c31..1b77e25 100644 --- a/src/pages/Homepage/index.js +++ b/src/pages/Homepage/index.js @@ -6,6 +6,8 @@ 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(); @@ -14,6 +16,11 @@ export default function Homepage() { 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()); }, []); @@ -23,7 +30,7 @@ export default function Homepage() { setSearchResults(exercises); } else { const results = exercises.filter((exercise) => - exercise.content.includes(searchTerm) + exercise.name.toLowerCase().includes(searchTerm.toLowerCase()) ); setSearchResults(results); } @@ -51,26 +58,36 @@ export default function Homepage() { {data.map((exercise) => { return ( - - - - {exercise.name} - -
- Exercises:
- MonkeyMaster: - - + setIsShown(true)} + onMouseLeave={() => setIsShown(false)} + > + + + + {exercise.name} + +
+ Exercises:
+ MonkeyMaster: + + + ); })} - - - Random -
- Exercises:
- MonkeyMaster: - - + setIsShown(true)} + onMouseLeave={() => setIsShown(false)} + > + + + Random +
+ Exercises:
+ MonkeyMaster: + + + ); } From 377a56ced82a194af3465d074f3376e8e0e466ba Mon Sep 17 00:00:00 2001 From: StephBerg86 Date: Wed, 26 Aug 2020 13:48:58 +0200 Subject: [PATCH 5/5] Changed link on card --- src/pages/Homepage/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Homepage/index.js b/src/pages/Homepage/index.js index 1b77e25..d448130 100644 --- a/src/pages/Homepage/index.js +++ b/src/pages/Homepage/index.js @@ -64,7 +64,7 @@ export default function Homepage() { > - + {exercise.name}