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);
+      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;

extension/src/helpers/api.ts

@@ -1,15 +1,14 @@
-import type { Shortcut } from "@/types/proto/api/v2/shortcut_service_pb";
 import { Storage } from "@plasmohq/storage";
 import axios from "axios";
 
 const storage = new Storage();
 
-export const getShortcutList = () => {
-  const queryList = [];
-  return axios.get<Shortcut[]>(`/api/v1/shortcut?${queryList.join("&")}`);
-};
-
 export const getUrlFavicon = async (url: string) => {
-  const domain = await storage.getItem("domain");
-  return axios.get<string>(`${domain}/api/v1/url/favicon?url=${url}`);
+  const domain = await storage.getItem<string>("domain");
+  const accessToken = await storage.getItem<string>("access_token");
+  return axios.get<string>(`${domain}/api/v1/url/favicon?url=${url}`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
 };

extension/src/options.tsx

@@ -10,7 +10,7 @@ interface SettingState {
   accessToken: string;
 }
 
-function IndexOptions() {
+const IndexOptions = () => {
   const [domain, setDomain] = useStorage<string>("domain", (v) => (v ? v : ""));
   const [accessToken, setAccessToken] = useStorage<string>("access_token", (v) => (v ? v : ""));
   const [settingState, setSettingState] = useState<SettingState>({
@@ -33,11 +33,6 @@ function IndexOptions() {
   };
 
   const handleSaveSetting = () => {
-    if (!settingState.domain || !settingState.accessToken) {
-      toast.error("Domain and access token are required");
-      return;
-    }
-
     setDomain(settingState.domain);
     setAccessToken(settingState.accessToken);
     toast.success("Setting saved");
@@ -89,6 +84,6 @@ function IndexOptions() {
       <Toaster position="top-center" />
     </>
   );
-}
+};
 
 export default IndexOptions;

extension/src/popup.tsx

@@ -7,7 +7,7 @@ import PullShortcutsButton from "./components/PullShortcutsButton";
 import ShortcutsContainer from "./components/ShortcutsContainer";
 import "./style.css";
 
-function IndexPopup() {
+const IndexPopup = () => {
   const [domain] = useStorage<string>("domain", "");
   const [accessToken] = useStorage<string>("access_token", "");
   const [shortcuts] = useStorage<Shortcut[]>("shortcuts", []);
@@ -17,6 +17,10 @@ function IndexPopup() {
     chrome.runtime.openOptionsPage();
   };
 
+  const handleRefreshButtonClick = () => {
+    chrome.runtime.reload();
+  };
+
   return (
     <>
       <div className="w-full min-w-[480px] p-4">
@@ -41,13 +45,34 @@ function IndexPopup() {
         </div>
 
         <div className="w-full mt-4">
+          {isInitialized ? (
+            shortcuts.length !== 0 ? (
               <ShortcutsContainer />
+            ) : (
+              <div className="w-full flex flex-col justify-center items-center">
+                <p>No shortcut found.</p>
+              </div>
+            )
+          ) : (
+            <div className="w-full flex flex-col justify-start items-center">
+              <p>No domain and access token found.</p>
+              <div className="w-full flex flex-row justify-center items-center py-4">
+                <Button size="sm" color="primary" onClick={handleSettingButtonClick}>
+                  <Icon.Settings className="w-5 h-auto mr-1" /> Setting
+                </Button>
+                <span className="mx-2">Or</span>
+                <Button size="sm" variant="outlined" color="neutral" onClick={handleRefreshButtonClick}>
+                  <Icon.RefreshCcw className="w-5 h-auto mr-1" /> Refresh
+                </Button>
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
       <Toaster position="top-right" />
     </>
   );
-}
+};
 
 export default IndexPopup;