From 3ff0c6ea8715cf6c565edc32fbf66f04186c895a Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Fri, 10 Mar 2023 14:20:41 +0100
Subject: [PATCH] correct redirect back from submission, submission loading and
 env in submission api request

---
 .env                                          |   2 +-
 src/api/challengeSubmissionPost.js            |  56 +++++----
 .../specific_challenge/Challenge.js           |  66 +++++------
 .../DesktopChallengeMenu.js                   |   2 +-
 src/components/specific_challenge/Submit.js   | 111 ++++++++++++------
 5 files changed, 138 insertions(+), 99 deletions(-)

diff --git a/.env b/.env
index 0c0a154..9a7fd9a 100644
--- a/.env
+++ b/.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
\ No newline at end of file
diff --git a/src/api/challengeSubmissionPost.js b/src/api/challengeSubmissionPost.js
index 517e55e..4e8f1c8 100644
--- a/src/api/challengeSubmissionPost.js
+++ b/src/api/challengeSubmissionPost.js
@@ -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`);
     });
 };
 
diff --git a/src/components/specific_challenge/Challenge.js b/src/components/specific_challenge/Challenge.js
index 9211935..d4810de 100644
--- a/src/components/specific_challenge/Challenge.js
+++ b/src/components/specific_challenge/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, 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 />;
     }
   };
 
diff --git a/src/components/specific_challenge/DesktopChallengeMenu.js b/src/components/specific_challenge/DesktopChallengeMenu.js
index 6986ae1..c3ce87b 100644
--- a/src/components/specific_challenge/DesktopChallengeMenu.js
+++ b/src/components/specific_challenge/DesktopChallengeMenu.js
@@ -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(' ', '')}`}
diff --git a/src/components/specific_challenge/Submit.js b/src/components/specific_challenge/Submit.js
index 15410a3..8be5130 100644
--- a/src/components/specific_challenge/Submit.js
+++ b/src/components/specific_challenge/Submit.js
@@ -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;
\ No newline at end of file
+export default Submit;