#301: turn stats calculation into subscription, improve dollar amount display

src/cljs/commiteth/common.cljs

@@ -135,4 +135,10 @@
             [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
             [draw-page-numbers page-number page-count container-element]]])))
 
+(defn usd-string
+  "Turn a given float into a USD currency string based on the browsers locale setting.
 
+  A more complex and customizable approach can be found in goog.i18n.NumberFormat:
+  https://google.github.io/closure-library/api/goog.i18n.NumberFormat.html"
+  [usd-float]
+  (.toLocaleString usd-float js/navigator.language #js {:style "currency" :currency "USD"}))

src/cljs/commiteth/manage_payouts.cljs

@@ -1,6 +1,6 @@
 (ns commiteth.manage-payouts
   (:require [re-frame.core :as rf]
-            [commiteth.common :refer [human-time]]))
+            [commiteth.common :as common :refer [human-time]]))
 
 
 
@@ -58,21 +58,20 @@
             [claim-card bounty claim]))))
 
 (defn bounty-stats [{:keys [paid unpaid]}]
-  (let [sum-dollars (fn [bounties]
-                      (reduce + (map #(js/parseFloat (:value_usd %)) bounties)))]
-    [:div.cf.pv4
-     [:div.fl.w-50.tc
-      [:div.ttu.tracked "Open"]
-      [:div.f2.pa2 "$" (sum-dollars unpaid)]
-      [:div (count unpaid) " bounties"]]
+  [:div.cf.pv4
+   [:div.fl.w-50.tc
+    [:div.ttu.tracked "Open"]
+    [:div.f2.pa2 (common/usd-string (:combined-usd-value unpaid))]
+    [:div (:count unpaid) " bounties"]]
 
-     [:div.fl.w-50.tc
-      [:div.ttu.tracked "Paid"]
-      [:div.f2.pa2 "$" (sum-dollars paid)]
-      [:div (count paid) " bounties"]]]))
+   [:div.fl.w-50.tc
+    [:div.ttu.tracked "Paid"]
+    [:div.f2.pa2 (common/usd-string (:combined-usd-value paid))]
+    [:div (:count paid) " bounties"]]])
 
 (defn manage-payouts-page []
   (let [owner-bounties (rf/subscribe [:owner-bounties])
+        bounty-stats-data (rf/subscribe [:owner-bounties-stats])
         owner-bounties-loading? (rf/subscribe [:get-in [:owner-bounties-loading?]])]
     (fn []
       (if @owner-bounties-loading?
@@ -80,18 +79,14 @@
          [:div.ui.active.inverted.dimmer
           [:div.ui.text.loader "Loading"]]]
         (let [web3 (.-web3 js/window)
-              bounties (vals @owner-bounties)
-              paid?  :payout_hash
-              unpaid-bounties (filter (complement paid?) bounties)
-              paid-bounties   (filter paid? bounties)]
+              bounties (vals @owner-bounties)]
           [:div.ui.container
            (when (nil? web3)
              [:div.ui.warning.message
               [:i.warning.icon]
               "To sign off claims, please view Status Open Bounty in Status, Mist or Metamask"])
-           [bounty-stats {:paid paid-bounties
-                          :unpaid unpaid-bounties}]
+           [bounty-stats @bounty-stats-data]
            [:h3 "New claims"]
-           [claim-list unpaid-bounties]
+           [claim-list (filter (complement :paid?) bounties)]
            [:h3 "Old claims"]
-           [claim-list paid-bounties]])))))
+           [claim-list (filter :paid? bounties)]])))))

src/cljs/commiteth/subscriptions.cljs

@@ -68,7 +68,26 @@
 (reg-sub
   :owner-bounties
   (fn [db _]
-    (:owner-bounties db)))
+    (->> (for [[id bounty] (:owner-bounties db)]
+           ;; TODO(martinklepsch) we might want to consider using a
+           ;; special prefix or namespace for derived properties that
+           ;; are added to domain records like this
+           ;; e.g. `derived/paid?`
+           [id (assoc bounty :paid? (boolean (:payout_hash bounty)))])
+         (into {}))))
+
+(reg-sub
+ :owner-bounties-stats
+ :<- [:owner-bounties]
+ (fn [owner-bounties _]
+   (let [sum-dollars (fn sum-dollars [bounties]
+                       (reduce + (map #(js/parseFloat (:value_usd %)) bounties)))
+         {:keys [paid unpaid]} (group-by #(if (:paid? %) :paid :unpaid)
+                                         (vals owner-bounties))]
+     {:paid {:count (count paid)
+             :combined-usd-value (sum-dollars paid)}
+      :unpaid {:count (count unpaid)
+               :combined-usd-value (sum-dollars unpaid)}})))
 
 (reg-sub
   :pagination