search for geocode with semantic-ui react reagent re-frame

search-geocode.cljs

;; https://opensourcery.co.za/2017/02/12/using-semantic-ui-react-with-re-frame/
(def semantic-ui js/semanticUIReact)

(defn component
  "Get a component from sematic-ui-react:

    (component \"Button\")
    (component \"Menu\" \"Item\")"
  [k & ks]
  (if (seq ks)
    (apply goog.object/getValueByKeys semantic-ui k ks)
    (goog.object/get semantic-ui k)))

(def search (component "Search"))
(def grid (component "Grid"))
(def grid-row (component "Grid" "Row"))
(def grid-col (component "Grid" "Column"))

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

(defn on-result-select [tour address-type props]
  (let [result (:result (js->clj props :keywordize-keys true))]
    (swap! tour assoc (keyword address-type) result)
    (rf/dispatch [:geocode-selected])))

;; https://stackoverflow.com/q/49327122/2984565
(defn result-renderer [result]
  (let [kw-result   (js->clj result :keywordize-keys true)
        osm-id      (:osm-id kw-result)
        name        (:name kw-result)
        street      (:street kw-result)
        housenumber (:housenumber kw-result)
        postcode    (:postcode kw-result)
        city        (:city kw-result)]
    (r/as-component ^{:key osm-id}
                    [:div {:class "content"}
                     [:div.row {:class "name"} name]
      [:div.row
       [:div {:class "street"} street]
       [:div {:class "housenumber"} housenumber]]
                     [:div.row {:class "postcode"} postcode]
                     [:div.row {:class "city"} city]])))

(defn geocode-component [tour address-type]
  (let [{:keys [name street housenumber postcode city]} ((keyword address-type) @tour)]
    [:> grid {:columns 2}
     [:> grid-row
      [:> grid-col
       [:> search {:id             address-type
                   :minCharacters  3
                   :loading        (when (:geocode @(rf/subscribe [:loading])) true)
                   :onSearchChange on-search-change
                   :defaultValue   "Berlin"
                   :onResultSelect (fn [event props] (on-result-select tour address-type props))
                   :resultRenderer result-renderer
                   :results        @(rf/subscribe [:geocode-results])}]]
      [:> grid-col (str name " " street " " housenumber " " postcode " " city)]]]))