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

mobile NavBar fix and init MyEntries

Browse Source
This commit is contained in:
Mateusz Tylka 2023-01-04 15:02:57 +01:00
parent 300e7d67db
commit e8f908b833
4 changed files with 312 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/navigation/NavBar/NavBar.js
View File

@ -13,8 +13,6 @@ import { CHALLENGES_PAGE, POLICY_PRIVACY_PAGE } from '../../../utils/globals';
import cupIco from '../../../assets/cup_ico.svg';
import NavBarStyle from './NavBarStyle';
import KeyCloakService from '../../../services/KeyCloakService';
import Media from 'react-media';
import theme from '../../../utils/theme';
import policyIco from '../../../assets/policy_ico.svg';
const MenuButton = styled(Container)`
@ -54,22 +52,7 @@ const NavBar = (props) => {
<NavBarStyle as="header">
<FlexRow height="100%" alignmentX="space-between" as="nav">
<Logo />
{KeyCloakService.isLoggedIn() ? (
<Media query={theme.mobile}>
<Svg
as="button"
width="20px"
onClick={toggleNavMenu}
height="20px"
src={userIco}
size="cover"
cursor="pointer"
/>
POLICY_PRIVACY_PAGE
</Media>
) : (
<MenuButton as="button" onClick={toggleNavMenu} />
)}
<MenuButton as="button" onClick={toggleNavMenu} />
<FlexRow as="ul" className="ul-desktop" gap="32px">
<FlexRow as={Link} to={CHALLENGES_PAGE} gap="16px">
<Svg width="16px" height="16px" src={cupIco} />

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

@ -1,51 +1,88 @@
import React from 'react';
import {FlexRow} from '../../utils/containers';
import { FlexRow } from '../../utils/containers';
import styled from 'styled-components';
import {Medium} from '../../utils/fonts';
import { Medium } from '../../utils/fonts';
import PropsTypes from 'prop-types';
import KeyCloakService from '../../services/KeyCloakService';
const MenuOption = styled(Medium)`
cursor: pointer;
transition: color 0.3s ease-in-out;
color: ${({theme, active}) => active ? theme.colors.green : theme.colors.dark};
color: ${({ theme, active }) =>
active ? theme.colors.green : theme.colors.dark};
&:hover {
color: ${({theme}) => theme.colors.green};
color: ${({ theme }) => theme.colors.green};
}
`;
const MobileChallengeMenu = (props) => {
return (
<>
<FlexRow gap='32px'>
<MenuOption as='button' active={0 === props.section} to='/' onClick={() => props.setSection(0)}>
Leaderboard
</MenuOption>
<MenuOption as='button' active={1 === props.section} to='/' onClick={() => props.setSection(1)}>
Readme
</MenuOption>
<MenuOption as='button' active={2 === props.section} to='/' onClick={() => props.setSection(2)}>
How to
</MenuOption>
</FlexRow>
<FlexRow gap='36px'>
<MenuOption as='button' active={3 === props.section} to='/' onClick={() => props.setSection(3)}>
My entries
</MenuOption>
<MenuOption as='button' active={4 === props.section} to='/' onClick={() => props.setSection(4)}>
Submit
</MenuOption>
</FlexRow>
</>
);
let options = ['Leaderboard', 'Readme', 'How to'];
if (KeyCloakService.isLoggedIn())
options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
const renderLoggedOptions = () => {
if (options.length > 3) {
return (
<FlexRow gap="36px">
<MenuOption
as="button"
active={3 === props.section}
to="/"
onClick={() => props.setSection(3)}
>
{options[3]}
</MenuOption>
<MenuOption
as="button"
active={4 === props.section}
to="/"
onClick={() => props.setSection(4)}
>
{options[4]}
</MenuOption>
</FlexRow>
);
}
};
return (
<>
<FlexRow gap="32px">
<MenuOption
as="button"
active={0 === props.section}
to="/"
onClick={() => props.setSection(0)}
>
{options[0]}
</MenuOption>
<MenuOption
as="button"
active={1 === props.section}
to="/"
onClick={() => props.setSection(1)}
>
{options[1]}
</MenuOption>
<MenuOption
as="button"
active={2 === props.section}
to="/"
onClick={() => props.setSection(2)}
>
{options[2]}
</MenuOption>
</FlexRow>
{renderLoggedOptions()}
</>
);
};
MobileChallengeMenu.propTypes = {
section: PropsTypes.number,
section: PropsTypes.number,
};
MobileChallengeMenu.defaultProps = {
section: 0,
section: 0,
};
export default MobileChallengeMenu;
export default MobileChallengeMenu;

53
src/components/specific_challenge/MyEntries/MyEntries.js
View File

@ -78,8 +78,6 @@ const MyEntries = (props) => {
);
};
const mobileRender = () => {};
const sortByUpdate = (elem, i) => {
let newEntries = myEntries;
switch (elem) {
@ -125,12 +123,59 @@ const MyEntries = (props) => {
setMyEntries(newEntries);
};
const mobileRender = () => {
return (
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
<H2 as="h2" margin="0 0 12px 0">
My Entries
</H2>
{!loading ? (
<>
<Search searchQueryHandler={searchQueryHandler} />
<Pager
pageNr={pageNr}
width="48px"
borderRadius="64px"
pages={CALC_PAGES(myEntries)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
);
};
const desktopRender = () => {
return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
<H2 as="h2" margin="0 0 32px 0">
My entries
</H2>
</H2>{' '}
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
<H2 as="h2" margin="0 0 12px 0">
My Entries
</H2>
{!loading ? (
<>
<Search searchQueryHandler={searchQueryHandler} />
<Pager
pageNr={pageNr}
width="48px"
borderRadius="64px"
pages={CALC_PAGES(myEntries)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
{myEntries && !loading ? (
<>
<Search searchQueryHandler={searchQueryHandler} />
@ -150,6 +195,7 @@ const MyEntries = (props) => {
format: EVALUATIONS_FORMAT,
order: 2,
align: 'left',
mobileRender,
}}
pageNr={pageNr}
elements={myEntries}
@ -158,6 +204,7 @@ const MyEntries = (props) => {
<Pager
pageNr={pageNr}
width="72px"
mobileRender
borderRadius="64px"
pages={CALC_PAGES(myEntries, 2)}
nextPage={nextPage}

327
src/pages/Challanges/Challenges.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import {Body, H1} from '../../utils/fonts';
import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
import { Body, H1 } from '../../utils/fonts';
import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
import Search from '../../components/generic/Search';
import Pager from '../../components/generic/Pager';
import FiltersMenu from '../../components/challenges_list/FiltersMenu';
@ -10,147 +10,208 @@ import Media from 'react-media';
import theme from '../../utils/theme';
import cupIco from '../../assets/cup_ico.svg';
import getChallenges from '../../api/getChallenges';
import {CALC_PAGES} from '../../utils/globals';
import { CALC_PAGES } from '../../utils/globals';
import Loading from '../../components/generic/Loading';
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
const [challenges, setChallenges] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false);
const [sortBy, setSortBy] = React.useState(0);
const [status, setStatus] = React.useState(0);
const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true);
const [pageNr, setPageNr] = React.useState(1);
const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
const [challenges, setChallenges] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false);
const [sortBy, setSortBy] = React.useState(0);
const [status, setStatus] = React.useState(0);
const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
challengesRequest();
}, []);
React.useEffect(() => {
challengesRequest();
}, []);
const challengesRequest = () => {
getChallenges(setChallengesFromAPI);
getChallenges(setChallenges, setLoading);
};
const challengesRequest = () => {
getChallenges(setChallengesFromAPI);
getChallenges(setChallenges, setLoading);
};
const sortByHandler = (value) => {
setSortBy(value);
};
const sortByHandler = (value) => {
setSortBy(value);
};
const statusHandler = (value) => {
setStatus(value);
};
const statusHandler = (value) => {
setStatus(value);
};
const challengeTypeHandler = (value) => {
setChallengeType(value);
};
const challengeTypeHandler = (value) => {
setChallengeType(value);
};
const commercialHandler = (value) => {
setCommercial(value);
};
const commercialHandler = (value) => {
setCommercial(value);
};
const searchQueryHandler = (event) => {
challengeSearchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
};
const nextPage = () => {
if (pageNr !== CALC_PAGES(challenges)) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
};
const previousPage = () => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
}
};
const renderChallenges = () => {
return _renderChallenges(pageNr, challenges);
};
const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu);
};
const mobileRender = () => {
return (
<>
<FiltersMenu translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
toggleFiltersMenu={toggleFiltersMenu}
sortByHandler={sortByHandler} statusHandler={statusHandler}
challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
<FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='90px 0 32px 0'>
<FlexColumn alignmentX='flex-start' width='80%'>
<H1 as='h1' margin='0 0 20px 0'>
Challenges
</H1>
<Search searchQueryHandler={searchQueryHandler} filterButton
toggleFiltersMenu={toggleFiltersMenu}/>
<FlexColumn width='100%'>
<Loading visible={loading}/>
{renderChallenges()}
</FlexColumn>
</FlexColumn>
{!loading ? <Pager pageNr={pageNr} pages={CALC_PAGES(challenges)} width='48px'
nextPage={nextPage} previousPage={previousPage} borderRadius='64px'
number={`${pageNr} / ${CALC_PAGES(challenges)}`}/> : ''}
</FlexColumn>
</>
);
};
const desktopRender = () => {
return (
<>
<FiltersMenu toggleFiltersMenu={toggleFiltersMenu} transBackDisplay='none'
sortByHandler={sortByHandler} statusHandler={statusHandler}
challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
<FlexColumn as='main' alignmentY='flex-start' width='100%' id='start'
minHeight='100vh' padding='112px 0 82px 310px'>
<FlexColumn alignmentX='flex-start' width='80%'>
<FlexRow width='100%' gap='32px'>
<FlexColumn alignmentX='flex-start' gap='32px' width='75%' maxWidth='720px'>
<H1 as='h1'>
Challenges
</H1>
<Body margin='0 0 12px 0' maxWidth='400px'>
Increase your machine learning skills by competing in our exciting challenges.
</Body>
<Search searchQueryHandler={searchQueryHandler}/>
</FlexColumn>
<Svg src={cupIco} size='contain' width='25%'
height='160px' backgroundColor={theme.colors.green}/>
</FlexRow>
<FlexColumn width='100%'>
<Loading visible={loading}/>
{renderChallenges()}
</FlexColumn>
</FlexColumn>
{!loading ? <Pager pageNr={pageNr} pages={CALC_PAGES(challenges)} borderRadius='64px'
nextPage={nextPage} previousPage={previousPage} width='72px'
number={`${pageNr} / ${CALC_PAGES(challenges)}`}/> : ''}
</FlexColumn>
</>
);
};
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
const searchQueryHandler = (event) => {
challengeSearchQueryHandler(
event,
challengesFromAPI,
setPageNr,
setChallenges
);
};
const nextPage = () => {
if (pageNr !== CALC_PAGES(challenges)) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
};
const previousPage = () => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
}
};
const renderChallenges = () => {
return _renderChallenges(pageNr, challenges);
};
const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu);
};
const mobileRender = () => {
return (
<p>siema</p>
// <>
// <FiltersMenu
// translateX={filtersMenu ? '0' : '100vw'}
// opacity={filtersMenu ? '1' : '0'}
// toggleFiltersMenu={toggleFiltersMenu}
// sortByHandler={sortByHandler}
// statusHandler={statusHandler}
// challengeTypeHandler={challengeTypeHandler}
// commercialHandler={commercialHandler}
// sortBy={sortBy}
// status={status}
// challengeType={challengeType}
// commercial={commercial}
// />
// <FlexColumn
// as="main"
// alignmentY="flex-start"
// width="100%"
// minHeight="100vh"
// padding="90px 0 32px 0"
// >
// <FlexColumn alignmentX="flex-start" width="80%">
// <H1 as="h1" margin="0 0 20px 0">
// Challenges
// </H1>
// <Search
// searchQueryHandler={searchQueryHandler}
// filterButton
// toggleFiltersMenu={toggleFiltersMenu}
// />
// <FlexColumn width="100%">
// <Loading visible={loading} />
// {renderChallenges()}
// </FlexColumn>
// </FlexColumn>
// {!loading ? (
// <Pager
// pageNr={pageNr}
// pages={CALC_PAGES(challenges)}
// width="48px"
// nextPage={nextPage}
// previousPage={previousPage}
// borderRadius="64px"
// number={`${pageNr} / ${CALC_PAGES(challenges)}`}
// />
// ) : (
// ''
// )}
// </FlexColumn>
// </>
);
};
const desktopRender = () => {
return (
<>
<FiltersMenu
toggleFiltersMenu={toggleFiltersMenu}
transBackDisplay="none"
sortByHandler={sortByHandler}
statusHandler={statusHandler}
challengeTypeHandler={challengeTypeHandler}
commercialHandler={commercialHandler}
sortBy={sortBy}
status={status}
challengeType={challengeType}
commercial={commercial}
/>
<FlexColumn
as="main"
alignmentY="flex-start"
width="100%"
id="start"
minHeight="100vh"
padding="112px 0 82px 310px"
>
<FlexColumn alignmentX="flex-start" width="80%">
<FlexRow width="100%" gap="32px">
<FlexColumn
alignmentX="flex-start"
gap="32px"
width="75%"
maxWidth="720px"
>
<H1 as="h1">Challenges</H1>
<Body margin="0 0 12px 0" maxWidth="400px">
Increase your machine learning skills by competing in our
exciting challenges.
</Body>
<Search searchQueryHandler={searchQueryHandler} />
</FlexColumn>
<Svg
src={cupIco}
size="contain"
width="25%"
height="160px"
backgroundColor={theme.colors.green}
/>
</FlexRow>
<FlexColumn width="100%">
<Loading visible={loading} />
{renderChallenges()}
</FlexColumn>
</FlexColumn>
{!loading ? (
<Pager
pageNr={pageNr}
pages={CALC_PAGES(challenges)}
borderRadius="64px"
nextPage={nextPage}
previousPage={previousPage}
width="72px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/>
) : (
''
)}
</FlexColumn>
</>
);
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
};
export default Challenges;
export default Challenges;