82 lines
1.7 KiB
TypeScript
82 lines
1.7 KiB
TypeScript
import { toast } from '@zerodevx/svelte-toast';
|
|
export function errorNotification(message: string) {
|
|
console.error(message);
|
|
if (typeof message !== 'string') {
|
|
toast.push('Ooops, something is not okay, are you okay?');
|
|
} else {
|
|
toast.push(message);
|
|
}
|
|
}
|
|
export function enhance(
|
|
form: HTMLFormElement,
|
|
{
|
|
beforeSubmit,
|
|
final,
|
|
pending,
|
|
error,
|
|
result
|
|
}: {
|
|
beforeSubmit?: () => Promise<void>;
|
|
final?: () => Promise<void>;
|
|
pending?: (data: FormData, form: HTMLFormElement) => void;
|
|
error?: (res: Response, error: Error, form: HTMLFormElement) => void;
|
|
result?: (res: Response, form: HTMLFormElement) => void;
|
|
}
|
|
): { destroy: () => void } {
|
|
let current_token: unknown;
|
|
|
|
async function handle_submit(e: Event) {
|
|
const token = (current_token = {});
|
|
e.preventDefault();
|
|
|
|
let body = new FormData(form);
|
|
let parsedData = body;
|
|
|
|
body.forEach((data, key) => {
|
|
if (data === '' || data === null) parsedData.delete(key);
|
|
});
|
|
body = parsedData;
|
|
|
|
if (beforeSubmit) await beforeSubmit();
|
|
if (pending) pending(body, form);
|
|
|
|
try {
|
|
const res = await fetch(form.action, {
|
|
method: form.method,
|
|
headers: {
|
|
accept: 'application/json'
|
|
},
|
|
body
|
|
});
|
|
|
|
if (token !== current_token) return;
|
|
|
|
if (res.ok) {
|
|
if (result) result(res, form);
|
|
} else if (error) {
|
|
error(res, null, form);
|
|
} else {
|
|
// TODO: Add error frontend here
|
|
const { message } = await res.json();
|
|
errorNotification(message);
|
|
}
|
|
} catch (e) {
|
|
if (error) {
|
|
error(null, e, form);
|
|
} else {
|
|
throw e;
|
|
}
|
|
} finally {
|
|
if (final) final();
|
|
}
|
|
}
|
|
|
|
form.addEventListener('submit', handle_submit);
|
|
|
|
return {
|
|
destroy() {
|
|
form.removeEventListener('submit', handle_submit);
|
|
}
|
|
};
|
|
}
|