chore: update confirm dialog

usememos · Jul 1, 2024 · 1ad5d9b · 1ad5d9b
1 parent 4a3afff
commit 1ad5d9b
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 213 deletions.
diff --git a/web/src/components/Dialog/CommonDialog.tsx b/web/src/components/Dialog/CommonDialog.tsx
diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -8,7 +8,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import { useFilterStore } from "@/store/module";
 import { useMemoList, useTagStore } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
-import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 import showRenameTagDialog from "../RenameTagDialog";
 
@@ -42,20 +41,15 @@ const TagsSection = (props: Props) => {
   };
 
   const handleDeleteTag = async (tag: string) => {
-    showCommonDialog({
-      title: t("tag.delete-tag"),
-      content: t("tag.delete-confirm"),
-      style: "danger",
-      dialogName: "delete-tag-dialog",
-      onConfirm: async () => {
-        await memoServiceClient.deleteMemoTag({
-          parent: "memos/-",
-          tag: tag,
-        });
-        await tagStore.fetchTags({ location, user }, { skipCache: true });
-        toast.success(t("message.deleted-successfully"));
-      },
-    });
+    const confirmed = window.confirm(t("tag.delete-confirm"));
+    if (confirmed) {
+      await memoServiceClient.deleteMemoTag({
+        parent: "memos/-",
+        tag: tag,
+      });
+      await tagStore.fetchTags({ location, user }, { skipCache: true });
+      toast.success(t("message.deleted-successfully"));
+    }
   };
 
   return (

diff --git a/web/src/components/MemoActionMenu.tsx b/web/src/components/MemoActionMenu.tsx
@@ -9,7 +9,6 @@ import { useMemoStore } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v1/common";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
-import { showCommonDialog } from "./Dialog/CommonDialog";
 import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
 
 interface Props {
@@ -95,19 +94,14 @@ const MemoActionMenu = (props: Props) => {
   };
 
   const handleDeleteMemoClick = async () => {
-    showCommonDialog({
-      title: t("memo.delete-memo"),
-      content: t("memo.delete-confirm"),
-      style: "danger",
-      dialogName: "delete-memo-dialog",
-      onConfirm: async () => {
-        await memoStore.deleteMemo(memo.name);
-        toast.success(t("message.deleted-successfully"));
-        if (isInMemoDetailPage) {
-          navigateTo("/");
-        }
-      },
-    });
+    const confirmed = window.confirm(t("memo.delete-confirm"));
+    if (confirmed) {
+      await memoStore.deleteMemo(memo.name);
+      toast.success(t("message.deleted-successfully"));
+      if (isInMemoDetailPage) {
+        navigateTo("/");
+      }
+    }
   };
 
   return (

diff --git a/web/src/components/Settings/AccessTokenSection.tsx b/web/src/components/Settings/AccessTokenSection.tsx
@@ -7,7 +7,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import { UserAccessToken } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateAccessTokenDialog from "../CreateAccessTokenDialog";
-import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 import LearnMore from "../LearnMore";
 
@@ -38,16 +37,13 @@ const AccessTokenSection = () => {
   };
 
   const handleDeleteAccessToken = async (accessToken: string) => {
-    showCommonDialog({
-      title: "Delete Access Token",
-      content: `Are you sure to delete access token \`${getFormatedAccessToken(accessToken)}\`? You cannot undo this action.`,
-      style: "danger",
-      dialogName: "delete-access-token-dialog",
-      onConfirm: async () => {
-        await userServiceClient.deleteUserAccessToken({ name: currentUser.name, accessToken: accessToken });
-        setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
-      },
-    });
+    const confirmed = window.confirm(
+      `Are you sure to delete access token \`${getFormatedAccessToken(accessToken)}\`? You cannot undo this action.`,
+    );
+    if (confirmed) {
+      await userServiceClient.deleteUserAccessToken({ name: currentUser.name, accessToken: accessToken });
+      setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
+    }
   };
 
   const getFormatedAccessToken = (accessToken: string) => {

diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
@@ -9,7 +9,6 @@ import { RowStatus } from "@/types/proto/api/v1/common";
 import { User, User_Role } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
-import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 
 interface State {
@@ -101,23 +100,18 @@ const MemberSection = () => {
     showChangeMemberPasswordDialog(user);
   };
 
-  const handleArchiveUserClick = (user: User) => {
-    showCommonDialog({
-      title: t("setting.member-section.archive-member"),
-      content: t("setting.member-section.archive-warning", { username: user.nickname }),
-      style: "danger",
-      dialogName: "archive-user-dialog",
-      onConfirm: async () => {
-        await userServiceClient.updateUser({
-          user: {
-            name: user.name,
-            rowStatus: RowStatus.ARCHIVED,
-          },
-          updateMask: ["row_status"],
-        });
-        fetchUsers();
-      },
-    });
+  const handleArchiveUserClick = async (user: User) => {
+    const confirmed = window.confirm(t("setting.member-section.archive-warning", { username: user.nickname }));
+    if (confirmed) {
+      await userServiceClient.updateUser({
+        user: {
+          name: user.name,
+          rowStatus: RowStatus.ARCHIVED,
+        },
+        updateMask: ["row_status"],
+      });
+      fetchUsers();
+    }
   };
 
   const handleRestoreUserClick = async (user: User) => {
@@ -131,17 +125,12 @@ const MemberSection = () => {
     fetchUsers();
   };
 
-  const handleDeleteUserClick = (user: User) => {
-    showCommonDialog({
-      title: t("setting.member-section.delete-member"),
-      content: t("setting.member-section.delete-warning", { username: user.nickname }),
-      style: "danger",
-      dialogName: "delete-user-dialog",
-      onConfirm: async () => {
-        await userStore.deleteUser(user.name);
-        fetchUsers();
-      },
-    });
+  const handleDeleteUserClick = async (user: User) => {
+    const confirmed = window.confirm(t("setting.member-section.delete-warning", { username: user.nickname }));
+    if (confirmed) {
+      await userStore.deleteUser(user.name);
+      fetchUsers();
+    }
   };
 
   return (

diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
@@ -6,7 +6,6 @@ import { identityProviderServiceClient } from "@/grpcweb";
 import { IdentityProvider } from "@/types/proto/api/v1/idp_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
-import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 import LearnMore from "../LearnMore";
 
@@ -24,23 +23,16 @@ const SSOSection = () => {
   };
 
   const handleDeleteIdentityProvider = async (identityProvider: IdentityProvider) => {
-    const content = t("setting.sso-section.confirm-delete", { name: identityProvider.title });
-
-    showCommonDialog({
-      title: t("setting.sso-section.delete-sso"),
-      content: content,
-      style: "danger",
-      dialogName: "delete-identity-provider-dialog",
-      onConfirm: async () => {
-        try {
-          await identityProviderServiceClient.deleteIdentityProvider({ name: identityProvider.name });
-        } catch (error: any) {
-          console.error(error);
-          toast.error(error.details);
-        }
-        await fetchIdentityProviderList();
-      },
-    });
+    const confirmed = window.confirm(t("setting.sso-section.confirm-delete", { name: identityProvider.title }));
+    if (confirmed) {
+      try {
+        await identityProviderServiceClient.deleteIdentityProvider({ name: identityProvider.name });
+      } catch (error: any) {
+        console.error(error);
+        toast.error(error.details);
+      }
+      await fetchIdentityProviderList();
+    }
   };
 
   return (

diff --git a/web/src/components/Settings/WebhookSection.tsx b/web/src/components/Settings/WebhookSection.tsx
@@ -6,7 +6,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import { Webhook } from "@/types/proto/api/v1/webhook_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateWebhookDialog from "../CreateWebhookDialog";
-import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 
 const listWebhooks = async (userId: number) => {
@@ -33,16 +32,11 @@ const WebhookSection = () => {
   };
 
   const handleDeleteWebhook = async (webhook: Webhook) => {
-    showCommonDialog({
-      title: "Delete Webhook",
-      content: `Are you sure to delete webhook \`${webhook.name}\`? You cannot undo this action.`,
-      style: "danger",
-      dialogName: "delete-webhook-dialog",
-      onConfirm: async () => {
-        await webhookServiceClient.deleteWebhook({ id: webhook.id });
-        setWebhooks(webhooks.filter((item) => item.id !== webhook.id));
-      },
-    });
+    const confirmed = window.confirm(`Are you sure to delete webhook \`${webhook.name}\`? You cannot undo this action.`);
+    if (confirmed) {
+      await webhookServiceClient.deleteWebhook({ id: webhook.id });
+      setWebhooks(webhooks.filter((item) => item.id !== webhook.id));
+    }
   };
 
   return (

diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
@@ -2,7 +2,6 @@ import { Button, Tooltip } from "@mui/joy";
 import { ClientError } from "nice-grpc-web";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import MemoContent from "@/components/MemoContent";
@@ -57,15 +56,10 @@ const Archived = () => {
   };
 
   const handleDeleteMemoClick = async (memo: Memo) => {
-    showCommonDialog({
-      title: t("memo.delete-memo"),
-      content: t("memo.delete-confirm"),
-      style: "danger",
-      dialogName: "delete-memo-dialog",
-      onConfirm: async () => {
-        await memoStore.deleteMemo(memo.name);
-      },
-    });
+    const confirmed = window.confirm(t("memo.delete-confirm"));
+    if (confirmed) {
+      await memoStore.deleteMemo(memo.name);
+    }
   };
 
   const handleRestoreMemoClick = async (memo: Memo) => {