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

@@ -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 !== '') {

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}

assets/src/containers/AssignmentPlanningV2.js

@@ -293,6 +293,7 @@ function AssignmentPlanningV2 (props) {
               <UserSettingSnackbar
                 saved={!mutationError && !mutationLoading && settingChanged}
                 response={{ default: 'success' }}
+                debounceAmount={750}
               />
             </Paper>
           </Grid>