From aecdee4cd8b390a99abc0a005d0cf26c3c1e3d30 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sun, 24 Apr 2022 00:53:56 +0300
Subject: [PATCH] migration: search excerpts

---
 .../layout/main-wrapper/main-content.vue      |  2 +-
 ...{excerpts.vue => SearchExcerptsScreen.vue} | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)
 rename resources/assets/js/components/screens/search/{excerpts.vue => SearchExcerptsScreen.vue} (84%)

diff --git a/resources/assets/js/components/layout/main-wrapper/main-content.vue b/resources/assets/js/components/layout/main-wrapper/main-content.vue
index a6284709..f1532df9 100644
--- a/resources/assets/js/components/layout/main-wrapper/main-content.vue
+++ b/resources/assets/js/components/layout/main-wrapper/main-content.vue
@@ -50,7 +50,7 @@ const SettingsScreen = defineAsyncComponent(() => import('@/components/screens/S
 const ProfileScreen = defineAsyncComponent(() => import('@/components/screens/ProfileScreen.vue'))
 const YoutubeScreen = defineAsyncComponent(() => import('@/components/screens/youtube.vue'))
 const UploadScreen = defineAsyncComponent(() => import('@/components/screens/UploadScreen.vue'))
-const SearchExcerptsScreen = defineAsyncComponent(() => import('@/components/screens/search/excerpts.vue'))
+const SearchExcerptsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchExcerptsScreen.vue'))
 const SearchSongResultsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchSongResultsScreen.vue'))
 const Visualizer = defineAsyncComponent(() => import('@/components/ui/Visualizer.vue'))
 
diff --git a/resources/assets/js/components/screens/search/excerpts.vue b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
similarity index 84%
rename from resources/assets/js/components/screens/search/excerpts.vue
rename to resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
index d24da8c4..b1af3973 100644
--- a/resources/assets/js/components/screens/search/excerpts.vue
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
@@ -11,26 +11,26 @@
           <h1>
             Songs
             <Btn
-              v-if="searchState.excerpt.songs.length"
-              @click.prevent="goToSongResults"
+              v-if="state.excerpt.songs.length"
+              data-test="view-all-songs-btn"
+              orange
               rounded
               small
-              orange
-              data-test="view-all-songs-btn"
+              @click.prevent="goToSongResults"
             >
               View All
             </Btn>
           </h1>
-          <ul v-if="searchState.excerpt.songs.length">
-            <li v-for="song in searchState.excerpt.songs" :key="song.id" :song="song" is="vue:SongCard"/>
+          <ul v-if="state.excerpt.songs.length">
+            <li is="vue:SongCard" v-for="song in state.excerpt.songs" :key="song.id" :song="song"/>
           </ul>
           <p v-else>None found.</p>
         </section>
 
         <section class="artists" data-testid="artist-excerpts">
           <h1>Artists</h1>
-          <ul v-if="searchState.excerpt.artists.length">
-            <li v-for="artist in searchState.excerpt.artists" :key="artist.id">
+          <ul v-if="state.excerpt.artists.length">
+            <li v-for="artist in state.excerpt.artists" :key="artist.id">
               <ArtistCard :artist="artist" layout="compact"/>
             </li>
           </ul>
@@ -39,8 +39,8 @@
 
         <section class="albums" data-testid="album-excerpts">
           <h1>Albums</h1>
-          <ul v-if="searchState.excerpt.albums.length">
-            <li v-for="album in searchState.excerpt.albums" :key="album.id">
+          <ul v-if="state.excerpt.albums.length">
+            <li v-for="album in state.excerpt.albums" :key="album.id">
               <AlbumCard :album="album" layout="compact"/>
             </li>
           </ul>
@@ -72,7 +72,7 @@ const ArtistCard = defineAsyncComponent(() => import('@/components/artist/Artist
 const AlbumCard = defineAsyncComponent(() => import('@/components/album/AlbumCard.vue'))
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
-const searchState = reactive(searchStore.state)
+const state = reactive(searchStore.state)
 const q = ref('')
 
 const goToSongResults = () => router.go(`search/songs/${q.value}`)