projet

components/app.riot

@@ -1,8 +1,9 @@
 <app>
     <nav>
         <a href="#"><i class="fa-solid fa-house"></i></a>
-        <a href="#/favoris/">Favoris</a>
+        <a if={authUser} href="#/favoris/">Favoris</a>
-        <a href="#/login/"><i class="fa-solid fa-user"></i></a>
+        <a if={!authUser} href="#/login/"><i class="fa-solid fa-user"></i></a>
+        <a if={authUser} href="#" onclick={() => Logout()}><i class="fa-solid fa-right-from-bracket"></i></a>
     </nav>
 
     <router base={base}>
@@ -17,11 +18,28 @@
                 <button type="submit">Rechercher</button>
             </form>
 
+            <!-- Pagination -->
+            <div class="pagination" if={searchs.pagination && searchs.pagination.pages > 1}>
+            <button 
+                onclick={() => this.changePage(searchs.pagination.page - 1)}
+                disabled={searchs.pagination.page === 1}>
+                ◀ Précédent
+            </button>
+
+            <span>Page {searchs.pagination.page} / {searchs.pagination.pages}</span>
+
+            <button 
+                onclick={() => this.changePage(searchs.pagination.page + 1)}
+                disabled={searchs.pagination.page === searchs.pagination.pages}>
+                Suivant ▶
+            </button>
+            </div>
+
             <div if="{searchs.items.length > 0}">
                 <h3>Résultats ({searchs.pagination.items.total} résultats trouvés)</h3>
                 <div class="results-grid">
                     <div class="card" each="{item in searchs.items}">
-                        <div if="{authUser}"><button onclick={addFavoris(item.id)}><i class="fa-regular fa-star"></i></button></div>
+                        <a if={authUser}  onclick={() => addFavoris(item.id)}><i class={item.isFavorite ? "fa-solid fa-star" : "fa-regular fa-star"}></i></a>
                         <a href={ "#/release-details/" + item.id}>
                             {item.title}
                             <img src="{item.cover_image} " alt="cover " />
@@ -55,33 +73,53 @@
             base: 'https://dwarves.iut-fbleau.fr/~felix-vi/SAE/',
             route: 'search',
             authUser: null,
+            favoritesIds: [],
             searchs: {
                 items: [],
                 pagination: [],
-                type: 'release',
+                type: null,
             },
 
-            async search(e) {
+            async search(e, page = 1) {
-                e.preventDefault()
+                if (e) e.preventDefault();
-                const type = e.target.type.value
+
-                const query = e.target.query.value
+                const type = e?.target?.type?.value || this.searchs.type;
-                if (!query) return
+                const query = e?.target?.query?.value || this.searchs.query;
-                const result = await window.discogsearch(query, type)
+                if (!query) return;
-                this.searchs.items = result.results
+
-                this.searchs.pagination = result.pagination
+                const result = await window.discogsearch(query, type, page);
-                this.searchs.type = type
+
-                this.update()
+                const enrichedItems = [];
+                for (const item of result.results) {
+                    const isFav = await window.isFavorite(item.id);
+                    enrichedItems.push({ ...item, isFavorite: isFav }); // évite de muter directement item
+                }
+
+                this.searchs.items = enrichedItems;
+                this.searchs.pagination = result.pagination;
+                this.searchs.query = query;
+                this.searchs.type = type;
+
+                this.update();
                 },
 
-            onMounted() {
+            changePage(page) {
-                observeAuthState(user => {
+                this.search(null, page);
-                    this.authUser = user
+            },
-                    this.update()
+
+            async onMounted() {
+                observeAuthState(async user => {
+                    this.authUser = user;
+                    this.update();
                 });
             },
 
             addFavoris(id) {
                 window.favorite(id)
+            },
+
+            Logout(){
+                window.logout()
             }
         }
     </script>
@@ -145,14 +183,19 @@
         
         button {
             color: white;
-            background: transparent;
+            background-color: #2196f3;
             border: none;
             font-weight: bold;
             cursor: pointer;
+            padding: 0.5em 1em;
+            border-radius: 5px;
+            margin: 0.5em;
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
-            text-decoration: underline;
+            background-color: #1769aa;
+            text-decoration: none;
         }
         
         nav {
@@ -164,6 +207,14 @@
             align-items: center;
         }
 
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        
         nav a {
             margin: 0 10px;
             color: white;

components/favorites.riot

@@ -1,33 +1,79 @@
 <favorites>
     <h2>Mes favoris</h2>
-    <ul>
+
-        <li each={item in state.favorites}>{item.title}</li>
+    <div if={state.favorites.items.length> 0}>
-    </ul>
+        <div class="results-grid">
+            <div class="card" each={item in state.favorites.items}>
+                <a href={ "#/release-details/" + item.id}>
+                    <img src={item.thumb} alt="cover" />
+                    <h4>{item.title}</h4>
+                    <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>
+            </div>
+        </div>
+    </div>
+
+    <p if={state.favorites.items.length===0 }>Aucun favori trouvé.</p>
+
     <script>
         export default {
             state: {
-                favorites: []
+                favorites: {
+                    items: []
+                }
             },
             async onMounted() {
-                const favoris = await window.getFavorites();
+                const ids = await window.getFavorites();
-            },
 
+                const items = [];
+                for (const id of ids) {
+                    const release = await window.getReleaseDetails(id);
+                    items.push(release);
+                }
+
+                this.state.favorites.items = items;
+                this.update();
+            }
         }
     </script>
+
     <style>
-        ul {
+        .results-grid {
-            list-style: none;
+            display: grid;
-            padding: 0;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            max-width: 600px;
+            gap: 15px;
-            margin: auto;
         }
         
-        ul li {
+        .card {
-            background: white;
+            border: 1px solid #ccc;
-            margin: 0.5rem;
+            padding: 10px;
-            padding: 0.75rem;
+            text-align: center;
+            background: #fff;
+            border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            border-radius: 5px;
+        }
+        
+        .card img {
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+            margin-bottom: 10px;
+        }
+        
+        .card h4 {
+            font-size: 1rem;
+            margin: 5px 0;
+        }
+        
+        footer {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 0.5rem;
         }
     </style>
 </favorites>

components/login.riot

@@ -11,7 +11,7 @@
             e.preventDefault();
             const email = e.target.email.value;
             const password = e.target.password.value;
-            login(email, password);
+            await login(email, password);
             window.location.href = '#';
         }
         export default {

components/register.riot

@@ -12,7 +12,7 @@
                 e.preventDefault();
                 const email = e.target.email.value;
                 const password = e.target.password.value;
-                window.sign(email, password);
+                await window.sign(email, password);
                 window.location.href = '#';
             },
             onMounted() {

components/release-details.riot

@@ -1,7 +1,8 @@
 <release-details>
     <div class="details">
         <h2>{state.release.title}</h2>
-        <p if="{state.release.type !== 'artist'}">-{state.release.year}</p>
+        <p if="{state.release.type !== 'artist'}">{state.release.formats?.[0]?.name}-{state.release.year}</p>
+        <p if="{state.release.type !== 'artist'}">{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)</p>
 
         <div class="release-content">
             <img src="{state.release.thumb}" alt="{state.release.title}" />

services/discogsService.js

@@ -4,8 +4,8 @@ const key = 'NWmMhlPAbPlVnaDqVGyX';
 const secret = 'hZPaoBiGiSwlCjARrbOICOpDuITwyJAm';
 const perPage = 100;
 
-export async function discogsearch(query, type) {
+export async function discogsearch(query, type, page = 1) {
-    const url = `${baseUrlsearch}?q=${query}&type=${type}&per_page=${perPage}&key=${key}&secret=${secret}`;
+    const url = `${baseUrlsearch}?q=${query}&type=${type}&per_page=${perPage}&page=${page}&key=${key}&secret=${secret}`;
     const response = await fetch(url);
     return await response.json();
 }

services/firebaseService.js

@@ -16,6 +16,12 @@ import {
     setDoc
 } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
 
+import {
+    query,
+    where,
+    getDocs
+} from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
+
 const firebaseConfig = {
     apiKey: "AIzaSyBXKB6AGbTN95lOLrIVpWrSIK_uL_C6GUA",
     authDomain: "music-app-riotjs.firebaseapp.com",
@@ -31,17 +37,22 @@ const auth = getAuth(app);
 const db = getFirestore(app);
 
 export async function login(email, password) {
-    await signInWithEmailAndPassword(auth, email, password);
+    const userC = await signInWithEmailAndPassword(auth, email, password);
+    localStorage.setItem("uid", userC.user.uid);
+    return userC;
 }
 
 export async function sign(email, password) {
     const userCred = await createUserWithEmailAndPassword(auth, email, password);
-    await adduserdata(userCred.user.email);
+    await adduserdata(userCred.user.email, userCred.user.uid);
+    localStorage.setItem("uid", userC.user.uid);
+    return userCred;
 }
 
-export async function adduserdata(email_user) {
+export async function adduserdata(email_user, uid) {
     await addDoc(collection(db, "users"), {
-        email: email_user
+        email: email_user,
+        uid: uid
     });
 }
 
@@ -53,28 +64,75 @@ window.observeAuthState = function(callback) {
     onAuthStateChanged(auth, callback);
 };
 
+
 export async function favorite(releaseId) {
-    const user = auth.currentUser;
+    const storedUid = localStorage.getItem("uid");
-    if (!user) return;
+
-    await addDoc(collection(db, "users", user.email, "favorites"), {
+
-        id: releaseId
+
+
+    const usersRef = collection(db, "users");
+    const q = query(usersRef, where("uid", "==", storedUid));
+    const querySnapshot = await getDocs(q);
+
+
+    const userDoc = querySnapshot.docs[0];
+    const userDocId = userDoc.id;
+
+    const favoritesRef = collection(db, "users", userDocId, "favorites");
+
+    await addDoc(favoritesRef, {
+        releaseId: releaseId,
     });
 }
 
+
 export async function getFavorites() {
-    const user = auth.currentUser;
+    const storedUid = localStorage.getItem("uid");
-    if (!user) {
+
-        console.warn("Aucun utilisateur connecté.");
+    if (!storedUid) {
+        console.warn("Aucun UID trouvé dans localStorage.");
         return [];
     }
 
-    const userDocRef = doc(db, "users", user.email);
+    const usersRef = collection(db, "users");
-    const favsCollection = collection(userDocRef, "favorites");
+    const q = query(usersRef, where("uid", "==", storedUid));
+    const querySnapshot = await getDocs(q);
 
-    const snapshot = await getDocs(favsCollection);
+    if (querySnapshot.empty) {
-    const favorites = snapshot.docs.map(doc => doc.data());
+        console.warn("Aucun document utilisateur trouvé avec cet UID.");
+        return [];
+    }
 
-    return favorites;
+    const userDoc = querySnapshot.docs[0];
+    const userDocId = userDoc.id;
+
+    const favoritesRef = collection(db, "users", userDocId, "favorites");
+    const snapshot = await getDocs(favoritesRef);
+
+    return snapshot.docs.map(doc => doc.data().releaseId);
+}
+
+export async function isFavorite(releaseId) {
+    const storedUid = localStorage.getItem("uid");
+    if (!storedUid) return false;
+
+    // Recherche l'utilisateur avec le bon uid
+    const usersRef = collection(db, "users");
+    const userQuery = query(usersRef, where("uid", "==", storedUid));
+    const userSnapshot = await getDocs(userQuery);
+
+    if (userSnapshot.empty) return false;
+
+    const userDoc = userSnapshot.docs[0];
+    const userDocId = userDoc.id;
+
+    // Recherche si le releaseId existe déjà dans les favoris
+    const favoritesRef = collection(db, "users", userDocId, "favorites");
+    const favQuery = query(favoritesRef, where("releaseId", "==", releaseId));
+    const favSnapshot = await getDocs(favQuery);
+
+    return !favSnapshot.empty; // true = en favori, false = pas en favori
 }
 
 window.login = login;
@@ -82,3 +140,4 @@ window.sign = sign;
 window.logout = logout;
 window.favorite = favorite;
 window.getFavorites = getFavorites;
+window.isFavorite = isFavorite;