feat: use react-hot-toast (#1321)

web/package.json

@@ -23,6 +23,7 @@
     "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0",
     "react-i18next": "^11.18.6",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.8.2",

web/src/App.tsx

 import { useColorScheme } from "@mui/joy";
 import { useEffect, Suspense } from "react";
+import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
 import router from "./router";
@@ -95,6 +96,7 @@ const App = () => {
   return (
     <Suspense fallback={<Loading />}>
       <RouterProvider router={router} />
+      <Toaster position="top-right" />
     </Suspense>
   );
 };

web/src/components/ArchivedMemo.tsx

+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useMemoStore } from "../store/module";
 import * as utils from "../helpers/utils";
 import useToggle from "../hooks/useToggle";
-import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import "../less/memo.less";
@@ -23,7 +23,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
         await memoStore.deleteMemoById(memo.id);
       } catch (error: any) {
         console.error(error);
-        toastHelper.error(error.response.data.message);
+        toast.error(error.response.data.message);
       }
     } else {
       toggleConfirmDeleteBtn();
@@ -37,10 +37,10 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
         rowStatus: "NORMAL",
       });
       await memoStore.fetchMemos();
-      toastHelper.info(t("message.restored-successfully"));
+      toast(t("message.restored-successfully"));
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/ArchivedMemoDialog.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useMemoStore } from "../store/module";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import ArchivedMemo from "./ArchivedMemo";
 import "../less/archived-memo-dialog.less";
 
@@ -26,7 +26,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
       })
       .catch((error) => {
         console.error(error);
-        toastHelper.error(error.response.data.message);
+        toast.error(error.response.data.message);
       })
       .finally(() => {
         loadingState.setFinish();

web/src/components/AskAIDialog.tsx

 import { Button, Textarea } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import * as api from "../helpers/api";
 import useLoading from "../hooks/useLoading";
 import { marked } from "../labs/marked";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import showSettingDialog from "./SettingDialog";
 
 type Props = DialogProps;
@@ -44,7 +44,7 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
       await askQuestion(question);
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error);
+      toast.error(error.response.data.error);
     }
     setQuestion("");
     fetchingState.setFinish();

web/src/components/ChangeMemberPasswordDialog.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 
 interface Props extends DialogProps {
   user: User;
@@ -36,12 +36,12 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
 
   const handleSaveBtnClick = async () => {
     if (newPassword === "" || newPasswordAgain === "") {
-      toastHelper.error(t("message.fill-all"));
+      toast.error(t("message.fill-all"));
       return;
     }
 
     if (newPassword !== newPasswordAgain) {
-      toastHelper.error(t("message.new-password-not-match"));
+      toast.error(t("message.new-password-not-match"));
       setNewPasswordAgain("");
       return;
     }
@@ -51,11 +51,11 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
         id: propsUser.id,
         password: newPassword,
       });
-      toastHelper.info(t("message.password-changed"));
+      toast(t("message.password-changed"));
       handleCloseBtnClick();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/ChangeMemoCreatedTsDialog.tsx

 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useMemoStore } from "../store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 
 interface Props extends DialogProps {
   memoId: MemoId;
@@ -23,7 +23,7 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
         const datetime = dayjs(memo.createdTs).format("YYYY-MM-DDTHH:mm");
         setCreatedAt(datetime);
       } else {
-        toastHelper.error(t("message.memo-not-found"));
+        toast.error(t("message.memo-not-found"));
         destroy();
       }
     });
@@ -43,7 +43,7 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
     const createdTs = dayjs(createdAt).unix();
 
     if (createdTs > nowTs) {
-      toastHelper.error(t("message.invalid-created-datetime"));
+      toast.error(t("message.invalid-created-datetime"));
       return;
     }
 
@@ -52,11 +52,11 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
         id: memoId,
         createdTs,
       });
-      toastHelper.info(t("message.memo-updated-datetime"));
+      toast.success(t("message.memo-updated-datetime"));
       handleCloseBtnClick();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/ChangePasswordDialog.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 
 type Props = DialogProps;
 
@@ -33,12 +33,12 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
 
   const handleSaveBtnClick = async () => {
     if (newPassword === "" || newPasswordAgain === "") {
-      toastHelper.error(t("message.fill-all"));
+      toast.error(t("message.fill-all"));
       return;
     }
 
     if (newPassword !== newPasswordAgain) {
-      toastHelper.error(t("message.new-password-not-match"));
+      toast.error(t("message.new-password-not-match"));
       setNewPasswordAgain("");
       return;
     }
@@ -49,11 +49,11 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
         id: user.id,
         password: newPassword,
       });
-      toastHelper.info(t("message.password-changed"));
+      toast.success(t("message.password-changed"));
       handleCloseBtnClick();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/ChangeResourceFilenameDialog.tsx

 import { useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useResourceStore } from "../store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import "../less/change-resource-filename-dialog.less";
 
 interface Props extends DialogProps {
@@ -44,7 +44,7 @@ const ChangeResourceFilenameDialog: React.FC<Props> = (props: Props) => {
       return;
     }
     if (!validateFilename(filename)) {
-      toastHelper.error(t("message.invalid-resource-filename"));
+      toast.error(t("message.invalid-resource-filename"));
       return;
     }
     try {
@@ -52,11 +52,11 @@ const ChangeResourceFilenameDialog: React.FC<Props> = (props: Props) => {
         id: resourceId,
         filename: filename,
       });
-      toastHelper.info(t("message.resource-filename-updated"));
+      toast.success(t("message.resource-filename-updated"));
       handleCloseBtnClick();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/CreateIdentityProviderDialog.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { Button, Divider, Input, Radio, RadioGroup, Typography } from "@mui/joy";
 import * as api from "../helpers/api";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { absolutifyLink } from "../helpers/utils";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 
 interface Props extends DialogProps {
   identityProvider?: IdentityProvider;
@@ -193,7 +193,7 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
             },
           },
         });
-        toastHelper.info(`SSO ${basicInfo.name} created`);
+        toast.success(`SSO ${basicInfo.name} created`);
       } else {
         await api.patchIdentityProvider({
           id: identityProvider?.id,
@@ -206,11 +206,11 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
             },
           },
         });
-        toastHelper.info(`SSO ${basicInfo.name} updated`);
+        toast.success(`SSO ${basicInfo.name} updated`);
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
     if (confirmCallback) {
       confirmCallback();

web/src/components/CreateResourceDialog.tsx

 import { Button, Input, Select, Option, Typography, List, ListItem, Autocomplete, Tooltip } from "@mui/joy";
 import React, { useRef, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useResourceStore } from "../store/module";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import { generateDialog } from "./Dialog";
 
 const fileTypeAutocompleteOptions = ["image/*", "text/*", "audio/*", "video/*", "application/*"];
@@ -132,7 +132,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
 
     if (onConfirm) {

web/src/components/CreateShortcutDialog.tsx

 import dayjs from "dayjs";
 import { useCallback, useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useShortcutStore, useTagStore } from "../store/module";
 import { filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import Selector from "./base/Selector";
 import "../less/create-shortcut-dialog.less";
 
@@ -42,12 +42,12 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
 
   const handleSaveBtnClick = async () => {
     if (!title) {
-      toastHelper.error(t("shortcut-list.title-required"));
+      toast.error(t("shortcut-list.title-required"));
       return;
     }
     for (const filter of filters) {
       if (!filter.value.value) {
-        toastHelper.error(t("shortcut-list.value-required"));
+        toast.error(t("shortcut-list.value-required"));
         return;
       }
     }
@@ -66,7 +66,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
     destroy();
   };
@@ -75,7 +75,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     if (filters.length > 0) {
       const lastFilter = filters[filters.length - 1];
       if (lastFilter.value.value === "") {
-        toastHelper.info(t("shortcut-list.fill-previous"));
+        toast(t("shortcut-list.fill-previous"));
         return;
       }
     }

web/src/components/CreateStorageServiceDialog.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { Button, Input, Typography } from "@mui/joy";
 import * as api from "../helpers/api";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 
 interface Props extends DialogProps {
   storage?: ObjectStorage;
@@ -77,7 +77,7 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
     if (confirmCallback) {
       confirmCallback();

web/src/components/CreateTagDialog.tsx

 import { Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTagStore } from "../store/module";
 import { getTagSuggestionList } from "../helpers/api";
 import { matcher } from "../labs/marked/matcher";
 import Tag from "../labs/marked/parser/Tag";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import { generateDialog } from "./Dialog";
 
 type Props = DialogProps;
@@ -54,7 +54,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
 
   const handleSaveBtnClick = async () => {
     if (!validateTagName(tagName)) {
-      toastHelper.error("Invalid tag name");
+      toast.error("Invalid tag name");
       return;
     }
 
@@ -63,7 +63,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
       setTagName("");
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/EmbedMemoDialog.tsx

 import React from "react";
+import { toast } from "react-hot-toast";
+import copy from "copy-to-clipboard";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import copy from "copy-to-clipboard";
-import toastHelper from "./Toast";
 
 interface Props extends DialogProps {
   memoId: MemoId;
@@ -17,7 +17,7 @@ const EmbedMemoDialog: React.FC<Props> = (props: Props) => {
 
   const handleCopyCode = () => {
     copy(memoEmbeddedCode());
-    toastHelper.success("Succeed to copy code to clipboard.");
+    toast.success("Succeed to copy code to clipboard.");
   };
 
   return (

web/src/components/Memo.tsx

@@ -2,11 +2,11 @@ import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import dayjs from "dayjs";
 import { memo, useEffect, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useEditorStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import showShareMemo from "./ShareMemoDialog";
@@ -64,7 +64,7 @@ const Memo: React.FC<Props> = (props: Props) => {
 
   const handleCopyContent = () => {
     copy(memo.content);
-    toastHelper.success(t("message.succeed-copy-content"));
+    toast.success(t("message.succeed-copy-content"));
   };
 
   const handleTogglePinMemoBtnClick = async () => {
@@ -103,7 +103,7 @@ const Memo: React.FC<Props> = (props: Props) => {
       });
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
 
     if (editorStore.getState().editMemoId === memo.id) {

web/src/components/MemoEditor.tsx

 import { isNumber, last, toLower, uniq } from "lodash-es";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { getMatchedNodes } from "../labs/marked";
 import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
@@ -15,7 +16,6 @@ import {
 } from "../store/module";
 import * as storage from "../helpers/storage";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import Selector from "./base/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import ResourceIcon from "./ResourceIcon";
@@ -214,7 +214,7 @@ const MemoEditor = () => {
       resource = await resourceStore.createResourceWithBlob(file);
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
 
     setState((state) => {
@@ -293,7 +293,7 @@ const MemoEditor = () => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
     setState((state) => {
       return {

web/src/components/MemoList.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useLocationStore, useMemoStore, useShortcutStore } from "../store/module";
 import { TAG_REG, LINK_REG } from "../labs/marked/parser";
 import * as utils from "../helpers/utils";
 import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
 import { checkShouldShowMemoWithFilters } from "../helpers/filter";
-import toastHelper from "./Toast";
 import Memo from "./Memo";
 import "../less/memo-list.less";
 
@@ -95,7 +95,7 @@ const MemoList = () => {
       })
       .catch((error) => {
         console.error(error);
-        toastHelper.error(error.response.data.message);
+        toast.error(error.response.data.message);
       });
   }, []);
 
@@ -125,7 +125,7 @@ const MemoList = () => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/components/ResourcesDialog.tsx

 import { Button } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import { useEffect } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import useLoading from "../hooks/useLoading";
 import { useResourceStore } from "../store/module";
 import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import Dropdown from "./base/Dropdown";
 import { generateDialog } from "./Dialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
@@ -29,7 +29,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       .fetchResourceList()
       .catch((error) => {
         console.error(error);
-        toastHelper.error(error.response.data.message);
+        toast.error(error.response.data.message);
       })
       .finally(() => {
         loadingState.setFinish();
@@ -55,7 +55,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
   const handleCopyResourceLinkBtnClick = (resource: Resource) => {
     const url = getResourceUrl(resource);
     copy(url);
-    toastHelper.success(t("message.succeed-copy-resource-link"));
+    toast.success(t("message.succeed-copy-resource-link"));
   };
 
   const handleDeleteUnusedResourcesBtnClick = () => {
@@ -68,7 +68,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       return false;
     });
     if (unusedResources.length === 0) {
-      toastHelper.success(t("resources.no-unused-resources"));
+      toast.success(t("resources.no-unused-resources"));
       return;
     }
     showCommonDialog({

web/src/components/ResourcesSelectorDialog.tsx

 import { Button, Checkbox } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import useLoading from "../hooks/useLoading";
 import { useEditorStore, useResourceStore } from "../store/module";
 import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import { generateDialog } from "./Dialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import "../less/resources-selector-dialog.less";
@@ -32,7 +32,7 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
       .fetchResourceList()
       .catch((error) => {
         console.error(error);
-        toastHelper.error(error.response.data.message);
+        toast.error(error.response.data.message);
       })
       .finally(() => {
         loadingState.setFinish();

web/src/components/Settings/MemberSection.tsx

 import React, { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../../store/module";
 import * as api from "../../helpers/api";
-import toastHelper from "../Toast";
 import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
@@ -48,7 +48,7 @@ const PreferencesSection = () => {
 
   const handleCreateUserBtnClick = async () => {
     if (state.createUserUsername === "" || state.createUserPassword === "") {
-      toastHelper.error(t("message.fill-form"));
+      toast.error(t("message.fill-form"));
       return;
     }
 
@@ -61,7 +61,7 @@ const PreferencesSection = () => {
     try {
       await api.createUser(userCreate);
     } catch (error: any) {
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
     await fetchUserList();
     setState({

web/src/components/Settings/SSOSection.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import * as api from "../../helpers/api";
 import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
 import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
-import toastHelper from "../Toast";
 
 const SSOSection = () => {
   const { t } = useTranslation();
@@ -32,7 +32,7 @@ const SSOSection = () => {
           await api.deleteIdentityProvider(identityProvider.id);
         } catch (error: any) {
           console.error(error);
-          toastHelper.error(error.response.data.message);
+          toast.error(error.response.data.message);
         }
         await fetchIdentityProviderList();
       },

web/src/components/Settings/StorageSection.tsx

 import { Divider, Select, Option } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
 import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
-import toastHelper from "../Toast";
 
 const StorageSection = () => {
   const { t } = useTranslation();
@@ -50,7 +50,7 @@ const StorageSection = () => {
           await api.deleteStorage(storage.id);
         } catch (error: any) {
           console.error(error);
-          toastHelper.error(error.response.data.message);
+          toast.error(error.response.data.message);
         }
         await fetchStorageList();
       },

web/src/components/Settings/SystemSection.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Button, Divider, Input, Switch, Textarea } from "@mui/joy";
 import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
-import toastHelper from "../Toast";
 import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
 import { useAppDispatch } from "../../store";
 import { setGlobalState } from "../../store/reducer/global";
@@ -83,7 +83,7 @@ const SystemSection = () => {
       console.error(error);
       return;
     }
-    toastHelper.success(t("message.succeed-vacuum-database"));
+    toast.success(t("message.succeed-vacuum-database"));
   };
 
   const handleOpenAIApiKeyChanged = (value: string) => {
@@ -103,7 +103,7 @@ const SystemSection = () => {
       console.error(error);
       return;
     }
-    toastHelper.success("OpenAI Api Key updated");
+    toast.success("OpenAI Api Key updated");
   };
 
   const handleOpenAIApiHostChanged = (value: string) => {
@@ -123,7 +123,7 @@ const SystemSection = () => {
       console.error(error);
       return;
     }
-    toastHelper.success("OpenAI Api Host updated");
+    toast.success("OpenAI Api Host updated");
   };
 
   const handleAdditionalStyleChanged = (value: string) => {
@@ -143,7 +143,7 @@ const SystemSection = () => {
       console.error(error);
       return;
     }
-    toastHelper.success(t("message.succeed-update-additional-style"));
+    toast.success(t("message.succeed-update-additional-style"));
   };
 
   const handleAdditionalScriptChanged = (value: string) => {
@@ -163,7 +163,7 @@ const SystemSection = () => {
       console.error(error);
       return;
     }
-    toastHelper.success(t("message.succeed-update-additional-script"));
+    toast.success(t("message.succeed-update-additional-script"));
   };
 
   const handleDisablePublicMemosChanged = async (value: boolean) => {

web/src/components/ShareMemoDialog.tsx

 import { Select, Option } from "@mui/joy";
 import { QRCodeSVG } from "qrcode.react";
 import React, { useEffect, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import copy from "copy-to-clipboard";
 import { toLower } from "lodash-es";
@@ -12,7 +13,6 @@ import { getMemoStats } from "../helpers/api";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import "../less/share-memo-dialog.less";
@@ -92,7 +92,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
 
   const handleCopyLinkBtnClick = () => {
     copy(`${window.location.origin}/m/${memo.id}`);
-    toastHelper.success(t("message.succeed-copy-link"));
+    toast.success(t("message.succeed-copy-link"));
   };
 
   const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {

web/src/components/ShortcutList.tsx

 import { useEffect } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useLocationStore, useShortcutStore } from "../store/module";
 import * as utils from "../helpers/utils";
 import useToggle from "../hooks/useToggle";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
-import toastHelper from "./Toast";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
 
 const ShortcutList = () => {
@@ -87,7 +87,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
         }
       } catch (error: any) {
         console.error(error);
-        toastHelper.error(error.response.data.message);
+        toast.error(error.response.data.message);
       }
     } else {
       toggleConfirmDeleteBtn();

web/src/components/Toast.tsx

-import { useEffect } from "react";
-import { createRoot, Root } from "react-dom/client";
-import "../less/toast.less";
-
-type ToastType = "normal" | "success" | "info" | "error";
-
-type ToastConfig = {
-  type: ToastType;
-  content: string;
-  duration: number;
-};
-
-type ToastItemProps = {
-  type: ToastType;
-  content: string;
-  duration: number;
-  destroy: FunctionType;
-};
-
-const Toast: React.FC<ToastItemProps> = (props: ToastItemProps) => {
-  const { destroy, duration } = props;
-
-  useEffect(() => {
-    if (duration > 0) {
-      setTimeout(() => {
-        destroy();
-      }, duration);
-    }
-  }, []);
-
-  return (
-    <div className="toast-container" onClick={destroy}>
-      <p className="content-text">{props.content}</p>
-    </div>
-  );
-};
-
-// toast animation duration.
-const TOAST_ANIMATION_DURATION = 400;
-
-const initialToastHelper = () => {
-  const shownToastContainers: [Root, HTMLDivElement][] = [];
-  let shownToastAmount = 0;
-
-  const wrapperClassName = "toast-list-container";
-  const tempDiv = document.createElement("div");
-  tempDiv.className = wrapperClassName;
-  document.body.appendChild(tempDiv);
-  const toastWrapper = tempDiv;
-
-  const showToast = (config: ToastConfig) => {
-    const tempDiv = document.createElement("div");
-    const toast = createRoot(tempDiv);
-    tempDiv.className = `toast-wrapper ${config.type}`;
-    toastWrapper.appendChild(tempDiv);
-    shownToastAmount++;
-    shownToastContainers.push([toast, tempDiv]);
-
-    const cbs = {
-      destroy: () => {
-        tempDiv.classList.add("destroy");
-
-        setTimeout(() => {
-          if (!tempDiv.parentElement) {
-            return;
-          }
-
-          shownToastAmount--;
-          if (shownToastAmount === 0) {
-            for (const [root, tempDiv] of shownToastContainers) {
-              root.unmount();
-              tempDiv.remove();
-            }
-            shownToastContainers.splice(0, shownToastContainers.length);
-          }
-        }, TOAST_ANIMATION_DURATION);
-      },
-    };
-
-    toast.render(<Toast {...config} destroy={cbs.destroy} />);
-
-    setTimeout(() => {
-      tempDiv.classList.add("showup");
-    }, 10);
-
-    return cbs;
-  };
-
-  const info = (content: string, duration = 3000) => {
-    return showToast({ type: "normal", content, duration });
-  };
-
-  const success = (content: string, duration = 3000) => {
-    return showToast({ type: "success", content, duration });
-  };
-
-  const error = (content: string, duration = 5000) => {
-    return showToast({ type: "error", content, duration });
-  };
-
-  return {
-    info,
-    success,
-    error,
-  };
-};
-
-const toastHelper = initialToastHelper();
-
-export default toastHelper;

web/src/components/UpdateAccountDialog.tsx

 import { isEqual } from "lodash-es";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../store/module";
 import { convertFileToBase64 } from "../helpers/utils";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import UserAvatar from "./UserAvatar";
 
 type Props = DialogProps;
@@ -41,7 +41,7 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
     if (files && files.length > 0) {
       const image = files[0];
       if (image.size > 2 * 1024 * 1024) {
-        toastHelper.error("Max file size is 2MB");
+        toast.error("Max file size is 2MB");
         return;
       }
       try {
@@ -54,7 +54,7 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
         });
       } catch (error) {
         console.error(error);
-        toastHelper.error(`Failed to convert image to base64`);
+        toast.error(`Failed to convert image to base64`);
       }
     }
   };
@@ -88,7 +88,7 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
 
   const handleSaveBtnClick = async () => {
     if (state.username === "") {
-      toastHelper.error(t("message.fill-all"));
+      toast.error(t("message.fill-all"));
       return;
     }
 
@@ -110,11 +110,11 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
         userPatch.email = state.email;
       }
       await userStore.patchUser(userPatch);
-      toastHelper.info(t("message.update-succeed"));
+      toast.success(t("message.update-succeed"));
       handleCloseBtnClick();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error);
+      toast.error(error.response.data.error);
     }
   };
 

web/src/components/UpdateCustomizedProfileDialog.tsx

 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "react-hot-toast";
 import { useGlobalStore } from "../store/module";
 import * as api from "../helpers/api";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import LocaleSelect from "./LocaleSelect";
 import AppearanceSelect from "./AppearanceSelect";
 
@@ -77,7 +77,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
 
   const handleSaveButtonClick = async () => {
     if (state.name === "") {
-      toastHelper.error("Please fill server name");
+      toast.error("Please fill server name");
       return;
     }
 
@@ -91,7 +91,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
       console.error(error);
       return;
     }
-    toastHelper.success(t("message.succeed-update-customized-profile"));
+    toast.success(t("message.succeed-update-customized-profile"));
     destroy();
   };
 

web/src/labs/marked/parser/CodeBlock.tsx

 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
+import { toast } from "react-hot-toast";
 import { matcher } from "../matcher";
-import toastHelper from "../../../components/Toast";
 
 export const CODE_BLOCK_REG = /^```(\S*?)\s([\s\S]*?)```/;
 
@@ -25,7 +25,7 @@ const renderer = (rawStr: string) => {
 
   const handleCopyButtonClick = () => {
     copy(matchResult[2]);
-    toastHelper.success("Copy succeed");
+    toast.success("Copy succeed");
   };
 
   return (

web/src/less/toast.less

-.toast-list-container {
-  @apply flex flex-col justify-start items-end fixed top-2 right-4 max-h-full;
-  z-index: 9999;
-
-  > .toast-wrapper {
-    @apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow-lg rounded bg-white mt-6 py-2 px-4;
-    min-width: 6em;
-    left: calc(100% + 32px);
-    transition: all 0.4s ease;
-
-    &.showup {
-      @apply left-0 visible;
-    }
-
-    &.destory {
-      @apply invisible;
-      left: calc(100% + 32px);
-    }
-
-    > .toast-container {
-      > .content-text {
-        @apply text-sm whitespace-pre-wrap word-break leading-6 max-w-xs;
-      }
-    }
-  }
-}

web/src/pages/Auth.tsx

 import { Button, Divider } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useGlobalStore, useUserStore } from "../store/module";
 import * as api from "../helpers/api";
 import { absolutifyLink } from "../helpers/utils";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
-import toastHelper from "../components/Toast";
 import AppearanceSelect from "../components/AppearanceSelect";
 import LocaleSelect from "../components/LocaleSelect";
 import "../less/auth.less";
@@ -63,11 +63,11 @@ const Auth = () => {
       if (user) {
         window.location.href = "/";
       } else {
-        toastHelper.error(t("message.login-failed"));
+        toast.error(t("message.login-failed"));
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error);
+      toast.error(error.response.data.error);
     }
     actionBtnLoadingState.setFinish();
   };
@@ -84,11 +84,11 @@ const Auth = () => {
       if (user) {
         window.location.href = "/";
       } else {
-        toastHelper.error(t("common.singup-failed"));
+        toast.error(t("common.singup-failed"));
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error);
+      toast.error(error.response.data.error);
     }
     actionBtnLoadingState.setFinish();
   };

web/src/pages/AuthCallback.tsx

 import { last } from "lodash-es";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 import * as api from "../helpers/api";
-import toastHelper from "../components/Toast";
 import { absolutifyLink } from "../helpers/utils";
 import { useUserStore } from "../store/module";
 import Icon from "../components/Icon";
@@ -41,7 +41,7 @@ const AuthCallback = () => {
             if (user) {
               window.location.href = "/";
             } else {
-              toastHelper.error(t("message.login-failed"));
+              toast.error(t("message.login-failed"));
             }
           })
           .catch((error: any) => {

web/src/pages/EmbedMemo.tsx

 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { useMemoStore } from "../store/module";
 import useLoading from "../hooks/useLoading";
-import toastHelper from "../components/Toast";
 import MemoContent from "../components/MemoContent";
 import MemoResources from "../components/MemoResources";
 
@@ -36,8 +36,7 @@ const EmbedMemo = () => {
           loadingState.setFinish();
         })
         .catch((error) => {
-          console.error(error);
-          toastHelper.error(error.response.data.message);
+          toast.error(error.response.data.message);
         });
     }
   }, []);

web/src/pages/Explore.tsx

 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useGlobalStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
 import { TAG_REG } from "../labs/marked/parser";
 import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
 import useLoading from "../hooks/useLoading";
-import toastHelper from "../components/Toast";
 import Icon from "../components/Icon";
 import MemoFilter from "../components/MemoFilter";
 import Memo from "../components/Memo";
@@ -84,7 +84,7 @@ const Explore = () => {
       });
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toast.error(error.response.data.message);
     }
   };
 

web/src/pages/Home.tsx

 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
+import { toast } from "react-hot-toast";
 import { useGlobalStore, useUserStore } from "../store/module";
-import toastHelper from "../components/Toast";
 import MemoEditor from "../components/MemoEditor";
 import MemoFilter from "../components/MemoFilter";
 import MemoList from "../components/MemoList";
@@ -21,7 +21,7 @@ function Home() {
 
     if (userStore.isVisitorMode()) {
       if (!owner) {
-        toastHelper.error(t("message.user-not-found"));
+        toast.error(t("message.user-not-found"));
       }
     }
   }, [location]);

web/src/pages/MemoDetail.tsx

 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { useGlobalStore, useLocationStore, useMemoStore, useUserStore } from "../store/module";
 import useLoading from "../hooks/useLoading";
-import toastHelper from "../components/Toast";
 import MemoContent from "../components/MemoContent";
 import MemoResources from "../components/MemoResources";
 import "../less/memo-detail.less";
@@ -44,7 +44,7 @@ const MemoDetail = () => {
         })
         .catch((error) => {
           console.error(error);
-          toastHelper.error(error.response.data.message);
+          toast.error(error.response.data.message);
         });
     }
   }, [location]);

web/yarn.lock

@@ -1675,6 +1675,11 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.12.tgz#6c1645314ac9a68fe76408e1f502c63df8a39042"
+  integrity sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -2505,6 +2510,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hot-toast@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d"
+  integrity sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==
+  dependencies:
+    goober "^2.1.10"
+
 react-i18next@^11.18.6:
   version "11.18.6"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.6.tgz#e159c2960c718c1314f1e8fcaa282d1c8b167887"