 (declare ;; here we declare our components to define their in an order that feels natural.  
   top-cpnt 
     search-cpnt
+    order-prop-select
     phones-list 
       phone-item)
 

  (let [{:keys [phones search]} @state]
    [:div.container-fluid
     [:div.row
      [:div.col-md-2 [search-cpnt search]]
      [:div.col-md-8 [phones-list phones search]]
      ]]))

(defn search-cpnt [search]

            :value search
            :on-change (fn [e] (swap! state update-search (-> e .-target .-value)))}]])

(defn order-prop-select []
  [:select {:value @order-prop-state
            :on-change #(reset! order-prop-state (-> % .-target .-value keyword))}
   [:option {:value :name} "Alphabetical"]
   [:option {:value :age} "Newest"]
   ])

(defn phones-list "An unordered list of phones" 
  [phones-list search order-prop]
  [:ul.phones
   (for [phone (->> phones-list 
                 (filter #(matches-search? search %))
                 (sort-by order-prop))]
     ^{:key (:name phone)} [phone-item phone]
     )])

