mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-07-05 08:06:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor toast module (#26677)

Browse source 
1. Do not use "async"
2. Call `hideToast` instead of `removeElement` for manual closing
This commit is contained in:
wxiaoguang 2023-08-23 15:25:13 +08:00 committed by GitHub
parent e4b2bdfbc0
commit a428591f6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web_src/js/features/common-global.js
View file

@ -95,14 +95,14 @@ async function fetchActionDoRequest(actionElem, url, opt) {
const data = await resp.json(); const data = await resp.json();
// the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error" // 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. // 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 { } else {
await showErrorToast(`server error: ${resp.status}`); showErrorToast(`server error: ${resp.status}`);
} }
} catch (e) { } catch (e) {
console.error('error when doRequest', e); console.error('error when doRequest', e);
actionElem.classList.remove('is-loading', 'small-loading-icon'); actionElem.classList.remove('is-loading', 'small-loading-icon');
await showErrorToast(i18n.network_error); showErrorToast(i18n.network_error);
} }
} }

23
web_src/js/modules/toast.js
View file

@ -1,6 +1,6 @@
import {htmlEscape} from 'escape-goat'; import {htmlEscape} from 'escape-goat';
import {svg} from '../svg.js'; 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 = { const levels = {
info: { info: {
@ -21,9 +21,7 @@ const levels = {
}; };
// See https://github.com/apvarun/toastify-js#api for options // See https://github.com/apvarun/toastify-js#api for options
async function showToast(message, level, {gravity, position, duration, ...other} = {}) { function showToast(message, level, {gravity, position, duration, ...other} = {}) {
if (!message) return;
const {icon, background, duration: levelDuration} = levels[level ?? 'info']; const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
const toast = Toastify({ const toast = Toastify({
@ -41,20 +39,17 @@ async function showToast(message, level, {gravity, position, duration, ...other}
}); });
toast.showToast(); toast.showToast();
toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
toast.toastElement.querySelector('.toast-close').addEventListener('click', () => {
toast.removeElement(toast.toastElement);
});
} }
export async function showInfoToast(message, opts) { export function showInfoToast(message, opts) {
return await showToast(message, 'info', opts); return showToast(message, 'info', opts);
} }
export async function showWarningToast(message, opts) { export function showWarningToast(message, opts) {
return await showToast(message, 'warning', opts); return showToast(message, 'warning', opts);
} }
export async function showErrorToast(message, opts) { export function showErrorToast(message, opts) {
return await showToast(message, 'error', opts); return showToast(message, 'error', opts);
} }

6
web_src/js/modules/toast.test.js
View file

@ -2,16 +2,16 @@ import {test, expect} from 'vitest';
import {showInfoToast, showErrorToast, showWarningToast} from './toast.js'; import {showInfoToast, showErrorToast, showWarningToast} from './toast.js';
test('showInfoToast', async () => { test('showInfoToast', async () => {
await showInfoToast('success 😀', {duration: -1}); showInfoToast('success 😀', {duration: -1});
expect(document.querySelector('.toastify')).toBeTruthy(); expect(document.querySelector('.toastify')).toBeTruthy();
}); });
test('showWarningToast', async () => { test('showWarningToast', async () => {
await showWarningToast('warning 😐', {duration: -1}); showWarningToast('warning 😐', {duration: -1});
expect(document.querySelector('.toastify')).toBeTruthy(); expect(document.querySelector('.toastify')).toBeTruthy();
}); });
test('showErrorToast', async () => { test('showErrorToast', async () => {
await showErrorToast('error 🙁', {duration: -1}); showErrorToast('error 🙁', {duration: -1});
expect(document.querySelector('.toastify')).toBeTruthy(); expect(document.querySelector('.toastify')).toBeTruthy();
}); });