Add tabs for newest and starred tracks

src/cljs/airsonic_ui/components/library/views.cljs

@@ -0,0 +1,21 @@
+(ns airsonic-ui.components.library.views
+  (:require [airsonic-ui.routes :as routes :refer [url-for]]
+            [airsonic-ui.views.album :as album]))
+
+(defn tabs [items active-item]
+  [:div.tabs
+   [:ul (for [[idx [route label]] (map-indexed vector items)]
+          (do
+            (println route label active-item)
+            ^{:key idx} [:li (when (= route active-item)
+                               {:class-name "is-active"})
+                         [:a {:href (apply url-for route)} label]]))]])
+
+(defn main [route {:keys [album-list]}]
+  [:div
+   [:h2.title "Your library"]
+   (let [items [[[::routes/library {:criteria "recent"} nil] "Recently played"]
+                [[::routes/library {:criteria "newest"} nil] "Newest additions"]
+                [[::routes/library {:criteria "starred"} nil] "Starred"]]]
+     [tabs items route])
+   [album/listing (:album album-list)]])

src/cljs/airsonic_ui/events.cljs

@@ -113,7 +113,7 @@
 (defn logged-in
   [cofx _]
   (let [redirect (or (get-in cofx [:routes/from-query-param :redirect])
-                     [::routes/main])]
+                     [::routes/library])]
     {:dispatch [:routes/do-navigation redirect]
      :show-nav-bar nil}))
 

src/cljs/airsonic_ui/routes.cljs

@@ -7,18 +7,20 @@
 
 (defonce router
   (r/router [["/" ::login]
-             ["/main" ::main]
+             ["/library" ::library]
+             ["/library/:criteria" ::library]
              ["/artist/:id" ::artist-view]
              ["/album/:id" ::album-view]
              ["/search" ::search]]))
 
 ;; use this in views to construct a url
 (defn url-for
-  ([k] (url-for k {}))
-  ([k params] (str "#" (r/resolve router k params))))
+  ([k] (url-for k {} nil))
+  ([k params] (url-for k params nil))
+  ([k params query] (str "#" (r/resolve router k params query))))
 
 ;; which routes need valid login credentials?
-(def protected-routes #{::main ::artist-view ::album-view ::search})
+(def protected-routes #{::library ::artist-view ::album-view ::search})
 
 ;; which data should be requested for which route? can either be a vector or a function returning a vector
 
@@ -28,10 +30,11 @@
 
 (defmethod -route-events :default [route-id params query] nil)
 
-(defmethod -route-events ::main
-  [route-id params query]
-  [:api/request "getAlbumList2" {:type "recent"
-                                 :size 18}])
+(defmethod -route-events ::library
+  [route-id {:keys [criteria]} query]
+  (if criteria
+    [:api/request "getAlbumList2" {:type criteria, :size 18}]
+    [:routes/do-navigation [route-id {:criteria "recent"} query]]))
 
 (defmethod -route-events ::artist-view
   [route-id params query]
@@ -97,7 +100,6 @@
                   credentials'(get-in context [:coeffects :db :credentials])]
               (println "calling do-navigation with" route credentials')
               (reset! credentials credentials')
-              (println "context" context)
               (apply r/navigate! router route)
               (dissoc context :event)))))
 

src/cljs/airsonic_ui/views.cljs

@@ -11,7 +11,8 @@
             [airsonic-ui.views.login :refer [login-form]]
             [airsonic-ui.views.album :as album]
             [airsonic-ui.views.song :as song]
-            [airsonic-ui.components.search.views :as search]))
+            [airsonic-ui.components.search.views :as search]
+            [airsonic-ui.components.library.views :as library]))
 
 ;; TODO: Find better names and places for these.
 
@@ -26,11 +27,6 @@
    [:div.content>p {:dangerouslySetInnerHTML {:__html (:biography artist-info)}}]
    [album/listing (:album artist)]])
 
-(defn most-recent [{:keys [album-list]}]
-  [:div
-   [:h2.title "Recently played"]
-   [album/listing (:album album-list)]])
-
 (defn sidebar [user]
   [:aside.menu.section
    [search/form]
@@ -53,6 +49,7 @@
 
 (defn app [route-id params query]
   (let [user @(subscribe [::subs/user])
+        ;; TODO: Move this to a layer 3 subscription ↓
         route-events @(subscribe [:routes/events-for-current-route])
         content @(subscribe [:api/route-data route-events])]
     [:div
@@ -63,7 +60,7 @@
        [:section.section
         [breadcrumbs content]
         (case route-id
-          ::routes/main [most-recent content]
+          ::routes/library [library/main [route-id params query] content]
           ::routes/artist-view [artist-detail content]
           ::routes/album-view [album-detail content]
           ::routes/search [search/results content])]]]

src/cljs/airsonic_ui/views/breadcrumbs.cljs

@@ -28,16 +28,16 @@
 
 (defmethod breadcrumbs :artist [{:keys [artist]}]
   [bulma-breadcrumbs
-   [(url-for ::routes/main) "Start"]
+   [(url-for ::routes/library) "Start"]
    (:name artist)])
 
 (defmethod breadcrumbs :album [{:keys [album]}]
   [bulma-breadcrumbs
-   [(url-for ::routes/main) "Start"]
+   [(url-for ::routes/library) "Start"]
    [(url-for ::routes/artist-view {:id (:artistId album)}) (:artist album)]
    (:name album)])
 
 (defmethod breadcrumbs :search [_]
   [bulma-breadcrumbs
-   [(url-for ::routes/main) "Start"]
+   [(url-for ::routes/library) "Start"]
    "Search"])