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

Challenges refactor, renderMobile and renderDesktop replaced by separated components

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-18 11:49:25 +02:00
parent ba0cdb944e
commit fb2b9dbe03
3 changed files with 127 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,13 @@
import React from 'react'; import React from 'react';
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 challengeSearchQueryHandler from './challengeSearchQueryHandler';
import renderChallenges from './renderChallenges';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import cupIco from '../../assets/cup_ico.svg';
import getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import { CALC_PAGES, CHALLENGES_STATUS_FILTER } from '../../utils/globals'; import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import Loading from '../../components/generic/Loading';
import ChallengesStyle from './ChallengesStyle';
import FiltersMenu from '../../components/challenges_list/FiltersMenu'; import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import statusFilter from './statusFilter'; import statusFilter from './statusFilter';
import ChallengesMobile from './ChallengesMobile';
import ChallengesDesktop from './ChallengesDesktop';
import challengeSearchQueryHandler from './challengeSearchQueryHandler';
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
@ -79,85 +73,32 @@ const Challenges = () => {
); );
}; };
const mobileRender = () => {
return ( return (
<> <>
{filtersMenuRender( <Media query={theme.mobile}>
filtersMenu ? '0' : '100vw', <ChallengesMobile
filtersMenu ? '1' : '0', filtersMenuRender={filtersMenuRender}
'flex' filtersMenu={filtersMenu}
)}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<H1 as="h1">Challenges</H1>
<Search
searchQueryHandler={searchQueryHandler} searchQueryHandler={searchQueryHandler}
filterButton
toggleFiltersMenu={toggleFiltersMenu} toggleFiltersMenu={toggleFiltersMenu}
/> loading={loading}
<FlexColumn width="100%">
<Loading visible={loading} />
{renderChallenges(pageNr, challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!loading && (
<Pager
elements={challengesFiltered}
pageNr={pageNr} pageNr={pageNr}
setPageNr={setPageNr} setPageNr={setPageNr}
pages={CALC_PAGES(challengesFiltered)} challengesFiltered={challengesFiltered}
width="48px"
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
/> />
)} </Media>
</ChallengesStyle> <Media query={theme.desktop}>
</> <ChallengesDesktop
); filtersMenuRender={filtersMenuRender}
}; filtersMenu={filtersMenu}
searchQueryHandler={searchQueryHandler}
const desktopRender = () => { toggleFiltersMenu={toggleFiltersMenu}
return ( loading={loading}
<>
{filtersMenuRender()}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<FlexRow className="ChallengesStyle__page-header-container">
<FlexColumn className="ChallengesStyle__page-header">
<H1 as="h1">Challenges</H1>
<Body className="ChallengesStyle__header-content">
Increase your machine learning skills by competing in our
exciting challenges.
</Body>
<Search searchQueryHandler={searchQueryHandler} />
</FlexColumn>
<Svg src={cupIco} className="ChallengesStyle__main-image" />
</FlexRow>
<FlexColumn width="100%">
<Loading visible={loading} />
{renderChallenges(pageNr, challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!loading && (
<Pager
pageNr={pageNr} pageNr={pageNr}
setPageNr={setPageNr} setPageNr={setPageNr}
elements={challengesFiltered} challengesFiltered={challengesFiltered}
pages={CALC_PAGES(challengesFiltered)}
width="72px"
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
/> />
)} </Media>
</ChallengesStyle>
</>
);
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</> </>
); );
}; };

51
src/pages/Challanges/ChallengesDesktop.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import ChallengesStyle from './ChallengesStyle';
import { FlexColumn, FlexRow } from '../../utils/containers';
import Pager from '../../components/generic/Pager';
import { H1, Body } from '../../utils/fonts';
import Search from '../../components/generic/Search';
import { CALC_PAGES } from '../../utils/globals';
import renderChallenges from './renderChallenges';
import Loading from '../../components/generic/Loading';
import cupIco from '../../assets/cup_ico.svg';
import { Svg } from '../../utils/containers';
const ChallengesDesktop = (props) => {
return (
<>
{props.filtersMenuRender()}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<FlexRow className="ChallengesStyle__page-header-container">
<FlexColumn className="ChallengesStyle__page-header">
<H1 as="h1">Challenges</H1>
<Body className="ChallengesStyle__header-content">
Increase your machine learning skills by competing in our
exciting challenges.
</Body>
<Search searchQueryHandler={props.searchQueryHandler} />
</FlexColumn>
<Svg src={cupIco} className="ChallengesStyle__main-image" />
</FlexRow>
<FlexColumn width="100%">
<Loading visible={props.loading} />
{renderChallenges(props.pageNr, props.challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!props.loading && (
<Pager
pageNr={props.pageNr}
setPageNr={props.setPageNr}
elements={props.challengesFiltered}
pages={CALC_PAGES(props.challengesFiltered)}
width="72px"
borderRadius="64px"
number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
/>
)}
</ChallengesStyle>
</>
);
};
export default ChallengesDesktop;

48
src/pages/Challanges/ChallengesMobile.js Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import ChallengesStyle from './ChallengesStyle';
import { FlexColumn } from '../../utils/containers';
import Pager from '../../components/generic/Pager';
import { H1 } from '../../utils/fonts';
import Search from '../../components/generic/Search';
import { CALC_PAGES } from '../../utils/globals';
import renderChallenges from './renderChallenges';
import Loading from '../../components/generic/Loading';
const ChallengesMobile = (props) => {
return (
<>
{props.filtersMenuRender(
props.filtersMenu ? '0' : '100vw',
props.filtersMenu ? '1' : '0',
'flex'
)}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<H1 as="h1">Challenges</H1>
<Search
searchQueryHandler={props.searchQueryHandler}
filterButton
toggleFiltersMenu={props.toggleFiltersMenu}
/>
<FlexColumn width="100%">
<Loading visible={props.loading} />
{renderChallenges(props.pageNr, props.challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!props.loading && (
<Pager
elements={props.challengesFiltered}
pageNr={props.pageNr}
setPageNr={props.setPageNr}
pages={CALC_PAGES(props.challengesFiltered)}
width="48px"
borderRadius="64px"
number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
/>
)}
</ChallengesStyle>
</>
);
};
export default ChallengesMobile;