From b5b3989f1103aee9dde10f1c56ef0ddd6004ced6 Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Mon, 5 Dec 2022 12:46:57 +0100
Subject: [PATCH] submit response handle and font headers letter spacingg
 correction

---
 src/api/challengeSubmissionPost.js          |  9 ++--
 src/components/generic/Button.js            |  4 ++
 src/components/specific_challenge/Submit.js |  4 +-
 src/pages/Challenge.js                      | 57 ++++++++++++---------
 src/utils/fonts.js                          |  1 +
 5 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/api/challengeSubmissionPost.js b/src/api/challengeSubmissionPost.js
index 8ee69a6..ca09d94 100644
--- a/src/api/challengeSubmissionPost.js
+++ b/src/api/challengeSubmissionPost.js
@@ -1,7 +1,7 @@
 import KeyCloakService from '../services/KeyCloakService';
 import {API} from '../utils/globals';
 
-const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setData) => {
+const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setLoading) => {
     const details = {
         'f1': description,
         'f3': repoUrl,
@@ -22,7 +22,10 @@ const challengeSubmission = (challengeName, repoUrl, repoBranch, description, se
         },
         body: formBody
     }).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;
\ No newline at end of file
+export default challengeSubmission;
diff --git a/src/components/generic/Button.js b/src/components/generic/Button.js
index a385185..276f762 100644
--- a/src/components/generic/Button.js
+++ b/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);
   }
diff --git a/src/components/specific_challenge/Submit.js b/src/components/specific_challenge/Submit.js
index be54cf1..15410a3 100644
--- a/src/components/specific_challenge/Submit.js
+++ b/src/components/specific_challenge/Submit.js
@@ -10,7 +10,6 @@ const Submit = (props) => {
     const [description, setDescription] = React.useState('');
     const [repoUrl, setRepoUrl] = React.useState('');
     const [repoBranch, setRepoBranch] = React.useState('');
-    const [responseNumber, setResponseNumber] = React.useState(0);
 
     const descriptionHandler = (e) => {
         setDescription(e.target.value);
@@ -25,8 +24,7 @@ const Submit = (props) => {
     };
 
     const challengeSubmissionSubmit = () => {
-        challengeSubmission(props.challengeName, repoUrl, repoBranch, description, setResponseNumber);
-        console.log(responseNumber);
+        challengeSubmission(props.challengeName, repoUrl, repoBranch, description, props.setLoading);
     };
 
     return (
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 5739698..255fd5d 100644
--- a/src/pages/Challenge.js
+++ b/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,28 +62,39 @@ const Challenge = (props) => {
     };
 
     const desktopRender = () => {
-        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}
-                            </H1>
-                            <Medium as='p'>
-                                {challenge.description}
-                            </Medium>
-                        </FlexColumn>
-                        <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}/>
-                    {sectionRender()}
+        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'>
+                            <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
+                                <H1 as='h1'>
+                                    {challenge.title}
+                                </H1>
+                                <Medium as='p'>
+                                    {challenge.description}
+                                </Medium>
+                            </FlexColumn>
+                            <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}/>
+                        {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>
-            </>
-        );
+            );
+        }
     };
 
     return (
diff --git a/src/utils/fonts.js b/src/utils/fonts.js
index 513866d..3eeb080 100644
--- a/src/utils/fonts.js
+++ b/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;