chore: use shortcut v2 api

frontend/web/src/stores/index.ts

@@ -1,15 +0,0 @@
-import { configureStore } from "@reduxjs/toolkit";
-import { TypedUseSelectorHook, useSelector } from "react-redux";
-import shortcutReducer from "./modules/shortcut";
-
-const store = configureStore({
-  reducer: {
-    shortcut: shortcutReducer,
-  },
-});
-
-type AppState = ReturnType<typeof store.getState>;
-
-export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;
-
-export default store;

frontend/web/src/stores/modules/shortcut.ts

@@ -1,51 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-interface State {
-  shortcutList: Shortcut[];
-}
-
-const shortcutSlice = createSlice({
-  name: "shortcut",
-  initialState: {
-    shortcutList: [],
-  } as State,
-  reducers: {
-    setShortcuts: (state, action: PayloadAction<Shortcut[]>) => {
-      return {
-        ...state,
-        shortcutList: action.payload,
-      };
-    },
-    createShortcut: (state, action: PayloadAction<Shortcut>) => {
-      return {
-        ...state,
-        shortcutList: state.shortcutList.concat(action.payload).sort((a, b) => b.createdTs - a.createdTs),
-      };
-    },
-    patchShortcut: (state, action: PayloadAction<Partial<Shortcut>>) => {
-      return {
-        ...state,
-        shortcutList: state.shortcutList.map((s) => {
-          if (s.id === action.payload.id) {
-            return {
-              ...s,
-              ...action.payload,
-            };
-          } else {
-            return s;
-          }
-        }),
-      };
-    },
-    deleteShortcut: (state, action: PayloadAction<ShortcutId>) => {
-      return {
-        ...state,
-        shortcutList: [...state.shortcutList].filter((shortcut) => shortcut.id !== action.payload),
-      };
-    },
-  },
-});
-
-export const { setShortcuts, createShortcut, patchShortcut, deleteShortcut } = shortcutSlice.actions;
-
-export default shortcutSlice.reducer;

frontend/web/src/stores/v1/collection.ts

@@ -84,8 +84,6 @@ const useCollectionStore = create<CollectionState>()((set, get) => ({
       throw new Error("Collection not found");
     }
 
-    console.log("updatedCollection", updatedCollection);
-
     const collectionMap = get().collectionMapById;
     collectionMap[updatedCollection.id] = updatedCollection;
     set(collectionMap);

frontend/web/src/stores/v1/shortcut.ts

@@ -3,11 +3,14 @@ import { shortcutServiceClient } from "@/grpcweb";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 
 interface ShortcutState {
-  shortcutMapById: Record<ShortcutId, Shortcut>;
+  shortcutMapById: Record<number, Shortcut>;
   fetchShortcutList: () => Promise<Shortcut[]>;
-  getOrFetchShortcutById: (id: ShortcutId) => Promise<Shortcut>;
-  getShortcutById: (id: ShortcutId) => Shortcut;
+  getOrFetchShortcutById: (id: number) => Promise<Shortcut>;
+  getShortcutById: (id: number) => Shortcut;
   getShortcutList: () => Shortcut[];
+  createShortcut: (shortcut: Shortcut) => Promise<Shortcut>;
+  updateShortcut: (shortcut: Partial<Shortcut>) => Promise<Shortcut>;
+  deleteShortcut: (id: number) => Promise<void>;
 }
 
 const useShortcutStore = create<ShortcutState>()((set, get) => ({
@@ -21,7 +24,7 @@ const useShortcutStore = create<ShortcutState>()((set, get) => ({
     set(shortcutMap);
     return shortcuts;
   },
-  getOrFetchShortcutById: async (id: ShortcutId) => {
+  getOrFetchShortcutById: async (id: number) => {
     const shortcutMap = get().shortcutMapById;
     if (shortcutMap[id]) {
       return shortcutMap[id] as Shortcut;
@@ -38,13 +41,50 @@ const useShortcutStore = create<ShortcutState>()((set, get) => ({
     set(shortcutMap);
     return shortcut;
   },
-  getShortcutById: (id: ShortcutId) => {
+  getShortcutById: (id: number) => {
     const shortcutMap = get().shortcutMapById;
-    return shortcutMap[id] as Shortcut;
+    return shortcutMap[id] || unknownShortcut;
   },
   getShortcutList: () => {
     return Object.values(get().shortcutMapById);
   },
+  createShortcut: async (shortcut: Shortcut) => {
+    const { shortcut: createdShortcut } = await shortcutServiceClient.createShortcut({
+      shortcut: shortcut,
+    });
+    if (!createdShortcut) {
+      throw new Error(`Failed to create shortcut`);
+    }
+    const shortcutMap = get().shortcutMapById;
+    shortcutMap[createdShortcut.id] = createdShortcut;
+    set(shortcutMap);
+    return createdShortcut;
+  },
+  updateShortcut: async (shortcut: Partial<Shortcut>) => {
+    const { shortcut: updatedShortcut } = await shortcutServiceClient.updateShortcut({
+      shortcut: shortcut,
+    });
+    if (!updatedShortcut) {
+      throw new Error(`Failed to update shortcut`);
+    }
+    const shortcutMap = get().shortcutMapById;
+    shortcutMap[updatedShortcut.id] = updatedShortcut;
+    set(shortcutMap);
+    return updatedShortcut;
+  },
+  deleteShortcut: async (id: number) => {
+    await shortcutServiceClient.deleteShortcut({
+      id: id,
+    });
+    const shortcutMap = get().shortcutMapById;
+    delete shortcutMap[id];
+    set(shortcutMap);
+  },
 }));
 
+const unknownShortcut: Shortcut = Shortcut.fromPartial({
+  id: -1,
+  name: "Unknown",
+});
+
 export default useShortcutStore;

frontend/web/src/stores/v1/user.ts

@@ -103,7 +103,7 @@ const useUserStore = create<UserState>()((set, get) => ({
   },
   getUserById: (id: number) => {
     const userMap = get().userMapById;
-    return userMap[id] as User;
+    return userMap[id] || unknownUser;
   },
   getCurrentUser: () => {
     const userMap = get().userMapById;
@@ -148,4 +148,10 @@ const useUserStore = create<UserState>()((set, get) => ({
   },
 }));
 
+const unknownUser: User = User.fromPartial({
+  id: -1,
+  email: "Unknown",
+  nickname: "Unknown",
+});
+
 export default useUserStore;

frontend/web/src/stores/v1/view.ts

@@ -1,5 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { Visibility } from "@/types/proto/api/v2/common";
+import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { User } from "@/types/proto/api/v2/user_service";
 
 export interface Filter {
@@ -102,11 +104,15 @@ export const getOrderedShortcutList = (shortcutList: Shortcut[], order: Order) =
     if (field === "name") {
       return direction === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
     } else if (field === "createdTs") {
-      return direction === "asc" ? a.createdTs - b.createdTs : b.createdTs - a.createdTs;
+      return direction === "asc"
+        ? getDateTimestamp(a.createdTime) - getDateTimestamp(b.createdTime)
+        : getDateTimestamp(b.createdTime) - getDateTimestamp(a.createdTime);
     } else if (field === "updatedTs") {
-      return direction === "asc" ? a.updatedTs - b.updatedTs : b.updatedTs - a.updatedTs;
+      return direction === "asc"
+        ? getDateTimestamp(a.updatedTime) - getDateTimestamp(b.updatedTime)
+        : getDateTimestamp(b.updatedTime) - getDateTimestamp(a.updatedTime);
     } else if (field === "view") {
-      return direction === "asc" ? a.view - b.view : b.view - a.view;
+      return direction === "asc" ? a.viewCount - b.viewCount : b.viewCount - a.viewCount;
     } else {
       return 0;
     }
@@ -114,4 +120,8 @@ export const getOrderedShortcutList = (shortcutList: Shortcut[], order: Order) =
   return orderedShortcutList;
 };
 
+const getDateTimestamp = (date: Date = new Date()) => {
+  return new Date(date).getTime();
+};
+
 export default useViewStore;