make challenge sections as different url pages
This commit is contained in:
parent
d201d30688
commit
71dfb9c2db
24
src/App.js
24
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
|
||||
|
||||
@ -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"
|
||||
@ -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,14 +25,15 @@ 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};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -43,12 +45,15 @@ const DesktopChallengeMenu = (props) => {
|
||||
<DesktopChallengeMenuStyle>
|
||||
{options.map((option, index) => {
|
||||
return (
|
||||
<Option key={`challenge_menu_option-${index}`} as='button'
|
||||
<Option
|
||||
key={`challenge_menu_option-${index}`}
|
||||
as={Link}
|
||||
active={index === props.section}
|
||||
onClick={() => props.setSection(index)}>
|
||||
<H3 textTransform='uppercase'>
|
||||
{option}
|
||||
</H3>
|
||||
to={`/challenge/${props.challengeName}/${options[index]
|
||||
.toLowerCase()
|
||||
.replace(' ', '')}`}
|
||||
>
|
||||
<H3 textTransform="uppercase">{option}</H3>
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
@ -58,7 +63,7 @@ const DesktopChallengeMenu = (props) => {
|
||||
|
||||
DesktopChallengeMenu.propTypes = {
|
||||
section: PropsTypes.number,
|
||||
setSection: PropsTypes.func
|
||||
setSection: PropsTypes.func,
|
||||
};
|
||||
|
||||
DesktopChallengeMenu.defaultProps = {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user