YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
boojack
2023-03-09 08:54:14 +08:00
committed by GitHub
parent df6b4b0607
commit f86816fea2
38 changed files with 119 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@ -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",

2
web/src/App.tsx
View File

@ -1,5 +1,6 @@
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>
);
};

8
web/src/components/ArchivedMemo.tsx
View File

@ -1,8 +1,8 @@
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);
}
};

4
web/src/components/ArchivedMemoDialog.tsx
View File

@ -1,10 +1,10 @@
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();

4
web/src/components/AskAIDialog.tsx
View File

@ -1,11 +1,11 @@
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();

10
web/src/components/ChangeMemberPasswordDialog.tsx
View File

@ -1,9 +1,9 @@
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);
}
};

10
web/src/components/ChangeMemoCreatedTsDialog.tsx
View File

@ -1,10 +1,10 @@
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);
}
};

10
web/src/components/ChangePasswordDialog.tsx
View File

@ -1,9 +1,9 @@
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);
}
};

8
web/src/components/ChangeResourceFilenameDialog.tsx
View File

@ -1,9 +1,9 @@
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);
}
};

8
web/src/components/CreateIdentityProviderDialog.tsx
View File

@ -1,11 +1,11 @@
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();

4
web/src/components/CreateResourceDialog.tsx
View File

@ -1,8 +1,8 @@
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) {

10
web/src/components/CreateShortcutDialog.tsx
View File

@ -1,12 +1,12 @@
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;
}
}

4
web/src/components/CreateStorageServiceDialog.tsx
View File

@ -1,9 +1,9 @@
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();

6
web/src/components/CreateTagDialog.tsx
View File

@ -1,11 +1,11 @@
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);
}
};

6
web/src/components/EmbedMemoDialog.tsx
View File

@ -1,8 +1,8 @@
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 (

6
web/src/components/Memo.tsx
View File

@ -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) {

6
web/src/components/MemoEditor.tsx
View File

@ -1,5 +1,6 @@
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 {

6
web/src/components/MemoList.tsx
View File

@ -1,11 +1,11 @@
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);
}
};

8
web/src/components/ResourcesDialog.tsx
View File

@ -1,12 +1,12 @@
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({

4
web/src/components/ResourcesSelectorDialog.tsx
View File

@ -1,11 +1,11 @@
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();

6
web/src/components/Settings/MemberSection.tsx
View File

@ -1,8 +1,8 @@
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({

4
web/src/components/Settings/SSOSection.tsx
View File

@ -1,10 +1,10 @@
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();
},

4
web/src/components/Settings/StorageSection.tsx
View File

@ -1,12 +1,12 @@
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();
},

12
web/src/components/Settings/SystemSection.tsx
View File

@ -1,9 +1,9 @@
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) => {

4
web/src/components/ShareMemoDialog.tsx
View File

@ -1,6 +1,7 @@
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) => {

4
web/src/components/ShortcutList.tsx
View File

@ -1,11 +1,11 @@
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();

110
web/src/components/Toast.tsx
View File

@ -1,110 +0,0 @@
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;

12
web/src/components/UpdateAccountDialog.tsx
View File

@ -1,11 +1,11 @@
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);
}
};

6
web/src/components/UpdateCustomizedProfileDialog.tsx
View File

@ -1,10 +1,10 @@
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();
};

4
web/src/labs/marked/parser/CodeBlock.tsx
View File

@ -1,7 +1,7 @@
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 (

26
web/src/less/toast.less
View File

@ -1,26 +0,0 @@
.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;
}
}
}
}

10
web/src/pages/Auth.tsx
View File

@ -1,12 +1,12 @@
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();
};

4
web/src/pages/AuthCallback.tsx
View File

@ -1,9 +1,9 @@
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) => {

5
web/src/pages/EmbedMemo.tsx
View File

@ -1,11 +1,11 @@
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);
});
}
}, []);

4
web/src/pages/Explore.tsx
View File

@ -1,11 +1,11 @@
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);
}
};

4
web/src/pages/Home.tsx
View File

@ -1,8 +1,8 @@
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]);

4
web/src/pages/MemoDetail.tsx
View File

@ -1,11 +1,11 @@
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]);

12
web/yarn.lock
View File

@ -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"