spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Agrégateur de logements à louer (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// pages/Favoris.tsx : les logements mis en favori par le compte connecté5// -----------------------------------------------------------------------------6import { useEffect, useState } from "react";7import { Link } from "react-router-dom";8import { Listing, fetchFavorites } from "../api";9import { useAccount } from "../account";10import ListingCard from "../components/ListingCard";11import { IcoHeart } from "../components/Icons";1213export default function FavorisPage() {14  const { me, loaded, favs } = useAccount();15  const [listings, setListings] = useState<Listing[] | null>(null);1617  useEffect(() => {18    if (me) fetchFavorites().then((f) => setListings(f.listings)).catch(() => setListings([]));19  }, [me]);2021  if (loaded && !me) {22    return (23      <div className="container profil">24        <span className="kicker">Mes favoris</span>25        <h1>Connectez-vous pour garder vos <span className="hl">coups de cœur</span>.</h1>26        <a className="btn btn-primary" href="/api/auth/ka/login">27          Se connecter avec KA ID28        </a>29      </div>30    );31  }3233  // ne montrer que ce qui est encore favori (toggle instantané sans re-fetch)34  const visible = (listings ?? []).filter((l) => favs.has(l.uid));3536  return (37    <div className="container profil">38      <span className="kicker">Mes favoris</span>39      <h1>Vos <span className="hl">coups de cœur</span>.</h1>4041      {listings === null && me && <div className="notice">Chargement…</div>}4243      {listings !== null && visible.length === 0 && (44        <div className="notice">45          <div className="big"><IcoHeart size={40} /></div>46          <h2>Aucun favori pour l'instant</h2>47          <p>48            Touchez le cœur sur une annonce pour la retrouver ici.49          </p>50          <Link className="btn btn-primary" to="/">Explorer les logements</Link>51        </div>52      )}5354      {visible.length > 0 && (55        <div className="grid" style={{ marginTop: 24 }}>56          {visible.map((l) => <ListingCard key={l.uid} l={l} />)}57        </div>58      )}59    </div>60  );61}62