correct api response for particular challenge data

This commit is contained in:
mattyl006 2022-07-26 11:52:38 +02:00
parent b4acc25550
commit 09b1e67513
3 changed files with 19 additions and 18 deletions

View 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;

View File

@ -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)}`

View File

@ -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}/>