mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 20:22:14 +02:00
Refactor toast module (#26677)
1. Do not use "async" 2. Call `hideToast` instead of `removeElement` for manual closing
This commit is contained in:
parent
e4b2bdfbc0
commit
a428591f6b
3 changed files with 15 additions and 20 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue