From a5009a69aaa58be15b65046a49a1182f26fb2913 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Fri, 14 Feb 2025 13:45:04 -0600
Subject: [PATCH 1/2] Make the paths /kudos/received and /kudos/sent go to the
 kudos page selecting the correct tab.

---
 web-ui/src/components/routes/Routes.jsx |  2 +-
 web-ui/src/pages/KudosPage.jsx          | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web-ui/src/components/routes/Routes.jsx b/web-ui/src/components/routes/Routes.jsx
index 7c238fa72..66d1800f7 100644
--- a/web-ui/src/components/routes/Routes.jsx
+++ b/web-ui/src/components/routes/Routes.jsx
@@ -106,7 +106,7 @@ export default function Routes() {
       <Route path="/feedback/self-reviews">
         <SelfReviewsPage />
       </Route>
-      <Route exact path="/kudos">
+      <Route exact path="/kudos/:initialTab?">
         <Header title="Kudos" />
         <KudosPage />
       </Route>
diff --git a/web-ui/src/pages/KudosPage.jsx b/web-ui/src/pages/KudosPage.jsx
index db7ecf672..b4bc179ae 100644
--- a/web-ui/src/pages/KudosPage.jsx
+++ b/web-ui/src/pages/KudosPage.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useParams } from 'react-router-dom';
 import { styled } from "@mui/material/styles";
 import { Button, Tab, Typography } from "@mui/material";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
@@ -41,13 +42,14 @@ const Root = styled("div")({
 });
 
 const KudosPage = () => {
+  const { initialTab } = useParams();
   const { state, dispatch } = useContext(AppContext);
   const csrf = selectCsrfToken(state);
 
   const currentUser = selectCurrentUser(state);
 
   const [kudosDialogOpen, setKudosDialogOpen] = useState(false);
-  const [kudosTab, setKudosTab] = useState("RECEIVED");
+  const [kudosTab, setKudosTab] = useState(initialTab ?? "received");
   const [receivedKudos, setReceivedKudos] = useState([]);
   const [receivedKudosLoading, setReceivedKudosLoading] = useState(true);
   const [sentKudos, setSentKudos] = useState([]);
@@ -101,11 +103,11 @@ const KudosPage = () => {
   const handleTabChange = useCallback(
     (event, newTab) => {
       switch (newTab) {
-        case "RECEIVED":
-          setKudosTab("RECEIVED");
+        case "received":
+          setKudosTab("received");
           break;
-        case "SENT":
-          setKudosTab("SENT");
+        case "sent":
+          setKudosTab("sent");
           break;
         default:
           console.warn(`Invalid tab: ${newTab}`);
@@ -138,19 +140,19 @@ const KudosPage = () => {
           <TabList onChange={handleTabChange}>
             <Tab
               label="Received"
-              value="RECEIVED"
+              value="received"
               icon={<ArchiveIcon />}
               iconPosition="start"
             />
             <Tab
               label="Sent"
-              value="SENT"
+              value="sent"
               icon={<UnarchiveIcon />}
               iconPosition="start"
             />
           </TabList>
         </div>
-        <TabPanel value="RECEIVED" style={{ padding: "1rem 0" }}>
+        <TabPanel value="received" style={{ padding: "1rem 0" }}>
           {receivedKudosLoading ? (
             Array.from({ length: 5 }).map((_, index) => (
               <SkeletonLoader key={index} type="kudos" />
@@ -177,7 +179,7 @@ const KudosPage = () => {
             </div>
           )}
         </TabPanel>
-        <TabPanel value="SENT" style={{ padding: "1rem 0" }}>
+        <TabPanel value="sent" style={{ padding: "1rem 0" }}>
           {sentKudosLoading ? (
             Array.from({ length: 5 }).map((_, index) => (
               <SkeletonLoader key={index} type="kudos" />

From 3b46afa2b666bfee39a11529490cb14a208d0bc1 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Fri, 14 Feb 2025 14:02:05 -0600
Subject: [PATCH 2/2] Validate tab names on load.

---
 web-ui/src/pages/KudosPage.jsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/web-ui/src/pages/KudosPage.jsx b/web-ui/src/pages/KudosPage.jsx
index b4bc179ae..f0015283a 100644
--- a/web-ui/src/pages/KudosPage.jsx
+++ b/web-ui/src/pages/KudosPage.jsx
@@ -41,6 +41,18 @@ const Root = styled("div")({
   },
 });
 
+const validTabName = (name) => {
+  switch (name) {
+    case "received":
+    case "sent":
+      break;
+    default:
+      name && console.warn(`Invalid tab: ${name}`);
+      name = "received";
+  }
+  return name;
+};
+
 const KudosPage = () => {
   const { initialTab } = useParams();
   const { state, dispatch } = useContext(AppContext);
@@ -49,7 +61,7 @@ const KudosPage = () => {
   const currentUser = selectCurrentUser(state);
 
   const [kudosDialogOpen, setKudosDialogOpen] = useState(false);
-  const [kudosTab, setKudosTab] = useState(initialTab ?? "received");
+  const [kudosTab, setKudosTab] = useState(validTabName(initialTab));
   const [receivedKudos, setReceivedKudos] = useState([]);
   const [receivedKudosLoading, setReceivedKudosLoading] = useState(true);
   const [sentKudos, setSentKudos] = useState([]);
@@ -102,18 +114,7 @@ const KudosPage = () => {
 
   const handleTabChange = useCallback(
     (event, newTab) => {
-      switch (newTab) {
-        case "received":
-          setKudosTab("received");
-          break;
-        case "sent":
-          setKudosTab("sent");
-          break;
-        default:
-          console.warn(`Invalid tab: ${newTab}`);
-      }
-
-      setKudosTab(newTab);
+      setKudosTab(validTabName(newTab));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [loadReceivedKudos, loadSentKudos]