From dcbbf1ccb60563b55bf033711fb381ad2112d20c Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 14 Apr 2023 11:30:12 +0200 Subject: [PATCH] Challenges refactor, and create CHALLENGES_STATUS_FILTER enum --- .../FiltersMenu/filterOptions.js | 175 +++++++++--------- src/pages/Challanges/Challenges.js | 108 +++-------- src/pages/Challanges/ChallengesStyle.js | 50 +++++ src/pages/Challanges/_renderChallenges.js | 40 ---- src/pages/Challanges/renderChallenges.js | 65 +++++++ src/utils/globals.js | 7 + 6 files changed, 240 insertions(+), 205 deletions(-) create mode 100644 src/pages/Challanges/ChallengesStyle.js delete mode 100644 src/pages/Challanges/_renderChallenges.js create mode 100644 src/pages/Challanges/renderChallenges.js diff --git a/src/components/challenges_list/FiltersMenu/filterOptions.js b/src/components/challenges_list/FiltersMenu/filterOptions.js index 08ac81e..2772cf5 100644 --- a/src/components/challenges_list/FiltersMenu/filterOptions.js +++ b/src/components/challenges_list/FiltersMenu/filterOptions.js @@ -1,89 +1,92 @@ const filterOptions = [ - [ - { - name: 'Closing', - sort: true, - rotate: '' - }, - { - name: 'Closing', - sort: true, - rotate: '180deg' - }, - { - name: 'Hotness', - sort: true, - rotate: '' - }, - { - name: 'Hotness', - sort: true, - rotate: '180deg' - }, - { - name: 'Reward', - sort: true, - rotate: '' - }, - { - name: 'Reward', - sort: true, - rotate: '180deg' - } - ], [ - { - name: 'Both', - sort: false, - rotate: '' - }, - { - name: 'Completed', - sort: false, - rotate: '' - }, - { - name: 'Active', - sort: false, - rotate: '' - }, - ], [ - { - name: 'All', - sort: false, - rotate: '' - }, - { - name: 'Tabular', - sort: false, - rotate: '' - }, - { - name: 'Text', - sort: false, - rotate: '' - }, - { - name: 'Image', - sort: false, - rotate: '' - }, - ], [ - { - name: 'Both', - sort: false, - rotate: '' - }, - { - name: 'Yes', - sort: false, - rotate: '' - }, - { - name: 'No', - sort: false, - rotate: '' - }, - ] + [ + { + name: 'Closing', + sort: true, + rotate: '0', + }, + { + name: 'Closing', + sort: true, + rotate: '180deg', + }, + { + name: 'Hotness', + sort: true, + rotate: '0', + }, + { + name: 'Hotness', + sort: true, + rotate: '180deg', + }, + { + name: 'Reward', + sort: true, + rotate: '0', + }, + { + name: 'Reward', + sort: true, + rotate: '180deg', + }, + ], + [ + { + name: 'Both', + sort: false, + rotate: '0', + }, + { + name: 'Closed', + sort: false, + rotate: '0', + }, + { + name: 'Active', + sort: false, + rotate: '0', + }, + ], + [ + { + name: 'All', + sort: false, + rotate: '0', + }, + { + name: 'Tabular', + sort: false, + rotate: '0', + }, + { + name: 'Text', + sort: false, + rotate: '0', + }, + { + name: 'Image', + sort: false, + rotate: '0', + }, + ], + [ + { + name: 'Both', + sort: false, + rotate: '0', + }, + { + name: 'Yes', + sort: false, + rotate: '0', + }, + { + name: 'No', + sort: false, + rotate: '0', + }, + ], ]; -export default filterOptions; \ No newline at end of file +export default filterOptions; diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index b9d63ad..91ba4cc 100644 --- a/src/pages/Challanges/Challenges.js +++ b/src/pages/Challanges/Challenges.js @@ -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} /> - - -

- Challenges -

+ + +

Challenges

{ /> - {renderChallenges()} + {renderChallenges(pageNr, challenges)} - {!loading ? ( + {!loading && ( - ) : ( - '' )} - + ); }; @@ -143,65 +113,45 @@ const Challenges = () => { - - - - + + + +

Challenges

- + Increase your machine learning skills by competing in our exciting challenges. - + - {renderChallenges()} + {renderChallenges(pageNr, challenges)} - {!loading ? ( + {!loading && ( - ) : ( - '' )} - + ); }; diff --git a/src/pages/Challanges/ChallengesStyle.js b/src/pages/Challanges/ChallengesStyle.js new file mode 100644 index 0000000..d7b62e4 --- /dev/null +++ b/src/pages/Challanges/ChallengesStyle.js @@ -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; diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js deleted file mode 100644 index 5984e6b..0000000 --- a/src/pages/Challanges/_renderChallenges.js +++ /dev/null @@ -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 ( - - {challenges.slice(n, n + ELEMENTS_PER_PAGE).map( - ({title, type, description, mainMetric, bestScore, baseline, prize, deadline, name}, index) => { - return ( - - ); - })} - - ); - } - return ''; -}; - -export default _renderChallenges; \ No newline at end of file diff --git a/src/pages/Challanges/renderChallenges.js b/src/pages/Challanges/renderChallenges.js new file mode 100644 index 0000000..be6e572 --- /dev/null +++ b/src/pages/Challanges/renderChallenges.js @@ -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 ( + + {challenges + .slice(n, n + ELEMENTS_PER_PAGE) + .map( + ( + { + title, + type, + description, + mainMetric, + bestScore, + baseline, + prize, + deadline, + name, + }, + index + ) => { + return ( + + ); + } + )} + + ); + } + return ''; +}; + +export default renderChallenges; diff --git a/src/utils/globals.js b/src/utils/globals.js index 019b8f4..83f14a9 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -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,