From d9f5d8708175a365eed37b798d37985fcecb8f03 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Tue, 12 Jul 2022 14:21:08 +0200 Subject: [PATCH] refactor Challenges structure and add animation to filters menu button --- src/App.js | 4 +-- src/components/elements/MiniChallenge.js | 6 ++-- src/components/elements/Search.js | 5 +++ src/components/sections/Footer.js | 3 +- src/pages/{ => Challanges}/Challenges.js | 34 ++++++------------- src/pages/Challanges/_challengesRequest.js | 12 +++++++ src/pages/Challanges/_renderChallenges.js | 18 ++++++++++ .../{ => Challanges}/_searchQueryHandler.js | 0 src/pages/Challanges/index.js | 1 + src/utils/containers.js | 1 - 10 files changed, 52 insertions(+), 32 deletions(-) rename src/pages/{ => Challanges}/Challenges.js (71%) create mode 100644 src/pages/Challanges/_challengesRequest.js create mode 100644 src/pages/Challanges/_renderChallenges.js rename src/pages/{ => Challanges}/_searchQueryHandler.js (100%) create mode 100644 src/pages/Challanges/index.js diff --git a/src/App.js b/src/App.js index 60e154b..0069aae 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ -import styled, {ThemeProvider} from 'styled-components'; +import {ThemeProvider} from 'styled-components'; import theme from "./utils/theme"; import LandingPage from "./pages/LandingPage"; -import Challenges from "./pages/Challenges"; +import Challenges from "./pages/Challanges/Challenges"; import {BrowserRouter, Route, Routes} from "react-router-dom"; import NavBar from "./components/elements/NavBar"; import Footer from "./components/sections/Footer"; diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index 6d1f561..9ce2c53 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -74,9 +74,9 @@ const MiniChallenge = (props) => { {props.baseline ? props.baseline : 'xxx'} - - {props.prize ? props.prize : 'xxx'} - + {props.prize ? + {props.prize} + : ''} ); diff --git a/src/components/elements/Search.js b/src/components/elements/Search.js index fd0f412..15e3be9 100644 --- a/src/components/elements/Search.js +++ b/src/components/elements/Search.js @@ -23,6 +23,11 @@ const SearchStyle = styled(FlexRow)` margin-left: 12px; width: 14px; height: 20px; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.25); + } } input { diff --git a/src/components/sections/Footer.js b/src/components/sections/Footer.js index c333242..b6070ab 100644 --- a/src/components/sections/Footer.js +++ b/src/components/sections/Footer.js @@ -2,7 +2,6 @@ import React from "react"; import {Container, FlexRow} from "../../utils/containers"; import styled from "styled-components"; import {Medium} from "../../utils/fonts"; -import {Link} from "react-router-dom"; const FooterStyle = styled(FlexRow)` width: 100%; @@ -12,7 +11,7 @@ const FooterStyle = styled(FlexRow)` align-items: center; background-color: ${({theme}) => theme.colors.green}; - * { + p, a { color: ${({theme}) => theme.colors.white} } diff --git a/src/pages/Challenges.js b/src/pages/Challanges/Challenges.js similarity index 71% rename from src/pages/Challenges.js rename to src/pages/Challanges/Challenges.js index 06f0bcd..b76ec84 100644 --- a/src/pages/Challenges.js +++ b/src/pages/Challanges/Challenges.js @@ -1,12 +1,13 @@ import React from "react"; -import {H1} from "../utils/fonts"; -import {FlexColumn, Grid} from "../utils/containers"; -import Search from "../components/elements/Search"; -import MiniChallenge from "../components/elements/MiniChallenge"; -import Pager from "../components/elements/Pager"; -import {ELEMENTS_PER_PAGE, API} from "../utils/globals"; -import FiltersMenu from "../components/elements/FiltersMenu"; +import {H1} from "../../utils/fonts"; +import {FlexColumn, Grid} from "../../utils/containers"; +import Search from "../../components/elements/Search"; +import Pager from "../../components/elements/Pager"; +import {ELEMENTS_PER_PAGE} from "../../utils/globals"; +import FiltersMenu from "../../components/elements/FiltersMenu"; import _searchQueryHandler from "./_searchQueryHandler"; +import _challengesRequest from "./_challengesRequest"; +import _renderChallenges from "./_renderChallenges"; const Challenges = () => { const [pageNr, setPageNr] = React.useState(1); @@ -23,12 +24,7 @@ const Challenges = () => { }, []); const challengesRequest = () => { - fetch(`${API}/list-challenges`) - .then(response => response.json()) - .then(data => { - setChallengesFromAPI(data); - setChallenges(data); - }); + _challengesRequest(setChallengesFromAPI, setChallenges); } const sortByHandler = (value) => { @@ -70,17 +66,7 @@ const Challenges = () => { } const renderChallenges = () => { - const n = (pageNr - 1) * ELEMENTS_PER_PAGE; - return ( - challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => { - return ( - - ); - }) - ) + return _renderChallenges(pageNr, challenges); } const toggleFiltersMenu = () => { diff --git a/src/pages/Challanges/_challengesRequest.js b/src/pages/Challanges/_challengesRequest.js new file mode 100644 index 0000000..eadf1a6 --- /dev/null +++ b/src/pages/Challanges/_challengesRequest.js @@ -0,0 +1,12 @@ +import {API} from "../../utils/globals"; + +const _challengesRequest = (setChallengesFromAPI, setChallenges) => { + fetch(`${API}/list-challenges`) + .then(response => response.json()) + .then(data => { + setChallengesFromAPI(data); + setChallenges(data); + }); +} + +export default _challengesRequest; \ No newline at end of file diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js new file mode 100644 index 0000000..206d5be --- /dev/null +++ b/src/pages/Challanges/_renderChallenges.js @@ -0,0 +1,18 @@ +import {ELEMENTS_PER_PAGE} from "../../utils/globals"; +import MiniChallenge from "../../components/elements/MiniChallenge"; + +const _renderChallenges = (pageNr, challenges) => { + const n = (pageNr - 1) * ELEMENTS_PER_PAGE; + return ( + challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => { + return ( + + ); + }) + ) +} + +export default _renderChallenges; \ No newline at end of file diff --git a/src/pages/_searchQueryHandler.js b/src/pages/Challanges/_searchQueryHandler.js similarity index 100% rename from src/pages/_searchQueryHandler.js rename to src/pages/Challanges/_searchQueryHandler.js diff --git a/src/pages/Challanges/index.js b/src/pages/Challanges/index.js new file mode 100644 index 0000000..b25879c --- /dev/null +++ b/src/pages/Challanges/index.js @@ -0,0 +1 @@ +export {default} from './Challenges'; \ No newline at end of file diff --git a/src/utils/containers.js b/src/utils/containers.js index 33e7064..272ea21 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -17,7 +17,6 @@ const Container = styled.div` border: ${({border}) => border ? border : 'none'}; cursor: ${({cursor}) => cursor ? cursor : 'auto'}; display: ${({display}) => display ? display : 'block'}; - outline: ${({outline}) => outline ? outline : 'none'}; text-decoration: ${({textDecoration}) => textDecoration ? textDecoration : 'none'}; text-transform: ${({textTransform}) => textTransform ? textTransform : 'none'}; opacity: ${({opacity}) => opacity ? opacity : '1'};