Permalink
Browse files

Working idiomatically through tutorial14.js

  • Loading branch information...
1 parent 329cc94 commit 1bc56be42d40a696ff426cb5c5678a5cea1187b4 @jalehman committed Dec 20, 2013
Showing with 59 additions and 17 deletions.
  1. +1 −0 .gitignore
  2. +6 −2 app.js
  3. +4 −0 comments.json
  4. +1 −0 project.clj
  5. +47 −15 src/react_tutorial_om/app.cljs
View
@@ -6,4 +6,5 @@ pom.xml
/out/
/target/
*.js
+.nrepl-port
.lein-deps-sum
View
8 app.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,4 @@
+[
+ {"author": "Pete Hunt", "text": "This is one comment"},
+ {"author": "Jordan Walke", "text": "This is *another* comment"}
+]
View
@@ -7,6 +7,7 @@
[org.clojure/core.async "0.1.267.0-0d7780-alpha"]
[secretary "0.4.0"]
[markdown-clj "0.9.36"]
+ [cljs-http "0.1.2"]
[om "0.1.0-SNAPSHOT"]]
:plugins [[lein-cljsbuild "1.0.0"]]
@@ -2,34 +2,49 @@
(:require-macros [cljs.core.async.macros :refer [go alt!]]
[secretary.macros :refer [defroute]])
(:require [goog.events :as events]
- [cljs.core.async :refer [put! <! chan]]
+ [cljs.core.async :refer [put! <! >! chan timeout]]
[markdown.core :as md]
[om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]
[secretary.core :as secretary]
+ [cljs-http.client :as http]
[react-tutorial-om.utils :refer [guid]])
(:import [goog History]
[goog.history EventType]))
-;; Because swannodette did...
(enable-console-print!)
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Util
+
+(defn- with-id
+ [m]
+ (assoc m :id (guid)))
+
+(defn- fetch-comments
+ "The comments need to be a vector, not a list. Not sure why."
+ [app opts]
+ (go (let [{body :body} (<! (http/get (:url opts)))]
+ (om/update! app #(assoc % :comments (vec (map with-id body)))))))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Components
+
(def app-state
- (atom {:comments
- [{:author "Pete Hunt" :text "This is one comment." :id (guid)}
- {:author "Jordan Walke" :text "This is *another* comment." :id (guid)}]}))
+ (atom {:comments []}))
(defn comment-form []
(om/component
(dom/div {:className "commentForm"} "Hello, world! I am a commentForm.")))
-;; Is this the right way to do things? In the tutorial they use
-;; {this.props.children} instead of passing the comment as an
-;; argument. How would I go about that?
-
-;; Can't seem to get this to work. Moving on.
-;; (dom/span {:dangerouslySetInnerHTML (js-obj {:__html raw-markup})})
(defn comment
+ "Having some trouble getting the markdown to display properly. I've
+ tried with:
+
+ (dom/span {:dangerouslySetInnerHTML (js-obj {:__html raw-markup})})
+
+ and other variants...but haven't gotten anywhere."
+
[{:keys [author text] :as c} opts]
(om/component
(let [raw-markup (md/mdToHtml text)]
@@ -47,9 +62,26 @@
(range (count (:comments app))))))))
(defn comment-box [app opts]
+ (reify
+ om/IInitState
+ (init-state [_ owner]
+ (om/update! app #(assoc % :comments [])))
+ om/IWillMount
+ (will-mount [_ owner]
+ (go (while true
+ (fetch-comments app opts)
+ (<! (timeout (:poll-interval opts))))))
+ om/IRender
+ (render [_ owner]
+ (dom/div {:className "commentBox"}
+ (dom/h1 nil "Comments")
+ (om/build comment-list app)))))
+
+(defn tutorial-app [app]
(om/component
- (dom/div {:className "commentBox"}
- (dom/h1 nil "Comments")
- (om/build comment-list app))))
+ (dom/div nil
+ (om/build comment-box app
+ {:opts {:poll-interval 2000
+ :url "comments.json"}}))))
-(om/root app-state comment-box (.getElementById js/document "content"))
+(om/root app-state tutorial-app (.getElementById js/document "content"))

0 comments on commit 1bc56be

Please sign in to comment.