correct api response for particular challenge data
This commit is contained in:
parent
b4acc25550
commit
09b1e67513
11
src/api/getChallengeInfo.js
Normal file
11
src/api/getChallengeInfo.js
Normal file
@ -0,0 +1,11 @@
|
||||
import {API} from "../utils/globals";
|
||||
|
||||
const getChallengeInfo = (setState, challengeName) => {
|
||||
fetch(`${API}/challenge-info/${challengeName}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setState(data);
|
||||
});
|
||||
}
|
||||
|
||||
export default getChallengeInfo;
|
@ -25,7 +25,7 @@ const _renderSubmissions = (pageNr, submissions) => {
|
||||
{index + n + 1}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submission.submitter ? submission.submitter : '[anonymized]'}
|
||||
{submission.submitter ? submission.submitter : '[anonymous]'}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submission.when ? `${submission.when.slice(11, 16)} ${submission.when.slice(0, 10)}`
|
||||
|
@ -2,7 +2,6 @@ import React from "react";
|
||||
import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {H1, Medium} from "../utils/fonts";
|
||||
import getChallenges from "../api/getChallenges";
|
||||
import theme from "../utils/theme";
|
||||
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
|
||||
import Leaderboard from "../components/sections/Leaderboard";
|
||||
@ -14,26 +13,17 @@ import Media from "react-media";
|
||||
import DesktopChallengeMenu from "../components/elements/DesktopChallengeMenu";
|
||||
import {MINI_DESCRIPTION_RENDER, RENDER_ICO} from "../utils/globals";
|
||||
import textIco from "../assets/text_ico.svg";
|
||||
import getChallengeInfo from "../api/getChallengeInfo";
|
||||
|
||||
const Challenge = () => {
|
||||
const challengeName = useParams().challengeId;
|
||||
const [challenges, setChallenges] = React.useState([]);
|
||||
const [challenge, setChallenge] = React.useState([]);
|
||||
const [section, setSection] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
getChallenges(setChallenges);
|
||||
getChallengeInfo(setChallenge, challengeName);
|
||||
}, []);
|
||||
|
||||
const getChallenge = () => {
|
||||
if (challenges.length !== 0) {
|
||||
for (let challenge of challenges) {
|
||||
if (challenge.name === challengeName)
|
||||
return challenge
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
const sectionRender = () => {
|
||||
switch (section) {
|
||||
case 0:
|
||||
@ -55,7 +45,7 @@ const Challenge = () => {
|
||||
return (
|
||||
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
|
||||
<H1 as='h1' margin='0 0 8px 0' textAlign='center'>
|
||||
{getChallenge().title}
|
||||
{challenge.title}
|
||||
</H1>
|
||||
<MobileChallengeMenu setSection={setSection} section={section}/>
|
||||
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
|
||||
@ -72,13 +62,13 @@ const Challenge = () => {
|
||||
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
|
||||
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
|
||||
<H1 as='h1'>
|
||||
{getChallenge().title}
|
||||
{challenge.title}
|
||||
</H1>
|
||||
<Medium as='p'>
|
||||
{MINI_DESCRIPTION_RENDER(getChallenge().description)}
|
||||
{MINI_DESCRIPTION_RENDER(challenge.description)}
|
||||
</Medium>
|
||||
</FlexColumn>
|
||||
<Svg src={getChallenge().type ? RENDER_ICO(getChallenge().type) : textIco}
|
||||
<Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco}
|
||||
width='120px' height='120px' size='contain'/>
|
||||
</FlexRow>
|
||||
<Container width='55%' height='1px' backgroundColor={theme.colors.dark}/>
|
||||
|
Loading…
Reference in New Issue
Block a user