From 6307829f7501a5334fecf2d49c17e09d24619913 Mon Sep 17 00:00:00 2001
From: jaydonkrooss <147423601+jaydonkrooss@users.noreply.github.com>
Date: Tue, 17 Sep 2024 15:42:58 -0400
Subject: [PATCH] fixes #1589: debounce and read snackbar for assignment
 planning (#1623)

* fixes #1589: debounce and read snackbar for assignment planning

* fix codacy problems

* comments to clarify debounceAmount
---
 assets/src/components/AssignmentGoalInput.js  |  2 +-
 assets/src/components/UserSettingSnackbar.js  | 28 +++++++++++--------
 assets/src/containers/AssignmentPlanningV2.js |  1 +
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/assets/src/components/AssignmentGoalInput.js b/assets/src/components/AssignmentGoalInput.js
index 496b3145..14c4bdf4 100644
--- a/assets/src/components/AssignmentGoalInput.js
+++ b/assets/src/components/AssignmentGoalInput.js
@@ -32,7 +32,7 @@ function AssignmentGoalInput (props) {
   } = props
 
   const [goalGradeInternal, setGoalGradeInternal] = useState(goalGrade)
-  const debouncedGoalGrade = useRef(debounce(q => setGoalGrade(q), 500)).current
+  const debouncedGoalGrade = useRef(debounce(q => setGoalGrade(q), 250)).current
   const updateGoalGradeInternal = (grade) => {
     const v = { courseGoalGrade: grade }
     if (goalGrade !== '') {
diff --git a/assets/src/components/UserSettingSnackbar.js b/assets/src/components/UserSettingSnackbar.js
index 85c4a0e7..333e5212 100644
--- a/assets/src/components/UserSettingSnackbar.js
+++ b/assets/src/components/UserSettingSnackbar.js
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import Snackbar from '@mui/material/Snackbar'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 import Slide from '@mui/material/Slide'
+import debounce from 'lodash.debounce'
 
 function SlideTransition (props) {
   return <Slide {...props} direction='up' />
@@ -13,22 +14,28 @@ function UserSettingSnackbar (props) {
     saved,
     response,
     successMessage = 'Setting saved successfully!',
-    failureMessage = 'Setting not saved.'
+    failureMessage = 'Setting not saved.',
+    debounceAmount = 0 // in milliseconds, for delaying when the toast is shown
   } = props
 
   const [savedSnackbarOpen, setSavedSnackbarOpen] = useState(false)
   const [snackbarMessage, setSnackbarMessage] = useState('')
 
+  // if debounceAmount is 0, the snackbar will show immediately
+  const openSnackbarWithDebounce = useCallback(
+    debounce((message) => {
+      setSnackbarMessage(message)
+      setSavedSnackbarOpen(true)
+    }, debounceAmount),
+    [debounceAmount]
+  )
+
   useEffect(() => {
     if (saved) {
-      if (response.default === 'success') {
-        setSnackbarMessage(successMessage)
-      } else {
-        setSnackbarMessage(failureMessage)
-      }
-      setSavedSnackbarOpen(true)
+      const message = response.default === 'success' ? successMessage : failureMessage
+      openSnackbarWithDebounce(message)
     }
-  }, [saved])
+  }, [saved, openSnackbarWithDebounce])
 
   const snackbarDuration = Math.max(snackbarMessage.length * 200, 4000)
 
@@ -38,9 +45,6 @@ function UserSettingSnackbar (props) {
         vertical: 'bottom',
         horizontal: 'left'
       }}
-      ContentProps={{
-        role: 'alertdialog'
-      }}
       open={savedSnackbarOpen}
       autoHideDuration={snackbarDuration}
       TransitionComponent={SlideTransition}
diff --git a/assets/src/containers/AssignmentPlanningV2.js b/assets/src/containers/AssignmentPlanningV2.js
index 9939ef54..8b17356f 100644
--- a/assets/src/containers/AssignmentPlanningV2.js
+++ b/assets/src/containers/AssignmentPlanningV2.js
@@ -293,6 +293,7 @@ function AssignmentPlanningV2 (props) {
               <UserSettingSnackbar
                 saved={!mutationError && !mutationLoading && settingChanged}
                 response={{ default: 'success' }}
+                debounceAmount={750}
               />
             </Paper>
           </Grid>