s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

correct api response for particular challenge data

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/getChallengeInfo.js Normal file
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;

2
src/components/elements/Table/_renderSubmissions.js
View File

@ -25,7 +25,7 @@ const _renderSubmissions = (pageNr, submissions) => {
{index + n + 1} {index + n + 1}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submission.submitter ? submission.submitter : '[anonymized]'} {submission.submitter ? submission.submitter : '[anonymous]'}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submission.when ? `${submission.when.slice(11, 16)} ${submission.when.slice(0, 10)}` {submission.when ? `${submission.when.slice(11, 16)} ${submission.when.slice(0, 10)}`

24
src/pages/Challenge.js
View File

@ -2,7 +2,6 @@ import React from "react";
import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers"; import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import {H1, Medium} from "../utils/fonts"; import {H1, Medium} from "../utils/fonts";
import getChallenges from "../api/getChallenges";
import theme from "../utils/theme"; import theme from "../utils/theme";
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu"; import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
import Leaderboard from "../components/sections/Leaderboard"; import Leaderboard from "../components/sections/Leaderboard";
@ -14,26 +13,17 @@ import Media from "react-media";
import DesktopChallengeMenu from "../components/elements/DesktopChallengeMenu"; import DesktopChallengeMenu from "../components/elements/DesktopChallengeMenu";
import {MINI_DESCRIPTION_RENDER, RENDER_ICO} from "../utils/globals"; import {MINI_DESCRIPTION_RENDER, RENDER_ICO} from "../utils/globals";
import textIco from "../assets/text_ico.svg"; import textIco from "../assets/text_ico.svg";
import getChallengeInfo from "../api/getChallengeInfo";
const Challenge = () => { const Challenge = () => {
const challengeName = useParams().challengeId; const challengeName = useParams().challengeId;
const [challenges, setChallenges] = React.useState([]); const [challenge, setChallenge] = React.useState([]);
const [section, setSection] = React.useState(0); const [section, setSection] = React.useState(0);
React.useEffect(() => { 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 = () => { const sectionRender = () => {
switch (section) { switch (section) {
case 0: case 0:
@ -55,7 +45,7 @@ const Challenge = () => {
return ( return (
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'> <FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
<H1 as='h1' margin='0 0 8px 0' textAlign='center'> <H1 as='h1' margin='0 0 8px 0' textAlign='center'>
{getChallenge().title} {challenge.title}
</H1> </H1>
<MobileChallengeMenu setSection={setSection} section={section}/> <MobileChallengeMenu setSection={setSection} section={section}/>
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/> <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'> <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'> <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
<H1 as='h1'> <H1 as='h1'>
{getChallenge().title} {challenge.title}
</H1> </H1>
<Medium as='p'> <Medium as='p'>
{MINI_DESCRIPTION_RENDER(getChallenge().description)} {MINI_DESCRIPTION_RENDER(challenge.description)}
</Medium> </Medium>
</FlexColumn> </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'/> width='120px' height='120px' size='contain'/>
</FlexRow> </FlexRow>
<Container width='55%' height='1px' backgroundColor={theme.colors.dark}/> <Container width='55%' height='1px' backgroundColor={theme.colors.dark}/>