s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

status filter

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-18 09:45:34 +02:00
parent cfc340c4f1
commit c1bb79d0cd
3 changed files with 30 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/getChallenges.js
View File

@ -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;

28
src/pages/Challanges/Challenges.js
View File

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

20
src/pages/Challanges/statusFilter.js
View File

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