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

submit response handle and font headers letter spacingg correction

Browse Source
This commit is contained in:
Mateusz Tylka 2022-12-05 12:46:57 +01:00
parent 4f6da92d7d
commit b5b3989f11
5 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/challengeSubmissionPost.js
View File

@ -1,7 +1,7 @@
import KeyCloakService from '../services/KeyCloakService'; import KeyCloakService from '../services/KeyCloakService';
import {API} from '../utils/globals'; import {API} from '../utils/globals';
const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setData) => { const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setLoading) => {
const details = { const details = {
'f1': description, 'f1': description,
'f3': repoUrl, 'f3': repoUrl,
@ -22,7 +22,10 @@ const challengeSubmission = (challengeName, repoUrl, repoBranch, description, se
}, },
body: formBody body: formBody
}).then((resp) => resp.json()) }).then((resp) => resp.json())
.then((data) => setData(data)); .then((data) => {
setLoading(true);
window.location.replace(`https://gonito.net/view-progress/${data}#form`);
});
}; };
export default challengeSubmission; export default challengeSubmission;

4
src/components/generic/Button.js
View File

@ -16,6 +16,10 @@ const ButtonStyle = styled(Medium)`
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
* {
cursor: pointer;
}
&:hover { &:hover {
transform: scale(1.15); transform: scale(1.15);
} }

4
src/components/specific_challenge/Submit.js
View File

@ -10,7 +10,6 @@ const Submit = (props) => {
const [description, setDescription] = React.useState(''); const [description, setDescription] = React.useState('');
const [repoUrl, setRepoUrl] = React.useState(''); const [repoUrl, setRepoUrl] = React.useState('');
const [repoBranch, setRepoBranch] = React.useState(''); const [repoBranch, setRepoBranch] = React.useState('');
const [responseNumber, setResponseNumber] = React.useState(0);
const descriptionHandler = (e) => { const descriptionHandler = (e) => {
setDescription(e.target.value); setDescription(e.target.value);
@ -25,8 +24,7 @@ const Submit = (props) => {
}; };
const challengeSubmissionSubmit = () => { const challengeSubmissionSubmit = () => {
challengeSubmission(props.challengeName, repoUrl, repoBranch, description, setResponseNumber); challengeSubmission(props.challengeName, repoUrl, repoBranch, description, props.setLoading);
console.log(responseNumber);
}; };
return ( return (

57
src/pages/Challenge.js
View File

@ -1,7 +1,7 @@
import React from 'react'; 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, H2, Medium} from '../utils/fonts';
import theme from '../utils/theme'; import theme from '../utils/theme';
import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu'; import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu';
import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard'; import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
@ -41,7 +41,7 @@ const Challenge = (props) => {
case 3: case 3:
return <MyEntries challengeName={challengeName}/>; return <MyEntries challengeName={challengeName}/>;
case 4: case 4:
return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}/>; return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName} setLoading={setLoading}/>;
default: default:
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>; return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
} }
@ -62,28 +62,39 @@ const Challenge = (props) => {
}; };
const desktopRender = () => { const desktopRender = () => {
return ( if (!loading) {
<> return (
<DesktopChallengeMenu setSection={setSection} section={section}/> <>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px' id='start'> <DesktopChallengeMenu setSection={setSection} section={section}/>
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'> <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px' id='start'>
<Loading visible={loading}/> <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'>
{challenge.title} {challenge.title}
</H1> </H1>
<Medium as='p'> <Medium as='p'>
{challenge.description} {challenge.description}
</Medium> </Medium>
</FlexColumn> </FlexColumn>
<Svg src={challenge.type ? RENDER_ICO(challenge.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}/>
{sectionRender()} {sectionRender()}
</FlexColumn>
</>
);
}
else {
return (
<FlexColumn position='fixed' top='0' left='0' width='100%' height='100vh' zIndex='10'>
<H2 as='h1'>
Submission processing...
</H2>
<Loading />
</FlexColumn> </FlexColumn>
</> );
); }
}; };
return ( return (

1
src/utils/fonts.js
View File

@ -7,6 +7,7 @@ const H1 = styled(Container)`
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
letter-spacing: 0.1px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 48px; font-size: 48px;
line-height: 52px; line-height: 52px;