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"
+ >
+
+
+
+
+
+
{selectHasCreateKudosPermission(state) &&