[FIX #226] UI changes; refactor React refs usage

src/cljs/commiteth/activity.cljs

@@ -2,7 +2,9 @@
   (:require [re-frame.core :as rf]
             [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
+                                      items-per-page
                                       display-data-page
+                                      scroll-div
                                       issue-url]]))
 
 
@@ -55,28 +57,29 @@
            (str (subs (str tla) 1) " " balance)])])
      [:div.time (moment-timestamp updated)]]]])
 
-
+(defn activity-list [{:keys [items item-count page-number total-count] 
-
+                      :as activity-page-data}]
-(defn activity-list [activity-page-data]
   (if (empty? (:items activity-page-data))
     [:div.view-no-data-container
      [:p "No recent activity yet"]]
-    (display-data-page activity-page-data activity-item :set-activity-page-number)))
+    [:div
+     (let [left (inc (* (dec page-number) items-per-page))
+           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)]))
 
 (defn activity-page []
   (let [activity-page-data (rf/subscribe [:activities-page])
         activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])
-        container-element (atom nil) 
+        container-element (atom nil)] 
-        render-fn (fn []
+    (fn []
-                    (if @activity-feed-loading?
+      (if @activity-feed-loading?
-                      [:div.view-loading-container
+        [:div.view-loading-container
-                       [:div.ui.active.inverted.dimmer
+         [:div.ui.active.inverted.dimmer
-                        [:div.ui.text.loader.view-loading-label "Loading"]]]
+          [:div.ui.text.loader.view-loading-label "Loading"]]]
-                      [:div.ui.container.activity-container
+        [:div.ui.container.activity-container
-                       {:ref #(reset! container-element %1)} 
+         {:ref #(reset! container-element %1)} 
-                       [activity-list @activity-page-data]]))]
+         [scroll-div container-element]
-    (r/create-class
+         [:div.activity-header "Activities"]
-      {:component-did-update (fn [] 
+         [activity-list @activity-page-data]]))))
-                               (when @container-element
-                                 (.scrollIntoView @container-element)))
-       :reagent-render render-fn})))

src/cljs/commiteth/bounties.cljs

@@ -3,6 +3,7 @@
             [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
                                       display-data-page
+                                      scroll-div
                                       items-per-page
                                       issue-url]]))
 
@@ -55,23 +56,20 @@
            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 :set-bounty-page-number)]))
+     (display-data-page bounty-page-data bounty-item)]))
 
 (defn bounties-page []
   (let [bounty-page-data (rf/subscribe [:open-bounties-page])
         open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])
-        container-element (atom nil) 
+        container-element (atom nil)] 
-        render-fn (fn []
+    (fn []
-                    (if @open-bounties-loading?
+      (if @open-bounties-loading?
-                      [:div.view-loading-container
+        [:div.view-loading-container
-                       [:div.ui.active.inverted.dimmer
+         [:div.ui.active.inverted.dimmer
-                        [:div.ui.text.loader.view-loading-label "Loading"]]]
+          [:div.ui.text.loader.view-loading-label "Loading"]]]
-                      [:div.ui.container.open-bounties-container
+        [:div.ui.container.open-bounties-container
-                       {:ref #(reset! container-element %1)} 
+         {:ref #(reset! container-element %1)} 
-                       [:div.open-bounties-header "Bounties"]
+         [scroll-div container-element]
-                       [bounties-list @bounty-page-data]]))]
+         [:div.open-bounties-header "Bounties"]
-    (r/create-class
+         [bounties-list @bounty-page-data]]))
-      {:component-did-update (fn [] 
+    ))
-                               (when @container-element
-                                 (.scrollIntoView @container-element)))
-       :reagent-render render-fn})))

src/cljs/commiteth/common.cljs

@@ -1,6 +1,7 @@
 (ns commiteth.common
   (:require [reagent.core :as r]
             [re-frame.core :as rf]
+            [clojure.string :as str]
             [cljsjs.moment]))
 
 (defn input [val-ratom props]
@@ -30,9 +31,22 @@
 (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 set-page-kw]
+(defn draw-page-numbers [page-number page-count]
   "Draw page numbers for the pagination component.
    Inserts ellipsis when list is too long, by default
    max 6 items are allowed"
@@ -41,8 +55,8 @@
                            [:div.rectangle-rounded
                             (cond-> {} 
                               (not current?) 
-                              (assoc :class "grayed-out"
+                              (assoc :class "grayed-out-page-num"
-                                     :on-click #(rf/dispatch [set-page-kw i])))
+                                     :on-click #(rf/dispatch [:set-page-number i])))
                             i])
         max-page-nums 6]
     [:div.page-nums-container 
@@ -78,8 +92,7 @@
                                  total-count
                                  page-number 
                                  page-count]} 
-                         draw-item-fn
+                         draw-item-fn]
-                         set-page-kw]
   "Draw data items along with pagination controls"
   (let [draw-items (fn []
                      (into [:div.ui.items]
@@ -90,14 +103,17 @@
                                              forward?) 
                                         (and (< 1 page-number)
                                              (not forward?))) 
-                                (rf/dispatch [set-page-kw 
+                                (rf/dispatch [:set-page-number
                                               (if forward?
                                                 (inc page-number)
                                                 (dec page-number))])))
         draw-rect (fn [direction]
-                    (let [forward? (= direction :forward)]
+                    (let [forward? (= direction :forward)
+                          gray-out? (or (and forward? (= page-number page-count))
+                                        (and (not forward?) (= page-number 1))) ]
                       [:div.rectangle-rounded 
-                       {:on-click (on-direction-click forward?)}
+                       (cond-> {:on-click (on-direction-click forward?)}
+                         gray-out? (assoc :class "grayed-out-direction"))
                        [:img.icon-forward-gray 
                         (cond-> {:src "icon-forward-gray.svg"}
                           forward? (assoc :class "flip-horizontal"))]]))]
@@ -110,6 +126,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 set-page-kw]]])))
+            [draw-page-numbers page-number page-count]]])))
 
 

src/cljs/commiteth/db.cljs

@@ -8,8 +8,7 @@
    :activity-feed-loading? false
    :open-bounties-loading? false
    :open-bounties []
-   :bounty-page-number 1
+   :page-number 1
-   :activity-page-number 1
    :owner-bounties   {}
    :top-hunters []
    :activity-feed []})

src/cljs/commiteth/handlers.cljs

@@ -63,19 +63,15 @@
 
 
 (reg-event-db
- :set-active-page
+  :set-active-page
- (fn [db [_ page]]
+  (fn [db [_ page]]
-   (assoc db :page page)))
+    (assoc db :page page
+           :page-number 1)))
 
 (reg-event-db
-  :set-bounty-page-number
+  :set-page-number
   (fn [db [_ page]]
-    (assoc db :bounty-page-number page)))
+    (assoc db :page-number page)))
-
-(reg-event-db
-  :set-activity-page-number
-  (fn [db [_ page]]
-    (assoc db :activity-page-number page)))
 
 (reg-event-fx
  :set-flash-message
@@ -90,7 +86,6 @@
  (fn [db _]
    (dissoc db :flash-message)))
 
-
 (defn assoc-in-if-not-empty [m path val]
   (if (seq val)
     (assoc-in m path val)

src/cljs/commiteth/subscriptions.cljs

@@ -37,14 +37,14 @@
     (vec (:open-bounties db))))
 
 (reg-sub
-  :bounty-page-number
+  :page-number
   (fn [db _]
-    (:bounty-page-number db)))
+    (:page-number db)))
 
 (reg-sub
   :open-bounties-page
   :<- [:open-bounties]
-  :<- [:bounty-page-number]
+  :<- [:page-number]
   (fn [[open-bounties page-number] _]
     (let [total-count (count open-bounties)
           start (* (dec page-number) items-per-page)
@@ -77,15 +77,10 @@
   (fn [db _]
     (vec (:activity-feed db))))
 
-(reg-sub
-  :activity-page-number
-  (fn [db _]
-    (:activity-page-number db)))
-
 (reg-sub
   :activities-page
   :<- [:activity-feed]
-  :<- [:activity-page-number]
+  :<- [:page-number]
   (fn [[activities page-number] _]
     (let [total-count (count activities)
           start (* (dec page-number) items-per-page)

src/less/style.less

@@ -523,7 +523,7 @@
         }
     }
 
-    border: #e7e7e7 solid 0.1em!important;
+    border-bottom: #eaecee 1px solid !important;
     box-shadow: none!important;
     border-radius: 0.3em!important;
     padding: 0.8em 1em 1.1em!important;
@@ -588,9 +588,16 @@
 }
 
 .activity-container {
+    background-color: #fff;
     transform: translate(0, -45px);
     border-radius: 10px;
-
+    padding: 24px;
+    .activity-header {
+        font-family: "PostGrotesk-Medium";
+        font-size: 21px;
+        font-weight: 500;
+        color: #42505c;
+    }
 }
 
 .footer-row {
@@ -890,12 +897,19 @@ body {
   cursor: pointer;
 }
 
-.grayed-out {
+.grayed-out-page-num {
   color: #8d99a4;
   background-color: #f2f5f8;
   opacity: 1.0;
 }
 
+.grayed-out-direction {
+  color: #8d99a4;
+  background-color: #f2f5f8;
+  opacity: 0.4;
+  cursor: auto
+}
+
 .flip-horizontal {
     -moz-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);