demarches-normaliennes/app/javascript/shared/utils.ts

349 lines
9 KiB
TypeScript

import { session } from '@hotwired/turbo';
import { z } from 'zod';
const Gon = z
.object({
autosave: z
.object({
debounce_delay: z.number().default(0),
status_visible_duration: z.number().default(0)
})
.default({}),
autocomplete: z
.object({
api_geo_url: z.string().optional(),
api_adresse_url: z.string().optional(),
api_education_url: z.string().optional()
})
.default({}),
locale: z.string().default('fr'),
matomo: z
.object({
cookieDomain: z.string().optional(),
domain: z.string().optional(),
enabled: z.boolean().default(false),
host: z.string().optional(),
key: z.string().or(z.number()).nullish()
})
.default({}),
sentry: z
.object({
key: z.string().nullish(),
enabled: z.boolean().default(false),
environment: z.string().optional(),
user: z.object({ id: z.string() }).default({ id: '' }),
browser: z.object({ modern: z.boolean() }).default({ modern: false })
})
.default({}),
crisp: z
.object({
key: z.string().nullish(),
enabled: z.boolean().default(false),
administrateur: z
.object({
email: z.string(),
DS_SIGN_IN_COUNT: z.number(),
DS_NB_DEMARCHES_BROUILLONS: z.number(),
DS_NB_DEMARCHES_ACTIVES: z.number(),
DS_NB_DEMARCHES_ARCHIVES: z.number(),
DS_ID: z.number()
})
.default({
email: '',
DS_SIGN_IN_COUNT: 0,
DS_NB_DEMARCHES_BROUILLONS: 0,
DS_NB_DEMARCHES_ACTIVES: 0,
DS_NB_DEMARCHES_ARCHIVES: 0,
DS_ID: 0
})
})
.default({})
})
.default({});
declare const window: Window & typeof globalThis & { gon: unknown };
export function getConfig() {
return Gon.parse(window.gon);
}
export function show(el: Element | null) {
el?.classList.remove('hidden');
}
export function hide(el: Element | null) {
el?.classList.add('hidden');
}
export function toggle(el: Element | null, force?: boolean) {
if (force == undefined) {
el?.classList.toggle('hidden');
} else if (force) {
el?.classList.remove('hidden');
} else {
el?.classList.add('hidden');
}
}
export function toggleExpandIcon(icon: Element | null) {
icon?.classList.toggle('fr-icon-add-line');
icon?.classList?.toggle('fr-icon-subtract-line');
}
export function enable(
el: HTMLSelectElement | HTMLInputElement | HTMLButtonElement | null
) {
el && (el.disabled = false);
}
export function disable(
el: HTMLSelectElement | HTMLInputElement | HTMLButtonElement | null
) {
el && (el.disabled = true);
}
export function hasClass(el: HTMLElement | null, cssClass: string) {
return el?.classList.contains(cssClass);
}
export function addClass(el: HTMLElement | null, cssClass: string) {
el?.classList.add(cssClass);
}
export function removeClass(el: HTMLElement | null, cssClass: string) {
el?.classList.remove(cssClass);
}
export function delegate<E extends Event = Event>(
eventNames: string,
selector: string,
callback: (event: E) => void
): () => void {
const subscriptions = eventNames
.split(' ')
.map((eventName) =>
delegateEvent(
document,
selector,
eventName,
callback as (event: Event) => void
)
);
return () => subscriptions.forEach((unsubscribe) => unsubscribe());
}
export class ResponseError extends Error {
readonly response: Response;
readonly jsonBody?: unknown;
readonly textBody?: string;
constructor(response: Response, jsonBody?: unknown, textBody?: string) {
super(String(response.statusText || response.status));
this.response = response;
this.jsonBody = jsonBody;
this.textBody = textBody;
}
}
const FETCH_TIMEOUT = 30 * 1000; // 30 sec
// Perform an HTTP request using `fetch` API,
// and handle the result depending on the MIME type.
//
// Usage:
//
// Execute a GET request, and return the response as parsed JSON
// const parsedJson = await httpRequest(url).json();
//
// Execute a POST request with some JSON payload
// const parsedJson = await httpRequest(url, { method: 'POST', json: '{ "foo": 1 }').json();
//
// Execute a GET request, and apply the Turbo stream in the Response
// await httpRequest(url).turbo();
//
export function httpRequest(
url: string,
{
csrf = true,
timeout = FETCH_TIMEOUT,
json,
controller,
...init
}: RequestInit & {
csrf?: boolean;
json?: unknown;
timeout?: number | false;
controller?: AbortController;
} = {}
) {
const headers = init.headers ? new Headers(init.headers) : new Headers();
if (csrf) {
headers.set('x-csrf-token', csrfToken() ?? '');
headers.set('x-requested-with', 'XMLHttpRequest');
init.credentials = 'same-origin';
}
init.headers = headers;
init.method = init.method?.toUpperCase() ?? 'GET';
if (json) {
headers.set('content-type', 'application/json');
init.body = JSON.stringify(json);
}
let timer: ReturnType<typeof setTimeout>;
if (!init.signal) {
controller = createAbortController(controller);
if (controller) {
init.signal = controller.signal;
if (timeout != false) {
timer = setTimeout(() => controller?.abort(), timeout);
}
}
}
const request = async (
init: RequestInit,
accept?: string
): Promise<Response> => {
if (accept && init.headers instanceof Headers) {
init.headers.set('accept', accept);
}
try {
const response = await fetch(url, init);
if (response.ok) {
return response;
} else if (response.status == 401) {
location.reload(); // reload whole page so Devise will redirect to sign-in
}
const contentType = response.headers.get('content-type');
let jsonBody: unknown;
let textBody: string | undefined;
try {
if (contentType?.match('json')) {
jsonBody = await response.clone().json();
} else {
textBody = await response.clone().text();
}
} catch {
// ignore
}
throw new ResponseError(response, jsonBody, textBody);
} finally {
clearTimeout(timer);
}
};
return {
async json<T>(): Promise<T | null> {
const response = await request(init, 'application/json');
if (response.status == 204) {
return null;
}
return response.json();
},
async turbo(): Promise<void> {
const response = await request(init, 'text/vnd.turbo-stream.html');
if (response.status != 204) {
const stream = await response.text();
session.renderStreamMessage(stream);
}
}
};
}
function createAbortController(controller?: AbortController) {
if (controller) {
return controller;
} else if (window.AbortController) {
return new AbortController();
}
return;
}
export function isNumeric(s: string) {
const n = parseFloat(s);
return !isNaN(n) && isFinite(n);
}
export function isButtonElement(
element: Element
): element is HTMLButtonElement {
return (
element.tagName == 'BUTTON' ||
(element.tagName == 'INPUT' &&
(element as HTMLInputElement).type == 'submit')
);
}
export function isSelectElement(
element: HTMLElement
): element is HTMLSelectElement {
return element.tagName == 'SELECT';
}
export function isCheckboxOrRadioInputElement(
element: HTMLElement & { type?: string }
): element is HTMLInputElement {
return (
element.tagName == 'INPUT' &&
(element.type == 'checkbox' || element.type == 'radio')
);
}
export function isDateInputElement(
element: HTMLElement & { type?: string }
): element is HTMLInputElement {
return (
element.tagName == 'INPUT' &&
(element.type == 'date' || element.type == 'datetime-local')
);
}
export function isTextInputElement(
element: HTMLElement & { type?: string }
): element is HTMLInputElement {
return (
['INPUT', 'TEXTAREA'].includes(element.tagName) &&
typeof element.type == 'string' &&
!['checkbox', 'radio', 'file'].includes(element.type)
);
}
export function fire<T>(obj: EventTarget, name: string, data?: T) {
const event = new CustomEvent(name, {
bubbles: true,
cancelable: true,
detail: data
});
obj.dispatchEvent(event);
return !event.defaultPrevented;
}
function csrfToken() {
const meta = document.querySelector<HTMLMetaElement>('meta[name=csrf-token]');
return meta?.content;
}
function delegateEvent<E extends Event = Event>(
element: EventTarget,
selector: string,
eventType: string,
handler: (event: E) => void | boolean
): () => void {
const listener = function (event: Event) {
let { target } = event;
while (!!(target instanceof Element) && !target.matches(selector)) {
target = target.parentNode;
}
if (
target instanceof Element &&
handler.call(target, event as E) === false
) {
event.preventDefault();
event.stopPropagation();
}
};
element.addEventListener(eventType, listener);
return () => element.removeEventListener(eventType, listener);
}