J'utilise React pour développer une application frontend et j'utilise les méthodes de base Javascsript pour gérer les événements venant du serveur ou en interne Front.
J'ai trouvé sur internet quelques fonctions utiles pour gérer les événements (je n'ai pas retrouvé où !) :
on : abonnement
off : désabonnement
trigger : déclencher un évenement
Pour mon usage, j'ai customisé ces fonctions en ajoutant une callback en paramètre. Résultat j'ai ce code :
Cela me permet de gérer des événements qui héritent de MyEvent.
Le problème est que, ce faisant, je crée une fonction anonyme à chaque souscription et que du coup il est impossible d'utiliser removeEventListener lorsque le composant se démonte.
L'idée était donc bien de garder la référence à la fonction anonyme créée (qui me permet de gérer des callbacks génériques), mais comment simplifier l'usage pour éviter de devoir faire stocker la référence à cette fonction anonyme par tous les composants ?
Eh bien en la stockant moi-même directement dans le state !
Sur le désabonnement, je vais chercher dans le state, la référence à la fonction anonyme stockée pour mon type d'événement.
function buildKey(eventType: string) {
return 'clientside-events.listener.' + eventType;
}
function on(eventType:string, state:any, listener:(detail:MyEvent) => void) {
const resultFunction = function(event:any) {
listener(event.detail)
};
document.addEventListener(eventType, resultFunction);
if (state !== null) {
if (!state.listeners) {
state.listeners = new Map();
}
state.listeners.set(buildKey(eventType), resultFunction);
}
return resultFunction;
}
function off(eventType:string, state:any) {
if (state !== null && state.listeners) {
document.removeEventListener(eventType, state.listeners.get(buildKey(eventType)));
} else {
console.warn('Trying to remove a listener but not found for ' + eventType)
}
}
function trigger(eventType:string, message:ShaanEvent) {
const event = new CustomEvent(eventType, { detail: message });
document.dispatchEvent(event);
}
export { on, off, trigger };
functionalName : a functional name for the export. I put it in the filename, nothing to do with the display
datasource : not a MatTableDataSource, just an array of object
headers : the headers, an array of string, one per column
Sort must be at this level... Because the ng-container describing the column contains mat-sort-header for sorting... So we'll pass the the sort to the generic table.
<app-hpa-table [functionalName]="'a comprehensive name for export'" [dataSource]="array of object" [headers]="an array of string" [parentSort]="sort" matSort matSortActive="weight">
A list of column definition. "name" is in the array 'headers'. Element comes from the array of objects.