SAE_riot/components/favorites.riot

<favorites>
  <h2>Mes favoris</h2>

  <div if={state.loading}>
    <p>Chargement des favoris...</p>
  </div>

  <div if={!state.loading && state.favorites.items.length === 0}>
    <p>Aucun favori trouvé.</p>
  </div>

  <div if={!state.loading && state.favorites.items.length > 0}>
    <div class="results-grid">
      <div class="card" each={item in state.favorites.items}>
        <a onclick={() => removeFavoris(item.id, item.type)}>
          <button><i class="fa-solid fa-star"></i></button>
        </a>
        <a href={"#/release-details/" + item.type + "/" + item.id}>
          <h4>{item.artists[0].name} – {item.title}</h4>
          <img src={item.thumb} alt="cover" />
          <div if={item.type !== 'artist'}>
            <p>{item.year}</p>
            <footer>
              {item.community?.want} <i class="fa-solid fa-check"></i>
              {item.community?.have} <i class="fa-regular fa-heart"></i>
            </footer>
          </div>
        </a>
        <a if={item.type === "release"} href={"#/release-details/master/" + item.master_id}><button>master</button></a>
        <a if={item.type === "master"} href="#"><button onclick={() => this.MainReleaseDetails(item)}>release</button></a>
      </div>
    </div>
  </div>

  <script>
    export default {
      state: {
        favorites: {
          items: []
        },
        loading: true
      },

      async onMounted() {
        const favs = await window.getFavorites(); 

        const items = [];

        for (const fav of favs) {
          let data;
          if (fav.Type === "master") {
            data = await window.getMasterDetails(fav.releaseId);
          } else {
            data = await window.getReleaseDetails(fav.releaseId);
          }

          items.push({
            ...data,
            type: fav.Type
          });
        }

        this.state.favorites.items = items;
        this.state.loading = false;
        this.update();
      },

      async removeFavoris(id, type) {
        await window.removeFavorite(id, type);
        this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
        this.update();
      },

      async MainReleaseDetails(item) {
        const res = await fetch(item.resource_url);
        const json = await res.json();

        const mainUrl = json.main_release_url;

        const res2 = await fetch(mainUrl); 
        const releaseData = await res2.json();

        console.log(releaseData);
        window.location.hash = `#/release-details/release/${releaseData.id}`; 
      }
    }
  </script>

  <style>
    .results-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }

    .card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        padding: 1rem;
        text-align: center;
        transition: transform 0.2s ease;
    }

    .card:hover {
        transform: translateY(-4px);
    }

    .card img {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }

    .card h4 {
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }

    footer {
        display: flex;
        justify-content: space-around;
        font-size: 0.9rem;
        color: #666;
    }

    .card a i.fa-star {
        color: #fbc02d;
        font-size: 1.3rem;
        transition: transform 0.2s ease;
    }

    .card a i.fa-star:hover {
        transform: scale(1.2);
    }

  </style>
</favorites>