Clojurians Log v2

I’m in the same boat as you guys. Amplify + re-frame + graphQL + cognito.

I went down a rabbit hole of go blocks for the async calls to appsync. If you guys have a channel i would love to join 🙂

There’s a really nice tutorial on framer-motion (for React) at https://www.youtube.com/playlist?list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i framer-motion is pretty powerful but seems to require to use it at the bottom of the component hierarchy (i.e. motion implementation of html tags like motion.div, motion.button etc) I did find that at least for simple things so far, can wrap a reagent component into a motion.div and the animate of the motion.div animates the reagent component.

Hello, got a quick question. I've been learning re-frame lately and came across a scenario in my app where I want to call .focus on an html element that only appears in the dom after an event (registered with reg-event-fx) is handled. I made the call to focus the element an event with reg-event-fx and used a dispatch effect in the causal event with the ^:flush-dom metadata on the event vector to make sure the element is rendered before .focus is called. If it weren't for needing that flush though, I would just use reg-fx. Is there no way to flush the dom before an effect registered with reg-fx is run?

Here's the code. If it weren't for needing to make sure the dom was rendered before ::focus-html-element , I would just use reg-fx to register it, because I'm not changing the db or returning any effects. Just wondering if this is idiomatic I guess.

To avoid complications, you could perhaps use the auto-focus attribute?

(defn view 
  []
  [:input {:type "text" :id "fname" :auto-focus true])

Also I think it doesn't work in Safari which is sadly IE of the current time 😞

If that doesn't give you enough control, you could create an effect which hooks into Reagent's after-render

https://github.com/reagent-project/reagent/blob/master/src/reagent/core.cljs#L340-L346

(reg-fx 
  :focus-html-element
  (fn [element-id] 
     (reagent/after-render  #(some-> js/document (.getElementById element-id) .focus)))

Note the use of some-> to avoid any weird corner cases

So this is how the request looks like in insomnia butI cant get it working in cljs through cljs-ajax :

(client/post "<http://127.0.0.1:3000/files/upload>" {:multipart [{:name "file"
                                                                :content "ajsdnasd
                                                                    "}]})

Try not specifying :format at all and instead of :params pass an instance of https://developer.mozilla.org/en-US/docs/Web/API/FormData as :body.

That's how I do it.

@brandon.ringe I tend to leave re-frame out of that type of very view specific logic / close to DOM and use Reagent Form-3 components for that. Something like this should do the trick:

(defn focus-input []
  (let [ref (atom nil)]
    (r/create-class
     {:component-did-mount
      (fn [_]
        (.focus @ref))

      :reagent-render
      (fn [_]
        [:input {:ref #(reset! ref %)}])})))

ok, ill give it a try 🙂

I don’t think there is a channel for that yet #amplify-whyyyy 😄

I think reg-sub-raw is more advanced, so it is not in the main docs. But better to ask @mikethompson

👍

@pwojnowski @jakob.durstberger Do you know how to create aws-exports.js automatically ? I redeployed the stack in another account and the whole file is off, naturally.

I've got whole configuration as cljs map:

(defn aws-config []
  (let [env (resolve-env)]
    (print "Current env:" env)
    {
     :API {:endpoints [{:name api-name :endpoint (format-endpoint-url env)}]}
     :Auth { ... }

I do the same as pwojnowski

Then in the code I just convert it to js:

(defn configure-amplify []
  (print "Configuring AWS Amplify.")
  (let [js-config (clj->js (config/aws-config))]
    (.configure Auth js-config)
    (.configure API js-config)))

Ah, thanks! I was not aware of this.

Thanks for all the info! Great solutions

Interesting, this looks possibly more efficient than the .getElementById method since it avoids the lookup. Maybe not significant, but still.

This gave me the control+simplicity I was looking for. 🎉

@brandon.ringe Here’s one more that should work - if you want to use it and have trouble let me know and I’ll double check (writing code on my phone is not always a good idea) [:input {:ref #(when % (.focus %))}]

Thanks