(ns braid.search.ui.search-bar
  (:require
    [re-frame.core :refer [subscribe dispatch]]
    [braid.core.client.routes :as routes]
    [braid.lib.color :as color]))

(defn search-bar-view
  []
  (let [search-query @(subscribe [:braid.search/query])]
    [:div.search-bar
     [:input {:type "text"
              :placeholder "Search..."
              :value search-query
              :on-change
              (fn [e]
                (dispatch [:braid.search/update-query! (.. e -target -value)]))}]
     (if search-query
       [:a.action.clear
        {:href (routes/group-page-path {:group-id @(subscribe [:open-group-id])
                                        :page-id "inbox"})
         :style {:color (color/->color @(subscribe [:open-group-id]))}}]
       [:div.action.search])]))

(ns braid.search.ui.search-bar
  (:require
   [reagent.core :as r]
   [re-frame.core :refer [subscribe dispatch]]
   [braid.core.client.routes :as routes]
   [braid.lib.color :as color]))

(defn search-bar-view
  []
  (r/with-let [search-query (r/atom @(subscribe [:braid.search/query]))]
    [:div.search-bar
     [:input {:type "text"
              :placeholder "Search..."
              :value @search-query
              :on-change
              (fn [e]
                (reset! search-query (.. e -target -value))
                (dispatch [:braid.search/update-query! (.. e -target -value)]))}]
     (if search-query
       [:a.action.clear
        {:href (routes/group-page-path {:group-id @(subscribe [:open-group-id])
                                        :page-id "inbox"})
         :style {:color (color/->color @(subscribe [:open-group-id]))}}]
       [:div.action.search])]))

Make search bar more responsive to quick typing
Make search bar more responsive to quick typing

Use local state for search query input, in addition to dispatching;
just dispatching and referring to the sub can drop keystrokes and is
generally annoying when typing quickly

rafd/braid,rafd/braid,braidchat/braid,braidchat/braid