ui

(def messages (atom ["message 1" "message 2" "message 3"]))

(defn side-bar []
  (let [users (atom ["Bob" "Jane" "Alice"])
        selected-user (atom nil)]
    (fn []
      [:ul.list-group
       (into
         [:ul]
         (map
           (fn [user]
             [:li.list-group-item
              {:class    (if (= user @selected-user) "selected" "unselected")
               :on-click #(reset! selected-user user)}
              user])
           @users))])))

(defn message-list [messages]
  [:div
   (for [message messages]
     ^{:key message}
     [:p message])])

(defn send-message! [message]
  (println @message)
  (reset! message nil))

(defn message-component []
  (let [message (atom nil)]
    (fn []
      [:div [:input {:type :text
                     :value @message
                     :on-change #(reset! message (-> % .-target .-value))}]
       [:button {:on-click #(send-message! message)}
        "send"]])))

(defn home-page []
  [:div
   [:div.row
    [:div.col-sm-2 [side-bar]]
    [:div.col-md-4
     [message-list @messages]
     [message-component]]]
   ])