react-router-dom useLoaderData example

countries.cljs

(ns crudis.ui.routes.countries
  (:require
    ["react-router-dom" :refer [useLoaderData]]
    [crudis.util.helix :refer [defnc]]
    [helix-window.fixed-size-list :as fsl]
    [helix.core :as hx :refer [$ <> fnc]]
    [helix.dom :as d :refer [div]]
    [paqueta.fetch :as fetch]
    [promesa.core :as p]
    ))

(defn loader
  []
  (p/let [resp (fetch/get "/api/countries")]
    (if (= (:status resp) 200)
       (:body resp)
       [])))

(defnc CountriesView
  []
  (let [countries  (useLoaderData)]

    (div
      "CountriesView"

      ($ fsl/FixedSizeList
         {:height 150
          :witdh 300
          :item-data countries
          :item-count (count countries)
          :item-size 25}
         (fnc [{:keys [index style data]
                :as p}]
              (div {:style style :key index}
                   (-> (get data index)
                       :country_name))))
      )))