Fork me on GitHub
#re-frame
<
2018-08-19
>
argvader13:08:17

Is there a good pattern to handle resize event? Initially I thought about storing the resized data in app-db and have components subscribe to it but then thought just using a reagent atom would be better. Does anybody have an example where they are subscribing to component or window resizing?

zalky11:08:03

@U0W442AH0: I think you are on the right track. I've found using a reagent atom to work better. From a conceptual model, the size of the window is not really app state. For example, you would never want to roll-back the window size if you were rolling back the application state. I've found something like this to work:

(def window-size (r/atom nil)

(f/reg-sub :window/resize
  ;; pass this sub a dom node reference
  (fn [[_ node]]
    [node window-size])
  (fn [[node window-size] _]
    (when node
      (resize-fn node))))

(defn on-window-resize
  [_]
  (->> (.-innerWidth js/window)
       (reset! window-size)))

;; Call this somewhere in your boot sequence
(.addEventListener js/window "resize" on-window-resize)
Normally you would want to avoid side-effects in your subscriptions, but as long as resize-fn is idempotent and does not mutate app state, this should be fine.

twashing18:08:23

@joost-diepenmaat Cheers. Yeah I came up with a solution that handled CORS requests. :thumbsup::skin-tone-5:

dangercoder19:08:32

Anyone who used https://re-com.day8.com.au/ to create a validatable form with inputs?

nenadalm05:08:27

Hi. I have no experience with re-com, but I am using this library for forms with re-frame: https://github.com/imatic/re-frame-form. It doesn't do much, it's just collection of common events, subscriptions, ... useful with forms. Repository has example of a form: https://imatic.github.io/re-frame-form/#!/example.core, source can be found here: https://github.com/imatic/re-frame-form/blob/e4f2ca430dc83e3e9d78402c4dddee3a8ddb9480/examples/re-frame-form/src/example/core.cljs#L39. At work, I am using that library with material-ui. For my toy project, I am just using simple existing html elements directly. My toy project has probably better example: https://github.com/nenadalm/Warehouse/blob/721b17f24cc545e44a5bbb101d69f13f203a339e/frontend/src/warehouse/pages/list/views.cljs#L81. I usually create app.form namespace, where I put some helper functions, components for creating forms, like: https://github.com/nenadalm/Warehouse/blob/721b17f24cc545e44a5bbb101d69f13f203a339e/frontend/src/warehouse/form.cljs#L8. Re-frame documentation has links on a few other more ready to use solutions to forms with re-frame (I don't know how much compatible they're with re-com): https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md#forms.

dangercoder05:08:19

@U662GKS3F thank you for the well formulated reply. This is great, I'll look into the library and might also look into material-ui, hopefully its easy to use material-ui. There are much more components in there compared to re-com 🙂

dangercoder05:08:32

@U662GKS3F do you use any cljs-wrapper for material-ui or do you use it directly?

nenadalm17:08:31

I am using it directly because there was no wrapper for beta version I was using. I am using webpack to compile it (https://clojurescript.org/guides/webpack) and then I have namespace in my project that converts react components into reagent components highly inspired by: https://github.com/DaveWM/reagent-material-ui/tree/master/src/reagent_material_ui.

parrot 4
dangercoder19:08:53

I've solved the problem but it's not pretty