feat(frontend): add tab support in stream pages

2 files changed, 38 insertions, 5 deletions

diff --git a/src/frontend/tubo/channel/events.cljs b/src/frontend/tubo/channel/events.cljs
index 668b21d..3e529df 100644
--- a/src/frontend/tubo/channel/events.cljs
+++ b/src/frontend/tubo/channel/events.cljs
@@ -39,6 +39,22 @@
            [:channel/bad-page-response uri]]]]
     :db (assoc db :show-page-loading true)}))
 
+(rf/reg-event-fx
+ :channel/load-tab
+ (fn [{:keys [db]} [_ res]]
+   (let [tab-res (js->clj res :keywordize-keys true)]
+     {:db (-> db
+              (assoc-in [:channel :related-streams] (:related-streams tab-res))
+              (assoc-in [:channel :next-page-url] (:next-page-url tab-res)))})))
+
+(rf/reg-event-fx
+ :channel/fetch-tab
+ (fn [_ [_ uri tab-id]]
+   (api/get-request
+    (str "/channels/" (js/encodeURIComponent uri) "/tabs/" tab-id)
+    [:channel/load-tab]
+    [:channel/bad-page-response])))
+
 (rf/reg-event-db
  :channel/load-paginated
  (fn [db [_ res]]
@@ -62,12 +78,13 @@
 
 (rf/reg-event-fx
  :channel/fetch-paginated
- (fn [{:keys [db]} [_ uri next-page-url]]
+ (fn [{:keys [db]} [_ uri tab-id next-page-url]]
    (if (empty? next-page-url)
      {:db (assoc db :show-pagination-loading false)}
      (assoc
       (api/get-request
-       (str "/channels/" (js/encodeURIComponent uri))
+       (str "/channels/" (js/encodeURIComponent uri)
+            "/tabs/"     (or tab-id "default"))
        [:channel/load-paginated]
        [:channel/bad-paginated-response]
        {:nextPage (js/encodeURIComponent next-page-url)})
diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs
index 7ca26e4..d9dee61 100644
--- a/src/frontend/tubo/channel/views.cljs
+++ b/src/frontend/tubo/channel/views.cljs
@@ -41,7 +41,8 @@
 (defn channel
   [_]
   (let [!show-description? (r/atom false)
-        !layout            (r/atom (:items-layout @(rf/subscribe [:settings])))]
+        !layout            (r/atom (:items-layout @(rf/subscribe [:settings])))
+        !active-tab        (r/atom nil)]
     (fn [{{:keys [url]} :query-params}]
       (let [{:keys [banners description next-page related-streams] :as channel}
             @(rf/subscribe [:channel])
@@ -49,7 +50,8 @@
             scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])
             page-loading? @(rf/subscribe [:show-page-loading])]
         (when (and next-page-url scrolled-to-bottom?)
-          (rf/dispatch [:channel/fetch-paginated url next-page-url]))
+          (rf/dispatch [:channel/fetch-paginated url @!active-tab
+                        next-page-url]))
         [:<>
          (when-not page-loading?
            (when banners
@@ -63,5 +65,19 @@
           (when-not (empty? description)
             [layout/show-more-container @!show-description? description
              #(reset! !show-description? (not @!show-description?))])
-          [items/layout-switcher !layout]
+          [:div.flex.justify-between
+           [layout/tabs
+            (map (fn [tab]
+                   {:id    (-> tab
+                               :contentFilters
+                               first)
+                    :label (-> tab
+                               :contentFilters
+                               first)})
+                 (:tabs channel))
+            :selected-id @!active-tab
+            :on-change
+            #(do (reset! !active-tab %)
+                 (rf/dispatch [:channel/fetch-tab url %]))]
+           [items/layout-switcher !layout]]
           [items/related-streams related-streams next-page-url !layout]]]))))