Reviews now display pfp and username

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) {

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>