1. Do not use "async" 2. Call `hideToast` instead of `removeElement` for manual closingtags/v1.21.0-rc0
@@ -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); | |||
} | |||
} | |||
@@ -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); | |||
} |
@@ -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(); | |||
}); |