From 5317dc9625dd0a718f5cf4bac72df69a7d8031e6 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Fri, 15 Jul 2022 10:30:43 +0200 Subject: [PATCH] mobile Challenge menu --- src/api/getChallenges.js | 11 ++++ src/components/elements/MiniChallenge.js | 10 +-- .../elements/MobileChallengeMenu.js | 11 ++++ src/pages/Challanges/Challenges.js | 5 +- src/pages/Challanges/_challengesRequest.js | 12 ---- src/pages/Challenge.js | 63 ++++++++++++++++--- 6 files changed, 83 insertions(+), 29 deletions(-) create mode 100644 src/api/getChallenges.js create mode 100644 src/components/elements/MobileChallengeMenu.js delete mode 100644 src/pages/Challanges/_challengesRequest.js diff --git a/src/api/getChallenges.js b/src/api/getChallenges.js new file mode 100644 index 0000000..27c38f1 --- /dev/null +++ b/src/api/getChallenges.js @@ -0,0 +1,11 @@ +import {API} from "../utils/globals"; + +const getChallenges = (setState) => { + fetch(`${API}/list-challenges`) + .then(response => response.json()) + .then(data => { + setState(data); + }); +} + +export default getChallenges; \ No newline at end of file diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index 5b59790..5d99cb4 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -5,6 +5,7 @@ import styled from "styled-components"; import IconLabel from "./IconLabel"; import {Link} from "react-router-dom"; import {CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH} from "../../utils/globals"; +import theme from "../../utils/theme"; const ChallengeStyle = styled(FlexColumn)` padding: 12px; @@ -38,13 +39,6 @@ const ChallengeStyle = styled(FlexColumn)` } `; -const Line = styled(Container)` - height: 1px; - width: 85%; - background-color: ${({theme}) => theme.colors.dark05}; - margin-bottom: 14px; -`; - const IconsGrid = styled(Grid)` width: 100%; grid-gap: 14px; @@ -72,7 +66,7 @@ const MiniChallenge = (props) => { {props.type ? : 'xxx'} - + {props.description ? renderDescription(props.description) : 'xxx'} diff --git a/src/components/elements/MobileChallengeMenu.js b/src/components/elements/MobileChallengeMenu.js new file mode 100644 index 0000000..06e455c --- /dev/null +++ b/src/components/elements/MobileChallengeMenu.js @@ -0,0 +1,11 @@ +import React from "react"; + +const MobileChallengeMenu = () => { + return ( + <> + + + ); +} + +export default MobileChallengeMenu; \ No newline at end of file diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index bc5594c..04e4693 100644 --- a/src/pages/Challanges/Challenges.js +++ b/src/pages/Challanges/Challenges.js @@ -6,11 +6,11 @@ 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"; import Media from "react-media"; import theme from "../../utils/theme"; import cupIco from '../../assets/cup_ico.svg'; +import getChallenges from "../../api/getChallenges"; const Challenges = () => { const [pageNr, setPageNr] = React.useState(1); @@ -27,7 +27,8 @@ const Challenges = () => { }, []); const challengesRequest = () => { - _challengesRequest(setChallengesFromAPI, setChallenges); + getChallenges(setChallengesFromAPI); + getChallenges(setChallenges); } const sortByHandler = (value) => { diff --git a/src/pages/Challanges/_challengesRequest.js b/src/pages/Challanges/_challengesRequest.js deleted file mode 100644 index eadf1a6..0000000 --- a/src/pages/Challanges/_challengesRequest.js +++ /dev/null @@ -1,12 +0,0 @@ -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/Challenge.js b/src/pages/Challenge.js index 9c1423d..641a4f7 100644 --- a/src/pages/Challenge.js +++ b/src/pages/Challenge.js @@ -1,15 +1,64 @@ import React from "react"; -import {FlexColumn} from "../utils/containers"; -import {useParams} from "react-router-dom"; -import {H1} from "../utils/fonts"; +import {Container, FlexColumn, FlexRow} from "../utils/containers"; +import {Link, useParams} from "react-router-dom"; +import {H1, Medium} from "../utils/fonts"; +import getChallenges from "../api/getChallenges"; +import theme from "../utils/theme"; +import styled from "styled-components"; + +const ChallengeLink = styled(Medium)` + cursor: pointer; + transition: color 0.3s ease-in-out; + + &:hover { + color: ${({theme}) => theme.colors.green}; + } +`; + const Challenge = () => { - const challengeId = useParams().challengeId; + const challengeName = useParams().challengeId; + const [challenges, setChallenges] = React.useState([]); + + const getChallenge = () => { + if (challenges.length !== 0) { + for (let challenge of challenges) { + if (challenge.name === challengeName) + return challenge + } + } + return ''; + } + + React.useEffect(() => { + getChallenges(setChallenges); + }, []); + return ( - -

- {challengeId} + +

+ {getChallenge().title}

+ + + Leaderboard + + + Readme + + + How to + + + + + Submit + + + My entries + + + ); }