added routing to todomvc

examples/todomvc/project.clj

@@ -4,7 +4,8 @@
                  [reagent "0.5.0-alpha3"]
                  [figwheel "0.2.3-SNAPSHOT"]
                  [re-frame "0.2.0"]
-                 [prismatic/schema "0.3.7"]]
+                 [prismatic/schema "0.3.7"]
+                 [secretary "1.2.1"]]
 
   :plugins [[lein-cljsbuild "1.0.4"]
             [lein-figwheel "0.2.3-SNAPSHOT"]]

examples/todomvc/src/todomvc/core.cljs

@@ -1,9 +1,14 @@
 (ns todomvc.core
-  (:require [reagent.core :as reagent :refer [atom]]
+  (:require-macros [secretary.core :refer [defroute]])
+  (:require [goog.events :as events]
+            [reagent.core :as reagent :refer [atom]]
             [re-frame.core :refer [dispatch]]
+            [secretary.core :as secretary]
             [todomvc.handlers]
             [todomvc.subs]
-            [todomvc.views]))
+            [todomvc.views])
+  (:import [goog History]
+           [goog.history EventType]))
 
 ;; TODOs
 ;; A bug:  footer disppears and never comes back
@@ -12,6 +17,23 @@
 
 (enable-console-print!)
 
+;; routes
+
+;; =============================================================================
+;; Routing
+
+(defroute "/" [] (dispatch [:set-showing :all]))
+
+(defroute "/:filter" [filter] (dispatch [:set-showing (keyword filter)]))
+
+(def history (History.))
+
+(events/listen history EventType.NAVIGATE
+  (fn [e] (secretary/dispatch! (.-token e))))
+
+(.setEnabled history true)
+
+;; =============================================================================
 
 (defn ^:export main
   []

examples/todomvc/src/todomvc/db.cljs

@@ -32,10 +32,7 @@
 ;;
 (def default-value
   {:todos   (sorted-map)        ;; todo ids are the keys
-   :showing :all
-   })
-
-
+   :showing :all})
 
 ;; -- Local Storage  ----------------------------------------------------------
 ;;
@@ -43,14 +40,23 @@
 
 (def local-storage-key "re-frame-todomvc")
 
+(def persistent-db "keeps track of what is persisted" (atom {}))
+
 (defn get-local-storage
+ "load information from local-storage"
   []
   (let [data (.getItem js/localStorage local-storage-key)]
     (when-not (nil? data)
-      (-> data (js/JSON.parse) (js->clj :keywordize-keys true)))))
-
+      (-> data 
+          (js/JSON.parse) 
+          (js->clj :keywordize-keys true)
+          (#(reset! persistent-db %))))))
 
 (defn set-local-storage!
-  [db]
-  (let [data (-> db (clj->js) (js/JSON.stringify))]
+ "puts the value of key into local storage"
+  [key value]
+  (swap! persistent-db assoc key value)
+  (let [data (-> @persistent-db 
+                 (clj->js) 
+                 (js/JSON.stringify))]
     (.setItem js/localStorage local-storage-key data)))

examples/todomvc/src/todomvc/handlers.cljs

@@ -12,10 +12,10 @@
 ;; checks that the structure in app-db matches the schema
 (def check-schema (after valid-schema?))
 
-(def write-ls (after set-local-storage!))
+(def write-ls-todos (after #(set-local-storage! :todos %)))
 
 ;; middleware for any handler which manipulates todos.
-(def todo-middleware [check-schema (path [:todos])  debug  trim-v])
+(def todo-middleware [check-schema (path [:todos]) write-ls-todos debug  trim-v])
 
 
 ;; -- Helpers -----------------------------------------------------------------
@@ -39,7 +39,7 @@
 
 (register-handler                 ;; handlers changes the footer filter
   :set-showing                    ;; event-id
-  [write-ls check-schema debug trim-v]     ;; middleware  (wraps the handler)
+  [check-schema debug trim-v]     ;; middleware  (wraps the handler)
   (fn                             ;; handler
     [db [filter-kw]]
     (assoc db :showing filter-kw)))

examples/todomvc/src/todomvc/subs.cljs

@@ -32,6 +32,11 @@
   :initialised?                    ;; usage:  (subscribe [:initialised?])
   (complement empty? deref))
 
+(register-sub
+  :todos
+  (fn [db _]
+    (reaction
+      (vals (:todos @db)))))
 
 (register-sub
   :visible-todos

examples/todomvc/src/todomvc/views.cljs

@@ -34,17 +34,16 @@
   (let [footer-stats (subscribe [:footer-stats])]
     (fn []
       (let [[active done filter] @footer-stats
-            props-for (fn [filter-kw]
-                        {:class (if (= filter-kw filter) "selected")
-                         :on-click #(dispatch [:set-showing filter-kw])})]
+            props-for (fn [filter-kw txt]
+                        [:a {:href (str "#/" (name filter-kw))} txt])]
         [:footer#footer
          [:div
           [:span#todo-count
            [:strong active] " " (case active 1 "item" "items") " left"]
           [:ul#filters
-           [:li [:a (props-for :all) "All"]]
-           [:li [:a (props-for :active) "Active"]]
-           [:li [:a (props-for :done) "Completed"]]]
+           [:li (props-for :all "All")]
+           [:li (props-for :active "Active")]
+           [:li (props-for :done "Completed")]]
           (when (pos? done)
             [:button#clear-completed {:on-click #(dispatch [:clear-completed])}
              "Clear completed " done])]]))))
@@ -77,7 +76,8 @@
 
 (defn todo-app
   []
-  (let [visible-todos   (subscribe [:visible-todos])
+  (let [todos           (subscribe [:todos])
+        visible-todos   (subscribe [:visible-todos])
         completed-count (subscribe [:completed-count])]
     (fn []
       [:div
@@ -86,8 +86,8 @@
          [:h1 "todos"]
          [todo-input {:id "new-todo"
                       :placeholder "What needs to be done?"
-                      :on-save #(dispatch [:add-todo %1])}]]
-        (when-not (empty? @visible-todos)
+                      :on-save #(dispatch [:add-todo %])}]]
+        (when-not (empty? @todos)
           [:div
            [:section#main
             [:input#toggle-all