FEAT: comment local storage

components/comment/form.vue

@@ -16,7 +16,7 @@ const sendComment = () => {
     username: username.value,
     message: message.value,
     score: document.getElementById('score').value,
-    film: props.filmId,
+    filmId: props.filmId,
     added: Date.now(),
   })
 }

components/comment/list.vue

@@ -1,6 +1,6 @@
 <template>
   <ul>
-    <li v-for="comment in store.orderedComment">
+    <li v-for="comment in store.orderedComment(props.filmId)">
       {{ comment.username }}
       {{ comment.added }}
       {{ comment.message }}
@@ -9,5 +9,6 @@
   <div class="mt-24"></div>
 </template>
 <script setup>
+const props = defineProps(['filmId'])
 const store = useCommentStore()
 </script>

components/list.vue

@@ -11,23 +11,28 @@
           {{ films.length }}
         </b>
       </nav>
-
-      <NuxtLink v-for="(film, index) in films" :key="index" :href="film.title" :to="'/details/' + film.id"
-        class="hover:bg-slate-200 w-full p-4 flex-col border-b-2 border-GREY-100">
-        <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
-        <span class="flex flex-row">
-          {{ film.title }}
-          {{ film.original_title }}
-          {{ film.vote_count }}
-          {{ film.release_date }}
-          {{ film.id }}
-        </span>
-      </NuxtLink>
+      <main class="flex max-w-screen-2xl justify-center flex-wrap m-6">
+        <NuxtLink v-for="(film, index) in films" :key="index" :href="film.title" :to="'/details/' + film.id"
+          class="hover:bg-slate-200 w-full flex flex-col bg-emerald-800 rounded-lg w-60 m-4">
+          <img @error="setPlaceholder" :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title"
+            class="w-full rounded-t-lg">
+          <span class="p-4">
+            <h2 class="text-xl font-bold">
+              {{ film.title }}
+            </h2>
+            <span v-if="film.release_date">
+              {{ useDateFormat(film.release_date, 'D MMM YYYY') }}
+            </span>
+            {{ formatPercentage(film.vote_average) }}%
+          </span>
+        </NuxtLink>
+      </main>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+import { useDateFormat } from '@vueuse/core'
 const config = useRuntimeConfig()
 const terms = ref('')
 const films = ref([])
@@ -54,6 +59,20 @@ const pressEnter = () => {
   search()
 }
 
+const fromPercentToDegree = (percent) => {
+  let deg = Math.round((percent / 10) * 180)
+  console.log(deg)
+  return [`rotate-[calc(${deg}deg-45deg)]`]
+}
+
+const formatPercentage = (percent) => {
+  return Math.round(percent * 10)
+}
+
+const setPlaceholder = (event) => {
+  event.target.src = 'https://via.placeholder.com/200x300'
+}
+
 onScrollEnd(() => {
   page.value += 1
   search()

pages/details/[id].vue

@@ -1,25 +1,37 @@
 <template>
-  <section>
-    <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
-    <span class="">
-      {{ film.title }}
-      {{ film.overview }}
-      {{ director }}
-      <ul>
-        <li v-for="star in film.credits.cast">
-          {{ star.name }}
-        </li>
-      </ul>
-      <ul>
-        <li v-for="genre in film.genres">
-          {{ genre.name }}
-        </li>
-      </ul>
-      {{ film.vote_average }}
-      {{ film.vote_count }}
-    </span>
-    <CommentForm :filmId="film.id" />
-    <CommentList :filmId="film.id" />
+  <section class="flex flex-col items-center min-h-screen">
+    <div class="container w-full p-6 max-w-6xl grow flex flex-col items-center">
+      <div class="flex flex-col lg:flex-row">
+        <img class="min-w-fit" :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
+        <span class="ml-20 w-60">
+          <h1 class="text-4xl font-bold leading-relaxed">
+            {{ film.title }}
+          </h1>
+          <h2 class="text-2xl">
+            {{ director }}
+          </h2>
+          <p class="my-8">
+            {{ film.overview }}
+          </p>
+          <ul class="flex">
+            <li v-for="star in film.credits.cast">
+              {{ star.name }}
+            </li>
+          </ul>
+          <ul>
+            <li v-for="genre in film.genres">
+              {{ genre.name }}
+            </li>
+          </ul>
+          {{ film.vote_average }}
+          {{ film.vote_count }}
+        </span>
+      </div>
+      <div>
+        <CommentForm :filmId="film.id" />
+        <CommentList :filmId="film.id" />
+      </div>
+    </div>
   </section>
 </template>
 

stores/comment.ts

@@ -15,6 +15,10 @@ export const useCommentStore = defineStore('comment', {
     },
   },
   getters: {
-    orderedComment: (state) => state.comment.sort((a, b) => b.added - a.added)
+    orderedComment: (state) => {
+      return (filmId) => {
+        return state.comment.filter(comment => comment.filmId === filmId).sort((a, b) => b.added - a.added)
+      }
+    }
   }
 })