From 798107748afa97c45399c033c5630fbc2bb7940f Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 23 Apr 2024 10:57:51 -0700
Subject: [PATCH] Reset "recently added" timers when button is clicked again
 before initial timer runs out.

---
 teachertool/src/components/CatalogOverlay.tsx | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/teachertool/src/components/CatalogOverlay.tsx b/teachertool/src/components/CatalogOverlay.tsx
index 466578d0cbcc..42ddb777be61 100644
--- a/teachertool/src/components/CatalogOverlay.tsx
+++ b/teachertool/src/components/CatalogOverlay.tsx
@@ -78,17 +78,21 @@ const CatalogList: React.FC = () => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     const recentlyAddedWindowMs = 500;
-    const [recentlyAddedIds, setRecentlyAddedIds] = useState<pxsim.Map<boolean>>({}); // Id -> bool, True if recently added. False (or not in list) otherwise.
+    const [recentlyAddedIds, setRecentlyAddedIds] = useState<pxsim.Map<NodeJS.Timeout>>({});
 
     const criteria = useMemo<CatalogCriteria[]>(
         () => getCatalogCriteria(teacherTool),
         [teacherTool.catalog, teacherTool.rubric]
     );
 
-    function updateRecentlyAddedValue(id: string, value: boolean) {
+    function updateRecentlyAddedValue(id: string, value: NodeJS.Timeout | undefined) {
         setRecentlyAddedIds(prevState => {
             const newState = { ...prevState };
-            newState[id] = value;
+            if (value) {
+                newState[id] = value;
+            } else {
+                delete newState[id];
+            }
             return newState;
         });
     }
@@ -96,10 +100,15 @@ const CatalogList: React.FC = () => {
     function onItemClicked(c: CatalogCriteria) {
         addCriteriaToRubric([c.id]);
 
-        updateRecentlyAddedValue(c.id, true);
-        setTimeout(() => {
-            updateRecentlyAddedValue(c.id, false);
+        // Set a timeout to remove the recently added indicator
+        // and save it in the state.
+        if (recentlyAddedIds[c.id]) {
+            clearTimeout(recentlyAddedIds[c.id]);
+        }
+        const timeoutId = setTimeout(() => {
+            updateRecentlyAddedValue(c.id, undefined);
         }, recentlyAddedWindowMs);
+        updateRecentlyAddedValue(c.id, timeoutId);
 
         announceToScreenReader(lf("Added '{0}' to checklist.", getReadableCriteriaTemplate(c)));
     }
@@ -123,7 +132,7 @@ const CatalogList: React.FC = () => {
                                     catalogCriteria={c}
                                     allowsMultiple={allowsMultiple}
                                     existingInstanceCount={existingInstanceCount}
-                                    recentlyAdded={recentlyAddedIds[c.id]}
+                                    recentlyAdded={recentlyAddedIds[c.id] !== undefined}
                                 />
                             }
                             onClick={() => onItemClicked(c)}