feat: impl grpcweb in frontend

frontend/web/src/components/CreateAccessTokenDialog.tsx

@@ -1,8 +1,8 @@
 import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
-import axios from "axios";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { userServiceClient } from "@/grpcweb";
 import useLoading from "../hooks/useLoading";
 import useUserStore from "../stores/v1/user";
 import Icon from "./Icon";
@@ -68,9 +68,12 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
     }
 
     try {
-      await axios.post(`/api/v2/users/${currentUser.id}/access_tokens`, {
-        description: state.description,
-        expiresAt: new Date(Date.now() + state.expiration * 1000),
+      await userServiceClient.createUserAccessToken({
+        id: currentUser.id,
+        userAccessToken: {
+          description: state.description,
+          expiresAt: new Date(Date.now() + state.expiration * 1000),
+        },
       });
 
       if (onConfirm) {

frontend/web/src/components/setting/AccessTokenSection.tsx

@@ -1,18 +1,20 @@
 import { Button, IconButton } from "@mui/joy";
-import axios from "axios";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { ListUserAccessTokensResponse, UserAccessToken } from "@/types/proto/api/v2/user_service";
+import { userServiceClient } from "@/grpcweb";
+import { UserAccessToken } from "@/types/proto/api/v2/user_service";
 import useUserStore from "../../stores/v1/user";
 import { showCommonDialog } from "../Alert";
 import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
 import Icon from "../Icon";
 
 const listAccessTokens = async (userId: number) => {
-  const { data } = await axios.get<ListUserAccessTokensResponse>(`/api/v2/users/${userId}/access_tokens`);
-  return data.accessTokens;
+  const { accessTokens } = await userServiceClient.listUserAccessTokens({
+    id: userId,
+  });
+  return accessTokens;
 };
 
 const AccessTokenSection = () => {
@@ -43,7 +45,10 @@ const AccessTokenSection = () => {
       content: `Are you sure to delete access token \`${getFormatedAccessToken(accessToken)}\`? You cannot undo this action.`,
       style: "danger",
       onConfirm: async () => {
-        await axios.delete(`/api/v2/users/${currentUser.id}/access_tokens/${accessToken}`);
+        await userServiceClient.deleteUserAccessToken({
+          id: currentUser.id,
+          accessToken: accessToken,
+        });
         setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
       },
     });

frontend/web/src/components/setting/WorkspaceSection.tsx

@@ -7,20 +7,20 @@ const WorkspaceSection: React.FC = () => {
   const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>();
 
   useEffect(() => {
-    getWorkspaceSetting().then(({ data }) => {
-      setWorkspaceSetting(data.setting);
+    getWorkspaceSetting().then(({ setting }) => {
+      setWorkspaceSetting(setting);
     });
   }, []);
 
   const handleDisallowSignUpChange = async (value: boolean) => {
-    const { data } = await updateWorkspaceSetting(
+    const { setting } = await updateWorkspaceSetting(
       {
         ...workspaceSetting,
         enableSignup: value,
       } as WorkspaceSetting,
       ["enable_signup"]
     );
-    setWorkspaceSetting(data.setting);
+    setWorkspaceSetting(setting);
   };
 
   if (!workspaceSetting) return <></>;

frontend/web/src/grpcweb.ts

@@ -0,0 +1,18 @@
+import { createChannel, createClientFactory, FetchTransport } from "nice-grpc-web";
+import { UserServiceDefinition } from "./types/proto/api/v2/user_service";
+import { WorkspaceSettingServiceDefinition } from "./types/proto/api/v2/workspace_setting_service";
+
+const address = import.meta.env.MODE === "development" ? "http://localhost:8082" : window.location.origin;
+
+const channel = createChannel(
+  address,
+  FetchTransport({
+    credentials: "include",
+  })
+);
+
+const clientFactory = createClientFactory();
+
+export const userServiceClient = clientFactory.create(UserServiceDefinition, channel);
+
+export const workspaceSettingServiceClient = clientFactory.create(WorkspaceSettingServiceDefinition, channel);

frontend/web/src/helpers/api.ts

@@ -1,9 +1,6 @@
 import axios from "axios";
-import {
-  GetWorkspaceSettingResponse,
-  UpdateWorkspaceSettingResponse,
-  WorkspaceSetting,
-} from "@/types/proto/api/v2/workspace_setting_service";
+import { userServiceClient, workspaceSettingServiceClient } from "@/grpcweb";
+import { WorkspaceSetting } from "@/types/proto/api/v2/workspace_setting_service";
 
 export function getWorkspaceProfile() {
   return axios.get<WorkspaceProfile>("/api/v1/workspace/profile");
@@ -49,7 +46,7 @@ export function patchUser(userPatch: UserPatch) {
 }
 
 export function deleteUser(userId: UserId) {
-  return axios.delete(`/api/v2/users/${userId}`);
+  return userServiceClient.deleteUser({ id: userId });
 }
 
 export function getShortcutList(shortcutFind?: ShortcutFind) {
@@ -81,11 +78,11 @@ export function deleteShortcutById(shortcutId: ShortcutId) {
 }
 
 export function getWorkspaceSetting() {
-  return axios.get<GetWorkspaceSettingResponse>(`/api/v2/workspace/settings`);
+  return workspaceSettingServiceClient.getWorkspaceSetting({});
 }
 
 export function updateWorkspaceSetting(setting: WorkspaceSetting, updateMask: string[]) {
-  return axios.post<UpdateWorkspaceSettingResponse>(`/api/v2/workspace/settings`, {
+  return workspaceSettingServiceClient.updateWorkspaceSetting({
     setting,
     updateMask,
   });