cljs reagent firebase

app.cljs

(ns try-clojure.app
  (:require
    [try-clojure.db :as db]
    [try-clojure.ui :as ui]
    [reagent.core   :as r]))

(enable-console-print!)

(defonce root (db/connect "https://try-clojure.firebaseio.com/counter"))
(defonce state (db/sync (atom {}) root []))
;
(defn counter-card
  [title path]
  (ui/counter-card title
    (deref (r/cursor state path))
    #(db/update! root path inc)
    #(db/update! root path dec)))

(defn app []
  [counter-card "A simple counter" [:current]])

(r/render [app] (js/document.getElementById "app"))

create-project.sh

#!bash

# using https://github.com/plexus/chestnut
lein new chestnut try-clojure -- --reagent

db.cljs

(ns try-clojure.db
    (:require
      [matchbox.core :as m]))

(defn connect
  [url]
  (let [root (m/connect url)]
    (m/auth-anon root)
    root))

(defn sync
  [store root path]
  (let [cursor (m/get-in root path)]
    (m/listen-to
      cursor :value
      (fn [[event-type data]]
        (if data
          (reset! store data)))))
  store)

(defn update!
  [root path func]
  (let [cursor (m/get-in root path)]
    (m/swap! cursor func)))

dependencies.txt

[matchbox "0.0.9"]
[cljsjs/react-mdl "1.5.4-1"]

ui.cljs

(ns try-clojure.ui
    (:require
      [cljsjs.react-mdl]))

(def Card js/ReactMDL.Card)
(def CardTitle js/ReactMDL.CardTitle)
(def CardText js/ReactMDL.CardText)
(def CardActions js/ReactMDL.CardActions)
(def CardMenu js/ReactMDL.CardMenu)
(def IconButton js/ReactMDL.IconButton)
(def Spinner js/ReactMDL.Spinner)


(defn counter-card
  [title counter inc-fn dec-fn]
  [:> Card {:shadow 0 :style {:width 512 :margin "auto"}}
    [:> CardTitle title]
    [:> CardText
      [:h3
        (if counter
          counter
          [:> Spinner])]]
    [:> CardActions {:border true :style {:padding 20}}
          "This is a simple counter backed by Firebase.
          Click the plus and minus buttons to change the counter."]
    [:> CardMenu
      [:> IconButton {:onClick dec-fn :name "remove" :colored true}]
      [:> IconButton {:onClick inc-fn :name "add" :colored true}]]])