Challenges refactor, and create CHALLENGES_STATUS_FILTER enum

2023-04-14 11:30:12 +02:00 · 2023-04-14 11:30:12 +02:00 · dcbbf1ccb6
commit dcbbf1ccb6
parent 4d20a97f79
6 changed files with 240 additions and 205 deletions
--- 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;
+export default filterOptions;
--- 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}
        />
-        <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>
      </>
    );
  };
--- a/src/pages/Challanges/ChallengesStyle.js
+++ 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;
--- a/src/pages/Challanges/_renderChallenges.js
+++ b/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;
--- a/src/pages/Challanges/renderChallenges.js
+++ 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 (
+      <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;
--- 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,