From a3721115698f666652fd33a486f5354ae8231b6c Mon Sep 17 00:00:00 2001
From: sc02613 <sc02613@surrey.ac.uk>
Date: Fri, 23 May 2025 00:56:22 +0100
Subject: [PATCH] Reviews now display pfp and username

---
 movie-group-8/src/composables/useReviews.js |  2 +-
 movie-group-8/src/views/FilmDetails.vue     | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/movie-group-8/src/composables/useReviews.js b/movie-group-8/src/composables/useReviews.js
index 05e0a98..04f72c7 100644
--- a/movie-group-8/src/composables/useReviews.js
+++ b/movie-group-8/src/composables/useReviews.js
@@ -16,7 +16,7 @@ export async function submitReview({ movieId, rating, text }) {
   if (!user) throw new Error('User not authenticated')
 
   const ref = doc(db, 'users', user.uid, 'reviews', movieId)
-  await setDoc(ref, { movieId, rating, text }, { merge: true })
+  await setDoc(ref, { movieId, rating, text, authorName: user.displayName, authorPFP: user.photoURL }, { merge: true })
 }
 
 export async function getAllReviews(movieId) {
diff --git a/movie-group-8/src/views/FilmDetails.vue b/movie-group-8/src/views/FilmDetails.vue
index e89ba83..ebc1be6 100644
--- a/movie-group-8/src/views/FilmDetails.vue
+++ b/movie-group-8/src/views/FilmDetails.vue
@@ -53,11 +53,17 @@
           <div v-else-if="!reviews.length" class="text-gray-400">No reviews yet.</div>
           <ul v-else class="space-y-4">
             <li v-for="(r, i) in reviews" :key="i" class="bg-neutral-800 p-4 rounded">
-              <div class="flex items-center mb-1">
-                <span class="font-semibold text-white mr-2">{{ r.rating }}★</span>
-              </div>
-              <p class="text-gray-200">{{ r.text }}</p>
-            </li>
+              <div class="flex items-center mb-2">
+                <img
+                 v-if="r.authorPFP"
+                 :src="r.authorPFP"
+                  alt=""
+                  class="h-8 w-8 rounded-full mr-2"/>
+                  <span class="font-semibold text-white">{{ r.authorName }}</span>
+                  <span class="text-gray-400 ml-2">{{ r.rating }}★</span>
+                </div>
+                <p class="text-gray-200">{{ r.text }}</p>
+              </li>
           </ul>
         </div>
       </div>
-- 
GitLab