diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js
index 91ba4cc..eb34e97 100644
--- a/src/pages/Challanges/Challenges.js
+++ b/src/pages/Challanges/Challenges.js
@@ -3,7 +3,6 @@ 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 Media from 'react-media';
@@ -13,6 +12,8 @@ import getChallenges from '../../api/getChallenges';
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);
@@ -29,6 +30,10 @@ const Challenges = () => {
challengesRequest();
}, []);
+ React.useEffect(() => {
+ statusFilter(status, challenges, setChallenges);
+ }, [challenges, status]);
+
const challengesRequest = () => {
getChallenges(setChallengesFromAPI);
getChallenges(setChallenges, setLoading);
@@ -62,12 +67,37 @@ const Challenges = () => {
setFiltersMenu(newFiltersMenu);
};
+ const filtersMenuRender = (
+ translateX = '0',
+ opacity = '1',
+ transBackDisplay = 'none'
+ ) => {
+ return (
+
+ );
+ };
+
const mobileRender = () => {
return (
<>
+ {filtersMenuRender(
+ filtersMenu ? '0' : '100vw',
+ filtersMenu ? '1' : '0'
+ )}
{
status={status}
challengeType={challengeType}
commercial={commercial}
+ translateX={filtersMenu ? '0' : '100vw'}
+ opacity={filtersMenu ? '1' : '0'}
/>
@@ -110,18 +142,7 @@ const Challenges = () => {
const desktopRender = () => {
return (
<>
-
+ {filtersMenuRender()}
diff --git a/src/pages/Challanges/renderChallenges.js b/src/pages/Challanges/renderChallenges.js
index be6e572..c6d2a6a 100644
--- a/src/pages/Challanges/renderChallenges.js
+++ b/src/pages/Challanges/renderChallenges.js
@@ -18,7 +18,7 @@ const ChallengesGrid = styled(Grid)`
}
`;
-const renderChallenges = (pageNr, challenges) => {
+const renderChallenges = (pageNr, challenges, statusFilter) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (challenges && challenges !== []) {
return (
diff --git a/src/pages/Challanges/statusFilter.js b/src/pages/Challanges/statusFilter.js
new file mode 100644
index 0000000..67cdec7
--- /dev/null
+++ b/src/pages/Challanges/statusFilter.js
@@ -0,0 +1,5 @@
+const statusFilter = (status, challenges, setChallenges) => {
+ let result = challenges;
+};
+
+export default statusFilter;