Challenges refactor, and create CHALLENGES_STATUS_FILTER enum

src/components/challenges_list/FiltersMenu/filterOptions.js

@@ -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;

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}
+          sortByHandler={setSortBy}
-          statusHandler={statusHandler}
+          statusHandler={setStatus}
-          challengeTypeHandler={challengeTypeHandler}
+          challengeTypeHandler={setChallengeType}
-          commercialHandler={commercialHandler}
+          commercialHandler={setCommercial}
           sortBy={sortBy}
           status={status}
           challengeType={challengeType}
           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
               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}
+          sortByHandler={setSortBy}
-          statusHandler={statusHandler}
+          statusHandler={setStatus}
-          challengeTypeHandler={challengeTypeHandler}
+          challengeTypeHandler={setChallengeType}
-          commercialHandler={commercialHandler}
+          commercialHandler={setCommercial}
           sortBy={sortBy}
           status={status}
           challengeType={challengeType}
           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>
-                <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
+              <Svg src={cupIco} className="ChallengesStyle__main-image" />
-                src={cupIco}
-                size="contain"
-                width="25%"
-                height="160px"
-                backgroundColor={theme.colors.green}
-              />
             </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>
       </>
     );
   };

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;

src/pages/Challanges/_renderChallenges.js

@@ -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;

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 (
+      <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;

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,