Reagent/React based downloads manager

verma · Mar 16, 2014 · 08aa6f2 · 08aa6f2
1 parent 3e7a608
commit 08aa6f2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 63 deletions.
diff --git a/project.clj b/project.clj
@@ -12,6 +12,7 @@
                  [org.clojure/tools.logging "0.2.6"]
                  [javax.jmdns/jmdns "3.4.1"]
                  [me.raynes/conch "0.5.0"]
+                 [reagent "0.4.2"]
                  [crate "0.2.5"]
                  [jayq "2.5.0"]]
   :plugins [[lein-ring "0.8.10"]

diff --git a/resources/templates/index.mustache b/resources/templates/index.mustache
@@ -294,7 +294,7 @@
 			<h1 class="name">{{server-name}}</h1>
 			<div class="stats">
 				<a class="tags" href="/tags">Tags</a>
-				<a class="downloads" href="/downloads">Downloads (<span id="download-count">0</span>)</a>
+				<a class="downloads" id="downloadsLink" href="/downloads">Downloads (<span id="download-count">0</span>)</a>
 			</div>
 			<div class="clearfix"></div>
 		</div>
@@ -325,10 +325,7 @@
 					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 					<h4 class="modal-title">Downloads</h4>
 				</div>
-				<div class="modal-body">
-					<div class="nodownloads">No Active Downloads</div>
-					<div class="current-downloads">
-					</div>
+				<div class="modal-body" id="downloadsBody">
 				</div>
 				<div class="modal-footer">
 					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@@ -360,6 +357,7 @@
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
+	<script src="http://fb.me/react-0.9.0.js"></script>
     <script src="/js/index.js"></script>
   </body>
 </html>

diff --git a/src-cljs/index/start.cljs b/src-cljs/index/start.cljs
@@ -3,7 +3,8 @@
         [clojure.string :only [join split]]
         [jayq.core :only [$ html append css text ajax on bind hide show attr add-class remove-class]]
         [jayq.util :only [log]])
-  (:require [crate.core :as crate])
+  (:require [crate.core :as crate]
+            [reagent.core :as reagent])
   (:use-macros [jayq.macros :only [ready let-deferred]]))
 
 (def current-path (atom []))
@@ -17,6 +18,8 @@
 
 (def tag-action-handler (atom (fn[])))        ;; What to call when a tag link is attached to
 
+(def downloads (reagent/atom {:active [] :pending []}))
+
 ;; Sort map, each function takes one argument which indicates whether we intend
 ;; to do an ascending or a descending sort
 ;;
@@ -322,66 +325,61 @@
           (.preventDefault e)
           (push-sort-order n)))))
 
-(defn update-downloads-tracker
-  "Update the modal for download tracking"
-  [data]
-  (log data)
-  (let [dc ($ "#download-count")
-        cd ($ ".current-downloads")
-        nd ($ ".nodownloads")
-        active (.-active data)
-        pending (.-pending data)
-        num-items (count active)
-        filename #(->> (clojure.string/split % #"/")
-                       (remove empty?)
-                       last)
-        downloads-as-seq (fn [d] 
-                           (map (fn [e]
-                                 (let [ds (aget e "download-status")
-                                       filen (filename (.-from e))
-                                       from (.-from e)
-                                       to (.-to e)]
-                                   (crate/html
-                                     [:div.download-item {}
-                                      [:div.title {} filen]
-                                      (if (nil? ds)
-                                        [:div.status {} "Waiting..."]
-                                        [:div.status {}
-                                         [:div.row {}
-                                          [:div.col-sm-2 {} (aget ds "percent-complete")]
-                                          [:div.col-sm-2 {} (.-downloaded ds)]
-                                          [:div.col-sm-2 {} (.-rate ds)]
-                                          [:div.col-sm-2 {} (.-eta ds)]]])
-                                      [:div.desc {} (str from " -> " to)]]))) d))]
-    (html dc (str num-items))
-    (if (zero? num-items)
-      (do
-        (hide cd)
-        (show nd))
-      (do
-        (show cd)
-        (hide nd)
-        (html cd "")
-        (append cd (crate/html [:div.section-title {} "Active"]))
-        (doseq [e (downloads-as-seq active)]
-          (append cd e))
-        (append cd (crate/html [:div.section-title {} "Pending"]))
-        (doseq [e (downloads-as-seq pending)]
-          (append cd e))))))
-
-(defn start-download-tracker
-  "Tracks the current status of downloads on the server"
-  []
-  (let [query-status (fn []
-                       (let [r (.get js/jQuery "/a/downloads")]
-                         (.success r update-downloads-tracker)))]
-    (js/setInterval query-status 1000)))
+(defn update-downloads-state
+  "Gets the current status of downloads"
+  [dls]
+  (js/setTimeout
+    (fn []
+      (let [r (.get js/jQuery "/a/downloads")
+            f (fn [d] (js->clj d :keywordize-keys true))]
+        (.success r #(reset! dls (f %))))) 1000))
+
+(defn download-item[dl]
+  (let [ds (:download-status dl)
+        from (:from dl)
+        to (:to dl)
+        filen (->> (clojure.string/split from #"/")
+                   (remove empty?)
+                   last)]
+    ^{:key from} [:div.download-item nil
+                  [:div.title nil filen]
+                  (if (nil? ds)
+                    [:div.status {} "Waiting..."]
+                    [:div.status {}
+                     [:div.row {}
+                      [:div.col-sm-2 {} (:percent-complete ds)]
+                      [:div.col-sm-2 {} (:downloaded ds)]
+                      [:div.col-sm-2 {} (:rate ds)]
+                      [:div.col-sm-2 {} (:eta ds)]]])
+                  [:div.desc {} (str from " -> " to)]]))
+
+(defn downloads-component []
+  (update-downloads-state downloads)
+  (let [active (:active @downloads)
+        pending (:pending @downloads)
+        total (+ (count active) (count pending))]
+    (if (zero? total)
+      [:div.nodownloads nil "No Active Downloads"]
+      [:div.current-downloads {}
+       [:div.section-title {} "Active"]
+       (map download-item active)
+       [:div.section-title {} "Pending"]
+       (map download-item pending)])))
+
+(defn active-downloads-indicator-component []
+  (let [active-count (count (:active @downloads))]
+    [:span nil (str "Downloads (" active-count ")")]))
+
+(defn start-downloads-tracker []
+  (reagent/render-component [downloads-component]
+                            (.getElementById js/document "downloadsBody"))
+  (reagent/render-component [active-downloads-indicator-component]
+                            (.getElementById js/document "downloadsLink")))
 
 (defn attach-download-viewer
   "Attach a handler to view current downloads"
   []
-  (hide ($ "#current-downloads"))
-  (on ($ ".downloads") :click
+  (on ($ "body") :click "#downloadsLink"
       (fn [e]
         (.preventDefault e)
         (.modal ($ "#downloadsModal")))))
@@ -392,7 +390,7 @@
   (hide-loading-indicator)
   (hide-error)
   (push-path ".")
-  (start-download-tracker)
+  (start-downloads-tracker)
   (attach-download-viewer)
   (attach-click-handler)
   (attach-tagref-handler)