status filter

pagination refactor

src/api/getChallenges.js

@@ -1,13 +1,12 @@
-import {API} from '../utils/globals';
+import { API } from '../utils/globals';
 
-const getChallenges = (setDataState, setLoadingState) => {
+const getChallenges = (setDataStates, setLoadingState) => {
-    fetch(`${API}/list-challenges`)
+  fetch(`${API}/list-challenges`)
-        .then(response => response.json())
+    .then((response) => response.json())
-        .then(data => {
+    .then((data) => {
-            setDataState(data);
+      for (let setState of setDataStates) setState(data);
-            if (setLoadingState)
+      if (setLoadingState) setLoadingState(false);
-                setLoadingState(false);
+    });
-        });
 };
 
-export default getChallenges;
+export default getChallenges;

src/components/challenges_list/FiltersMenu/filterOptions.js

@@ -1,89 +1,92 @@
 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;

src/components/generic/Pager.js

@@ -5,6 +5,8 @@ import polygon from '../../assets/polygon.svg';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
 import PropsTypes from 'prop-types';
+import { NEXT_PAGE, PREVIOUS_PAGE } from '../../utils/globals';
+
 
 const PagerStyle = styled(FlexRow)`
   gap: 14px;
@@ -54,30 +56,18 @@ const Pager = (props) => {
         return theme.colors.dark;
     };
 
-    const leftArrowClickable = () => {
-        if (props.pageNr === 1)
-            return null;
-        return props.previousPage;
-    };
-
     const rightArrowVisible = () => {
         if (props.pageNr === props.pages)
             return 'transparent';
         return theme.colors.dark;
     };
 
-    const rightArrowClickable = () => {
-        if (props.pageNr === props.pages)
-            return null;
-        return props.nextPage;
-    };
-
     return (
         <PagerStyle>
-            <LeftArrow as='a' href='#start' src={polygon} onClick={leftArrowClickable()} size='cover'
+            <LeftArrow as='a' href='#start' src={polygon} onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size='cover'
                        backgroundColor={leftArrowVisible()}/>
             <CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/>
-            <RightArrow as='a' href='#start' src={polygon} onClick={rightArrowClickable()} size='cover'
+            <RightArrow as='a' href='#start' src={polygon} onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size='cover'
                         backgroundColor={rightArrowVisible()}/>
         </PagerStyle>
     );

src/components/specific_challenge/AllEntries/AllEntries.js

@@ -6,8 +6,8 @@ import { H2 } from '../../../utils/fonts';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
-  IS_MOBILE,
   RENDER_WHEN,
+  IS_MOBILE,
 } from '../../../utils/globals';
 import Loading from '../../generic/Loading';
 import Pager from '../../generic/Pager';
@@ -68,20 +68,6 @@ const AllEntries = (props) => {
     allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries);
   };
 
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(entries ? entries : [])) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
   const sortByUpdate = (elem, i) => {
     let newEntries = entries;
     switch (elem) {
@@ -182,11 +168,11 @@ const AllEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(entries)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(entries)}`}
             />
           </>
@@ -228,15 +214,16 @@ const AllEntries = (props) => {
               }}
               pageNr={pageNr}
               elements={entries}
+              setPageNr={setPageNr}
               sortByUpdate={sortByUpdate}
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="72px"
               borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -11,6 +11,7 @@ import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
+
 } from '../../../utils/globals';
 import Search from '../../generic/Search';
 import Pager from '../../generic/Pager';
@@ -49,20 +50,6 @@ const Leaderboard = (props) => {
     leaderboardSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries);
   };
 
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(entries ? entries : [])) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
   const getPossibleMetrics = () => {
     let metrics = [];
     for (let entry of entriesFromApi) {
@@ -208,11 +195,11 @@ const Leaderboard = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(entries)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(entries)}`}
             />
           </>
@@ -258,15 +245,17 @@ const Leaderboard = (props) => {
               }}
               pageNr={pageNr}
               elements={entries}
+              setPageNr={setPageNr}
               sortByUpdate={sortByUpdate}
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="72px"
               borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-              nextPage={nextPage}
+              
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -45,20 +45,6 @@ const MyEntries = (props) => {
     return metrics;
   };
 
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(myEntries ? myEntries : [])) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
   const getMyEntriesHeader = () => {
     let header = ['#'];
     if (IS_MOBILE()) header.push('when');
@@ -158,11 +144,11 @@ const MyEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={myEntries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(myEntries)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
             />
           </>
@@ -207,12 +193,12 @@ const MyEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={myEntries}
+              setPageNr={setPageNr}
               width="72px"
               mobileRender
               borderRadius="64px"
               pages={CALC_PAGES(myEntries, 2)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`}
             />
           </>

src/pages/Challanges/Challenges.js

@@ -3,23 +3,26 @@ import { Body, H1 } from '../../utils/fonts';
 import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
 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';
+import FiltersMenu from '../../components/challenges_list/FiltersMenu';
+import statusFilter from './statusFilter';
 
 const Challenges = () => {
   const [pageNr, setPageNr] = React.useState(1);
   const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
   const [challenges, setChallenges] = React.useState([]);
+  const [challengesFiltered, setChallengesFiltered] = 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);
@@ -28,25 +31,15 @@ const Challenges = () => {
     challengesRequest();
   }, []);
 
+  React.useEffect(() => {
+    statusFilter(status, challenges, setChallengesFiltered);
+  }, [status, challenges]);
+
   const challengesRequest = () => {
-    getChallenges(setChallengesFromAPI);
+    getChallenges(
-    getChallenges(setChallenges, setLoading);
+      [setChallengesFromAPI, setChallenges, setChallengesFiltered],
-  };
+      setLoading
-
+    );
-  const sortByHandler = (value) => {
-    setSortBy(value);
-  };
-
-  const statusHandler = (value) => {
-    setStatus(value);
-  };
-
-  const challengeTypeHandler = (value) => {
-    setChallengeType(value);
-  };
-
-  const commercialHandler = (value) => {
-    setCommercial(value);
   };
 
   const searchQueryHandler = (event) => {
@@ -58,57 +51,45 @@ const Challenges = () => {
     );
   };
 
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(challenges)) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const renderChallenges = () => {
-    return _renderChallenges(pageNr, challenges);
-  };
-
   const toggleFiltersMenu = () => {
     let newFiltersMenu = !filtersMenu;
     setFiltersMenu(newFiltersMenu);
   };
 
+  const filtersMenuRender = (
+    translateX = '0',
+    opacity = '1',
+    transBackDisplay = 'none'
+  ) => {
+    return (
+      <FiltersMenu
+        toggleFiltersMenu={toggleFiltersMenu}
+        sortByHandler={setSortBy}
+        statusHandler={setStatus}
+        challengeTypeHandler={setChallengeType}
+        commercialHandler={setCommercial}
+        sortBy={sortBy}
+        status={status}
+        challengeType={challengeType}
+        commercial={commercial}
+        translateX={translateX}
+        opacity={opacity}
+        transBackDisplay={transBackDisplay}
+      />
+    );
+  };
+
   const mobileRender = () => {
     return (
       <>
-        <FiltersMenu
+        {filtersMenuRender(
-          translateX={filtersMenu ? '0' : '100vw'}
+          filtersMenu ? '0' : '100vw',
-          opacity={filtersMenu ? '1' : '0'}
+          filtersMenu ? '1' : '0',
-          toggleFiltersMenu={toggleFiltersMenu}
+          'flex'
-          sortByHandler={sortByHandler}
+        )}
-          statusHandler={statusHandler}
+        <ChallengesStyle as="main" id="start">
-          challengeTypeHandler={challengeTypeHandler}
+          <FlexColumn className="ChallengesStyle__page-container">
-          commercialHandler={commercialHandler}
+            <H1 as="h1">Challenges</H1>
-          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>
             <Search
               searchQueryHandler={searchQueryHandler}
               filterButton
@@ -116,23 +97,21 @@ const Challenges = () => {
             />
             <FlexColumn width="100%">
               <Loading visible={loading} />
-              {renderChallenges()}
+              {renderChallenges(pageNr, challengesFiltered)}
             </FlexColumn>
           </FlexColumn>
-          {!loading ? (
+          {!loading && (
             <Pager
+              elements={challengesFiltered}
               pageNr={pageNr}
-              pages={CALC_PAGES(challenges)}
+              setPageNr={setPageNr}
+              pages={CALC_PAGES(challengesFiltered)}
               width="48px"
-              nextPage={nextPage}
-              previousPage={previousPage}
               borderRadius="64px"
-              number={`${pageNr} / ${CALC_PAGES(challenges)}`}
+              number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
             />
-          ) : (
-            ''
           )}
-        </FlexColumn>
+        </ChallengesStyle>
       </>
     );
   };
@@ -140,68 +119,37 @@ const Challenges = () => {
   const desktopRender = () => {
     return (
       <>
-        <FiltersMenu
+        {filtersMenuRender()}
-          toggleFiltersMenu={toggleFiltersMenu}
+        <ChallengesStyle as="main" id="start">
-          transBackDisplay="none"
+          <FlexColumn className="ChallengesStyle__page-container">
-          sortByHandler={sortByHandler}
+            <FlexRow className="ChallengesStyle__page-header-container">
-          statusHandler={statusHandler}
+              <FlexColumn className="ChallengesStyle__page-header">
-          challengeTypeHandler={challengeTypeHandler}
-          commercialHandler={commercialHandler}
-          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"
-              >
                 <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, challengesFiltered)}
             </FlexColumn>
           </FlexColumn>
-          {!loading ? (
+          {!loading && (
             <Pager
               pageNr={pageNr}
-              pages={CALC_PAGES(challenges)}
+              setPageNr={setPageNr}
-              borderRadius="64px"
+              elements={challengesFiltered}
-              nextPage={nextPage}
+              pages={CALC_PAGES(challengesFiltered)}
-              previousPage={previousPage}
               width="72px"
-              number={`${pageNr} / ${CALC_PAGES(challenges)}`}
+              borderRadius="64px"
+              number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
             />
-          ) : (
-            ''
           )}
-        </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, statusFilter) => {
+  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/statusFilter.js

@@ -0,0 +1,55 @@
+import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
+
+const dateIsOlder = (newerDate, olderDate) => {
+  console.log(newerDate);
+  console.log(olderDate);
+  if (newerDate.year > olderDate.year) return true;
+  else if (newerDate.month > olderDate.month) return true;
+  else if (newerDate.day > olderDate.day) return true;
+  else return false;
+};
+
+const getDeadlineTime = (deadline) => {
+  if (deadline) {
+    return {
+      year: deadline.slice(0, 10).split('-')[0],
+      month: deadline.slice(0, 10).split('-')[1],
+      day: deadline.slice(0, 10).split('-')[2],
+    };
+  }
+};
+
+const statusFilter = (status, challenges, setChallengesFiltered) => {
+  let result = challenges;
+  const date = new Date();
+  const currentDate = {
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    day: date.getDay(),
+  };
+  switch (status) {
+    case CHALLENGES_STATUS_FILTER.CLOSED:
+      result = challenges.filter((challenge) =>
+        dateIsOlder(
+          currentDate,
+          challenge.deadline ? getDeadlineTime(challenge.deadline) : false
+        )
+      );
+      break;
+    case CHALLENGES_STATUS_FILTER.ACTIVE:
+      result = challenges.filter(
+        (challenge) =>
+          !dateIsOlder(
+            currentDate,
+            challenge.deadline ? getDeadlineTime(challenge.deadline) : false
+          )
+      );
+      break;
+    default:
+      result = challenges;
+      break;
+  }
+  setChallengesFiltered(result);
+};
+
+export default statusFilter;

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;
@@ -86,6 +92,20 @@ const RENDER_DEADLINE_TIME = (time) => {
   }
   return '';
 };
+const NEXT_PAGE = (elements, pageNr, setPageNr) => {
+  if (pageNr !== CALC_PAGES(elements ? elements : [])) {
+    let newPage = pageNr + 1;
+    setPageNr(newPage);
+  }
+};
+
+
+const PREVIOUS_PAGE = (pageNr, setPageNr) => {
+  if (pageNr !== 1) {
+    let newPage = pageNr - 1;
+    setPageNr(newPage);
+  }
+};
 
 const RENDER_WHEN = (when) => {
   return `${when.slice(0, 10)} ${when.slice(11, 16)}`;
@@ -113,6 +133,7 @@ export {
   CHALLENGE_SECTIONS,
   MENU_CHALLENGE_SECTIONS_NO_LOGIN,
   MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
+  CHALLENGES_STATUS_FILTER,
   MINI_DESCRIPTION_RENDER,
   RENDER_ICO,
   CALC_PAGES,
@@ -120,4 +141,6 @@ export {
   IS_MOBILE,
   RENDER_WHEN,
   EVALUATIONS_FORMAT,
+  PREVIOUS_PAGE,
+  NEXT_PAGE
 };