status filter

src/api/getChallenges.js

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

src/pages/Challanges/Challenges.js

@@ -19,6 +19,7 @@ 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(CHALLENGES_STATUS_FILTER.BOTH);
@@ -31,13 +32,14 @@ const Challenges = () => {
   }, []);
 
   React.useEffect(() => {
-    statusFilter(status, challengesFromAPI, challenges, setChallenges);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status]);
+    statusFilter(status, challenges, setChallengesFiltered);
+  }, [status, challenges]);
 
   const challengesRequest = () => {
-    getChallenges(setChallengesFromAPI);
-    getChallenges(setChallenges, setLoading);
+    getChallenges(
+      [setChallengesFromAPI, setChallenges, setChallengesFiltered],
+      setLoading
+    );
   };
 
   const searchQueryHandler = (event) => {
@@ -95,18 +97,18 @@ const Challenges = () => {
             />
             <FlexColumn width="100%">
               <Loading visible={loading} />
-              {renderChallenges(pageNr, challenges)}
+              {renderChallenges(pageNr, challengesFiltered)}
             </FlexColumn>
           </FlexColumn>
           {!loading && (
             <Pager
-              elements={challenges}
+              elements={challengesFiltered}
               pageNr={pageNr}
               setPageNr={setPageNr}
-              pages={CALC_PAGES(challenges)}
+              pages={CALC_PAGES(challengesFiltered)}
               width="48px"
               borderRadius="64px"
-              number={`${pageNr} / ${CALC_PAGES(challenges)}`}
+              number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
             />
           )}
         </ChallengesStyle>
@@ -133,18 +135,18 @@ const Challenges = () => {
             </FlexRow>
             <FlexColumn width="100%">
               <Loading visible={loading} />
-              {renderChallenges(pageNr, challenges)}
+              {renderChallenges(pageNr, challengesFiltered)}
             </FlexColumn>
           </FlexColumn>
           {!loading && (
             <Pager
               pageNr={pageNr}
               setPageNr={setPageNr}
-              elements={challenges}
-              pages={CALC_PAGES(challenges)}
+              elements={challengesFiltered}
+              pages={CALC_PAGES(challengesFiltered)}
               width="72px"
               borderRadius="64px"
-              number={`${pageNr} / ${CALC_PAGES(challenges)}`}
+              number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
             />
           )}
         </ChallengesStyle>

src/pages/Challanges/statusFilter.js

@@ -19,13 +19,8 @@ const getDeadlineTime = (deadline) => {
   }
 };
 
-const statusFilter = (
-  status,
-  challengesAll,
-  challengesToRender,
-  setChallenges
-) => {
-  let result = challengesAll;
+const statusFilter = (status, challenges, setChallengesFiltered) => {
+  let result = challenges;
   const date = new Date();
   const currentDate = {
     year: date.getFullYear(),
@@ -34,7 +29,7 @@ const statusFilter = (
   };
   switch (status) {
     case CHALLENGES_STATUS_FILTER.CLOSED:
-      result = challengesAll.filter((challenge) =>
+      result = challenges.filter((challenge) =>
         dateIsOlder(
           currentDate,
           challenge.deadline ? getDeadlineTime(challenge.deadline) : false
@@ -42,7 +37,7 @@ const statusFilter = (
       );
       break;
     case CHALLENGES_STATUS_FILTER.ACTIVE:
-      result = challengesAll.filter(
+      result = challenges.filter(
         (challenge) =>
           !dateIsOlder(
             currentDate,
@@ -51,13 +46,10 @@ const statusFilter = (
       );
       break;
     default:
-      result = challengesAll;
+      result = challenges;
       break;
   }
-  //   result = result.filter((elem) => {
-  //     return !challengesToRender.includes(elem);
-  //   });
-  setChallenges(result);
+  setChallengesFiltered(result);
 };
 
 export default statusFilter;