Remove scroll-div; pass container element ref to on-click handlers

src/cljs/commiteth/activity.cljs

@@ -4,7 +4,6 @@
             [commiteth.common :refer [moment-timestamp
                                       items-per-page
                                       display-data-page
-                                      scroll-div
                                       issue-url]]))
 
 
@@ -58,7 +57,8 @@
      [:div.time (moment-timestamp updated)]]]])
 
 (defn activity-list [{:keys [items item-count page-number total-count] 
-                      :as activity-page-data}]
+                      :as activity-page-data}
+                     container-element]
   (if (empty? (:items activity-page-data))
     [:div.view-no-data-container
      [:p "No recent activity yet"]]
@@ -67,7 +67,7 @@
            right (dec (+ left item-count))]
        [:div.item-counts-label
         [:span (str "Showing " left "-" right " of " total-count)]])
-     (display-data-page activity-page-data activity-item)]))
+     (display-data-page activity-page-data activity-item container-element)]))
 
 (defn activity-page []
   (let [activity-page-data (rf/subscribe [:activities-page])
@@ -80,6 +80,5 @@
           [:div.ui.text.loader.view-loading-label "Loading"]]]
         [:div.ui.container.activity-container
          {:ref #(reset! container-element %1)} 
-         [scroll-div container-element]
          [:div.activity-header "Activities"]
-         [activity-list @activity-page-data]]))))
+         [activity-list @activity-page-data container-element]]))))

src/cljs/commiteth/bounties.cljs

@@ -3,7 +3,6 @@
             [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
                                       display-data-page
-                                      scroll-div
                                       items-per-page
                                       issue-url]]))
 
@@ -47,7 +46,8 @@
        [:img {:src avatar-url}]]]]))
 
 (defn bounties-list [{:keys [items item-count page-number total-count] 
-                      :as bounty-page-data}]
+                      :as bounty-page-data}
+                     container-element]
   (if (empty? items)
     [:div.view-no-data-container
      [:p "No recent activity yet"]]
@@ -56,7 +56,7 @@
            right (dec (+ left item-count))]
        [:div.item-counts-label
         [:span (str "Showing " left "-" right " of " total-count)]])
-     (display-data-page bounty-page-data bounty-item)]))
+     (display-data-page bounty-page-data bounty-item container-element)]))
 
 (defn bounties-page []
   (let [bounty-page-data (rf/subscribe [:open-bounties-page])
@@ -69,7 +69,6 @@
           [:div.ui.text.loader.view-loading-label "Loading"]]]
         [:div.ui.container.open-bounties-container
          {:ref #(reset! container-element %1)} 
-         [scroll-div container-element]
          [:div.open-bounties-header "Bounties"]
-         [bounties-list @bounty-page-data]]))
+         [bounties-list @bounty-page-data container-element]]))
     ))

src/cljs/commiteth/common.cljs

@@ -31,22 +31,9 @@
 (defn issue-url [owner repo number]
   (str "https://github.com/" owner "/" repo "/issues/" number))
 
-(defn scroll-div [container-element]
-  "This is an invisible div that exists
-   for the sole purpose of scrolling the container-element into view
-   when page-number is updated"
-  (let [page-number (rf/subscribe [:page-number])]
-    (r/create-class
-      {:component-did-update (fn [] 
-                               (when @container-element
-                                 (.scrollIntoView @container-element)))
-       :reagent-render (fn []
-                         [:div {:style {:display "none"}}
-                          @page-number])})))
-
 (def items-per-page 15)
 
-(defn draw-page-numbers [page-number page-count]
+(defn draw-page-numbers [page-number page-count container-element]
   "Draw page numbers for the pagination component.
   Inserts ellipsis when list is too long, by default
   max 6 items are allowed"
@@ -56,7 +43,9 @@
                             (if current?
                               {:class "page-num-active"}
                               {:class "grayed-out-page-num"
-                               :on-click #(rf/dispatch [:set-page-number i])})
+                               :on-click #(do 
+                                            (rf/dispatch [:set-page-number i])
+                                            (.scrollIntoView @container-element))})
                             i])
         max-page-nums 6]
     [:div.page-nums-container 
@@ -92,7 +81,8 @@
                                  total-count
                                  page-number 
                                  page-count]} 
-                         draw-item-fn]
+                         draw-item-fn
+                         container-element]
   "Draw data items along with pagination controls"
   (let [draw-items (fn []
                      (into [:div.ui.items]
@@ -106,7 +96,8 @@
                                 (rf/dispatch [:set-page-number
                                               (if forward?
                                                 (inc page-number)
-                                                (dec page-number))])))
+                                                (dec page-number))])
+                                (.scrollIntoView @container-element)))
         draw-rect (fn [direction]
                     (let [forward? (= direction :forward)
                           gray-out? (or (and forward? (= page-number page-count))
@@ -127,6 +118,6 @@
              [draw-rect :backward]
              [draw-rect :forward]]
             [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
-            [draw-page-numbers page-number page-count]]])))
+            [draw-page-numbers page-number page-count container-element]]])))