Facebook's React assimilated

react-tutorial.lisp

(in-package #:grok-cl-parenscript-react)

(hunchentoot:define-easy-handler (handle-tutorial :uri "/tutorial")
    ()
  (cl-who:with-html-output-to-string (stream)
    (:html
      (:head
        (:title "React Tutorial")
        (:script :type "text/javascript" :src *react-url*))
      (:body
        (:div :id "content")
        (:script :type "text/javascript"
                 (cl-who:str (ps:ps* ps:*ps-lisp-library*))
                 (cl-who:str
                  (ps:ps

                    (defvar *comments*
                      (array (ps:create :author "Pete Hunt"
                                        :text "This is a comment")
                             (ps:create :author "Jordan Walke"
                                        :text "This is *another* comment")))

                    (defvar *comment*
                      (ps:chain -react
                                (create-class
                                 (ps:create
                                  'display-name "Comment"
                                  'render
                                  #'(lambda ()
                                      (pt:who-ps-react
                                       (:div :class-name "comment"
                                             (:h2 :class-name "commentAuthor"
                                                  (ps:@ this props author))
                                             (:span (ps:@ this props text)))))))))

                    (defvar *comment-list*
                      (ps:chain -react
                                (create-class
                                 (ps:create
                                  'display-name "CommentList"
                                  'render
                                  #'(lambda ()
                                      (let ((comment-nodes
                                             (mapcar #'(lambda (comment)
                                                         (ps:chain (*comment*
                                                                    (ps:create
                                                                     :author (ps:@ comment author)
                                                                     :text (ps:@ comment text)))))
                                                     (ps:@ this props comments))))
                                        (ps:chain -react -d-o-m
                                                  (div (ps:create 'class-name "commentList")
                                                       comment-nodes))))))))

                    (defvar *comment-box*
                      (ps:chain -react
                                (create-class
                                 (ps:create
                                  'display-name "CommentBox"
                                  'render
                                  #'(lambda ()
                                      (ps:chain -react -d-o-m
                                                (div (ps:create 'class-name "commentBox")
                                                     (ps:chain -react -d-o-m
                                                               (h1 nil "Comments"))
                                                     (*comment-list* (ps:create
                                                                      :comments
                                                                      (ps:@ this props
                                                                            comments))))))))))

                    (ps:chain -react
                              (render-component
                               (*comment-box* (ps:create :comments *comments*))
                               (ps:chain document (get-element-by-id "content")))))))))))