s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make challenge sections as different url pages

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-14 16:16:14 +01:00
parent d201d30688
commit 71dfb9c2db
4 changed files with 85 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.js
View File

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

45
src/pages/Challenge.js → src/components/specific_challenge/Challenge.js
View File

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

61
src/components/specific_challenge/DesktopChallengeMenu.js
View File

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

15
src/components/specific_challenge/MobileChallengeMenu.js
View File

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