From 3d37cd59b30d5d01d6165fc513d75ba70d8e69c9 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 2 Jan 2023 20:55:15 +0300
Subject: [PATCH] feat: auto load more search track results

---
 src/components/SearchPage/FetchMore.vue | 12 +++++++
 src/views/SearchView/albums.vue         | 10 +++++-
 src/views/SearchView/main.vue           | 10 +++---
 src/views/SearchView/tracks.vue         | 45 ++++++++++++++++++++-----
 4 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 src/components/SearchPage/FetchMore.vue

diff --git a/src/components/SearchPage/FetchMore.vue b/src/components/SearchPage/FetchMore.vue
new file mode 100644
index 0000000..4266aea
--- /dev/null
+++ b/src/components/SearchPage/FetchMore.vue
@@ -0,0 +1,12 @@
+<template></template>
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+const props = defineProps<{
+  action: () => void;
+}>();
+
+onMounted(() => {
+  props.action();
+});
+</script>
diff --git a/src/views/SearchView/albums.vue b/src/views/SearchView/albums.vue
index 17e1ddb..dd746ac 100644
--- a/src/views/SearchView/albums.vue
+++ b/src/views/SearchView/albums.vue
@@ -13,4 +13,12 @@ import AlbumCard from "@/components/shared/AlbumCard.vue";
 import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+.search-albums-view.grid-page {
+  padding-right: $small;
+
+  overflow: auto;
+}
+</style>
diff --git a/src/views/SearchView/main.vue b/src/views/SearchView/main.vue
index f453d25..0581194 100644
--- a/src/views/SearchView/main.vue
+++ b/src/views/SearchView/main.vue
@@ -15,10 +15,12 @@
 
 <script setup lang="ts">
 import { Routes } from "@/router/routes";
-import useSearchStore from "@/stores/search";
-import { focusElemByClass } from "@/utils";
-import { computed, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import { computed, onMounted, ref } from "vue";
+
+import { focusElemByClass } from "@/utils";
+import useSearchStore from "@/stores/search";
+
 import AlbumPage from "./albums.vue";
 import ArtistPage from "./artists.vue";
 import TracksPage from "./tracks.vue";
@@ -55,7 +57,7 @@ const component = computed(() => {
 
 function loadTracks() {
   search.loadTracks();
-  focusElemByClass("page-bottom-padding", 100);
+  focusElemByClass("track-11", 100);
 }
 
 function getGridRowItemCount() {
diff --git a/src/views/SearchView/tracks.vue b/src/views/SearchView/tracks.vue
index 9a60f1c..e6000f7 100644
--- a/src/views/SearchView/tracks.vue
+++ b/src/views/SearchView/tracks.vue
@@ -1,20 +1,17 @@
 <template>
   <div class="search-tracks-view">
-    <div
-      :class="{ isSmall, isMedium }"
-      style="height: 100%"
-    >
+    <div :class="{ isSmall, isMedium }" style="height: 100%">
       <RecycleScroller
         id="songlist-scroller"
         style="height: 100%"
-        :items="search.tracks.value.map((track) => ({ track, id: Math.random() }))"
+        :items="scrollerItems"
         :item-size="64"
         key-field="id"
         v-slot="{ item, index }"
       >
-        <SongItem
-          :track="item.track"
-          :index="index + 1"
+        <component
+          :is="item.component"
+          v-bind="item.props"
           @playThis="playFromSearch(index)"
         />
       </RecycleScroller>
@@ -23,14 +20,44 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+
 import useQueueStore from "@/stores/queue";
 import useSearchStore from "@/stores/search";
 import { isMedium, isSmall } from "@/stores/content-width";
 import SongItem from "@/components/shared/SongItem.vue";
+import FetchMore from "@/components/SearchPage/FetchMore.vue";
 
 const search = useSearchStore();
 const queue = useQueueStore();
 
+interface scrollerItem {
+  id: number;
+  component: typeof SongItem | typeof FetchMore;
+  props: Record<string, any>;
+}
+
+const scrollerItems = computed(() => {
+  const items: scrollerItem[] = search.tracks.value.map((track, index) => ({
+    id: Math.random(),
+    component: SongItem,
+    props: {
+      track,
+      index: index + 1,
+    },
+  }));
+
+  items.push({
+    id: Math.random(),
+    component: FetchMore,
+    props: {
+      action: search.loadTracks,
+    },
+  });
+
+  return items;
+});
+
 function playFromSearch(index: number) {
   queue.playFromSearch(search.query, search.tracks.value);
   queue.play(index);
@@ -45,7 +72,7 @@ function playFromSearch(index: number) {
     height: 100%;
   }
 
-  #songlist-scroller{
+  #songlist-scroller {
     padding-right: 1rem;
     padding-left: 0;
   }