Store Rubric in IndexedDB

teachertool/src/components/ActiveRubricDisplay.tsx

@@ -6,30 +6,22 @@ import { getCatalogCriteriaWithId } from "../state/helpers";
 import { Button } from "react-common/components/controls/Button";
 import { removeCriteriaFromRubric } from "../transforms/removeCriteriaFromRubric";
 import { showCatalogModal } from "../transforms/showCatalogModal";
-import { Input } from "react-common/components/controls/Input";
 import { setRubricName } from "../transforms/setRubricName";
+import { DebouncedInput } from "./DebouncedInput";
 
 interface IProps {}
 
 export const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
-    const [inProgressName, setInProgressName] = useState(teacherTool.rubric.name);
-
-    function handleConfirmName() {
-        setRubricName(inProgressName);
-    }
-
     return (
         <div className="rubric-display">
-            <Input
+            <DebouncedInput
                 label={lf("Rubric Name")}
                 ariaLabel={lf("Rubric Name")}
-                onChange={setInProgressName}
+                onChange={setRubricName}
                 placeholder={lf("Rubric Name")}
-                initialValue={inProgressName}
-                onEnterKey={handleConfirmName}
-                onBlur={handleConfirmName}
+                initialValue={teacherTool.rubric.name}
                 preserveValueOnBlur={true}
             />
             {teacherTool.rubric.criteria?.map(criteriaInstance => {

teachertool/src/components/DebouncedInput.tsx

@@ -0,0 +1,28 @@
+import { useRef } from "react";
+import { Input, InputProps } from "react-common/components/controls/Input";
+
+export interface DebouncedInputProps extends InputProps {
+    intervalMs?: number | undefined;
+}
+
+// This functions like the React Common Input, but debounces onChange calls
+// so they only fire once every `interval` milliseconds (defined in props)
+export const DebouncedInput: React.FC<DebouncedInputProps> = props => {
+    const timerId = useRef<NodeJS.Timeout | undefined>(undefined);
+
+    const onChangeDebounce = (newValue: string) => {
+        if (timerId.current) {
+            clearTimeout(timerId.current);
+        }
+
+        timerId.current = setTimeout(() => {
+            if (!props.onChange) {
+                return;
+            }
+
+            props.onChange(newValue);
+        }, props.intervalMs ?? 500);
+    };
+
+    return <Input {...props} onChange={onChangeDebounce} />;
+};