From dfee300149f885ab0ea1f9e165c5732799313bf8 Mon Sep 17 00:00:00 2001
From: sc02613 <sc02613@surrey.ac.uk>
Date: Thu, 22 May 2025 23:07:49 +0100
Subject: [PATCH] User Reviews display on film
---
movie-group-8/src/views/FilmDetails.vue | 28 ++++++++++++++++++++++++-
1 file changed, 27 insertions(+), 1 deletion(-)
diff --git a/movie-group-8/src/views/FilmDetails.vue b/movie-group-8/src/views/FilmDetails.vue
index 8194f5c..d2b8e33 100644
--- a/movie-group-8/src/views/FilmDetails.vue
+++ b/movie-group-8/src/views/FilmDetails.vue
@@ -43,6 +43,19 @@
>
Review this Film
</RouterLink>
+ <div class="mt-6 reviews-section">
+ <h2 class="text-xl mb-2 text-white">User Reviews</h2>
+ <div v-if="reviewsLoading" class="text-gray-400">Loading reviews…</div>
+ <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>
+ </ul>
+ </div>
</div>
</div>
</div>
@@ -52,12 +65,16 @@
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { addToWatchlist } from '@/composables/useWatchlist.js'
+import { getAllReviews } from '@/composables/useReviews.js'
+
const route = useRoute()
const movie = ref(null)
const trailerUrl = ref('')
const loading = ref(true)
const error = ref('')
+const reviews = ref([])
+const reviewsLoading = ref(true)
function formatDate(dateString) {
if (!dateString) return 'Unknown'
@@ -100,7 +117,16 @@ onMounted(async () => {
const id = route.params.id
await fetchMovieDetails(id)
await fetchMovieVideos(id)
- loading.value = false
+ try {
+ const res = await getAllReviews(id)
+ console.log('Raw reviews from Firestore:', res)
+ reviews.value = res
+ } catch (revErr) {
+ console.error('Failed to load reviews', revErr)
+ } finally {
+ reviewsLoading.value = false
+ loading.value = false
+ }
})
</script>
--
GitLab