Merge branch 'master' of https://github.com/mattyl006/gonito

src/api/challengeSubmissionPost.js

@@ -1,7 +1,7 @@
 import KeyCloakService from '../services/KeyCloakService';
 import {API} from '../utils/globals';
 
-const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
+const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setLoading) => {
     const details = {
         'f1': description,
         'f3': repoUrl,
@@ -14,13 +14,17 @@ const challengeSubmission = (challengeName, repoUrl, repoBranch, description) =>
         formBody.push(encodedKey + '=' + encodedValue);
     }
     formBody = formBody.join('&');
-    return fetch(`${API}/challenge-submission/${challengeName}`, {
+    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/view-progress/${data}#form`);
     });
 };
 

src/components/generic/Button.js

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

src/components/specific_challenge/Submit.js

@@ -24,10 +24,7 @@ const Submit = (props) => {
     };
 
     const challengeSubmissionSubmit = () => {
-        challengeSubmission(props.challengeName, repoUrl, repoBranch, description)
+        challengeSubmission(props.challengeName, repoUrl, repoBranch, description, props.setLoading);
-            .then((response) => response.text())
-            .then((data) => console.log(data));
-        props.popUpMessageHandler('Submit success!', 'Check your entries.');
     };
 
     return (

src/pages/Challenge.js

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

src/utils/fonts.js

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