disable submit button for 3 seconds in sync modal to throttle rate li…

…mit. Better group button separation via a border color difference
lbragile · Jan 10, 2022 · 92d0e6b · 92d0e6b
1 parent c348158
commit 92d0e6b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { saveAs } from "file-saver";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import styled from "styled-components";
 
 import About from "./About";
@@ -84,6 +84,8 @@ export default function Modal({ setVisible }: IModal): JSX.Element {
   const syncUpload = useSyncStorageUpload(possibleData);
   const syncDownload = useSyncStorageDownload(currentData, available);
 
+  const [disableSubmit, setDisableSubmit] = useState(false);
+
   const hide = () => setVisible(false);
 
   const handleSave = () => {
@@ -97,6 +99,13 @@ export default function Modal({ setVisible }: IModal): JSX.Element {
     } else if (type === "sync") {
       if (possibleData.length) syncUpload();
       else if (currentData.length) syncDownload();
+
+      /**
+       * Prevent user from mashing the submit button, due to rate limit on sync storage
+       * @see https://developer.chrome.com/docs/extensions/reference/storage/#property-sync-sync-MAX_WRITE_OPERATIONS_PER_MINUTE
+       */
+      setDisableSubmit(true);
+      setTimeout(() => setDisableSubmit(false), 3000);
     }
   };
 
@@ -139,13 +148,13 @@ export default function Modal({ setVisible }: IModal): JSX.Element {
           )}
 
           {saveText && type === "sync" && syncType === "Upload" && possibleData.length > 0 && (
-            <Button onClick={handleSave} $variant="primary">
+            <Button onClick={handleSave} $variant="primary" disabled={disableSubmit}>
               {`Upload ${saveText} (${possibleData.length})`}
             </Button>
           )}
 
           {saveText && type === "sync" && syncType === "Download" && currentData.length > 0 && (
-            <Button onClick={handleSave} $variant="primary">
+            <Button onClick={handleSave} $variant="primary" disabled={disableSubmit}>
               {`Download ${saveText} (${currentData.length})`}
             </Button>
           )}

diff --git a/src/components/SidePanel/Group.tsx b/src/components/SidePanel/Group.tsx
@@ -15,6 +15,7 @@ import { CloseIcon } from "~/styles/CloseIcon";
 import { relativeTimeStr } from "~/utils/helper";
 
 interface IGroupStyle {
+  $permanent: boolean;
   $isActive: boolean;
   $overflow: boolean;
   $dragging: boolean;
@@ -40,7 +41,8 @@ const GroupButton = styled.div<IGroupStyle>`
   height: 49px;
   background-color: ${({ $isActive, $dragging, $draggingOver }) =>
     $isActive ? "#BEDDF4" : $dragging ? "lightgrey" : $draggingOver ? "#caffca" : "white"};
-  border: 1px solid rgb(0 0 0 / 10%);
+  outline: 1px solid ${({ $permanent }) => ($permanent ? "rgb(255 127 0 / 30%)" : "rgb(0 0 0 / 10%)")};
+  outline-offset: -1px;
   overflow: hidden;
   position: relative;
   display: flex;
@@ -195,6 +197,7 @@ export default function Group({
         <GroupButton
           tabIndex={0}
           role="button"
+          $permanent={index === 0}
           $isActive={isActive}
           $overflow={available.length > 10}
           $dragging={!!snapshot?.isDragging}