From a428591f6b86d4ece21292712a9a5491266303eb Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 23 Aug 2023 15:25:13 +0800 Subject: [PATCH] Refactor toast module (#26677) 1. Do not use "async" 2. Call `hideToast` instead of `removeElement` for manual closing --- web_src/js/features/common-global.js | 6 +++--- web_src/js/modules/toast.js | 23 +++++++++-------------- web_src/js/modules/toast.test.js | 6 +++--- 3 files changed, 15 insertions(+), 20 deletions(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 7291410c1..d02a82a2e 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -95,14 +95,14 @@ async function fetchActionDoRequest(actionElem, url, opt) { const data = await resp.json(); // the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error" // but at the moment, as a new approach, we only use "errorMessage" here, backend can use JSONError() to respond. - await showErrorToast(data.errorMessage || `server error: ${resp.status}`); + showErrorToast(data.errorMessage || `server error: ${resp.status}`); } else { - await showErrorToast(`server error: ${resp.status}`); + showErrorToast(`server error: ${resp.status}`); } } catch (e) { console.error('error when doRequest', e); actionElem.classList.remove('is-loading', 'small-loading-icon'); - await showErrorToast(i18n.network_error); + showErrorToast(i18n.network_error); } } diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index b5899052d..fa075aed4 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -1,6 +1,6 @@ import {htmlEscape} from 'escape-goat'; import {svg} from '../svg.js'; -import Toastify from 'toastify-js'; +import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown const levels = { info: { @@ -21,9 +21,7 @@ const levels = { }; // See https://github.com/apvarun/toastify-js#api for options -async function showToast(message, level, {gravity, position, duration, ...other} = {}) { - if (!message) return; - +function showToast(message, level, {gravity, position, duration, ...other} = {}) { const {icon, background, duration: levelDuration} = levels[level ?? 'info']; const toast = Toastify({ @@ -41,20 +39,17 @@ async function showToast(message, level, {gravity, position, duration, ...other} }); toast.showToast(); - - toast.toastElement.querySelector('.toast-close').addEventListener('click', () => { - toast.removeElement(toast.toastElement); - }); + toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast()); } -export async function showInfoToast(message, opts) { - return await showToast(message, 'info', opts); +export function showInfoToast(message, opts) { + return showToast(message, 'info', opts); } -export async function showWarningToast(message, opts) { - return await showToast(message, 'warning', opts); +export function showWarningToast(message, opts) { + return showToast(message, 'warning', opts); } -export async function showErrorToast(message, opts) { - return await showToast(message, 'error', opts); +export function showErrorToast(message, opts) { + return showToast(message, 'error', opts); } diff --git a/web_src/js/modules/toast.test.js b/web_src/js/modules/toast.test.js index b691aaebb..b5066df0b 100644 --- a/web_src/js/modules/toast.test.js +++ b/web_src/js/modules/toast.test.js @@ -2,16 +2,16 @@ import {test, expect} from 'vitest'; import {showInfoToast, showErrorToast, showWarningToast} from './toast.js'; test('showInfoToast', async () => { - await showInfoToast('success 😀', {duration: -1}); + showInfoToast('success 😀', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); test('showWarningToast', async () => { - await showWarningToast('warning 😐', {duration: -1}); + showWarningToast('warning 😐', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); test('showErrorToast', async () => { - await showErrorToast('error 🙁', {duration: -1}); + showErrorToast('error 🙁', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); });