avoid conflicting between global pause and group pause

zezhehh · Jun 10, 2023 · a8d208e · a8d208e
1 parent cf9f7dc
commit a8d208e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -191,27 +191,28 @@ const App = () => {
     storage.current.set({ [advancedKey]: !advanced });
   };
 
+  const toggleGroupPause = (groupID: string) => {
+    if (groupStatus[groupID]) {
+      pauseController.current.unpause(...groups[groupID]);
+      storage.current.set({
+        [groupID]: { exts: groups[groupID], paused: false },
+      });
+    } else {
+      pauseController.current.pause(...groups[groupID]);
+      storage.current.set({
+        [groupID]: { exts: groups[groupID], paused: true },
+      });
+    }
+  };
+
   const groupBar = (groupID: string) => {
-    const extPaused = groupStatus[groupID];
     return (
       <ButtonGroup size="small" fullWidth>
         <Button
-          onClick={() => {
-            if (extPaused) {
-              pauseController.current.unpause(...groups[groupID]);
-              storage.current.set({
-                [groupID]: { exts: groups[groupID], paused: false },
-              });
-            } else {
-              pauseController.current.pause(...groups[groupID]);
-              storage.current.set({
-                [groupID]: { exts: groups[groupID], paused: true },
-              });
-            }
-          }}
+          onClick={() => toggleGroupPause(groupID)}
           style={{ width: "85%" }}
         >
-          {extPaused ? "Resume Group" : "Pause Group"}
+          {groupStatus[groupID] ? "Resume" : "Pause"}
         </Button>
         <Button
           onClick={() => {
@@ -230,15 +231,7 @@ const App = () => {
   return (
     <div className="App">
       <div className="toggle-button">
-        <Button
-          variant="contained"
-          onClick={togglePause}
-          fullWidth
-          style={{ marginBottom: 5 }}
-        >
-          {paused ? "Resume" : advanced ? "Pause All" : "Pause"}
-        </Button>
-        {advanced ? (
+        {advanced && (
           <ButtonGroup size="small" fullWidth>
             <Button onClick={toggleAdvanced} style={{ width: "85%" }}>
               Switch to Simple
@@ -247,19 +240,34 @@ const App = () => {
               onClick={toggleGrouping}
               style={{ borderRadius: 0, width: "15%" }}
             >
-              {grouping ? <Tooltip title="Confirm"><CheckIcon /></Tooltip> : <Tooltip title="Create Group"><LibraryAddIcon /></Tooltip>}
+              {grouping ? (
+                <Tooltip title="Confirm">
+                  <CheckIcon />
+                </Tooltip>
+              ) : (
+                <Tooltip title="Create Group">
+                  <LibraryAddIcon />
+                </Tooltip>
+              )}
             </Button>
           </ButtonGroup>
-        ) : (
+        )}{" "}
+        {!advanced && (
           <Button
             variant="outlined"
             size="small"
             fullWidth
             onClick={toggleAdvanced}
+            style={{ marginBottom: 5 }}
           >
             Switch to Advanced
           </Button>
         )}
+        {!advanced && (
+          <Button variant="contained" onClick={togglePause} fullWidth>
+            {paused ? "Resume" : "Pause"}
+          </Button>
+        )}
       </div>
 
       <div className="ext-info">

diff --git a/src/PauseController.ts b/src/PauseController.ts
@@ -32,7 +32,6 @@ class PauseController {
       }
       const storageKey = getExtInfoKey(extID);
       this.storage.get(storageKey).then((res) => {
-        console.log(`unpause ${extID} ${res[storageKey]}`)
         chrome.management.setEnabled(extID, res[storageKey]);
       });
     });