From 39f1cc68f32bfdc37b1bcc6e0ff4ce0395cd1a42 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 14 Apr 2023 13:54:41 +0200 Subject: [PATCH] filtersMenu render refactor --- src/pages/Challanges/Challenges.js | 51 +++++++++++++++++------- src/pages/Challanges/renderChallenges.js | 2 +- src/pages/Challanges/statusFilter.js | 5 +++ 3 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 src/pages/Challanges/statusFilter.js 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;