Challenges refactor, renderMobile and renderDesktop replaced by separated components
This commit is contained in:
parent
ba0cdb944e
commit
fb2b9dbe03
@ -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 (
|
|
||||||
<>
|
|
||||||
{filtersMenuRender(
|
|
||||||
filtersMenu ? '0' : '100vw',
|
|
||||||
filtersMenu ? '1' : '0',
|
|
||||||
'flex'
|
|
||||||
)}
|
|
||||||
<ChallengesStyle as="main" id="start">
|
|
||||||
<FlexColumn className="ChallengesStyle__page-container">
|
|
||||||
<H1 as="h1">Challenges</H1>
|
|
||||||
<Search
|
|
||||||
searchQueryHandler={searchQueryHandler}
|
|
||||||
filterButton
|
|
||||||
toggleFiltersMenu={toggleFiltersMenu}
|
|
||||||
/>
|
|
||||||
<FlexColumn width="100%">
|
|
||||||
<Loading visible={loading} />
|
|
||||||
{renderChallenges(pageNr, challengesFiltered)}
|
|
||||||
</FlexColumn>
|
|
||||||
</FlexColumn>
|
|
||||||
{!loading && (
|
|
||||||
<Pager
|
|
||||||
elements={challengesFiltered}
|
|
||||||
pageNr={pageNr}
|
|
||||||
setPageNr={setPageNr}
|
|
||||||
pages={CALC_PAGES(challengesFiltered)}
|
|
||||||
width="48px"
|
|
||||||
borderRadius="64px"
|
|
||||||
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</ChallengesStyle>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const desktopRender = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{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}
|
|
||||||
setPageNr={setPageNr}
|
|
||||||
elements={challengesFiltered}
|
|
||||||
pages={CALC_PAGES(challengesFiltered)}
|
|
||||||
width="72px"
|
|
||||||
borderRadius="64px"
|
|
||||||
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</ChallengesStyle>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Media query={theme.mobile}>{mobileRender()}</Media>
|
<Media query={theme.mobile}>
|
||||||
<Media query={theme.desktop}>{desktopRender()}</Media>
|
<ChallengesMobile
|
||||||
|
filtersMenuRender={filtersMenuRender}
|
||||||
|
filtersMenu={filtersMenu}
|
||||||
|
searchQueryHandler={searchQueryHandler}
|
||||||
|
toggleFiltersMenu={toggleFiltersMenu}
|
||||||
|
loading={loading}
|
||||||
|
pageNr={pageNr}
|
||||||
|
setPageNr={setPageNr}
|
||||||
|
challengesFiltered={challengesFiltered}
|
||||||
|
/>
|
||||||
|
</Media>
|
||||||
|
<Media query={theme.desktop}>
|
||||||
|
<ChallengesDesktop
|
||||||
|
filtersMenuRender={filtersMenuRender}
|
||||||
|
filtersMenu={filtersMenu}
|
||||||
|
searchQueryHandler={searchQueryHandler}
|
||||||
|
toggleFiltersMenu={toggleFiltersMenu}
|
||||||
|
loading={loading}
|
||||||
|
pageNr={pageNr}
|
||||||
|
setPageNr={setPageNr}
|
||||||
|
challengesFiltered={challengesFiltered}
|
||||||
|
/>
|
||||||
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
51
src/pages/Challanges/ChallengesDesktop.js
Normal file
51
src/pages/Challanges/ChallengesDesktop.js
Normal 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
48
src/pages/Challanges/ChallengesMobile.js
Normal 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;
|
||||||
Loading…
Reference in New Issue
Block a user