Fork me on GitHub
#re-frame
<
2018-12-18
>
danielcompton00:12:21

(They went to re-frame)

Braden Shepherdson02:12:21

I'm curious about deduplication and debouncing in re-frame events. I know events get handled on the next animation frame, and that's good, but I want to be able to do things like wait until 200ms after the last time a particular event was generated, and have that trigger another event.

mikethompson02:12:03

@braden.shepherdson See API docs. There is a builtin effect.. Look for :dispatch-later

mikethompson02:12:42

@lilactown sorry, I haven't had much of a look. Although it does feel like more of a Reagent level thing (said without much research).

Maikel09:12:22

Goodmorning all, Currently i am trying to build a re-frame application. What i try to accomplisch is to build small components which are reused in bigger components. So a field component is created (layer 2) which renders perfectly if called. Next component is a form component which will contain multiple fields, but how should the form component call the field component? Tried several things, but it does not work, it renders but does not update. I gues the form component should also subscribe on all the field component values but this is also something i do not know. Is there anyone who has an example or something how to reuse components in bigger components? Most examples are pretty basic and just explaining a component, but i did not find a real world example reusing components. Case: - Form component - Field component - Field component - Field component

abdullahibra09:12:12

is there anybody tried to dispatch an event within component-did-mount and subscribe it at reagent-render within reagent/create-class ?

abdullahibra09:12:34

it's not re-render when the value changes

abdullahibra09:12:46

this is incomplete example to what i want to ask about, how can i make foo re-render when i change the value ?

abdullahibra09:12:50

am i missing something

manutter5111:12:35

@abdullahibra I would try writing the render function like this:

(fn []
  (let [slider-val @(rf/subscribe [:get-val])]
    ^{:key (str "slider-with-val-" slider-val)}
    [:h1 (str slider-val)]))

manutter5111:12:12

Sometimes you have to give React a bump to get it to notice the component has changed. Changing the key will get its attention.

abdullahibra11:12:06

@manutter51 great thanks, so each render need unique key or each component ?

manutter5111:12:40

It’s usually not necessary, but it’s a useful trick if you get a situation like this where something ought to re-render and doesn’t.

manutter5111:12:43

The trick is that you make sure the key contains whatever value is changing, so that whenever the value changes, it gives you a different key.

bobcalco19:12:05

@mateus.pimentel.w It doesn't seem to matter if I use bidi with or without pushy, i can't get it to play nice with pedestal routes. I finally managed to get pedestal to recognize wildcard routes off /admin, like so in service.clj:

(defn main
  [_]
  (ring-response/content-type
    (ring-response/response (slurp (io/resource "public/landing/index.html")))
    "text/html"))

(defn admin
  [_]
  (ring-response/content-type
    (ring-response/response (slurp (io/resource "public/admin/index.html")))
    "text/html"))

(def common-interceptors
  [(body-params/body-params) http/html-body])

(defroutes routes
           [[["/"
              ^:interceptors common-interceptors {:get main}
              ["/api" {:get [:api-root api/api-version]}
               ["/signup" {:post [:signup api/echo]}]]
              ]
             ["/*admin" ^:interceptors common-interceptors {:get admin}]
             ]])
And for the hompage defined in my routes in the re-frame application it works fine. Here is my route.cljs file:
(ns fdb-portal.routes
  (:import [goog.history Html5History])
  (:require
    [bidi.bidi :as bidi]
    [pushy.core :as pushy]
    [goog.events :as events]
    [goog.history.EventType :as EventType]
    [re-frame.core :as re-frame :refer [dispatch]]))

(def routes
  ["/admin"  {""      :homepage
              "/login" :login}])

(defn get-token
  []
  (str js/window.location.pathname js/window.location.search))

;; ADDED to use pushy
(defn- parse-url [url]
  (bidi/match-route routes url))

;; ADDED to use pushy
(defn- dispatch-route [matched-route]
  (if-let [route (keyword (name (:handler matched-route)))]
    (dispatch [:set-active-page
               (:handler route)
               (or (:route-params route) {})])
    (dispatch [:set-active-page :unknown {}])))

;; ADDED to use pushy
(defn app-routes []
  (pushy/start! (pushy/pushy dispatch-route parse-url)))

;; not used anymore
(defn initialize
  []
  (doto (Html5History.)
    (events/listen
      EventType/NAVIGATE
      (fn [_]
        (if-let [route (bidi/match-route routes (get-token))]
          (dispatch [:set-active-page
                     (:handler route)
                     (or (:route-params route) {})])
          (dispatch [:set-active-page :unknown {}]))))
    (.setEnabled true)))

;; not used anymore
(defn path-for
  [name & params]
  (apply bidi/path-for (concat [routes name] params)))
Instead of calling initialize, I call app-routes to initiate the app in core.cljs:
(defn ^:export init []
  (re-frame/dispatch-sync [:initialize-db])
  ;; (routes/initialize)
  (routes/app-routes)
  (dev-setup)
  (mount-root))
Unfortunately, I get the same behavior. When /admin/login is invoked, I get a blank page and warnings that none of the resources can be found ("admin" gets preprended to the relative path defined in the <link ...> and <script ...> references. So, if the link href was "admin/css/app.css", it was adjusted to "localhost:8080/admin/admin/css/app.css" - same for the script file that defines the app in /js/compiled/app.js... it becomes /admin/js/compiled/app.js in admin/login and therefore cannot be found. So, neither pushy nor bidi by itself prevent the postback to the server, and the server is apparently adjusting the resource directory relative to the path, borking relative paths. Any assistance appreciated. Probably I need to do something in an interceptor but what, exactly, needs to be done to fix this I do not know. Really, the client should not be allowing the post-back to the server, period, no?