Activity feed + UI tweaks

* finish missing parts of activity feed feature
* render time ago labels with moment.js
* css tweaks

project.clj

@@ -42,7 +42,8 @@
                  [cheshire "5.7.0"]
                  [mpg "1.3.0"]
                  [pandect "0.6.1"]
-                 [prismatic/plumbing "0.5.3"]]
+                 [prismatic/plumbing "0.5.3"]
+                 [cljsjs/moment "2.17.1-0"]]
 
   :min-lein-version "2.0.0"
   :source-paths ["src/clj" "src/cljc"]

resources/migrations/20170226230237-activity-feed.up.sql

@@ -3,6 +3,7 @@ select
   i.title as issue_title,
   i.issue_number,
   r.repo as repo_name,
+  r.login as repo_owner,
   u.name as user_name,
   u.avatar_url as user_avatar_url,
   i.payout_receipt,
@@ -20,6 +21,7 @@ select
   i.title as issue_title,
   i.issue_number,
   r.repo as repo_name,
+  r.login as repo_owner,
   u.name as user_name,
   u.avatar_url as user_avatar_url,
   i.payout_receipt,
@@ -38,6 +40,7 @@ create view activity_feed_view as
 select 'open-claim' as type,
 issue_title,
 repo_name,
+repo_owner,
 issue_number,
 user_name,
 user_avatar_url,
@@ -51,6 +54,7 @@ union
 select 'claim-payout' as type,
 issue_title,
 repo_name,
+repo_owner,
 issue_number,
 user_name,
 user_avatar_url,
@@ -64,6 +68,7 @@ union
 select 'new-bounty' as type,
 issue_title,
 repo_name,
+repo_owner,
 issue_number,
 user_name,
 user_avatar_url,
@@ -76,6 +81,7 @@ union
 select 'balance-update' as type,
 issue_title,
 repo_name,
+repo_owner,
 issue_number,
 user_name,
 user_avatar_url,

resources/sql/queries.sql

@@ -289,6 +289,7 @@ SELECT
   i.confirm_hash     AS confirm_hash,
   i.payout_hash      AS payout_hash,
   i.payout_receipt   AS payout_receipt,
+  i.updated          AS updated,
   r.repo             AS repo_name,
   o.address          AS owner_address
 FROM issues i, users o, repositories r
@@ -436,6 +437,7 @@ SELECT
   type,
   issue_title,
   repo_name,
+  repo_owner,
   issue_number,
   user_name,
   user_avatar_url,

src/clj/commiteth/routes/services.clj

@@ -117,8 +117,18 @@
 
 
 (defn activity-feed []
-  (let [activity-items (bounties-db/bounty-activity)]
+  (let [renames {:user_name :display-name
-    (map #(update % :balance decimal->str) activity-items)))
+                 :user_avatar_url :avatar-url
+                 :issue_title :issue-title
+                 :type :item-type
+                 :repo_name :repo-name
+                 :repo_owner :repo-owner
+                 :issue_number :issue-number}
+        activity-items (bounties-db/bounty-activity)]
+    (map #(-> %
+              (rename-keys renames)
+              (update :balance decimal->str))
+         activity-items)))
 
 
 (defapi service-routes

src/cljs/commiteth/activity.cljs

@@ -1,25 +1,48 @@
 (ns commiteth.activity
   (:require [re-frame.core :as rf]
-            [reagent.core :as r]))
+            [reagent.core :as r]
+            [commiteth.common :refer [moment-timestamp
+                                      issue-url]]))
 
 
+(defn item-description [{:keys [display-name
+                                balance
+                                issue-title
+                                item-type
+                                repo-name
+                                issue-number] :as item}]
+  (let [issue-link [:a
+                    {:href (issue-url repo-name issue-number)}
+                    issue-title]]
+    (println item)
+    (case item-type
+      "new-bounty" [:p "Opened a bounty for " issue-link]
+      "claim-payout" [:p "Received " [:span.balance "ETH " balance]
+                      " for " issue-link]
+      "open-claim" [:p "Submitted a claim for " issue-link]
+      "balance-update" [:p issue-link " bounty increased to "
+                        [:div.balance balance]]
+      "")))
 
-(defn activity-item [{image-url :user_avatar_url
-                      display-name :user_name
-                      timestamp :updated
-                      balance :balance
-                      issue-title :issue_title
-                      item-type :type} item]
 
+(defn activity-item [{:keys [avatar-url
+                             display-name
+                             updated
+                             balance
+                             issue-title
+                             item-type] :as  item}]
+  (println avatar-url)
   [:div.item.activity-item
    [:div.ui.mini.circular.image
-    [:img {:src image-url}]]
+    [:img {:src avatar-url}]]
    [:div.content
-    [:div.header display-name]
+    [:div.header.display-name display-name]
     [:div.description
-     [:p item-type]
+     [item-description item]]
-     [:p issue-title]]
+    [:div.footer-row
-    #_[:div.time timestamp]]])
+     (when (not (= item-type "new-bounty"))
+       [:div.balance-badge (str "ETH " balance )])
+     [:div.time (moment-timestamp updated)]]]])
 
 (defn activity-page []
   (let [activity-items (rf/subscribe [:activity-feed])]

src/cljs/commiteth/bounties.cljs

@@ -1,5 +1,6 @@
 (ns commiteth.bounties
-  (:require [re-frame.core :as rf]))
+  (:require [re-frame.core :as rf]
+            [commiteth.common :refer [moment-timestamp]]))
 
 
 
@@ -16,7 +17,8 @@
          issue-title :issue_title} claim
         merged? (= 1 (:pr_state claim))
         paid? (not-empty (:payout_hash claim))
-        confirming? (:confirming? bounty)]
+        confirming? (:confirming? bounty)
+        updated (:updated bounty)]
     (println "paid?" paid? "merged?" merged? (and merged? ((comp not) paid?)))
     [:div.activity-item
      [:div.ui.grid.container
@@ -30,7 +32,7 @@
        [:div.description (if paid?
                            "(paid)"
                            (str "(" (if merged? "merged" "open") ")"))]
-       [:div.time "1 day ago"]   ;; TODO: claim timestamp
+       [:div.time (moment-timestamp updated)]
        [:button.ui.button
         (merge (if (and merged? (not paid?))
                  {}

src/cljs/commiteth/common.cljs

@@ -1,6 +1,7 @@
 (ns commiteth.common
   (:require [reagent.core :as r]
-            [re-frame.core :as rf]))
+            [re-frame.core :as rf]
+            [cljsjs.moment]))
 
 (defn input [val-ratom props]
   (fn []
@@ -20,3 +21,12 @@
               ^{:key item} [:option
                             {:value item}
                             item]))]))
+
+(defn moment-timestamp [time]
+  (let [now (.now js/Date.)
+        js-time (clj->js time)]
+    (-> (js/moment.utc)
+        (.to js-time))))
+
+(defn issue-url [repo number]
+  (str "https://github.com/" repo "/issues/" number))

src/less/style.less

@@ -277,6 +277,34 @@ span.dropdown.icon {
     color: #a8aab1;
 }
 
+.activity-item {
+    .display-name,.description {
+        color: #474951!important;
+    }
+}
+.footer-row {
+    padding: 1em 0 0;
+    .balance-badge {
+        float: left;
+        margin-right: 1em;
+    }
+}
+
+.balance-badge {
+    color: #fff;
+    background-color: #61deb0;
+    font-size: 0.9em;
+    width: auto;
+    min-width: 0;
+    height: auto;
+    min-height: 0;
+    line-height: 2em;
+    display: table;
+    padding: 0 .5em 0;
+    letter-spacing: .04em;
+    border-radius: 2px;
+}
+
 .flash-message {
     &.success {
         background-color: #61deb0;
@@ -298,7 +326,6 @@ span.dropdown.icon {
     }
 }
 
-
 .ui {
     font-family: 'postgrotesk'!important;
 }