 
 ;; -------------------------
 ;; Playground
-(comment
-  ;; live coding: change the list of phones by eval-ing this form. Notice the change is immediately reflected in the browser, without reloading the page.
-  (swap! phones #(drop 1 %))
-  )
+

(ns reagent-phonecat.core
    (:require [reagent.core :as rc :refer [atom]]
              )
    )

;; -------------------------
;; State

(def phones "The list of phones. It is an atom so that you can modify it live." 
  (rc/atom 
   [{:name "Nexus S"
     :snippet "Fast just got faster with Nexus S."}
    {:name "Motorola XOOM™ with Wi-Fi"
     :snippet "The Next, Next Generation tablet."}
    {:name "MOTOROLA XOOM™"
     :snippet "The Next, Next Generation tablet."}]
   ))

;; -------------------------
;; Views

(defn phone-component "component showing details about one phone"
  [{:keys [name snippet] :as phone}]

   [:p snippet]]
  )

(defn phones-list "Component displaying the list of phones" [query phones]
  [:ul
   (for [phone (filter (partial matches-query? query) phones)]
     [phone-component phone])])


(defn top-cpnt []
  [:div.container-fluid
   [:div.row
    [:div.col-md-2
     ;; sidebar content
     "Search : " [query-input]
     ]
    [:div.col-md-10
     ;; body content
     [phones-list (:query @state) (:phones @state)]
     ]]
   ])
;; -------------------------
;; Initialize app

(defn init! []
  (rc/render-component [top-cpnt] (.getElementById js/document "app")))
