make challenge sections as different url pages

src/App.js

@@ -10,7 +10,6 @@ import {
   IS_MOBILE,
   POLICY_PRIVACY_PAGE,
 } from './utils/globals';
-import Challenge from './pages/Challenge';
 import KeyCloakService from './services/KeyCloakService';
 import React from 'react';
 import LoggedBar from './components/navigation/LoggedBar';
@@ -19,6 +18,7 @@ import Loading from './components/generic/Loading';
 import { FlexColumn } from './utils/containers';
 import PopupMessage from './components/generic/PopupMessage';
 import PolicyPrivacy from './pages/PolicyPrivacy';
+import Challenge from './components/specific_challenge/Challenge';
 
 const App = () => {
   const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');
@@ -104,7 +104,27 @@ const App = () => {
           <Routes>
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId`}
-              element={<Challenge />}
+              element={<Challenge section={0} />}
+            />
+            <Route
+              path={`${CHALLENGE_PAGE}/:challengeId/leaderboard`}
+              element={<Challenge section={0} />}
+            />
+            <Route
+              path={`${CHALLENGE_PAGE}/:challengeId/readme`}
+              element={<Challenge section={1} />}
+            />
+            <Route
+              path={`${CHALLENGE_PAGE}/:challengeId/howto`}
+              element={<Challenge section={2} />}
+            />
+            <Route
+              path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
+              element={<Challenge section={3} />}
+            />
+            <Route
+              path={`${CHALLENGE_PAGE}/:challengeId/submit`}
+              element={<Challenge section={4} />}
             />
             <Route path={CHALLENGES_PAGE} element={<Challenges />} />
             <Route

src/components/specific_challenge/Challenge.js

@@ -1,26 +1,25 @@
 import React from 'react';
-import { Container, FlexColumn, FlexRow, Svg } from '../utils/containers';
+import { Container, FlexColumn, FlexRow, Svg } from '../../utils/containers';
 import { useParams } from 'react-router-dom';
-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';
-import Readme from '../components/specific_challenge/Readme';
-import HowTo from '../components/specific_challenge/HowTo/HowTo';
-import MyEntries from '../components/specific_challenge/MyEntries/MyEntries';
-import Submit from '../components/specific_challenge/Submit';
+import { H1, H2, Medium } from '../../utils/fonts';
+import theme from '../../utils/theme';
+import MobileChallengeMenu from './MobileChallengeMenu';
+import Leaderboard from './Leaderboard/Leaderboard';
+import Readme from './Readme';
+import HowTo from './HowTo/HowTo';
+import MyEntries from './MyEntries/MyEntries';
+import Submit from './Submit';
 import Media from 'react-media';
-import DesktopChallengeMenu from '../components/specific_challenge/DesktopChallengeMenu';
-import { RENDER_ICO } from '../utils/globals';
-import textIco from '../assets/text_ico.svg';
-import getChallengeInfo from '../api/getChallengeInfo';
-import Loading from '../components/generic/Loading';
-import getUser from '../api/getUser';
+import DesktopChallengeMenu from './DesktopChallengeMenu';
+import { RENDER_ICO } from '../../utils/globals';
+import textIco from '../../assets/text_ico.svg';
+import getChallengeInfo from '../../api/getChallengeInfo';
+import Loading from '../generic/Loading';
+import getUser from '../../api/getUser';
 
-const Challenge = () => {
+const Challenge = (props) => {
   const challengeName = useParams().challengeId;
   const [challenge, setChallenge] = React.useState([]);
-  const [section, setSection] = React.useState(0);
   const [loading, setLoading] = React.useState(true);
   const [user, setUser] = React.useState('');
 
@@ -30,7 +29,7 @@ const Challenge = () => {
   }, [challengeName]);
 
   const sectionRender = () => {
-    switch (section) {
+    switch (props.section) {
       case 0:
         return (
           <Leaderboard
@@ -76,7 +75,10 @@ const Challenge = () => {
         <H1 as="h1" margin="0 0 8px 0" textAlign="center">
           {challenge.title}
         </H1>
-        <MobileChallengeMenu setSection={setSection} section={section} />
+        <MobileChallengeMenu
+          challengeName={challengeName}
+          section={props.section}
+        />
         <Container
           width="75%"
           height="1px"
@@ -91,7 +93,10 @@ const Challenge = () => {
     if (!loading) {
       return (
         <>
-          <DesktopChallengeMenu setSection={setSection} section={section} />
+          <DesktopChallengeMenu
+            challengeName={challengeName}
+            section={props.section}
+          />
           <FlexColumn
             minHeight="100vh"
             alignmentY="flex-start"

src/components/specific_challenge/DesktopChallengeMenu.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
-import {FlexColumn} from '../../utils/containers';
-import {H3} from '../../utils/fonts';
+import { FlexColumn } from '../../utils/containers';
+import { H3 } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
 import KeyCloakService from '../../services/KeyCloakService';
+import { Link } from 'react-router-dom';
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
   justify-content: flex-start;
@@ -16,7 +17,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)`
   padding: 64px 0 0 0;
   z-index: 2;
   gap: 32px;
-  box-shadow: ${({theme}) => theme.shadowRight};
+  box-shadow: ${({ theme }) => theme.shadowRight};
 `;
 
 const Option = styled(FlexColumn)`
@@ -24,46 +25,50 @@ const Option = styled(FlexColumn)`
   width: 100%;
   transition: background-color 0.3s ease-in-out;
   cursor: pointer;
-  background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
+  background-color: ${({ theme, active }) =>
+    active ? theme.colors.green05 : theme.colors.white};
 
   * {
     cursor: pointer;
   }
 
   &:hover {
-    background-color: ${({theme}) => theme.colors.green05};
+    background-color: ${({ theme }) => theme.colors.green05};
   }
 `;
 
 const DesktopChallengeMenu = (props) => {
-    let options = ['Leaderboard', 'Readme', 'How to'];
-    if (KeyCloakService.isLoggedIn())
-        options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
-    return (
-        <DesktopChallengeMenuStyle>
-            {options.map((option, index) => {
-                return (
-                    <Option key={`challenge_menu_option-${index}`} as='button'
-                            active={index === props.section}
-                            onClick={() => props.setSection(index)}>
-                        <H3 textTransform='uppercase'>
-                            {option}
-                        </H3>
-                    </Option>
-                );
-            })}
-        </DesktopChallengeMenuStyle>
-    );
+  let options = ['Leaderboard', 'Readme', 'How to'];
+  if (KeyCloakService.isLoggedIn())
+    options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
+  return (
+    <DesktopChallengeMenuStyle>
+      {options.map((option, index) => {
+        return (
+          <Option
+            key={`challenge_menu_option-${index}`}
+            as={Link}
+            active={index === props.section}
+            to={`/challenge/${props.challengeName}/${options[index]
+              .toLowerCase()
+              .replace(' ', '')}`}
+          >
+            <H3 textTransform="uppercase">{option}</H3>
+          </Option>
+        );
+      })}
+    </DesktopChallengeMenuStyle>
+  );
 };
 
 DesktopChallengeMenu.propTypes = {
-    section: PropsTypes.number,
-    setSection: PropsTypes.func
+  section: PropsTypes.number,
+  setSection: PropsTypes.func,
 };
 
 DesktopChallengeMenu.defaultProps = {
-    section: 0,
-    setSection: null,
+  section: 0,
+  setSection: null,
 };
 
 export default DesktopChallengeMenu;

src/components/specific_challenge/MobileChallengeMenu.js

@@ -27,16 +27,14 @@ const MobileChallengeMenu = (props) => {
           <MenuOption
             as="button"
             active={3 === props.section}
-            to="/"
-            onClick={() => props.setSection(3)}
+            to={`${props.challengeName}/${options[3].toLowerCase()}`}
           >
             {options[3]}
           </MenuOption>
           <MenuOption
             as="button"
             active={4 === props.section}
-            to="/"
-            onClick={() => props.setSection(4)}
+            to={`${props.challengeName}/${options[4].toLowerCase()}`}
           >
             {options[4]}
           </MenuOption>
@@ -50,24 +48,21 @@ const MobileChallengeMenu = (props) => {
         <MenuOption
           as="button"
           active={0 === props.section}
-          to="/"
-          onClick={() => props.setSection(0)}
+          to={`${props.challengeName}/${options[0].toLowerCase()}`}
         >
           {options[0]}
         </MenuOption>
         <MenuOption
           as="button"
           active={1 === props.section}
-          to="/"
-          onClick={() => props.setSection(1)}
+          to={`${props.challengeName}/${options[1].toLowerCase()}`}
         >
           {options[1]}
         </MenuOption>
         <MenuOption
           as="button"
           active={2 === props.section}
-          to="/"
-          onClick={() => props.setSection(2)}
+          to={`${props.challengeName}/${options[2].toLowerCase()}`}
         >
           {options[2]}
         </MenuOption>