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
+
+
+
);
}