"Refactor popup.js: Extract functions into useCallback, simplify useE…

…ffect callbacks, and remove unnecessary returns."
responsively-org · Sep 9, 2024 · 6157de2 · 6157de2
1 parent 61fc537
commit 6157de2
Showing 1 changed file with 26 additions and 34 deletions.
diff --git a/browser-extension/src/popup.js b/browser-extension/src/popup.js
@@ -27,28 +27,23 @@ const isChrome = () => {
 
 const URLOpenerNonChrome = () => {
   const [status, setStatus] = useState("loading");
-  useEffect(() => {
-    (async () => {
-      const [tab] = await window.browser.tabs.query({
-        currentWindow: true,
-        active: true,
-      });
-      if (!tab || !tab.url) {
-        setStatus("false");
-        return;
-      }
-      openCustomProtocolURI(
-        `responsively://${tab.url}`,
-        () => {
-          setStatus("false");
-        },
-        () => {
-          setStatus("true");
-        }
-      );
-    })();
+  const checkProtocolAndUpdateStatus = useCallback(async () => {
+    const [tab] = await window.browser.tabs.query({ currentWindow: true, active: true });
+    if (!tab || !tab.url) {
+      setStatus("false");
+      return;
+    }
+    openCustomProtocolURI(
+      `responsively://${tab.url}`,
+      () => setStatus("false"),
+      () => setStatus("true")
+    );
   }, []);
 
+  useEffect(() => {
+    checkProtocolAndUpdateStatus();
+  }, [checkProtocolAndUpdateStatus]);
+
   if (status === "loading") {
     return (
       <div className="popup">
@@ -87,23 +82,20 @@ const URLOpenerNonChrome = () => {
 };
 
 const URLOpenerChrome = () => {
+  const updateTabURL = useCallback(async () => {
+    const [tab] = await window.browser.tabs.query({ currentWindow: true, active: true });
+    if (!tab || !tab.url) {
+      return;
+    }
+    window.browser.tabs.update({ url: `responsively://${tab.url}` });
+  }, []);
+
   useEffect(() => {
-    (async () => {
-      const [tab] = await window.browser.tabs.query({
-        currentWindow: true,
-        active: true,
-      });
-      if (!tab || !tab.url) {
-        return;
-      }
-      window.browser.tabs.update({
-        url: `responsively://${tab.url}`,
-      });
-    })();
-    return setTimeout(() => {
+    updateTabURL();
+    setTimeout(() => {
       window.close();
     }, 5000);
-  }, []);
+  }, [updateTabURL]);
 
   return (
     <div className="popup">