Dialogues sur promesse

Qu'est-ce qu'une boîte de dialogue?

Wikipedia dit ce qui suit:
Une boîte de dialogue (boîte de dialogue en anglais) dans une interface utilisateur graphique est un élément d'interface spécial, une fenêtre conçue pour afficher des informations et (ou) recevoir une réponse de l'utilisateur. Il a obtenu son nom parce qu'il effectue une interaction bidirectionnelle ordinateur-utilisateur ("dialogue"): informer l'utilisateur quelque chose et attendre une réponse de sa part.

Nous sommes intéressés par

attendant une réponse de sa part

En d'autres termes, nous ouvrons une fenêtre modale pour obtenir des commentaires et faire quelque chose après cela. Ça ne ressemble à rien? Et je le pensais.

Imaginez une situation, nous avons une application pour la gestion des utilisateurs.
Le scénario est le suivant.

Sur la page principale, l'utilisateur peut ouvrir une fenêtre modale pour une liste d'autres utilisateurs.
Dans la liste, vous pouvez ouvrir une fenêtre modale avec des informations sur l'utilisateur, également dans cette fenêtre il y a un formulaire pour envoyer des lettres.

Lors de l'envoi d'une lettre, l'utilisateur ouvre une fenêtre modale sur l'envoi réussi.
Lorsque l'utilisateur ferme la fenêtre modale, il revient à la fenêtre modale de la liste des utilisateurs, mais il y a un bouton pour écrire une autre lettre, lorsque l'utilisateur clique dessus, il accède à la page de l'utilisateur.

À lire, il est assez difficile d'imaginer cette tâche sous la forme d'un diagramme de séquence.



Maintenant, tout est beaucoup plus simple.

Du point de vue du code, l'ouverture d'une fenêtre modale est une action synchrone, nous pouvons l'ouvrir, à l'intérieur elle peut se fermer, mais qu'en est-il si la modification des données dans la fenêtre modale, lors de sa fermeture, vous devez obtenir des données à partir de là?

Un exemple simple, à partir de la fenêtre modale de l'utilisateur, nous modifions les données, revenant à la fenêtre modale de la liste, vous devez mettre à jour les informations sur cet utilisateur.

Ça sent l'asynchronisme ...

Lorsque nous ouvrons le module, nous devons attendre sa fermeture et obtenir les données entrées par l'utilisateur. Les actions asynchrones sont très bien mises en œuvre avec des promesses.

En fait, des promesses sont déjà posées dans notre diagramme, nous les marquons simplement comme des actions. Vous pouvez le refaire un peu.



Maintenant, tout devient simple lorsque l'utilisateur ouvre la fenêtre modale, nous attendons qu'il termine son travail, après quoi la résolution est appelée au promis. Cela semble simple, commençons.

Mon cadre principal est une réaction, nous allons donc le faire immédiatement en fonction de cela. Afin de pouvoir ouvrir des fenêtres modales à partir de n'importe quelle partie de l'application, nous utiliserons l'API Context.

Tout d'abord, nous devons créer un contexte et un endroit où il sera stocké.

// ./Provider.js export const DialogContext = React.createContext(); export const Provider = ({ children, node, Layout, config }) => { const [instances, setInstances] = useState([]); const [events, setEvents] = useState([]); const context = { instances, setInstances, config, events, setEvents }; const Component = instances.map(instance => ( <Layout key={instance.instanceName} component={config[instance.instanceName]} {...instance} /> )); const context = { instances setInstances }; //   state     const child = useMemo(() => React.Children.only(children), [children]); return ( <DialogContext.Provider value={context}> <> {child} {createPortal(Component, node)} </> </DialogContext.Provider> ); }; 

Tout est simple ici, nous utilisons le premier useState pour créer un tableau de fenêtres modales ouvertes. Quelque chose comme une pile.

Le second, useState, est nécessaire pour ajouter des références à résoudre et à rejeter à la promesse. Nous verrons cela ci-dessous.

Nous redirigeons le rendu via le portail afin de ne pas avoir à nous battre si quelque chose se produit avec le z-index.

La disposition est un composant qui sera le composant de base de toutes les fenêtres modales.

Le paramètre config est juste un objet, où la clé est l'identifiant de la fenêtre modale et la valeur est le composant de la fenêtre modale.

 //  config.js export const exampleInstanceName = 'modal/example'; export default { [exampleInstanceName]: React.lazy(() => import('./Example')), }; 

Nous écrivons maintenant une implémentation de la méthode qui ouvrira des fenêtres modales.

Ce sera le crochet:

 export const useDialog = () => { const { setEvents, setInstances, config } = useContext(DialogContext); const open = instance => new Promise((resolve, reject) => { if (instance.instanceName in config) { setInstances(prevInstances => [...prevInstances, instance]); setEvents(prevEvents => [...prevEvents, { resolve, reject }]); } else { throw new Error(`${instance['instanceName']} don't exist in modal config`); } }); return { open }; }; 

Le hook renvoie une fonction ouverte que nous pouvons utiliser pour appeler une fenêtre modale.

 import { exampleInstanceName } from './config'; import { useDialog } from './useDialog'; const FillFormButton = () => { const { open } = useDialog(); const fillForm = () => open(exampleInstanceName) return <button onClick={fillForm}>fill form from modal</button> } 

Dans cette option, nous n'attendrons jamais la fermeture de la fenêtre modale; nous devons ajouter des méthodes pour tenir la promesse:

 // ./Provider.js export const DialogContext = React.createContext(); export const Provider = ({ children, node, Layout, config }) => { const [instances, setInstances] = useState([]); const [events, setEvents] = useState([]); const close = useCallback(() => { const { resolve } = events[events.length - 1]; const resolveParams = { action: actions.close }; setInstances(prevInstances => prevInstances.filter((_, index) => index !== prevInstances.length - 1)); setEvents(prevEvents => prevEvents.filter((_, index) => index !== prevEvents.length - 1)); resolve(resolveParams); }, [events]); const cancel = useCallback((values): void => { const { resolve } = events[events.length - 1]; const resolveParams = { action: actions.cancel, values }; setInstances(prevInstances => prevInstances.filter((_el, index) => index !== prevInstances.length - 1)); setEvents(prevEvents => prevEvents.filter((_el, index) => index !== prevEvents.length - 1)); resolve(resolveParams); }, [events]); const success = useCallback((values) => { const { resolve } = events[events.length - 1]; const resolveParams = { action: actions.success, values }; setInstances(prevInstances => prevInstances.filter((_el, index) => index !== prevInstances.length - 1)); setEvents(prevEvents => prevEvents.filter((_el, index) => index !== prevEvents.length - 1)); resolve(resolveParams); }, [events]); const context = { instances, setInstances, config, events, setEvents }; const Component = instances.map(instance => ( <Layout key={instance.instanceName} component={config[instance.instanceName]} cancel={cancel} success={success} close={close} {...instance} /> )); const context = { instances setInstances }; //   state     const child = useMemo(() => React.Children.only(children), [children]); return ( <DialogContext.Provider value={context}> <> {child} {createPortal(Component, node)} </> </DialogContext.Provider> ); }; 

Maintenant, lorsque dans le composant Layout ou s'il transmet ces méthodes au composant de fenêtre modale, les méthodes success, cancel ou close seront appelées, nous aurons la résolution à la promesse nécessaire. Ici, un concept tel que l'action est ajouté, c'est une ligne qui répond dans quel état le dialogue a été achevé. Cela peut être utile lorsque nous effectuons une action après l'exécution de la fenêtre modale:

 const { useState } from 'rect'; import { exampleInstanceName } from './config'; import { useDialog } from './useDialog'; const FillFormButton = () => { const [disabled, setDisabled] = useState(false); const { open } = useDialog(); const fillForm = () => open(exampleInstanceName) .then(({ action }) => { if (action === 'success') setDisabled(true); }); return <button onClick={fillForm} disabled={disabled}>fill form from modal</button> } 

C’est tout. Il reste à ajouter le transfert des paramètres de la fenêtre modale à la fenêtre modale de la fonction ouverte. Eh bien, je pense que vous pouvez gérer cela vous-même, mais si vous êtes trop paresseux, il existe un package prêt à l'emploi que vous pouvez utiliser dans vos projets.