From 688e7d828255d48ce58ebe49f314816c63733966 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 2 Jan 2023 15:29:40 +0300
Subject: [PATCH] refactor the "SEE ALL" button into a component

---
 src/assets/scss/Global/album-grid.scss      |  2 +-
 src/components/AlbumView/ArtistAlbums.vue   | 18 ++-----
 src/components/ArtistView/Albums.vue        | 53 ---------------------
 src/components/ArtistView/TopTracks.vue     | 14 +-----
 src/components/FolderView/FolderList.vue    |  9 ++--
 src/components/PlaylistView/ArtistsList.vue | 11 +++--
 src/components/shared/SeeAll.vue            | 23 +++++++++
 src/router/routes.ts                        |  8 ++++
 src/settings/strings.ts                     |  4 ++
 src/views/AlbumsGrid.vue                    |  4 +-
 src/views/ArtistView/Main.vue               |  4 --
 src/views/FavoriteAlbums.vue                |  4 +-
 src/views/FavoriteArtists.vue               | 25 ++++++++++
 src/views/Favorites.vue                     |  6 +--
 14 files changed, 84 insertions(+), 101 deletions(-)
 delete mode 100644 src/components/ArtistView/Albums.vue
 create mode 100644 src/components/shared/SeeAll.vue
 create mode 100644 src/views/FavoriteArtists.vue

diff --git a/src/assets/scss/Global/album-grid.scss b/src/assets/scss/Global/album-grid.scss
index 607941bb..21131380 100644
--- a/src/assets/scss/Global/album-grid.scss
+++ b/src/assets/scss/Global/album-grid.scss
@@ -1,4 +1,4 @@
-.album-grid-view {
+.card-grid-view {
   height: 100%;
 
   .scrollable {
diff --git a/src/components/AlbumView/ArtistAlbums.vue b/src/components/AlbumView/ArtistAlbums.vue
index 2866c1c7..db5b9047 100644
--- a/src/components/AlbumView/ArtistAlbums.vue
+++ b/src/components/AlbumView/ArtistAlbums.vue
@@ -2,15 +2,13 @@
   <div class="artist-albums">
     <h3>
       <span>{{ title }} </span>
-      <span
-        class="see-all"
+      <SeeAll
         v-if="maxAbumCards <= albums.length"
+        :route="route"
         @click="
           !favorites ? useArtistDiscographyStore().setPage(albumType) : null
         "
-      >
-        <RouterLink :to="route">SEE ALL</RouterLink>
-      </span>
+      />
     </h3>
     <div class="cards">
       <AlbumCard v-for="a in albums.slice(0, maxAbumCards)" :album="a" />
@@ -25,6 +23,7 @@ import { discographyAlbumTypes } from "@/composables/enums";
 import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 
 import AlbumCard from "../shared/AlbumCard.vue";
+import SeeAll from "../shared/SeeAll.vue";
 
 defineProps<{
   title: string;
@@ -45,15 +44,6 @@ defineProps<{
     align-items: center;
     padding: 0 $medium;
     margin-bottom: $small;
-
-    .see-all {
-      font-size: $medium;
-
-      a:hover {
-        text-decoration: underline;
-        cursor: pointer !important;
-      }
-    }
   }
 
   .cards {
diff --git a/src/components/ArtistView/Albums.vue b/src/components/ArtistView/Albums.vue
deleted file mode 100644
index 79906a63..00000000
--- a/src/components/ArtistView/Albums.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="albums-list">
-    <div class="section-title">
-      <b>
-        {{ title }}
-      </b>
-      <div class="see-all"><b>SEE ALL</b></div>
-    </div>
-    <div class="cars">
-      <AlbumCard
-        v-for="album in search.albums.value.slice(0, 6)"
-        :album="album"
-        :key="Math.random()"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AlbumCard from "../shared/AlbumCard.vue";
-import useSearchStore from "@/stores/search";
-
-defineProps<{
-  //   albums: Album[];
-  title: string;
-}>();
-
-const search = useSearchStore();
-
-// TODO: use AlbumView's ArtistAlbums component instead of this
-</script>
-
-<style lang="scss">
-.albums-list {
-  .section-title {
-    margin: 0;
-    margin-bottom: -$small;
-
-    .see-all {
-      float: right;
-      font-size: small;
-      opacity: 0.5;
-    }
-  }
-
-  .cars {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    // padding: 1rem 0;
-    // gap: 2rem 0;
-  }
-}
-</style>
diff --git a/src/components/ArtistView/TopTracks.vue b/src/components/ArtistView/TopTracks.vue
index fc027814..8535330d 100644
--- a/src/components/ArtistView/TopTracks.vue
+++ b/src/components/ArtistView/TopTracks.vue
@@ -2,9 +2,7 @@
   <div class="artist-top-tracks">
     <h3 class="section-title">
       {{ title }}
-      <span class="see-all">
-        <RouterLink :to="route">SEE ALL</RouterLink>
-      </span>
+      <SeeAll :route="route" />
     </h3>
     <div class="tracks" :class="{ isSmall, isMedium }">
       <SongItem
@@ -22,6 +20,7 @@
 import SongItem from "../shared/SongItem.vue";
 import { Track } from "@/interfaces";
 import { isMedium, isSmall } from "@/stores/content-width";
+import SeeAll from "../shared/SeeAll.vue";
 
 defineProps<{
   tracks: Track[];
@@ -49,14 +48,5 @@ defineProps<{
     justify-content: space-between;
     padding-left: 1rem !important; // applies to favorite page
   }
-
-  .see-all {
-    font-size: $medium;
-
-    a:hover {
-      text-decoration: underline;
-      cursor: pointer !important;
-    }
-  }
 }
 </style>
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index 8d540b12..c4398d35 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items" class="rounded lislt-mode">
+    <div id="f-items" class="rounded">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -28,12 +28,11 @@ defineProps<{
 }
 
 #f-items.list-mode {
-  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  grid-template-columns: 1fr;
   gap: 0;
 
   .f-item {
-    // background-color: $red;
-    height: 4rem;
+    height: 3.25rem;
     border-radius: $small;
     background-color: transparent;
   }
@@ -43,3 +42,5 @@ defineProps<{
   }
 }
 </style>
+
+<!-- TODO: ADD BUTTON TO TOGGLE LIST MODE -->
\ No newline at end of file
diff --git a/src/components/PlaylistView/ArtistsList.vue b/src/components/PlaylistView/ArtistsList.vue
index a0d47a0d..b05da257 100644
--- a/src/components/PlaylistView/ArtistsList.vue
+++ b/src/components/PlaylistView/ArtistsList.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="f-artists">
-    <h3>{{ title }} <span class="see-all">SEE ALL</span></h3>
+    <h3>
+      {{ title }}
+      <SeeAll :route="route" />
+    </h3>
     <div class="artist-list">
       <ArtistCard
         v-for="artist in artists.slice(0, maxAbumCards)"
@@ -15,10 +18,12 @@
 import ArtistCard from "@/components/shared/ArtistCard.vue";
 import { Artist } from "@/interfaces";
 import { maxAbumCards } from "@/stores/content-width";
+import SeeAll from "../shared/SeeAll.vue";
 
 defineProps<{
   artists: Artist[];
   title: string;
+  route: string;
 }>();
 </script>
 
@@ -31,9 +36,7 @@ defineProps<{
     align-items: center;
     margin-bottom: $small;
 
-    .see-all {
-      font-size: $medium;
-    }
+   
   }
 
   .artist-list {
diff --git a/src/components/shared/SeeAll.vue b/src/components/shared/SeeAll.vue
new file mode 100644
index 00000000..4996c663
--- /dev/null
+++ b/src/components/shared/SeeAll.vue
@@ -0,0 +1,23 @@
+<template>
+  <span class="see-all">
+    <RouterLink :to="route"> SEE ALL </RouterLink>
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  route: string;
+}>();
+</script>
+
+<style lang="scss">
+.see-all {
+  font-size: $medium;
+  opacity: 0.75;
+
+  a:hover {
+    cursor: pointer !important;
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 63c28693..11763632 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -142,6 +142,12 @@ const favoriteTracks = {
   component: () => import("@/views/FavoriteTracks.vue"),
 };
 
+const favoriteArtists = {
+  path: "/favorites/artists",
+  name: "FavoriteArtists",
+  component: () => import("@/views/FavoriteArtists.vue"),
+};
+
 const notFound = {
   name: "NotFound",
   path: "/:pathMatch(.*)",
@@ -166,6 +172,7 @@ const routes = [
   favorites,
   favoriteAlbums,
   favoriteTracks,
+  favoriteArtists,
 ];
 
 const Routes = {
@@ -186,6 +193,7 @@ const Routes = {
   favorites: favorites.name,
   favoriteAlbums: favoriteAlbums.name,
   favoriteTracks: favoriteTracks.name,
+  favoriteArtists: favoriteArtists.name,
 };
 
 export { routes, Routes };
diff --git a/src/settings/strings.ts b/src/settings/strings.ts
index 6ac5c607..211d86d5 100644
--- a/src/settings/strings.ts
+++ b/src/settings/strings.ts
@@ -34,3 +34,7 @@ export const contextChildrenShowModeStrings = <S>{
     show_mode: "Show context children on",
   },
 };
+
+export const showFoldersAsStrings = <S>{
+  settings: { show_folders_as: "Show folders as" },
+};
diff --git a/src/views/AlbumsGrid.vue b/src/views/AlbumsGrid.vue
index 75c67aaf..440877a3 100644
--- a/src/views/AlbumsGrid.vue
+++ b/src/views/AlbumsGrid.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="album-grid-view v-scroll-page">
+  <div class="card-grid-view v-scroll-page">
     <div class="scrollable">
       <AlbumCard
         v-for="album in artist.toShow"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 import AlbumCard from "@/components/shared/AlbumCard.vue";
+import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 
 import { onMounted } from "vue";
 import { onBeforeRouteLeave, useRoute } from "vue-router";
diff --git a/src/views/ArtistView/Main.vue b/src/views/ArtistView/Main.vue
index f71cd51b..a7309620 100644
--- a/src/views/ArtistView/Main.vue
+++ b/src/views/ArtistView/Main.vue
@@ -180,9 +180,5 @@ onBeforeRouteLeave(async () => {
     margin: 1rem;
     padding-left: 1rem;
   }
-
-  .see-all {
-    opacity: 0.75;
-  }
 }
 </style>
diff --git a/src/views/FavoriteAlbums.vue b/src/views/FavoriteAlbums.vue
index 4f003371..ba1fb03b 100644
--- a/src/views/FavoriteAlbums.vue
+++ b/src/views/FavoriteAlbums.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="album-grid-view v-scroll-page">
+  <div class="card-grid-view v-scroll-page">
     <div class="scrollable">
       <AlbumCard
         v-for="album in albums"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, Ref, ref } from "vue";
 import { getFavAlbums } from "@/composables/fetch/favorite";
+import { onMounted, Ref, ref } from "vue";
 
 import AlbumCard from "@/components/shared/AlbumCard.vue";
 import { Album } from "@/interfaces";
diff --git a/src/views/FavoriteArtists.vue b/src/views/FavoriteArtists.vue
new file mode 100644
index 00000000..de85f169
--- /dev/null
+++ b/src/views/FavoriteArtists.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="card-grid-view v-scroll-page">
+    <div class="scrollable">
+      <ArtistCard
+        v-for="artist in artists"
+        :artist="artist"
+        :key="artist.artisthash"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getFavArtists } from "@/composables/fetch/favorite";
+import { onMounted, Ref, ref } from "vue";
+
+import ArtistCard from "@/components/shared/ArtistCard.vue";
+import { Artist } from "@/interfaces";
+
+const artists: Ref<Artist[]> = ref([]);
+
+onMounted(() => {
+  getFavArtists(0).then((data) => (artists.value = data));
+});
+</script>
diff --git a/src/views/Favorites.vue b/src/views/Favorites.vue
index 52a22834..7b7eef6a 100644
--- a/src/views/Favorites.vue
+++ b/src/views/Favorites.vue
@@ -18,7 +18,7 @@
     </div>
 
     <div class="fav-artists" v-if="favArtists.length">
-      <FeaturedArtists :artists="favArtists" :title="'Artists ❤️'" />
+      <FeaturedArtists :artists="favArtists" :title="'Artists ❤️'" :route="'/favorites/artists'"/>
     </div>
   </div>
 </template>
@@ -67,10 +67,6 @@ async function handlePlay(index: number) {
     margin-top: 0;
   }
 
-  .see-all {
-    opacity: 0.75;
-  }
-
   .fav-tracks {
     margin-bottom: 2rem;