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

Challenges refactor, and create CHALLENGES_STATUS_FILTER enum

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-14 11:30:12 +02:00
parent 4d20a97f79
commit dcbbf1ccb6
6 changed files with 240 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
src/components/challenges_list/FiltersMenu/filterOptions.js
View File

@ -1,89 +1,92 @@
const filterOptions = [ const filterOptions = [
[ [
{ {
name: 'Closing', name: 'Closing',
sort: true, sort: true,
rotate: '' rotate: '0',
}, },
{ {
name: 'Closing', name: 'Closing',
sort: true, sort: true,
rotate: '180deg' rotate: '180deg',
}, },
{ {
name: 'Hotness', name: 'Hotness',
sort: true, sort: true,
rotate: '' rotate: '0',
}, },
{ {
name: 'Hotness', name: 'Hotness',
sort: true, sort: true,
rotate: '180deg' rotate: '180deg',
}, },
{ {
name: 'Reward', name: 'Reward',
sort: true, sort: true,
rotate: '' rotate: '0',
}, },
{ {
name: 'Reward', name: 'Reward',
sort: true, sort: true,
rotate: '180deg' rotate: '180deg',
} },
], [ ],
{ [
name: 'Both', {
sort: false, name: 'Both',
rotate: '' sort: false,
}, rotate: '0',
{ },
name: 'Completed', {
sort: false, name: 'Closed',
rotate: '' sort: false,
}, rotate: '0',
{ },
name: 'Active', {
sort: false, name: 'Active',
rotate: '' sort: false,
}, rotate: '0',
], [ },
{ ],
name: 'All', [
sort: false, {
rotate: '' name: 'All',
}, sort: false,
{ rotate: '0',
name: 'Tabular', },
sort: false, {
rotate: '' name: 'Tabular',
}, sort: false,
{ rotate: '0',
name: 'Text', },
sort: false, {
rotate: '' name: 'Text',
}, sort: false,
{ rotate: '0',
name: 'Image', },
sort: false, {
rotate: '' name: 'Image',
}, sort: false,
], [ rotate: '0',
{ },
name: 'Both', ],
sort: false, [
rotate: '' {
}, name: 'Both',
{ sort: false,
name: 'Yes', rotate: '0',
sort: false, },
rotate: '' {
}, name: 'Yes',
{ sort: false,
name: 'No', rotate: '0',
sort: false, },
rotate: '' {
}, name: 'No',
] sort: false,
rotate: '0',
},
],
]; ];
export default filterOptions; export default filterOptions;

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

@ -5,13 +5,14 @@ import Search from '../../components/generic/Search';
import Pager from '../../components/generic/Pager'; import Pager from '../../components/generic/Pager';
import FiltersMenu from '../../components/challenges_list/FiltersMenu'; import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import challengeSearchQueryHandler from './challengeSearchQueryHandler'; import challengeSearchQueryHandler from './challengeSearchQueryHandler';
import _renderChallenges from './_renderChallenges'; 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 cupIco from '../../assets/cup_ico.svg';
import getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import { CALC_PAGES } from '../../utils/globals'; import { CALC_PAGES, CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import Loading from '../../components/generic/Loading'; import Loading from '../../components/generic/Loading';
import ChallengesStyle from './ChallengesStyle';
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
@ -19,7 +20,7 @@ const Challenges = () => {
const [challenges, setChallenges] = React.useState([]); const [challenges, setChallenges] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false); const [filtersMenu, setFiltersMenu] = React.useState(false);
const [sortBy, setSortBy] = React.useState(0); const [sortBy, setSortBy] = React.useState(0);
const [status, setStatus] = React.useState(0); const [status, setStatus] = React.useState(CHALLENGES_STATUS_FILTER.BOTH);
const [challengeType, setChallengeType] = React.useState(0); const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0); const [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
@ -33,22 +34,6 @@ const Challenges = () => {
getChallenges(setChallenges, setLoading); getChallenges(setChallenges, setLoading);
}; };
const sortByHandler = (value) => {
setSortBy(value);
};
const statusHandler = (value) => {
setStatus(value);
};
const challengeTypeHandler = (value) => {
setChallengeType(value);
};
const commercialHandler = (value) => {
setCommercial(value);
};
const searchQueryHandler = (event) => { const searchQueryHandler = (event) => {
challengeSearchQueryHandler( challengeSearchQueryHandler(
event, event,
@ -72,10 +57,6 @@ const Challenges = () => {
} }
}; };
const renderChallenges = () => {
return _renderChallenges(pageNr, challenges);
};
const toggleFiltersMenu = () => { const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu; let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu); setFiltersMenu(newFiltersMenu);
@ -88,27 +69,18 @@ const Challenges = () => {
translateX={filtersMenu ? '0' : '100vw'} translateX={filtersMenu ? '0' : '100vw'}
opacity={filtersMenu ? '1' : '0'} opacity={filtersMenu ? '1' : '0'}
toggleFiltersMenu={toggleFiltersMenu} toggleFiltersMenu={toggleFiltersMenu}
sortByHandler={sortByHandler} sortByHandler={setSortBy}
statusHandler={statusHandler} statusHandler={setStatus}
challengeTypeHandler={challengeTypeHandler} challengeTypeHandler={setChallengeType}
commercialHandler={commercialHandler} commercialHandler={setCommercial}
sortBy={sortBy} sortBy={sortBy}
status={status} status={status}
challengeType={challengeType} challengeType={challengeType}
commercial={commercial} commercial={commercial}
/> />
<FlexColumn <ChallengesStyle as="main" id="start">
as="main" <FlexColumn className="ChallengesStyle__page-container">
alignmentY="flex-start" <H1 as="h1">Challenges</H1>
width="100%"
id="start"
minHeight="100vh"
padding="90px 0 32px 0"
>
<FlexColumn alignmentX="flex-start" width="80%">
<H1 as="h1" margin="0 0 20px 0">
Challenges
</H1>
<Search <Search
searchQueryHandler={searchQueryHandler} searchQueryHandler={searchQueryHandler}
filterButton filterButton
@ -116,23 +88,21 @@ const Challenges = () => {
/> />
<FlexColumn width="100%"> <FlexColumn width="100%">
<Loading visible={loading} /> <Loading visible={loading} />
{renderChallenges()} {renderChallenges(pageNr, challenges)}
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
{!loading ? ( {!loading && (
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
pages={CALC_PAGES(challenges)} pages={CALC_PAGES(challenges)}
width="48px" width="48px"
borderRadius="64px"
nextPage={nextPage} nextPage={nextPage}
previousPage={previousPage} previousPage={previousPage}
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`} number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/> />
) : (
''
)} )}
</FlexColumn> </ChallengesStyle>
</> </>
); );
}; };
@ -143,65 +113,45 @@ const Challenges = () => {
<FiltersMenu <FiltersMenu
toggleFiltersMenu={toggleFiltersMenu} toggleFiltersMenu={toggleFiltersMenu}
transBackDisplay="none" transBackDisplay="none"
sortByHandler={sortByHandler} sortByHandler={setSortBy}
statusHandler={statusHandler} statusHandler={setStatus}
challengeTypeHandler={challengeTypeHandler} challengeTypeHandler={setChallengeType}
commercialHandler={commercialHandler} commercialHandler={setCommercial}
sortBy={sortBy} sortBy={sortBy}
status={status} status={status}
challengeType={challengeType} challengeType={challengeType}
commercial={commercial} commercial={commercial}
/> />
<FlexColumn <ChallengesStyle as="main" id="start">
as="main" <FlexColumn className="ChallengesStyle__page-container">
alignmentY="flex-start" <FlexRow className="ChallengesStyle__page-header-container">
width="100%" <FlexColumn className="ChallengesStyle__page-header">
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> <H1 as="h1">Challenges</H1>
<Body margin="0 0 12px 0" maxWidth="400px"> <Body className="ChallengesStyle__header-content">
Increase your machine learning skills by competing in our Increase your machine learning skills by competing in our
exciting challenges. exciting challenges.
</Body> </Body>
<Search searchQueryHandler={searchQueryHandler} /> <Search searchQueryHandler={searchQueryHandler} />
</FlexColumn> </FlexColumn>
<Svg <Svg src={cupIco} className="ChallengesStyle__main-image" />
src={cupIco}
size="contain"
width="25%"
height="160px"
backgroundColor={theme.colors.green}
/>
</FlexRow> </FlexRow>
<FlexColumn width="100%"> <FlexColumn width="100%">
<Loading visible={loading} /> <Loading visible={loading} />
{renderChallenges()} {renderChallenges(pageNr, challenges)}
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
{!loading ? ( {!loading && (
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
pages={CALC_PAGES(challenges)} pages={CALC_PAGES(challenges)}
width="72px"
borderRadius="64px" borderRadius="64px"
nextPage={nextPage} nextPage={nextPage}
previousPage={previousPage} previousPage={previousPage}
width="72px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`} number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/> />
) : (
''
)} )}
</FlexColumn> </ChallengesStyle>
</> </>
); );
}; };

50
src/pages/Challanges/ChallengesStyle.js Normal file
View File

@ -0,0 +1,50 @@
import styled from 'styled-components';
import { FlexColumn } from '../../utils/containers';
const ChallengesStyle = styled(FlexColumn)`
justify-content: flex-start;
width: 100%;
min-height: 100vh;
padding: 90px 0 32px 0;
@media (min-width: ${({ theme }) => theme.overMobile}) {
padding: 112px 0 82px 310px;
}
.ChallengesStyle__page-container {
align-items: flex-start;
width: 80%;
h1 {
margin: 0 0 20px 0;
@media (min-width: ${({ theme }) => theme.overMobile}) {
margin: 0;
}
}
}
.ChallengesStyle__page-header-container {
width: 100%;
gap: 32px;
}
.ChallengesStyle__page-header {
align-items: flex-start;
gap: 32px;
width: 75%;
max-width: 720px;
}
.ChallengesStyle__header-content {
margin: 0 0 12px 0;
max-width: 600px;
}
.ChallengesStyle__main-image {
width: 25%;
height: 160px;
background-color: ${({ theme }) => theme.colors.green};
mask-size: contain;
}
`;
export default ChallengesStyle;

40
src/pages/Challanges/_renderChallenges.js
View File

@ -1,40 +0,0 @@
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
import MiniChallenge from '../../components/challenges_list/MiniChallenge';
import {Grid} from '../../utils/containers';
import styled from 'styled-components';
const ChallengesGrid = styled(Grid)`
margin: 32px 0;
grid-gap: 32px 0;
@media (min-width: 1200px) {
margin: 96px 0;
grid-gap: 64px;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 1600px) {
grid-template-columns: 1fr 1fr 1fr;
}
`;
const _renderChallenges = (pageNr, challenges) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (challenges && challenges !== []) {
return (
<ChallengesGrid margin='32px 0' gridGap='32px 0'>
{challenges.slice(n, n + ELEMENTS_PER_PAGE).map(
({title, type, description, mainMetric, bestScore, baseline, prize, deadline, name}, index) => {
return (
<MiniChallenge key={`challenge-${index}`} title={title} type={type}
description={description} metric={mainMetric} bestScore={bestScore}
baseline={baseline} prize={prize} deadline={deadline} name={name}/>
);
})}
</ChallengesGrid>
);
}
return '';
};
export default _renderChallenges;

65
src/pages/Challanges/renderChallenges.js Normal file
View File

@ -0,0 +1,65 @@
import { ELEMENTS_PER_PAGE } from '../../utils/globals';
import MiniChallenge from '../../components/challenges_list/MiniChallenge';
import { Grid } from '../../utils/containers';
import styled from 'styled-components';
const ChallengesGrid = styled(Grid)`
margin: 32px 0;
grid-gap: 32px 0;
@media (min-width: 1200px) {
margin: 96px 0;
grid-gap: 64px;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 1600px) {
grid-template-columns: 1fr 1fr 1fr;
}
`;
const renderChallenges = (pageNr, challenges) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (challenges && challenges !== []) {
return (
<ChallengesGrid margin="32px 0" gridGap="32px 0">
{challenges
.slice(n, n + ELEMENTS_PER_PAGE)
.map(
(
{
title,
type,
description,
mainMetric,
bestScore,
baseline,
prize,
deadline,
name,
},
index
) => {
return (
<MiniChallenge
key={`challenge-${index}`}
title={title}
type={type}
description={description}
metric={mainMetric}
bestScore={bestScore}
baseline={baseline}
prize={prize}
deadline={deadline}
name={name}
/>
);
}
)}
</ChallengesGrid>
);
}
return '';
};
export default renderChallenges;

7
src/utils/globals.js
View File

@ -42,6 +42,12 @@ const CHALLENGE_SECTIONS = {
SUBMIT: 5, SUBMIT: 5,
}; };
const CHALLENGES_STATUS_FILTER = {
BOTH: 0,
CLOSED: 1,
ACTIVE: 2,
};
const MINI_DESCRIPTION_RENDER = (description) => { const MINI_DESCRIPTION_RENDER = (description) => {
if (description) { if (description) {
if (description.length <= MINI_DESCRIPTION_LENGTH) return description; if (description.length <= MINI_DESCRIPTION_LENGTH) return description;
@ -113,6 +119,7 @@ export {
CHALLENGE_SECTIONS, CHALLENGE_SECTIONS,
MENU_CHALLENGE_SECTIONS_NO_LOGIN, MENU_CHALLENGE_SECTIONS_NO_LOGIN,
MENU_CHALLENGE_SECTIONS_WITH_LOGIN, MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
CHALLENGES_STATUS_FILTER,
MINI_DESCRIPTION_RENDER, MINI_DESCRIPTION_RENDER,
RENDER_ICO, RENDER_ICO,
CALC_PAGES, CALC_PAGES,