From f3f2218e918eea25f9c81e21bf1ac2078968c13a Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 10 Nov 2023 10:11:02 +0800 Subject: [PATCH] chore(frontend): update shortcut store --- .../src/components/CreateShortcutDialog.tsx | 7 ++-- frontend/web/src/components/Header.tsx | 2 +- frontend/web/src/components/ShortcutCard.tsx | 14 +++----- frontend/web/src/grpcweb.ts | 3 ++ frontend/web/src/services/shortcutService.ts | 7 ---- frontend/web/src/stores/v1/shortcut.ts | 34 +++++++++++++------ 6 files changed, 36 insertions(+), 31 deletions(-) diff --git a/frontend/web/src/components/CreateShortcutDialog.tsx b/frontend/web/src/components/CreateShortcutDialog.tsx index e5a6aa9..70ec944 100644 --- a/frontend/web/src/components/CreateShortcutDialog.tsx +++ b/frontend/web/src/components/CreateShortcutDialog.tsx @@ -235,7 +235,7 @@ const CreateShortcutDialog: React.FC = (props: Props) => { {tagSuggestions.length > 0 && (
- +
{tagSuggestions.map((tag) => ( = (props: Props) => { )} onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)} > - Social media metadata + + Social media metadata + + diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx index c9cf1d0..3371721 100644 --- a/frontend/web/src/components/Header.tsx +++ b/frontend/web/src/components/Header.tsx @@ -25,7 +25,7 @@ const Header: React.FC = () => { return ( <> -
+
diff --git a/frontend/web/src/components/ShortcutCard.tsx b/frontend/web/src/components/ShortcutCard.tsx index 717eed1..7b9b1aa 100644 --- a/frontend/web/src/components/ShortcutCard.tsx +++ b/frontend/web/src/components/ShortcutCard.tsx @@ -103,27 +103,21 @@ const ShortcutView = (props: Props) => { {shortcut.tags.length === 0 && No tags}
- -
- - {shortcut.creator.nickname} -
-
viewStore.setFilter({ visibility: shortcut.visibility })} > - + {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
- + {t("shortcut.visits", { count: shortcut.view })} diff --git a/frontend/web/src/grpcweb.ts b/frontend/web/src/grpcweb.ts index b863d9f..e3ef191 100644 --- a/frontend/web/src/grpcweb.ts +++ b/frontend/web/src/grpcweb.ts @@ -1,4 +1,5 @@ import { createChannel, createClientFactory, FetchTransport } from "nice-grpc-web"; +import { ShortcutServiceDefinition } from "./types/proto/api/v2/shortcut_service"; import { SubscriptionServiceDefinition } from "./types/proto/api/v2/subscription_service"; import { UserServiceDefinition } from "./types/proto/api/v2/user_service"; import { UserSettingServiceDefinition } from "./types/proto/api/v2/user_setting_service"; @@ -22,3 +23,5 @@ export const workspaceServiceClient = clientFactory.create(WorkspaceServiceDefin export const userServiceClient = clientFactory.create(UserServiceDefinition, channel); export const userSettingServiceClient = clientFactory.create(UserSettingServiceDefinition, channel); + +export const shortcutServiceClient = clientFactory.create(ShortcutServiceDefinition, channel); diff --git a/frontend/web/src/services/shortcutService.ts b/frontend/web/src/services/shortcutService.ts index 8c189a8..020cb4a 100644 --- a/frontend/web/src/services/shortcutService.ts +++ b/frontend/web/src/services/shortcutService.ts @@ -15,13 +15,6 @@ const shortcutService = { return store.getState().shortcut; }, - fetchWorkspaceShortcuts: async () => { - const data = (await api.getShortcutList({})).data; - const shortcuts = data.map((s) => convertResponseModelShortcut(s)); - store.dispatch(setShortcuts(shortcuts)); - return shortcuts; - }, - getMyAllShortcuts: async () => { const data = (await api.getShortcutList()).data; const shortcuts = data.map((s) => convertResponseModelShortcut(s)); diff --git a/frontend/web/src/stores/v1/shortcut.ts b/frontend/web/src/stores/v1/shortcut.ts index bb5928b..dda355f 100644 --- a/frontend/web/src/stores/v1/shortcut.ts +++ b/frontend/web/src/stores/v1/shortcut.ts @@ -1,30 +1,39 @@ import { create } from "zustand"; -import * as api from "../../helpers/api"; - -const convertResponseModelShortcut = (shortcut: Shortcut): Shortcut => { - return { - ...shortcut, - createdTs: shortcut.createdTs * 1000, - updatedTs: shortcut.updatedTs * 1000, - }; -}; +import { shortcutServiceClient } from "@/grpcweb"; +import { Shortcut } from "@/types/proto/api/v2/shortcut_service"; interface ShortcutState { shortcutMapById: Record; + fetchShortcutList: () => Promise; getOrFetchShortcutById: (id: ShortcutId) => Promise; getShortcutById: (id: ShortcutId) => Shortcut; + getShortcutList: () => Shortcut[]; } const useShortcutStore = create()((set, get) => ({ shortcutMapById: {}, + fetchShortcutList: async () => { + const { shortcuts } = await shortcutServiceClient.listShortcuts({}); + const shortcutMap = get().shortcutMapById; + shortcuts.forEach((shortcut) => { + shortcutMap[shortcut.id] = shortcut; + }); + set(shortcutMap); + return shortcuts; + }, getOrFetchShortcutById: async (id: ShortcutId) => { const shortcutMap = get().shortcutMapById; if (shortcutMap[id]) { return shortcutMap[id] as Shortcut; } - const { data } = await api.getShortcutById(id); - const shortcut = convertResponseModelShortcut(data); + const { shortcut } = await shortcutServiceClient.getShortcut({ + id: id, + }); + if (!shortcut) { + throw new Error(`Shortcut with id ${id} not found`); + } + shortcutMap[id] = shortcut; set(shortcutMap); return shortcut; @@ -33,6 +42,9 @@ const useShortcutStore = create()((set, get) => ({ const shortcutMap = get().shortcutMapById; return shortcutMap[id] as Shortcut; }, + getShortcutList: () => { + return Object.values(get().shortcutMapById); + }, })); export default useShortcutStore;