Renamed store and MovieList

src/components/MediaCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMediaStore } from '@/stores/movies'
+import { useMediaStore } from '@/stores/media'
 import { computed, ref } from 'vue'
 import type { MediaType } from '@/types/Media'
 

src/components/MediaDetails.vue

@@ -2,7 +2,7 @@
 import type { MovieDetailsType } from '@/types/Movie'
 import type { TvSeriesDetailsType } from '@/types/TvSeries'
 import { computed, ref } from 'vue'
-import { useMediaStore } from '@/stores/movies'
+import { useMediaStore } from '@/stores/media'
 import type { MediaType } from '@/types/Media'
 
 const props = defineProps<{

src/components/MediaList.vue

@@ -4,7 +4,7 @@ import MediaCard from './MediaCard.vue'
 import type { MediaType } from '@/types/Media'
 
 const props = defineProps<{
-  movies: MediaType[]
+  medias: MediaType[]
   loadingMore: boolean
   isSearch: boolean
 }>()
@@ -15,12 +15,12 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
 <template>
   <div>
     <p
-      v-if="props.movies.length === 0"
+      v-if="props.medias.length === 0"
       class="text-center text-gray-500 py-12 bg-gray-50/60 rounded-lg border border-gray-200"
     >
-      No movies found.<br />
+      No media found.<br />
       <RouterLink to="/add" class="text-gray-700 font-semibold hover:text-gray-900 transition">
-        Add a movie
+        Add media
       </RouterLink>
     </p>
 
@@ -29,7 +29,7 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
       v-else
       class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
     >
-      <li v-for="movie in props.movies" :key="movie.Id" v-auto-animate>
+      <li v-for="movie in props.medias" :key="movie.Id" v-auto-animate>
         <MediaCard :movie="movie" />
       </li>
       <li v-if="!props.isSearch">
@@ -37,7 +37,7 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
       </li>
     </ul>
 
-    <div v-if="props.isSearch && props.movies.length > 0" class="flex justify-center mt-8">
+    <div v-if="props.isSearch && props.medias.length > 0" class="flex justify-center mt-8">
       <button
         class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 disabled:opacity-50"
         @click="emit('loadMore')"

src/views/AddView.vue

@@ -2,10 +2,10 @@
 import { loadMoreMovies, searchMovies } from '@/lib/api'
 import { onMounted, ref, watch } from 'vue'
 import SearchBar from '@/components/SearchBar.vue'
-import MovieList from '@/components/MovieList.vue'
+import MediaList from '@/components/MediaList.vue'
 import type { MediaType } from '@/types/Media'
 import ErrorAlert from '@/components/alerts/ErrorAlert.vue'
-import { useSearchPageStore } from '@/stores/movies'
+import { useSearchPageStore } from '@/stores/media'
 
 const movies = ref<MediaType[]>()
 const seachError = ref<string>('')
@@ -102,9 +102,9 @@ watch(searchQuery, () => {
     </div>
 
     <!-- Movie list -->
-    <MovieList
+    <MediaList
       v-else-if="movies && movies.length > 0"
-      :movies="movies"
+      :medias="movies"
       :loading-more="isLoadingMore"
       @loadMore="loadMore"
       :is-search="true"

src/views/ListView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useMediaStore } from '@/stores/movies'
-import MovieList from '@/components/MovieList.vue'
+import { useMediaStore } from '@/stores/media'
+import MediaList from '@/components/MediaList.vue'
 
 const store = useMediaStore()
 </script>
@@ -12,10 +12,10 @@ const store = useMediaStore()
     >
       Movie Library
     </h1>
-    <MovieList
+    <MediaList
       v-auto-animate
       v-if="store.mediaList"
-      :movies="store.mediaList"
+      :medias="store.mediaList"
       :loading-more="false"
       :is-search="false"
     />