feat(frontend): Modularize components and add pagination

1 files changed, 31 insertions, 33 deletions

diff --git a/src/frontend/tau/views/search.cljs b/src/frontend/tau/views/search.cljs
index 64bddf3..69f1353 100644
--- a/src/frontend/tau/views/search.cljs
+++ b/src/frontend/tau/views/search.cljs
@@ -1,38 +1,36 @@
 (ns tau.views.search
   (:require
    [re-frame.core :as rf]
-   [reitit.frontend.easy :as rfe]))
-
-(defn search-result
-  [title author url thumbnail id]
-  [:div.w-56.h-64.my-2 {:key id}
-   [:div.p-5.border.rounded.border-slate-900.m-2.bg-slate-600.flex.flex-col.max-w-full.min-h-full.max-h-full
-    [:a.overflow-hidden {:href (rfe/href :tau.routes/stream {} {:url url}) :title title}
-     [:div.flex.justify-center.min-w-full.py-3.box-border
-      [:div.h-28.min-w-full.flex.justify-center
-       [:img.rounded.object-cover.max-h-full {:src thumbnail}]]]
-     [:div.overflow-hidden
-      [:h1.text-gray-300.font-bold author]
-      [:h1 title]]]]])
+   [reitit.frontend.easy :as rfe]
+   [tau.components.items :as items]
+   [tau.components.loading :as loading]
+   [tau.events :as events]))
 
 (defn search
-  [m]
-  (let [search-results (rf/subscribe [:search-results])
-        services (rf/subscribe [:services])
-        service-id (rf/subscribe [:service-id])]
-    [:div.text-gray-300.text-center.py-5.relative
-     [:h2 (str "Showing search results for: \"" (-> m :query-params :q) "\"")]
-     [:h1 (str "Number of search results: " (count (:items @search-results)))]
-     ;; TODO: Create loadable component that wraps other components that need to fetch from API
-     ;; or use a :loading key to show a spinner component instead
-     (if (empty? @search-results)
-       [:p "Loading"]
-       [:div.flex.justify-center.align-center.flex-wrap
-        (for [[i result] (map-indexed vector (:items @search-results))]
-          ;; TODO: Add a component per result type
-          [search-result
-           (:name result)
-           (:upload-author result)
-           (:url result)
-           (:thumbnail-url result)
-           i])])]))
+  [{{:keys [q serviceId]} :query-params}]
+  (let [{:keys [items next-page] :as search-results} @(rf/subscribe [:search-results])
+        next-page-url (:url next-page)
+        services @(rf/subscribe [:services])
+        service-id @(rf/subscribe [:service-id])
+        service-color @(rf/subscribe [:service-color])
+        page-scroll @(rf/subscribe [:page-scroll])
+        page-loading? @(rf/subscribe [:show-page-loading])
+        pagination-loading? @(rf/subscribe [:show-pagination-loading])
+        scrolled-to-bottom? (= page-scroll (.-scrollHeight js/document.body))]
+    (when scrolled-to-bottom?
+      (rf/dispatch [::events/scroll-search-pagination q serviceId next-page-url]))
+    [:div.flex.flex-col.text-gray-300.h-box-border.flex-auto
+     [:div.flex.flex-col.items-center.w-full.pt-4.flex-initial
+      [:h2 (str "Showing search results for: \"" q "\"")]
+      [:h1 (str "Number of search results: " (count items))]]
+     (if page-loading?
+       [loading/page-loading-icon service-color]
+       [:div.flex.flex-col
+        [:div.flex.justify-center.align-center.flex-wrap.flex-auto
+         (for [[i item] (map-indexed vector items)]
+           (cond
+             (:duration item) [items/stream-item i item]
+             (:subscriber-count item) [items/channel-item i item]
+             (:stream-count item) [items/playlist-item i item]))
+         (when-not (empty? next-page-url)
+           [loading/pagination-loading-icon service-color pagination-loading?])]])]))