Prevent simultaneous actions from causing rate limitHEADmain

2 files changed, 13 insertions, 9 deletions

diff --git a/extension/src/components/BMEditor.tsx b/extension/src/components/BMEditor.tsx
index eb84246..d66763e 100644
--- a/extension/src/components/BMEditor.tsx
+++ b/extension/src/components/BMEditor.tsx
@@ -16,7 +16,15 @@ function BMEditor() {
         if (!activeEdit) return;
     }, [activeEdit]);
 
-    let isFolder = activeEdit && activeEdit.children && activeEdit.children.length > 0;
+    function handleTitleChange(e: React.ChangeEvent<HTMLInputElement>) {
+        getBrowser().bookmarks.update(activeEdit!.id, {title: e.target.value})
+    }
+
+    function handleURLChange(e: React.ChangeEvent<HTMLInputElement>) {
+        getBrowser().bookmarks.update(activeEdit!.id, {url: e.target.value})
+    }
+
+    let isFolder = activeEdit && activeEdit.children /*&& activeEdit.children.length > 0;*/
     return (
         <div id="settings-menu" className={activeEdit ? "open" : "closed"}>
             <button id="settings-close" onClick={_ => setActiveEdit(null)}>
@@ -27,15 +35,11 @@ function BMEditor() {
                 <h1>Edit {isFolder ? "Folder" : "Bookmark"}</h1>
 
                 <h3>Name</h3>
-                <input type={"text"} defaultValue={activeEdit?.title} onChange={e => {
-                    getBrowser().bookmarks.update(activeEdit!.id, {title: e.target.value})
-                }}/>
+                <input type={"text"} defaultValue={activeEdit?.title} onBlur={handleTitleChange}/>
 
                 {!isFolder && (<>
                     <h3>URL</h3>
-                    <input type={"url"} defaultValue={activeEdit?.url} onChange={e => {
-                        getBrowser().bookmarks.update(activeEdit!.id, {url: e.target.value})
-                    }}/>
+                    <input type={"url"} defaultValue={activeEdit?.url} onBlur={handleURLChange}/>
                 </>)}
 
                 <h3>Icon</h3>
diff --git a/extension/src/components/SettingsEditor.tsx b/extension/src/components/SettingsEditor.tsx
index cdb2894..c05b483 100644
--- a/extension/src/components/SettingsEditor.tsx
+++ b/extension/src/components/SettingsEditor.tsx
@@ -61,14 +61,14 @@ function SettingsEditor(props: {isOpen: [boolean,  React.Dispatch<React.SetState
                             <h3>Background Image URL</h3>
                             <input type={"url"}
                                    value={settings.backgroundImage}
-                                   onChange={e => setSettings({...settings, backgroundImage: e.target.value})}/>
+                                   onBlur={e => setSettings({...settings, backgroundImage: e.target.value})}/>
                         </>)
                     case "color":
                         return (<>
                             <h3>Background Color</h3>
                             <input type={"color"}
                                    value={settings.backgroundColor}
-                                   onChange={e => setSettings({...settings, backgroundColor: e.target.value})}/>
+                                   onBlur={e => setSettings({...settings, backgroundColor: e.target.value})}/>
                         </>)
                 }
             })()}