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

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

@ -3,87 +3,90 @@ const filterOptions = [
{
name: 'Closing',
sort: true,
rotate: ''
rotate: '0',
},
{
name: 'Closing',
sort: true,
rotate: '180deg'
rotate: '180deg',
},
{
name: 'Hotness',
sort: true,
rotate: ''
rotate: '0',
},
{
name: 'Hotness',
sort: true,
rotate: '180deg'
rotate: '180deg',
},
{
name: 'Reward',
sort: true,
rotate: ''
rotate: '0',
},
{
name: 'Reward',
sort: true,
rotate: '180deg'
}
], [
rotate: '180deg',
},
],
[
{
name: 'Both',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'Completed',
name: 'Closed',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'Active',
sort: false,
rotate: ''
rotate: '0',
},
], [
],
[
{
name: 'All',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'Tabular',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'Text',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'Image',
sort: false,
rotate: ''
rotate: '0',
},
], [
],
[
{
name: 'Both',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'Yes',
sort: false,
rotate: ''
rotate: '0',
},
{
name: 'No',
sort: false,
rotate: ''
rotate: '0',
},
]
],
];
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 FiltersMenu from '../../components/challenges_list/FiltersMenu';
import challengeSearchQueryHandler from './challengeSearchQueryHandler';
import _renderChallenges from './_renderChallenges';
import renderChallenges from './renderChallenges';
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, CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import Loading from '../../components/generic/Loading';
import ChallengesStyle from './ChallengesStyle';
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
@ -19,7 +20,7 @@ const Challenges = () => {
const [challenges, setChallenges] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false);
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 [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true);
@ -33,22 +34,6 @@ const Challenges = () => {
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) => {
challengeSearchQueryHandler(
event,
@ -72,10 +57,6 @@ const Challenges = () => {
}
};
const renderChallenges = () => {
return _renderChallenges(pageNr, challenges);
};
const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu);
@ -88,27 +69,18 @@ const Challenges = () => {
translateX={filtersMenu ? '0' : '100vw'}
opacity={filtersMenu ? '1' : '0'}
toggleFiltersMenu={toggleFiltersMenu}
sortByHandler={sortByHandler}
statusHandler={statusHandler}
challengeTypeHandler={challengeTypeHandler}
commercialHandler={commercialHandler}
sortByHandler={setSortBy}
statusHandler={setStatus}
challengeTypeHandler={setChallengeType}
commercialHandler={setCommercial}
sortBy={sortBy}
status={status}
challengeType={challengeType}
commercial={commercial}
/>
<FlexColumn
as="main"
alignmentY="flex-start"
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>
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<H1 as="h1">Challenges</H1>
<Search
searchQueryHandler={searchQueryHandler}
filterButton
@ -116,23 +88,21 @@ const Challenges = () => {
/>
<FlexColumn width="100%">
<Loading visible={loading} />
{renderChallenges()}
{renderChallenges(pageNr, challenges)}
</FlexColumn>
</FlexColumn>
{!loading ? (
{!loading && (
<Pager
pageNr={pageNr}
pages={CALC_PAGES(challenges)}
width="48px"
borderRadius="64px"
nextPage={nextPage}
previousPage={previousPage}
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/>
) : (
''
)}
</FlexColumn>
</ChallengesStyle>
</>
);
};
@ -143,65 +113,45 @@ const Challenges = () => {
<FiltersMenu
toggleFiltersMenu={toggleFiltersMenu}
transBackDisplay="none"
sortByHandler={sortByHandler}
statusHandler={statusHandler}
challengeTypeHandler={challengeTypeHandler}
commercialHandler={commercialHandler}
sortByHandler={setSortBy}
statusHandler={setStatus}
challengeTypeHandler={setChallengeType}
commercialHandler={setCommercial}
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"
>
<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 margin="0 0 12px 0" maxWidth="400px">
<Body className="ChallengesStyle__header-content">
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}
/>
<Svg src={cupIco} className="ChallengesStyle__main-image" />
</FlexRow>
<FlexColumn width="100%">
<Loading visible={loading} />
{renderChallenges()}
{renderChallenges(pageNr, challenges)}
</FlexColumn>
</FlexColumn>
{!loading ? (
{!loading && (
<Pager
pageNr={pageNr}
pages={CALC_PAGES(challenges)}
width="72px"
borderRadius="64px"
nextPage={nextPage}
previousPage={previousPage}
width="72px"
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,
};
const CHALLENGES_STATUS_FILTER = {
BOTH: 0,
CLOSED: 1,
ACTIVE: 2,
};
const MINI_DESCRIPTION_RENDER = (description) => {
if (description) {
if (description.length <= MINI_DESCRIPTION_LENGTH) return description;
@ -113,6 +119,7 @@ export {
CHALLENGE_SECTIONS,
MENU_CHALLENGE_SECTIONS_NO_LOGIN,
MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
CHALLENGES_STATUS_FILTER,
MINI_DESCRIPTION_RENDER,
RENDER_ICO,
CALC_PAGES,