correct redirect back from submission, submission loading and env in submission api request
This commit is contained in:
parent
b77c99dba5
commit
3ff0c6ea87
2
.env
2
.env
@ -2,4 +2,4 @@ REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/
|
||||
REACT_APP_KC_REALM=gonito-dev
|
||||
REACT_APP_KC_CLIENT_ID=gonito-dev-localhost
|
||||
|
||||
REACT_APP_API=https://gonito.net/api
|
||||
REACT_APP_API=https://gonito-back-dev.csi.wmi.amu.edu.pl/api
|
||||
@ -1,30 +1,38 @@
|
||||
import KeyCloakService from '../services/KeyCloakService';
|
||||
import {API} from '../utils/globals';
|
||||
import { API } from '../utils/globals';
|
||||
|
||||
const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setLoading) => {
|
||||
const details = {
|
||||
'f1': description,
|
||||
'f3': repoUrl,
|
||||
'f4': repoBranch
|
||||
};
|
||||
let formBody = [];
|
||||
for (let property in details) {
|
||||
let encodedKey = encodeURIComponent(property);
|
||||
let encodedValue = encodeURIComponent(details[property]);
|
||||
formBody.push(encodedKey + '=' + encodedValue);
|
||||
}
|
||||
formBody = formBody.join('&');
|
||||
fetch(`${API}/challenge-submission/${challengeName}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
|
||||
'Authorization': `Bearer ${KeyCloakService.getToken()}`
|
||||
},
|
||||
body: formBody
|
||||
}).then((resp) => resp.json())
|
||||
const challengeSubmission = (
|
||||
challengeName,
|
||||
repoUrl,
|
||||
repoBranch,
|
||||
description,
|
||||
setLoading
|
||||
) => {
|
||||
const details = {
|
||||
f1: description,
|
||||
f3: repoUrl,
|
||||
f4: repoBranch,
|
||||
};
|
||||
let formBody = [];
|
||||
for (let property in details) {
|
||||
let encodedKey = encodeURIComponent(property);
|
||||
let encodedValue = encodeURIComponent(details[property]);
|
||||
formBody.push(encodedKey + '=' + encodedValue);
|
||||
}
|
||||
formBody = formBody.join('&');
|
||||
fetch(`${API}/challenge-submission/${challengeName}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
|
||||
Authorization: `Bearer ${KeyCloakService.getToken()}`,
|
||||
},
|
||||
body: formBody,
|
||||
})
|
||||
.then((resp) => resp.json())
|
||||
.then((data) => {
|
||||
setLoading(true);
|
||||
window.location.replace(`https://gonito.net/open-view-progress/${data}#form`);
|
||||
setLoading(true);
|
||||
const processUrl = API.replace('/api', '');
|
||||
window.location.replace(`${processUrl}/open-view-progress/${data}#form`);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Container, FlexColumn, FlexRow, Svg } from '../../utils/containers';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { H1, H2, Medium } from '../../utils/fonts';
|
||||
import { H1, Medium } from '../../utils/fonts';
|
||||
import theme from '../../utils/theme';
|
||||
import MobileChallengeMenu from './MobileChallengeMenu';
|
||||
import Leaderboard from './Leaderboard/Leaderboard';
|
||||
@ -70,29 +70,33 @@ const Challenge = (props) => {
|
||||
};
|
||||
|
||||
const mobileRender = () => {
|
||||
return (
|
||||
<FlexColumn
|
||||
minHeight="100vh"
|
||||
gap="12px"
|
||||
alignmentY="flex-start"
|
||||
padding="66px 0 0 0"
|
||||
>
|
||||
<Loading visible={loading} />
|
||||
<H1 as="h1" margin="0 0 8px 0" textAlign="center">
|
||||
{challenge.title}
|
||||
</H1>
|
||||
<MobileChallengeMenu
|
||||
challengeName={challengeName}
|
||||
section={props.section}
|
||||
/>
|
||||
<Container
|
||||
width="75%"
|
||||
height="1px"
|
||||
backgroundColor={theme.colors.dark}
|
||||
/>
|
||||
{sectionRender()}
|
||||
</FlexColumn>
|
||||
);
|
||||
if (!loading) {
|
||||
return (
|
||||
<FlexColumn
|
||||
minHeight="100vh"
|
||||
gap="12px"
|
||||
alignmentY="flex-start"
|
||||
padding="66px 0 0 0"
|
||||
>
|
||||
<Loading visible={loading} />
|
||||
<H1 as="h1" margin="0 0 8px 0" textAlign="center">
|
||||
{challenge.title}
|
||||
</H1>
|
||||
<MobileChallengeMenu
|
||||
challengeName={challengeName}
|
||||
section={props.section}
|
||||
/>
|
||||
<Container
|
||||
width="75%"
|
||||
height="1px"
|
||||
backgroundColor={theme.colors.dark}
|
||||
/>
|
||||
{sectionRender()}
|
||||
</FlexColumn>
|
||||
);
|
||||
} else {
|
||||
return <Loading />;
|
||||
}
|
||||
};
|
||||
|
||||
const desktopRender = () => {
|
||||
@ -131,19 +135,7 @@ const Challenge = (props) => {
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<FlexColumn
|
||||
position="fixed"
|
||||
top="0"
|
||||
left="0"
|
||||
width="100%"
|
||||
height="100vh"
|
||||
zIndex="10"
|
||||
>
|
||||
<H2 as="h1">Submission processing...</H2>
|
||||
<Loading />
|
||||
</FlexColumn>
|
||||
);
|
||||
return <Loading />;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@ const DesktopChallengeMenu = (props) => {
|
||||
<Option
|
||||
key={`challenge_menu_option-${index}`}
|
||||
as={Link}
|
||||
active={index === props.section}
|
||||
active={index === props.section ? 1 : 0}
|
||||
to={`/challenge/${props.challengeName}/${options[index]
|
||||
.toLowerCase()
|
||||
.replace(' ', '')}`}
|
||||
|
||||
@ -1,50 +1,89 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn} from '../../utils/containers';
|
||||
import {H2, Menu} from '../../utils/fonts';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { FlexColumn } from '../../utils/containers';
|
||||
import { H2, Menu } from '../../utils/fonts';
|
||||
import SubmitInput from '../generic/SubmitInput';
|
||||
import Button from '../generic/Button';
|
||||
import theme from '../../utils/theme';
|
||||
import challengeSubmission from '../../api/challengeSubmissionPost';
|
||||
import Loading from '../generic/Loading';
|
||||
|
||||
const Submit = (props) => {
|
||||
const [description, setDescription] = React.useState('');
|
||||
const [repoUrl, setRepoUrl] = React.useState('');
|
||||
const [repoBranch, setRepoBranch] = React.useState('');
|
||||
const [description, setDescription] = React.useState('');
|
||||
const [repoUrl, setRepoUrl] = React.useState('');
|
||||
const [repoBranch, setRepoBranch] = React.useState('');
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
|
||||
const descriptionHandler = (e) => {
|
||||
setDescription(e.target.value);
|
||||
};
|
||||
const descriptionHandler = (e) => {
|
||||
setDescription(e.target.value);
|
||||
};
|
||||
|
||||
const repoUrlHandler = (e) => {
|
||||
setRepoUrl(e.target.value);
|
||||
};
|
||||
const repoUrlHandler = (e) => {
|
||||
setRepoUrl(e.target.value);
|
||||
};
|
||||
|
||||
const repoBranchHandler = (e) => {
|
||||
setRepoBranch(e.target.value);
|
||||
};
|
||||
const repoBranchHandler = (e) => {
|
||||
setRepoBranch(e.target.value);
|
||||
};
|
||||
|
||||
const challengeSubmissionSubmit = () => {
|
||||
challengeSubmission(props.challengeName, repoUrl, repoBranch, description, props.setLoading);
|
||||
};
|
||||
|
||||
return (
|
||||
<FlexColumn margin='40px 0 0 0' padding='24px' as='section' gap='64px' maxWidth='624px' width='100%'
|
||||
alignmentX='flex-start'>
|
||||
<H2 as='h2' width='100%' textAlign='center'>
|
||||
Submit a solution to the challenge
|
||||
</H2>
|
||||
<FlexColumn width='100%' gap='32px'>
|
||||
<SubmitInput label='Submission description' handler={descriptionHandler}/>
|
||||
<SubmitInput label='Submission repo URL' handler={repoUrlHandler}/>
|
||||
<SubmitInput label='Submission repo branch' handler={repoBranchHandler}/>
|
||||
</FlexColumn>
|
||||
<Button width='122px' height='44px' handler={challengeSubmissionSubmit}>
|
||||
<Menu color={theme.colors.white}>
|
||||
Submit
|
||||
</Menu>
|
||||
</Button>
|
||||
</FlexColumn>
|
||||
const challengeSubmissionSubmit = () => {
|
||||
setLoading(true);
|
||||
challengeSubmission(
|
||||
props.challengeName,
|
||||
repoUrl,
|
||||
repoBranch,
|
||||
description,
|
||||
setLoading
|
||||
);
|
||||
};
|
||||
|
||||
if (!loading) {
|
||||
return (
|
||||
<FlexColumn
|
||||
margin="40px 0 0 0"
|
||||
padding="24px"
|
||||
as="section"
|
||||
gap="64px"
|
||||
maxWidth="624px"
|
||||
width="100%"
|
||||
alignmentX="flex-start"
|
||||
>
|
||||
<H2 as="h2" width="100%" textAlign="center">
|
||||
Submit a solution to the challenge
|
||||
</H2>
|
||||
<FlexColumn width="100%" gap="32px">
|
||||
<SubmitInput
|
||||
label="Submission description"
|
||||
handler={descriptionHandler}
|
||||
/>
|
||||
<SubmitInput label="Submission repo URL" handler={repoUrlHandler} />
|
||||
<SubmitInput
|
||||
label="Submission repo branch"
|
||||
handler={repoBranchHandler}
|
||||
/>
|
||||
</FlexColumn>
|
||||
<Button width="122px" height="44px" handler={challengeSubmissionSubmit}>
|
||||
<Menu color={theme.colors.white}>Submit</Menu>
|
||||
</Button>
|
||||
</FlexColumn>
|
||||
);
|
||||
} else {
|
||||
return createPortal(
|
||||
<FlexColumn
|
||||
position="fixed"
|
||||
top="0"
|
||||
left="0"
|
||||
width="100%"
|
||||
height="100vh"
|
||||
zIndex="100"
|
||||
backgroundColor={theme.colors.white}
|
||||
>
|
||||
<H2 as="h1">Submission processing...</H2>
|
||||
<Loading />
|
||||
</FlexColumn>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Submit;
|
||||
export default Submit;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user