chore: add shortcut space routes

frontend/web/src/pages/CollectionSpace.tsx

@@ -14,7 +14,8 @@ import { Collection } from "@/types/proto/api/v2/collection_service";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 
 const CollectionSpace = () => {
-  const { collectionName } = useParams();
+  const params = useParams();
+  const collectionName = params["*"];
   const { sm } = useResponsiveWidth();
   const userStore = useUserStore();
   const collectionStore = useCollectionStore();
@@ -36,7 +37,7 @@ const CollectionSpace = () => {
         setShortcuts([]);
         for (const shortcutId of collection.shortcutIds) {
           try {
-            const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
+            const shortcut = await shortcutStore.fetchShortcutById(shortcutId);
             setShortcuts((shortcuts) => {
               return [...shortcuts, shortcut];
             });

frontend/web/src/pages/ShortcutDetail.tsx

@@ -28,11 +28,11 @@ interface State {
 const ShortcutDetail = () => {
   const { t } = useTranslation();
   const params = useParams();
+  const shortcutName = params["*"] || "";
   const navigateTo = useNavigateTo();
-  const shortcutId = Number(params.shortcutId);
   const shortcutStore = useShortcutStore();
   const userStore = useUserStore();
-  const shortcut = shortcutStore.getShortcutById(shortcutId);
+  const shortcut = shortcutStore.getShortcutByName(shortcutName);
   const currentUser = useUserStore().getCurrentUser();
   const [state, setState] = useState<State>({
     showEditDrawer: false,
@@ -46,11 +46,11 @@ const ShortcutDetail = () => {
 
   useEffect(() => {
     (async () => {
-      const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
+      const shortcut = await shortcutStore.getOrFetchShortcutByName(shortcutName);
       await userStore.getOrFetchUserById(shortcut.creatorId);
       loadingState.setFinish();
     })();
-  }, [shortcutId]);
+  }, [shortcutName]);
 
   if (loadingState.isLoading) {
     return null;
@@ -67,7 +67,7 @@ const ShortcutDetail = () => {
       content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
       style: "danger",
       onConfirm: async () => {
-        await shortcutStore.deleteShortcut(shortcut.id);
+        await shortcutStore.deleteShortcut(shortcut.name);
         navigateTo("/", {
           replace: true,
         });
@@ -198,7 +198,7 @@ const ShortcutDetail = () => {
             <Icon.BarChart2 className="w-6 h-auto mr-1" />
             {t("analytics.self")}
           </h3>
-          <AnalyticsView className="mt-4 w-full grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4" shortcutId={shortcut.id} />
+          <AnalyticsView className="mt-4 w-full grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4" shortcutName={shortcut.name} />
         </div>
       </div>
 
@@ -206,7 +206,7 @@ const ShortcutDetail = () => {
 
       {state.showEditDrawer && (
         <CreateShortcutDrawer
-          shortcutId={shortcut.id}
+          shortcutName={shortcut.name}
           onClose={() =>
             setState({
               ...state,

frontend/web/src/pages/ShortcutSpace.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+import { useParams } from "react-router-dom";
+import { isURL } from "@/helpers/utils";
+import useShortcutStore from "@/stores/v1/shortcut";
+
+const ShortcutSpace = () => {
+  const params = useParams();
+  const shortcutName = params["*"] || "";
+  const shortcutStore = useShortcutStore();
+  const shortcut = shortcutStore.getShortcutByName(shortcutName);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        await shortcutStore.getOrFetchShortcutByName(shortcutName);
+      } catch (error: any) {
+        console.error(error);
+        toast.error(error.details);
+      }
+    })();
+  }, [shortcutName]);
+
+  if (!shortcut) {
+    return null;
+  }
+
+  if (isURL(shortcut.link)) {
+    window.location.href = shortcut.link;
+    return null;
+  }
+
+  return <div>{shortcut.link}</div>;
+};
+
+export default ShortcutSpace;