Fix warning about children with non-unique keys

package-lock.json

@@ -1794,7 +1794,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -2209,7 +2210,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2265,6 +2267,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2308,12 +2311,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/cljs/airsonic_ui/components/audio_player/views.cljs

@@ -88,12 +88,11 @@
                 :media-play "Play"
                 :media-pause "Pause"
                 :media-step-forward "Next"}]
-     (map (fn [[icon-glyph event]]
+     (for [[icon-glyph event] buttons]
-            ^{:key icon-glyph} [:p.control>button.button.is-light
+       ^{:key icon-glyph} [:p.control [:button.button.is-light
-                                      {:on-click (muted-dispatch [event])
+                                       {:on-click (muted-dispatch [event])
-                                       :title (title icon-glyph)}
+                                        :title (title icon-glyph)}
-                                      [icon icon-glyph]])
+                                       [icon icon-glyph]]]))])
-          buttons))])
 
 (defn- toggle-shuffle [playback-mode]
   (muted-dispatch [:audio-player/set-playback-mode (if (= playback-mode :shuffled)

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

@@ -12,9 +12,19 @@
             ^{:key idx} [:li (when (= params active-item)
                                {:class-name "is-active"})
                          [:a {:href (apply url-for route)} label]]))]])
-;; this variable determines how many pages before the first known page we should list 
+;; this variable determines how many pages before the first known page we should list
 (def page-padding 2)
 
+(defn pagination-link
+  "One of many numbered links to a page"
+  [current-page page href]
+  (let [current-page? (= page current-page)]
+    [(if current-page?
+       :a.pagination-link.is-current
+       :a.pagination-link)
+     (cond-> {:href href, :aria-label (str "Page " page)}
+       current-page? (assoc :aria-current "page")) page]))
+
 (defn pagination
   "Builds a pagination, calling `url-fn` for every rendered page link with the
   page as its argument. When `max-pages` is `nil` an infinite pagination
@@ -22,11 +32,11 @@
   [{:keys [items current-page url-fn]}]
   ;; NOTE: This is currently slightly flawed. We don't have any good way to
   ;; know whether we're on the last possible page so we take the last loaded
-  ;; page instead 
+  ;; page instead
   (let [num-pages (last (keys items))
         first-page? (= current-page 1)
         pages (range (max 1 (- current-page page-padding))
-                     (min (inc (+ current-page page-padding)) (inc num-pages))) ]
+                     (min (inc (+ current-page page-padding)) (inc num-pages)))]
     [:nav.pagination.is-centered {:role "pagination", :aria-label "pagination"}
      ;; now we add buttons to progress one page in each direction
      [:a.pagination-previous (if first-page?
@@ -37,22 +47,17 @@
      [:ul.pagination-list
       ;; some indication that there are previous pages
       (when (> current-page (+ page-padding 2))
-        [:li>a.pagination-link {:href (url-fn 1), :aria-label "Page 1"} "1"])
+        [:li [pagination-link current-page 1 (url-fn 1)]])
       (when (> current-page (+ page-padding 1))
         [:li>span.pagination-ellipsis "…"])
       ;; all pagination links around our current page
       (for [page pages]
-        (let [current-page? (= page current-page)]
+        ^{:key page} [:li [pagination-link current-page page (url-fn page)]])
-          ^{:key page} [(cond-> :li>a.pagination-link
-                          current-page? (add-classes :is-current))
-                        (cond-> {:href (url-fn page), :aria-label (str "Page " page)}
-                          current-page? (assoc :aria-current "page")) page]))
       ;; some indication that there are more pages after
       (when (< current-page (- num-pages page-padding))
         [:li>span.pagination-ellipsis "…"])
       (when (< current-page (- num-pages page-padding))
-        [:li>a.pagination-link {:href (url-fn num-pages), :aria-label (str "Page " num-pages)} num-pages])]]))
+        [:li [pagination-link current-page num-pages (url-fn num-pages)]])]]))
-      
 
 (def tab-items [[[::routes/library {:kind "recent"} nil] "Recently played"]
                 [[::routes/library {:kind "newest"} nil] "Newest additions"]