12 changed files with 212 additions and 322 deletions
--- 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-back-dev.csi.wmi.amu.edu.pl/api
+REACT_APP_API=https://gonito.net/api
--- a/src/App.js
+++ b/src/App.js
@ -116,12 +116,7 @@ const App = () => {
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/howto`}
-              element={
-                <Challenge
-                  popUpMessageHandler={popUpMessageHandler}
-                  section={2}
-                />
-              }
+              element={<Challenge section={2} />}
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
--- a/src/api/challengeSubmissionPost.js
+++ b/src/api/challengeSubmissionPost.js
@ -1,38 +1,30 @@
 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);
-      const processUrl = API.replace('/api', '');
-      window.location.replace(`${processUrl}/open-view-progress/${data}#form`);
+        setLoading(true);
+        window.location.replace(`https://gonito.net/open-view-progress/${data}#form`);
    });
 };

--- a/src/api/getFullUserInfo.js
+++ b/src/api/getFullUserInfo.js
@ -1,16 +0,0 @@
-import {API} from '../utils/globals';
-import KeyCloakService from '../services/KeyCloakService';
-
-const getFullUser = (setDataState, setLoadingState) => {
-    fetch(`${API}/full-user-info`, {
-        headers: {'Authorization': `Bearer ${KeyCloakService.getToken()}`}
-    })
-        .then(response => response.json())
-        .then(data => {
-            setDataState(data);
-            if (setLoadingState)
-                setLoadingState(false);
-        });
-};
-
-export default getFullUser;
--- a/src/components/content_sections/Csi.js
+++ b/src/components/content_sections/Csi.js
@ -1,78 +1,70 @@
 import React from 'react';
-import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
-import { Body, H2, Medium } from '../../utils/fonts';
+import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
+import {Body, H2, Medium} from '../../utils/fonts';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import uamLogo from '../../assets/uam-logo.svg';

 const Csi = () => {
-  const mobileRender = () => {
-    return (
-      <FlexColumn as="section" alignmentX="flex-start">
-        <H2 as="h2" margin="0 0 24px 0">
-          Center for Artificial Intelligence (C4AI)
-        </H2>
-        <Body as="p" margin="0 0 16px 0">
-          <Medium as="span" display="inline">
-            Gonito.net
-          </Medium>{' '}
-          belongs to the
-          <Medium as="span" display="inline">
-            &nbsp;Center for Artificial Intelligence (C4AI)&nbsp;
-          </Medium>
-          at Adam Mickiewicz University (UAM) which conducts research on the
-          development of artificial intelligence, carries out scientific and
-          research and development projects, integrates the research of
-          scientists from various departments of Adam Mickiewicz University and
-          outside it - from leading scientific centers in Poland and abroad as
-          well as those employed in business entities.
-        </Body>
-        <Medium as="p">
-          C4AI also cooperates with business entities in creating new solutions
-          to be implemented in enterprises.
-        </Medium>
-      </FlexColumn>
-    );
-  };
+    const mobileRender = () => {
+        return (
+            <FlexColumn as='section' alignmentX='flex-start'>
+                <H2 as='h2' margin='0 0 24px 0'>
+                    Artificial Intelligence Centre (CSI)
+                </H2>
+                <Body as='p' margin='0 0 16px 0'>
+                    <Medium as='span' display='inline'>Gonito.net</Medium> belongs to the
+                    <Medium as='span' display='inline'>&nbsp;Artificial Intelligence Centre (CSI)&nbsp;</Medium>
+                    at Adam Mickiewicz University (UAM) which conducts research on the development of artificial
+                    intelligence, carries out scientific and research and development projects, integrates the research
+                    of scientists from various departments of Adam Mickiewicz University and outside it - from leading
+                    scientific centers in Poland and abroad as well as those employed in business entities.
+                </Body>
+                <Medium as='p'>
+                    CSI also cooperates with business entities in creating new solutions to be implemented in
+                    enterprises.
+                </Medium>
+            </FlexColumn>
+        );
+    };

-  const desktopRender = () => {
-    return (
-      <FlexRow gap="46px">
-        <FlexColumn as="section" alignmentX="flex-start" maxWidth="490px">
-          <H2 as="h2" margin="0 0 48px 0">
-            Center for Artificial Intelligence (C4AI)
-          </H2>
-          <Body as="p" margin="0 0 24px 0">
-            <Medium as="span" display="inline">
-              Gonito.net
-            </Medium>{' '}
-            belongs to the
-            <Medium as="span" display="inline">
-              &nbsp;Center for Artificial Intelligence (C4AI)&nbsp;
-            </Medium>
-            at Adam Mickiewicz University (UAM) which conducts research on the
-            development of artificial intelligence, carries out scientific and
-            research and development projects, integrates the research of
-            scientists from various departments of Adam Mickiewicz University
-            and outside it - from leading scientific centers in Poland and
-            abroad as well as those employed in business entities.
-          </Body>
-          <Medium as="p">
-            C4AI also cooperates with business entities in creating new
-            solutions to be implemented in enterprises.
-          </Medium>
-        </FlexColumn>
-        <Svg src={uamLogo} width="200px" height="242px" size="contain" />
-      </FlexRow>
-    );
-  };
+    const desktopRender = () => {
+        return (
+            <FlexRow gap='46px'>
+                <FlexColumn as='section' alignmentX='flex-start' maxWidth='490px'>
+                    <H2 as='h2' margin='0 0 48px 0'>
+                        Artificial Intelligence Centre (CSI)
+                    </H2>
+                    <Body as='p' margin='0 0 24px 0'>
+                        <Medium as='span' display='inline'>Gonito.net</Medium> belongs to the
+                        <Medium as='span' display='inline'>&nbsp;Artificial Intelligence Centre (CSI)&nbsp;</Medium>
+                        at Adam Mickiewicz University (UAM) which conducts research on the development of artificial
+                        intelligence, carries out scientific and research and development projects, integrates the
+                        research
+                        of scientists from various departments of Adam Mickiewicz University and outside it - from
+                        leading
+                        scientific centers in Poland and abroad as well as those employed in business entities.
+                    </Body>
+                    <Medium as='p'>
+                        CSI also cooperates with business entities in creating new solutions to be implemented in
+                        enterprises.
+                    </Medium>
+                </FlexColumn>
+                <Svg src={uamLogo} width='200px' height='242px' size='contain'/>
+            </FlexRow>
+        );
+    };

-  return (
-    <>
-      <Media query={theme.mobile}>{mobileRender()}</Media>
-      <Media query={theme.desktop}>{desktopRender()}</Media>
-    </>
-  );
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    );
 };

 export default Csi;
--- a/src/components/generic/CodeShell.js
+++ b/src/components/generic/CodeShell.js
@ -1,23 +1,23 @@
 import React from 'react';
-import { FlexColumn, Svg } from '../../utils/containers';
+import {FlexColumn, Svg} from '../../utils/containers';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
 import copyIco from '../../assets/copy_ico.svg';
 import checkIco from '../../assets/check_ico.svg';
-import { Body, Code } from '../../utils/fonts';
+import {Body, Code} from '../../utils/fonts';

 const CodeShellStyle = styled(FlexColumn)`
  position: relative;
  padding: 24px 14px 14px;
  gap: 8px;
-  background-color: ${({ theme }) => theme.colors.dark07};
-  border: 1px solid ${({ theme }) => theme.colors.dark};
+  background-color: ${({theme}) => theme.colors.dark07};
+  border: 1px solid ${({theme}) => theme.colors.dark};
  border-radius: 4px;
  width: 100%;
  align-items: flex-start;
-  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'none')};
+  max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};

-  @media (min-width: ${({ theme }) => theme.overMobile}) {
+  @media (min-width: ${({theme}) => theme.overMobile}) {
    gap: 12px;
    padding: 40px 32px 32px;
  }
@ -28,63 +28,59 @@ const CopiedMessageStyle = styled(Body)`
  position: absolute;
  top: -24px;
  right: -10px;
-  background-color: ${({ theme }) => theme.colors.green};
-  color: ${({ theme }) => theme.colors.white};
+  background-color: ${({theme}) => theme.colors.green};
+  color: ${({theme}) => theme.colors.white};
  border-radius: 4px;
  padding: 6px;
 `;

 const CodeShell = (props) => {
-  const [ico, setIco] = React.useState(copyIco);
+    const [ico, setIco] = React.useState(copyIco);

-  const clickCopyButton = () => {
-    let commands = '';
-    if (props.commands.length > 1) {
-      for (let command of props.commands) commands += command + '\n';
-    } else commands = props.commands;
-    navigator.clipboard.writeText(commands).then((r) => console.log(r));
-    setIco(checkIco);
-    setTimeout(() => {
-      setIco(copyIco);
-    }, 2000);
-  };
+    const clickCopyButton = () => {
+        let commands = '';
+        if (props.commands.length > 1) {
+            for (let command of props.commands)
+                commands += command + '\n';
+        } else commands = props.commands;
+        navigator.clipboard.writeText(commands).then(r => console.log(r));
+        setIco(checkIco);
+        setTimeout(() => {
+            setIco(copyIco);
+        }, 3000);
+    };

-  const formatCommand = (command) => {
-    if (command[0] === '\t') {
-      return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
-    }
-    return command;
-  };
+    const formatCommand = (command) => {
+        if (command[0] === '\t') {
+            return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
+            /* eslint-disable */
+        } else if (command[0] === '\s') {
+            return <>&nbsp;{formatCommand(command.slice(1))}</>;
+        }
+        return command;
+    };

-  const renderCommands = () => {
-    return props.commands.map((command, index) => {
-      return (
-        <Code
-          key={`command-${props.codeBlockIndex}-${index}`}
-          as="li"
-          before={!props.disablePrompt}
-        >
-          {formatCommand(command)}
-        </Code>
-      );
-    });
-  };
+    const renderCommands = () => {
+        return (
+            props.commands.map((command, index) => {
+                return (
+                    <Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
+                          before={!props.disablePrompt}>
+                        {formatCommand(command)}
+                    </Code>
+                );
+            })
+        );
+    };

-  return (
-    <CodeShellStyle as="ul" maxWidth={props.maxWidth}>
-      <Svg
-        position="absolute"
-        top="12px"
-        right="12px"
-        cursor="pointer"
-        backgroundColor={theme.colors.white}
-        src={ico}
-        onClick={clickCopyButton}
-      />
-      {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
-      {renderCommands()}
-    </CodeShellStyle>
-  );
+    return (
+        <CodeShellStyle as='ul' maxWidth={props.maxWidth}>
+            <Svg position='absolute' top='12px' right='12px' cursor='pointer'
+                 backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
+            {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
+            {renderCommands()}
+        </CodeShellStyle>
+    );
 };

 export default CodeShell;
--- 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, Medium } from '../../utils/fonts';
+import { H1, H2, Medium } from '../../utils/fonts';
 import theme from '../../utils/theme';
 import MobileChallengeMenu from './MobileChallengeMenu';
 import Leaderboard from './Leaderboard/Leaderboard';
@ -48,13 +48,7 @@ const Challenge = (props) => {
          />
        );
      case 2:
-        return (
-          <HowTo
-            popUpMessageHandler={props.popUpMessageHandler}
-            challengeName={challengeName}
-            user={user}
-          />
-        );
+        return <HowTo challengeName={challengeName} user={user} />;
      case 3:
        return <MyEntries challengeName={challengeName} />;
      case 4:
@ -70,33 +64,29 @@ const Challenge = (props) => {
  };

  const mobileRender = () => {
-    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 />;
-    }
+    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>
+    );
  };

  const desktopRender = () => {
@ -135,7 +125,19 @@ const Challenge = (props) => {
        </>
      );
    } else {
-      return <Loading />;
+      return (
+        <FlexColumn
+          position="fixed"
+          top="0"
+          left="0"
+          width="100%"
+          height="100vh"
+          zIndex="10"
+        >
+          <H2 as="h1">Submission processing...</H2>
+          <Loading />
+        </FlexColumn>
+      );
    }
  };

--- 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 ? 1 : 0}
+            active={index === props.section}
            to={`/challenge/${props.challengeName}/${options[index]
              .toLowerCase()
              .replace(' ', '')}`}
--- a/src/components/specific_challenge/HowTo/HowTo.js
+++ b/src/components/specific_challenge/HowTo/HowTo.js
@ -1,25 +1,9 @@
 import React from 'react';
-import getFullUser from '../../../api/getFullUserInfo';
-import KeyCloakService from '../../../services/KeyCloakService';
 import { FlexColumn } from '../../../utils/containers';
 import { IS_MOBILE } from '../../../utils/globals';
 import HowToContent from './sections/HowToContent';

 const HowTo = (props) => {
-  const [userFullInfo, setUserFullInfo] = React.useState(null);
-
-  React.useEffect(() => {
-    getFullUser(setUserFullInfo);
-
-    if (!KeyCloakService.isLoggedIn()) {
-      props.popUpMessageHandler(
-        'Please log in',
-        'To see everything you must log in',
-        () => KeyCloakService.doLogin
-      );
-    }
-  }, [props]);
-
  return (
    <FlexColumn
      margin={IS_MOBILE() ? null : '64px 0 0 0'}
@ -30,7 +14,6 @@ const HowTo = (props) => {
    >
      <FlexColumn maxWidth="680px" alignmentX="flex-start" gap="48px">
        <HowToContent
-          userFullInfo={userFullInfo}
          user={props.user ? props.user : 'yourID'}
          challengeName={props.challengeName}
        />
--- a/src/components/specific_challenge/HowTo/sections/HowToContent.js
+++ b/src/components/specific_challenge/HowTo/sections/HowToContent.js
@ -17,17 +17,6 @@ const HowToContent = (props) => {
    }
  };

-  const repoKeyRender = () => {
-    if (props.userFullInfo) {
-      return (
-        <CodeShell
-          codeBlockIndex={0}
-          commands={[props.userFullInfo.individualKey]}
-        />
-      );
-    }
-  };
-
  return (
    <FlexColumn
      as="article"
@ -47,7 +36,7 @@ const HowToContent = (props) => {
        <Body as="p" margin="auto 0">
          Create a private git repository with the name
          <Medium as="span">&nbsp;{props.challengeName}</Medium>
-          &nbsp;The name of the repository must match!
+          .&nbsp;The name of the repository must match!
        </Body>
      </Grid>
      <Grid
@ -57,12 +46,10 @@ const HowToContent = (props) => {
      >
        <CircleNumber number="2" />
        <Body as="p" margin="auto 0">
-          Add the following ssh key{' '}
-          <Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium>{' '}
-          to your deploy keys in your git repository settings.
+          Add the following ssh key <Medium as="span">REPO_KEY_HERE</Medium> to
+          your deploy keys in your git repository settings.
        </Body>
      </Grid>
-      {repoKeyRender()}
      <Grid
        width="100%"
        gridTemplateColumns="auto 1fr"
--- a/src/components/specific_challenge/Submit.js
+++ b/src/components/specific_challenge/Submit.js
@ -1,89 +1,50 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
-import { FlexColumn } from '../../utils/containers';
-import { H2, Menu } from '../../utils/fonts';
+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 [loading, setLoading] = React.useState(false);
+    const [description, setDescription] = React.useState('');
+    const [repoUrl, setRepoUrl] = React.useState('');
+    const [repoBranch, setRepoBranch] = React.useState('');

-  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 = () => {
-    setLoading(true);
-    challengeSubmission(
-      props.challengeName,
-      repoUrl,
-      repoBranch,
-      description,
-      setLoading
-    );
-  };
+    const challengeSubmissionSubmit = () => {
+        challengeSubmission(props.challengeName, repoUrl, repoBranch, description, props.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 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>
-        <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;
--- a/src/utils/fonts.js
+++ b/src/utils/fonts.js
@ -76,8 +76,6 @@ const Code = styled(Container)`
  line-height: 18px;
  font-weight: 300;
  color: ${({theme}) => theme.colors.white};
-  max-width: 600px;
-  overflow-wrap: break-word;

  &:before {
    display: ${({before}) => before ? 'inline-block' : 'none'};