projet

2025-03-28 16:27:07 +01:00
parent d2848447b6
commit 6d33ec5727
7 changed files with 216 additions and 59 deletions
--- a/components/app.riot
+++ b/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 href="#/login/"><i class="fa-solid fa-user"></i></a>
+        <a if={authUser} href="#/favoris/">Favoris</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) {
-                e.preventDefault()
-                const type = e.target.type.value
-                const query = e.target.query.value
-                if (!query) return
-                const result = await window.discogsearch(query, type)
-                this.searchs.items = result.results
-                this.searchs.pagination = result.pagination
-                this.searchs.type = type
-                this.update()
+            async search(e, page = 1) {
+                if (e) e.preventDefault();
+
+                const type = e?.target?.type?.value || this.searchs.type;
+                const query = e?.target?.query?.value || this.searchs.query;
+                if (!query) return;
+
+                const result = await window.discogsearch(query, type, page);
+
+                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();
+                },
+
+            changePage(page) {
+                this.search(null, page);
            },

-            onMounted() {
-                observeAuthState(user => {
-                    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 {
@@ -163,6 +206,14 @@
            justify-content: space-between;
            align-items: center;
        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
        
        nav a {
            margin: 0 10px;
--- a/components/favorites.riot
+++ b/components/favorites.riot
@@ -1,33 +1,79 @@
 <favorites>
    <h2>Mes favoris</h2>
-    <ul>
-        <li each={item in state.favorites}>{item.title}</li>
-    </ul>
+
+    <div if={state.favorites.items.length> 0}>
+        <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 {
-            list-style: none;
-            padding: 0;
-            max-width: 600px;
-            margin: auto;
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
        }
        
-        ul li {
-            background: white;
-            margin: 0.5rem;
-            padding: 0.75rem;
+        .card {
+            border: 1px solid #ccc;
+            padding: 10px;
+            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>
--- a/components/login.riot
+++ b/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 {
--- a/components/register.riot
+++ b/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() {
--- a/components/release-details.riot
+++ b/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}" />
--- a/services/discogsService.js
+++ b/services/discogsService.js
@@ -4,8 +4,8 @@ const key = 'NWmMhlPAbPlVnaDqVGyX';
 const secret = 'hZPaoBiGiSwlCjARrbOICOpDuITwyJAm';
 const perPage = 100;

-export async function discogsearch(query, type) {
-    const url = `${baseUrlsearch}?q=${query}&type=${type}&per_page=${perPage}&key=${key}&secret=${secret}`;
+export async function discogsearch(query, type, page = 1) {
+    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();
 }
--- a/services/firebaseService.js
+++ b/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,32 +64,80 @@ window.observeAuthState = function(callback) {
    onAuthStateChanged(auth, callback);
 };

+
 export async function favorite(releaseId) {
-    const user = auth.currentUser;
-    if (!user) return;
-    await addDoc(collection(db, "users", user.email, "favorites"), {
-        id: releaseId
+    const storedUid = localStorage.getItem("uid");
+
+
+
+
+    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;
-    if (!user) {
-        console.warn("Aucun utilisateur connecté.");
+    const storedUid = localStorage.getItem("uid");
+
+    if (!storedUid) {
+        console.warn("Aucun UID trouvé dans localStorage.");
        return [];
    }

-    const userDocRef = doc(db, "users", user.email);
-    const favsCollection = collection(userDocRef, "favorites");
+    const usersRef = collection(db, "users");
+    const q = query(usersRef, where("uid", "==", storedUid));
+    const querySnapshot = await getDocs(q);

-    const snapshot = await getDocs(favsCollection);
-    const favorites = snapshot.docs.map(doc => doc.data());
+    if (querySnapshot.empty) {
+        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;
 window.sign = sign;
 window.logout = logout;
 window.favorite = favorite;
-window.getFavorites = getFavorites;
+window.getFavorites = getFavorites;
+window.isFavorite = isFavorite;