chore: use shortcut v2 api

frontend/web/src/pages/CollectionDashboard.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CollectionView from "@/components/CollectionView";
 import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
-import { shortcutService } from "@/services";
 import useCollectionStore from "@/stores/v1/collection";
+import useShortcutStore from "@/stores/v1/shortcut";
 import FilterView from "../components/FilterView";
 import Icon from "../components/Icon";
 import useLoading from "../hooks/useLoading";
@@ -16,6 +16,7 @@ interface State {
 const CollectionDashboard: React.FC = () => {
   const { t } = useTranslation();
   const loadingState = useLoading();
+  const shortcutStore = useShortcutStore();
   const collectionStore = useCollectionStore();
   const [state, setState] = useState<State>({
     showCreateCollectionDrawer: false,
@@ -30,7 +31,7 @@ const CollectionDashboard: React.FC = () => {
   });
 
   useEffect(() => {
-    Promise.all([shortcutService.getMyAllShortcuts(), collectionStore.fetchCollectionList()]).finally(() => {
+    Promise.all([shortcutStore.fetchShortcutList(), collectionStore.fetchCollectionList()]).finally(() => {
       loadingState.setFinish();
     });
   }, []);

frontend/web/src/pages/CollectionSpace.tsx

@@ -12,7 +12,6 @@ import useShortcutStore from "@/stores/v1/shortcut";
 import useUserStore from "@/stores/v1/user";
 import { Collection } from "@/types/proto/api/v2/collection_service";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
-import { convertShortcutFromPb } from "@/utils/shortcut";
 
 const CollectionSpace = () => {
   const { collectionName } = useParams();
@@ -90,7 +89,7 @@ const CollectionSpace = () => {
                       : "sm:border-transparent dark:sm:border-transparent"
                   )}
                   key={shortcut.name}
-                  shortcut={convertShortcutFromPb(shortcut)}
+                  shortcut={shortcut}
                   alwaysShowLink={!sm}
                   onClick={() => handleShortcutClick(shortcut)}
                 />

frontend/web/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import useShortcutStore from "@/stores/v1/shortcut";
 import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
 import FilterView from "../components/FilterView";
 import Icon from "../components/Icon";
@@ -8,8 +9,6 @@ import ShortcutsContainer from "../components/ShortcutsContainer";
 import ShortcutsNavigator from "../components/ShortcutsNavigator";
 import ViewSetting from "../components/ViewSetting";
 import useLoading from "../hooks/useLoading";
-import { shortcutService } from "../services";
-import { useAppSelector } from "../stores";
 import useUserStore from "../stores/v1/user";
 import useViewStore, { getFilteredShortcutList, getOrderedShortcutList } from "../stores/v1/view";
 
@@ -21,8 +20,9 @@ const Home: React.FC = () => {
   const { t } = useTranslation();
   const loadingState = useLoading();
   const currentUser = useUserStore().getCurrentUser();
+  const shortcutStore = useShortcutStore();
   const viewStore = useViewStore();
-  const { shortcutList } = useAppSelector((state) => state.shortcut);
+  const shortcutList = shortcutStore.getShortcutList();
   const [state, setState] = useState<State>({
     showCreateShortcutDrawer: false,
   });
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
   const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
 
   useEffect(() => {
-    Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => {
+    Promise.all([shortcutStore.fetchShortcutList()]).finally(() => {
       loadingState.setFinish();
     });
   }, []);

frontend/web/src/pages/ShortcutDetail.tsx

@@ -1,12 +1,16 @@
 import { Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useLoaderData } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
+import useShortcutStore from "@/stores/v1/shortcut";
+import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { Role } from "@/types/proto/api/v2/user_service";
+import { convertVisibilityFromPb } from "@/utils/visibility";
 import { showCommonDialog } from "../components/Alert";
 import AnalyticsView from "../components/AnalyticsView";
 import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
@@ -15,7 +19,6 @@ import Icon from "../components/Icon";
 import VisibilityIcon from "../components/VisibilityIcon";
 import Dropdown from "../components/common/Dropdown";
 import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
-import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";
 
 interface State {
@@ -24,18 +27,35 @@ interface State {
 
 const ShortcutDetail = () => {
   const { t } = useTranslation();
+  const params = useParams();
   const navigateTo = useNavigateTo();
-  const shortcutId = (useLoaderData() as Shortcut).id;
-  const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
+  const shortcutId = Number(params.shortcutId);
+  const shortcutStore = useShortcutStore();
+  const userStore = useUserStore();
+  const shortcut = shortcutStore.getShortcutById(shortcutId);
   const currentUser = useUserStore().getCurrentUser();
   const [state, setState] = useState<State>({
     showEditDrawer: false,
   });
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
+  const loadingState = useLoading(true);
+  const creator = userStore.getUserById(shortcut.creatorId);
   const havePermission = currentUser.role === Role.ADMIN || shortcut.creatorId === currentUser.id;
   const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
   const favicon = getFaviconWithGoogleS2(shortcut.link);
 
+  useEffect(() => {
+    (async () => {
+      const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
+      await userStore.getOrFetchUserById(shortcut.creatorId);
+      loadingState.setFinish();
+    })();
+  }, [shortcutId]);
+
+  if (loadingState.isLoading) {
+    return null;
+  }
+
   const handleCopyButtonClick = () => {
     copy(shortcutLink);
     toast.success("Shortcut link copied to clipboard.");
@@ -47,7 +67,7 @@ const ShortcutDetail = () => {
       content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
       style: "danger",
       onConfirm: async () => {
-        await shortcutService.deleteShortcutById(shortcut.id);
+        await shortcutStore.deleteShortcut(shortcut.id);
         navigateTo("/", {
           replace: true,
         });
@@ -151,19 +171,24 @@ const ShortcutDetail = () => {
           <Tooltip title="Creator" variant="solid" placement="top" arrow>
             <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm dark:border-zinc-800">
               <Icon.User className="w-4 h-auto mr-1" />
-              <span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
+              <span className="max-w-[4rem] sm:max-w-[6rem] truncate">{creator.nickname}</span>
             </div>
           </Tooltip>
-          <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
+          <Tooltip
+            title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
+            variant="solid"
+            placement="top"
+            arrow
+          >
             <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm dark:border-zinc-800">
               <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-              {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
+              {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
             <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm dark:border-zinc-800">
               <Icon.BarChart2 className="w-4 h-auto mr-1" />
-              {shortcut.view} visits
+              {shortcut.viewCount} visits
             </div>
           </Tooltip>
         </div>