spb/rent-ka

1// -----------------------------------------------------------------------------2// Rent-Ka — Rental listings aggregator (Canada, outside Québec)3// Author: Simon-Pierre Boucher — contact@spboucher.ai4// pages/Favoris.tsx: the rentals saved by the signed-in account5// -----------------------------------------------------------------------------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">Saved rentals</span>25        <h1>Sign in to keep your <span className="hl">favourites</span>.</h1>26        <a className="btn btn-primary" href="/api/auth/ka/login">27          Sign in with KA ID28        </a>29      </div>30    );31  }3233  // only show what is still saved (instant toggle without re-fetch)34  const visible = (listings ?? []).filter((l) => favs.has(l.uid));3536  return (37    <div className="container profil">38      <span className="kicker">Saved rentals</span>39      <h1>Your <span className="hl">favourites</span>.</h1>4041      {listings === null && me && <div className="notice">Loading…</div>}4243      {listings !== null && visible.length === 0 && (44        <div className="notice">45          <div className="big"><IcoHeart size={40} /></div>46          <h2>Nothing saved yet</h2>47          <p>48            Tap the heart on a listing to find it here.49          </p>50          <Link className="btn btn-primary" to="/">Explore rentals</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