mobile menu correction

.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

src/components/specific_challenge/DesktopChallengeMenu.js

@@ -5,6 +5,10 @@ import { H3 } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
 import KeyCloakService from '../../services/KeyCloakService';
 import { Link } from 'react-router-dom';
+import {
+  MENU_CHALEENGE_SECTIONS_WITH_LOGIN,
+  MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+} from '../../utils/globals';
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
   justify-content: flex-start;
@@ -39,16 +43,9 @@ const Option = styled(FlexColumn)`
 `;
 
 const DesktopChallengeMenu = (props) => {
-  let options = ['Leaderboard', 'All entries', 'Readme', 'How to'];
+  let options = MENU_CHALLENGE_SECTIONS_NO_LOGIN;
   if (KeyCloakService.isLoggedIn())
-    options = [
-      'Leaderboard',
-      'All entries',
-      'Readme',
-      'How to',
-      'My entries',
-      'Submit',
-    ];
+    options = MENU_CHALEENGE_SECTIONS_WITH_LOGIN;
   return (
     <DesktopChallengeMenuStyle>
       {options.map((option, index) => {

src/components/specific_challenge/MobileChallengeMenu.js

@@ -4,6 +4,12 @@ import styled from 'styled-components';
 import { Medium } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
 import KeyCloakService from '../../services/KeyCloakService';
+import {
+  CHALLENGE_SECTIONS,
+  MENU_CHALEENGE_SECTIONS_WITH_LOGIN,
+  MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+} from '../../utils/globals';
+import { Link } from 'react-router-dom';
 
 const MenuOption = styled(Medium)`
   cursor: pointer;
@@ -17,54 +23,83 @@ const MenuOption = styled(Medium)`
 `;
 
 const MobileChallengeMenu = (props) => {
-  let options = ['Leaderboard', 'Readme', 'How to'];
+  let options = MENU_CHALLENGE_SECTIONS_NO_LOGIN;
   if (KeyCloakService.isLoggedIn())
-    options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
+    options = MENU_CHALEENGE_SECTIONS_WITH_LOGIN;
   const renderLoggedOptions = () => {
-    if (options.length > 3) {
     return (
       <FlexRow gap="36px">
         <MenuOption
-            as="button"
-            active={3 === props.section}
-            to={`${props.challengeName}/${options[3].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.HOW_TO === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.HOW_TO
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-            {options[3]}
+          {options[CHALLENGE_SECTIONS.HOW_TO]}
         </MenuOption>
         <MenuOption
-            as="button"
-            active={4 === props.section}
-            to={`${props.challengeName}/${options[4].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.MY_ENTRIES === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.MY_ENTRIES
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-            {options[4]}
+          {options[CHALLENGE_SECTIONS.MY_ENTRIES]}
+        </MenuOption>
+        <MenuOption
+          as={Link}
+          active={CHALLENGE_SECTIONS.SUBMIT === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.SUBMIT
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
+        >
+          {options[CHALLENGE_SECTIONS.SUBMIT]}
         </MenuOption>
       </FlexRow>
     );
-    }
   };
   return (
     <>
       <FlexRow gap="32px">
         <MenuOption
-          as="button"
-          active={0 === props.section}
-          to={`${props.challengeName}/${options[0].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.LEADERBOARD === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.LEADERBOARD
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-          {options[0]}
+          {options[CHALLENGE_SECTIONS.LEADERBOARD]}
         </MenuOption>
         <MenuOption
-          as="button"
-          active={1 === props.section}
-          to={`${props.challengeName}/${options[1].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.ALL_ENTRIES === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.ALL_ENTRIES
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-          {options[1]}
+          {options[CHALLENGE_SECTIONS.ALL_ENTRIES]}
         </MenuOption>
         <MenuOption
-          as="button"
-          active={2 === props.section}
-          to={`${props.challengeName}/${options[2].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.README === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.README
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-          {options[2]}
+          {options[CHALLENGE_SECTIONS.README]}
         </MenuOption>
       </FlexRow>
       {renderLoggedOptions()}

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -132,6 +132,27 @@ const MyEntries = (props) => {
         {!loading ? (
           <>
             <Search searchQueryHandler={searchQueryHandler} />
+            <Table
+              challengeName={props.challengeName}
+              headerElements={getMyEntriesHeader()}
+              possibleMetrics={getPossibleMetrics()}
+              gridTemplateColumns={
+                '1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)
+              }
+              staticColumnElements={[
+                { name: 'id', format: null, order: 1, align: 'left' },
+                { name: 'when', format: RENDER_WHEN, order: 3, align: 'right' },
+              ]}
+              iterableColumnElement={{
+                name: 'evaluations',
+                format: EVALUATIONS_FORMAT,
+                order: 2,
+                align: 'left',
+              }}
+              pageNr={pageNr}
+              elements={myEntries}
+              sortByUpdate={sortByUpdate}
+            />
             <Pager
               pageNr={pageNr}
               width="48px"
@@ -176,7 +197,6 @@ const MyEntries = (props) => {
                 format: EVALUATIONS_FORMAT,
                 order: 2,
                 align: 'left',
-                mobileRender,
               }}
               pageNr={pageNr}
               elements={myEntries}

src/utils/globals.js

@@ -18,6 +18,21 @@ const ROOT_URL = window.location.origin;
 
 const LOGIN_REQUIRED_PAGES = ['myentries', 'submit'];
 
+const MENU_CHALLENGE_SECTIONS_NO_LOGIN = [
+  'Leaderboard',
+  'All entries',
+  'Readme',
+  'How to',
+];
+const MENU_CHALEENGE_SECTIONS_WITH_LOGIN = [
+  'Leaderboard',
+  'All entries',
+  'Readme',
+  'How to',
+  'My entries',
+  'Submit',
+];
+
 const CHALLENGE_SECTIONS = {
   LEADERBOARD: 0,
   ALL_ENTRIES: 1,
@@ -96,6 +111,8 @@ export {
   ROOT_URL,
   LOGIN_REQUIRED_PAGES,
   CHALLENGE_SECTIONS,
+  MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+  MENU_CHALEENGE_SECTIONS_WITH_LOGIN,
   MINI_DESCRIPTION_RENDER,
   RENDER_ICO,
   CALC_PAGES,