CODEWITHSUNDEEP
semantic-uiclojurescriptreagentre-frame
Timo
Timo

Reputation: 320

Clojurescript Semantic UI React Search custom renderer

I am trying to implement a search in Clojurescript with reagent/re-frame and semantic-ui. Semantic-ui uses a renderer for the suggestions. This renderer defaults to image, price, title, description. As I want to have suggestions on geocoding I want to list addresses. This is the return data I am getting. I basically want to display name, city and postcode in the suggestions.

{:hits
 [{:osm_type "W",
   :name "Am Pfuhl",
   :osm_value "residential",
   :city "Berlin",
   :postcode "12209",
   :state "Berlin",
   :osm_key "highway",
   :extent [13.322584 52.4205878 13.3258975 52.419743],
   :point {:lng 13.3241429, :lat 52.4201622},
   :osm_id 103012039,
   :country "Deutschland"}
 :took 7}

The code I wrote does not show me any results. I tried a lot but I don't know how to look into the component to see if the state of it changes and if it stores results. The subscription does give me back results when I call it directly.

(def search (helper/component "Search"))
(def grid (helper/component "Grid"))
(def grid-row (helper/component "Grid" "Row"))

(defn on-search-change [event props]
  (rf/dispatch [:get-geocode (:value (js->clj props :keywordize-keys true))]))

(defn on-result-select [event props]
  (rf/dispatch [:geocode-selected]))

(defn get-geocode-results []
  @(rf/subscribe [:geocode-results]))

(defn result-renderer [& meh]
  (fn [meh]
    [:div (str meh)]))

(defn geocode-component []
  [:> grid
   [:> grid-row
    [:> search {:minCharacters 3
                :loading (when (:geocode @(rf/subscribe [:loading])) )
                :defaultValue "Berlin"
                :selectFirstResult true
                :onSearchChange on-search-change
                :onResultSelect on-result-select
                :resultRenderer result-renderer
                :results get-geocode-results}]]])

I would very much appreciate some help on: How do I find out if the component stores the results correctly? How do I write a renderer that just renders all of the results for debugging?

Thanks and regards! Timo

Edit: solution on https://gist.github.com/TimoKramer/7e93758afb81dcad985fafccc613153a

Upvotes: 4

Views: 537

Answers (1)

Kenneth Kalmer
Kenneth Kalmer

Reputation: 341

From the docs it looks like :resultRenderer expects a React Component, and you're giving it a Clojure function. You can convert your hiccup-style components to React components with reagent.core/as-component.

I haven't tested this, but maybe it can be as simple as:

(defn result-renderer [& meh]
  (reagent.core/as-component [:div (str meh)]))

I've used a similar strategy with tooltips:

(defn info-icon
  ([message]
   (info-icon {} message))

  ([options message]
   (let [popup (component "Popup")
         icon  (component "Icon")]
     [:> popup
      {:trigger (reagent/as-component [:> icon (merge {:name "info"} options)])}
      " "
      message])))

Where component probably matches your helper/component, and reagent is reagent.core

Upvotes: 2

Related Questions