chore: redirect to instance url

frontend/extension/src/components/CreateShortcutButton.tsx

@@ -1,34 +1,22 @@
 import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy";
 import { useStorage } from "@plasmohq/storage/hook";
-import axios from "axios";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import useShortcutStore from "@/store/shortcut";
 import { Visibility } from "@/types/proto/api/v2/common";
-import { CreateShortcutResponse, OpenGraphMetadata } from "@/types/proto/api/v2/shortcut_service";
+import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import Icon from "./Icon";
 
-const generateName = (length = 8) => {
-  let result = "";
-  const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  let counter = 0;
-  while (counter < length) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    counter += 1;
-  }
-  return result;
-};
-
 interface State {
   name: string;
   title: string;
   link: string;
 }
 
-const CreateShortcutsButton = () => {
-  const [domain] = useStorage("domain");
+const CreateShortcutButton = () => {
+  const [instanceUrl] = useStorage("domain");
   const [accessToken] = useStorage("access_token");
-  const [shortcuts, setShortcuts] = useStorage("shortcuts");
+  const shortcutStore = useShortcutStore();
   const [state, setState] = useState<State>({
     name: "",
     title: "",
@@ -54,7 +42,7 @@ const CreateShortcutsButton = () => {
       const tab = tabs[0];
       setState((state) => ({
         ...state,
-        name: generateName(),
+        name: "",
         title: tab.title || "",
         link: tab.url || "",
       }));
@@ -94,25 +82,16 @@ const CreateShortcutsButton = () => {
 
     setIsLoading(true);
     try {
-      const {
-        data: { shortcut },
-      } = await axios.post<CreateShortcutResponse>(
-        `${domain}/api/v2/shortcuts`,
-        {
+      await shortcutStore.createShortcut(
+        instanceUrl,
+        accessToken,
+        Shortcut.fromPartial({
           name: state.name,
           title: state.title,
           link: state.link,
-          visibility: Visibility.PRIVATE,
-          ogMetadata: OpenGraphMetadata.fromPartial({}),
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        }
+          visibility: Visibility.PUBLIC,
+        })
       );
-
-      setShortcuts([shortcut, ...shortcuts]);
       toast.success("Shortcut created successfully");
       setShowModal(false);
     } catch (error: any) {
@@ -171,4 +150,4 @@ const CreateShortcutsButton = () => {
   );
 };
 
-export default CreateShortcutsButton;
+export default CreateShortcutButton;

frontend/extension/src/components/PullShortcutsButton.tsx

@@ -1,32 +1,24 @@
 import { IconButton } from "@mui/joy";
 import { useStorage } from "@plasmohq/storage/hook";
-import axios from "axios";
 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
-import { ListShortcutsResponse } from "@/types/proto/api/v2/shortcut_service";
+import useShortcutStore from "@/store/shortcut";
 import Icon from "./Icon";
 
 const PullShortcutsButton = () => {
-  const [domain] = useStorage("domain");
+  const [instanceUrl] = useStorage("domain");
   const [accessToken] = useStorage("access_token");
-  const [, setShortcuts] = useStorage("shortcuts");
+  const shortcutStore = useShortcutStore();
 
   useEffect(() => {
-    if (domain && accessToken) {
+    if (instanceUrl && accessToken) {
       handlePullShortcuts(true);
     }
-  }, [domain, accessToken]);
+  }, [instanceUrl, accessToken]);
 
   const handlePullShortcuts = async (silence = false) => {
     try {
-      const {
-        data: { shortcuts },
-      } = await axios.get<ListShortcutsResponse>(`${domain}/api/v2/shortcuts`, {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
-      });
-      setShortcuts(shortcuts);
+      await shortcutStore.fetchShortcutList(instanceUrl, accessToken);
       if (!silence) {
         toast.success("Shortcuts pulled");
       }

frontend/extension/src/components/ShortcutsContainer.tsx

@@ -1,16 +1,24 @@
-import { useStorage } from "@plasmohq/storage/hook";
 import classNames from "classnames";
-import type { Shortcut } from "@/types/proto/api/v2/shortcut_service";
+import useShortcutStore from "@/store/shortcut";
+import Icon from "./Icon";
 import ShortcutView from "./ShortcutView";
 
 const ShortcutsContainer = () => {
-  const [shortcuts] = useStorage<Shortcut[]>("shortcuts", (v) => (v ? v : []));
+  const shortcuts = useShortcutStore().getShortcutList();
 
   return (
-    <div className={classNames("w-full grid grid-cols-2 gap-2")}>
-      {shortcuts.map((shortcut) => {
-        return <ShortcutView key={shortcut.id} shortcut={shortcut} />;
-      })}
+    <div>
+      <div className="w-full flex flex-row justify-start items-center mb-4">
+        <a className="bg-blue-100 dark:bg-blue-500 dark:opacity-70 py-2 px-3 rounded-full border dark:border-blue-600 flex flex-row justify-start items-center cursor-pointer shadow">
+          <Icon.AlertCircle className="w-4 h-auto" />
+          <span className="mx-1 text-sm">Please make sure you have signed in your instance.</span>
+        </a>
+      </div>
+      <div className={classNames("w-full grid grid-cols-2 gap-2")}>
+        {shortcuts.map((shortcut) => {
+          return <ShortcutView key={shortcut.id} shortcut={shortcut} />;
+        })}
+      </div>
     </div>
   );
 };