Refactor toast module (#26677)

1. Do not use "async"
2. Call `hideToast` instead of `removeElement` for manual closing

Author: wxiaoguang

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);
   }
 }
 

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);
 }

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();
 });