feat: update popup initial state handler

extension/src/components/PullShortcutsButton.tsx

@@ -1,19 +1,25 @@
 import { Button } from "@mui/joy";
 import { useStorage } from "@plasmohq/storage/hook";
 import axios from "axios";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service_pb";
 import "../style.css";
 import Icon from "./Icon";
 
-function PullShortcutsButton() {
+const PullShortcutsButton = () => {
   const [domain] = useStorage("domain");
   const [accessToken] = useStorage("access_token");
   const [, setShortcuts] = useStorage("shortcuts");
   const [isPulling, setIsPulling] = useState(false);
 
-  const handlePullShortcuts = async () => {
+  useEffect(() => {
+    if (domain && accessToken) {
+      handlePullShortcuts(true);
+    }
+  }, [domain, accessToken]);
+
+  const handlePullShortcuts = async (silence = false) => {
     try {
       setIsPulling(true);
       const { data } = await axios.get<Shortcut[]>(`${domain}/api/v1/shortcut`, {
@@ -22,7 +28,9 @@ function PullShortcutsButton() {
         },
       });
       setShortcuts(data);
-      toast.success("Shortcuts pulled");
+      if (!silence) {
+        toast.success("Shortcuts pulled");
+      }
     } catch (error) {
       toast.error("Failed to pull shortcuts, error: " + error.message);
     }
@@ -30,10 +38,10 @@ function PullShortcutsButton() {
   };
 
   return (
-    <Button loading={isPulling} color="neutral" variant="plain" size="sm" onClick={handlePullShortcuts}>
+    <Button loading={isPulling} color="neutral" variant="plain" size="sm" onClick={() => handlePullShortcuts()}>
       <Icon.RefreshCcw className="w-4 h-auto" />
     </Button>
   );
-}
+};
 
 export default PullShortcutsButton;