diff --git a/web-ui/src/pages/KudosPage.css b/web-ui/src/pages/KudosPage.css index ed9bab05d..f6dd9dd14 100644 --- a/web-ui/src/pages/KudosPage.css +++ b/web-ui/src/pages/KudosPage.css @@ -18,6 +18,7 @@ .kudos-page .kudos-page-header { display: flex; + gap: .5em; justify-content: flex-end; } diff --git a/web-ui/src/pages/KudosPage.jsx b/web-ui/src/pages/KudosPage.jsx index db7ecf672..287963147 100644 --- a/web-ui/src/pages/KudosPage.jsx +++ b/web-ui/src/pages/KudosPage.jsx @@ -1,6 +1,9 @@ import React, { useCallback, useContext, useEffect, useState } from "react"; import { styled } from "@mui/material/styles"; import { Button, Tab, Typography } from "@mui/material"; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import TextField from '@mui/material/TextField'; import { TabContext, TabList, TabPanel } from "@mui/lab"; import { AppContext } from "../context/AppContext"; import { @@ -40,6 +43,13 @@ const Root = styled("div")({ }, }); +const DateRange = { + THREE_MONTHS: '3mo', + SIX_MONTHS: '6mo', + ONE_YEAR: '1yr', + ALL_TIME: 'all' +}; + const KudosPage = () => { const { state, dispatch } = useContext(AppContext); const csrf = selectCsrfToken(state); @@ -52,24 +62,48 @@ const KudosPage = () => { const [receivedKudosLoading, setReceivedKudosLoading] = useState(true); const [sentKudos, setSentKudos] = useState([]); const [sentKudosLoading, setSentKudosLoading] = useState(true); + const [dateRange, setDateRange] = useState(DateRange.THREE_MONTHS); + + const isInRange = (requestDate) => { + const oldestDate = new Date(); + switch (dateRange) { + case DateRange.SIX_MONTHS: + oldestDate.setMonth(oldestDate.getMonth() - 6); + break; + case DateRange.ONE_YEAR: + oldestDate.setFullYear(oldestDate.getFullYear() - 1); + break; + case DateRange.ALL_TIME: + return true; + case DateRange.THREE_MONTHS: + default: + oldestDate.setMonth(oldestDate.getMonth() - 3); + } + + if (Array.isArray(requestDate)) { + requestDate = new Date(requestDate.join('/')); + // have to do for Safari + } + return requestDate >= oldestDate; + }; const loadReceivedKudos = useCallback(async () => { setReceivedKudosLoading(true); const res = await getReceivedKudos(currentUser.id, csrf); if (res?.payload?.data && !res.error) { setReceivedKudosLoading(false); - return res.payload.data; + return res.payload.data.filter((k) => isInRange(k.dateCreated)); } - }, [csrf, dispatch, currentUser.id]); + }, [csrf, dispatch, currentUser.id, dateRange]); const loadSentKudos = useCallback(async () => { setSentKudosLoading(true); const res = await getSentKudos(currentUser.id, csrf); if (res?.payload?.data && !res.error) { setSentKudosLoading(false); - return res.payload.data; + return res.payload.data.filter((k) => isInRange(k.dateCreated)); } - }, [csrf, dispatch, currentUser.id]); + }, [csrf, dispatch, currentUser.id, dateRange]); const loadAndSetReceivedKudos = () => { loadReceivedKudos().then((data) => { @@ -96,7 +130,7 @@ const KudosPage = () => { loadAndSetSentKudos(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [csrf, currentUser, kudosTab]); + }, [csrf, currentUser, kudosTab, dateRange]); const handleTabChange = useCallback( (event, newTab) => { @@ -124,6 +158,23 @@ const KudosPage = () => { open={kudosDialogOpen} onClose={() => setKudosDialogOpen(false)} /> + + setDateRange(e.target.value)} + value={dateRange} + variant="outlined" + > + Past 3 months + Past 6 months + Past year + All time + + {selectHasCreateKudosPermission(state) &&