Skip to content

Instantly share code, notes, and snippets.

@Flamefork
Created October 4, 2013 13:59
Show Gist options
  • Save Flamefork/6826342 to your computer and use it in GitHub Desktop.
Save Flamefork/6826342 to your computer and use it in GitHub Desktop.
Facebook's React Tutorial implemented using Widje
(def converter (Showdown.converter.))
(defwidjet comment [c]
[:div.comment
[:h2.commentAuthor (:author c)]
[:span (raw (.makeHtml converter (:text c)))]])
(defwidget comment-list [comments]
[:div.commentList
(map comment comments)])
(defwidget comment-form [on-comment-submit-fn]
[:form.commentForm.-form
[:input.-iauthor {:type "text" :placeholder "Your name"}]
[:input.-itext {:type "text" :placeholder "Say something..."}]
[:input {:type "submit" :value "Post"}]]
[form iauthor itext]
(listen form :submit
(let [author (.trim (.val iauthor))
text (.trim (.val itext))]
(when (and (.-length author)
(.-length text))
(on-comment-submit-fn {:author author :text text})
(.val iauthor "")
(.val itext ""))))
)
(defwidjet comment-box [url, poll-interval]
(let [comments (atom [])]
(letfn [(load-comments []
(let-ajax [data {:url url}]
(reset! comments data)))
(handle-submit [c]
(swap! comments conj c)
(let-ajax [data {:url url :type "POST" data data}]
(reset! comments data)))]
(load-comments)
(js/setInterval load-comments poll-interval)
[:div.commentBox
[:h1 "Comments"]
(bound-coll comments {:as comment-list})
(comment-form handle-submit)])))
(widje/render "#container" make-comment-box "/comments.json" 2000)
@Flamefork
Copy link
Author

It's just first "blind" take, just to compare "styles"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment