Action et Loader
Notre page principale affiche la liste des logements.
Alors on a furieusement envie de cliquer sur un bouton réserver pour appeler notre commande book. Malheureusement, il ne se passe rien.
Mais qu'attendait-on exactement ?
Reprenons notre test :
...
const unavailableAccomodations = await app.dependencies.bookings.getAvailableAccomodations({
from: toDate("2024-06-01"),
to: toDate("2024-06-03")
});
expect(unavailableAccomodations.some(accomodation => accomodation.id ==="accomodation-1")).toBe(false);
...Après avoir réalisé une réservation d'un logement sur une période, le logement ne figure plus dans la liste des logements disponibles à cette période. Donc le logement réservé devrait "disparaître" de la liste.
Pourquoi n'est-ce pas ce qu'il se passe ?
Boucler la boucle
Rappelons-nous notre schéma de principe de l'animation de notre page :
LOADER --- alimente ---> RENDER
| |
re-déclenche déclenche
^ |
| |
----------- ACTION <------Après une action, il nous faut actualiser la vue en invoquant à nouveau le loader.
En l'état, notre code n'implémente pas ce lien : il nous faut boucler la boucle.
Pour cela, commençons par modifier notre hook pour export un moyen de recharger les données au travers d'une fonction refresh :
export function useAccomodations() {
// Nos 2 états sur la page
const [loading, setLoading] = useState(false);
const [accomodations, setAccomodations] = useState([]);
// Une fonction qui orchestre les changements d'état
const loadAccomodation = async () => {
setLoading(true);
setAccomodations(await loader());
setLoading(false);
};
// Un effet
useEffect(() => {
loadAccomodation();
}, []);
return { accomodations, loading, refresh: loadAccomodation };
}Et utilisons cette fonction pour rafraichir la page à condition que l'action réussisse :
function HomePage() {
const { accomodations, loading, refresh } = useAccomodations();
return (
<Layout loading={loading}>
{accomodations.map((accomodation) => (
<Accomodation
key={accomodation.id}
accomodation={accomodation}
onBook={() => action().then(({status}) => status === "ok" ? refresh() : {})}
/>
))}
</Layout>
);
}Envie de lire la suite de ce cours ?