clojurescript 2023-03-22

Clojuri0an21:03:38

Suggestions on best practices for translating the following into clojurescript, given that I'm a noob? Want simplicity, am not sure what to do to convert the await. Do I use a promise?

const result = await stripe.confirmCardPayment('{CLIENT_SECRET}', payment_method: {
        card: elements.getElement(CardElement),
        billing_details: {
          name: 'Jenny Rosen',
        },
      }
    });

Clojuri0an21:03:42

(defn handleSubmit []
  (def result (.confirmCardPayment stripe stripe.confirmCardPayment(client-secret {
:payment_method #js { 
:card (-> CardElement (.-getElement elements) 
:billing_details: #js {
   :name 'Jenny Rosen'
})}}))))

I don't think I called getElement on CardElement correctly?

p-himik23:03:55

Never nest def and/or defn. Also, await is a syntactic sugar for promises - sugar that CLJS doesn't have. So first translate that await into the correct promise API call and then it will be easier to translate that into CLJS. Finally, your JS code is definitely wrong - there are not enough {.

Clojuri0an00:03:20

oh right def is global so I should use let? Ty for the feedback as always

p-himik00:03:14

let will get you a promise there. But you have to call .then on that promise and pass it a callback that will receive the result.

✅ 2

p-himik00:03:41

(-> (.confirmCardPayment stripe ...)
    (.then (fn [result]
             ...)))

Stpn21:03:54

Hello! I am trying to do drag-and-drop file uploading with cljs + reagent, but I've faced a strange issue. When I drag a file onto a div with onDrop event - the file is almost always nil, but sometimes it works fine. On the screenshot is my console, and here is my code snippet: (defn handle-drag [x] (.preventDefault x) (.stopPropagation x) (prn "handling event type: " (.-type x))) (defn handle-drop [e] (prn "handling drop") (.preventDefault e) (.stopPropagation e) (prn (-> e .-dataTransfer .-files (aget 0)))) (defn file-upload [] (fn [] [:div#drop-div {:on-drag-enter handle-drag :on-drag-leave handle-drag :on-drag-over handle-drag :on-drop handle-drop}])) Please, help me to understand what is going on

hifumi12304:03:47

why are you stopping propagation on the drop event? also the threading macro doesnt seem correct to me; what happens when you try

(-> event
    (.-dataTransfer)
    (.-files)
    first)

thheller05:03:46

(aget 0) is totally fine, files is an array.

Stpn09:03:18

looks like I dont quite understang what propagation does. Thank you, it helped and gave me some understanding of what to read next!

hifumi12309:03:07

Glad to hear. For drag and drop I normally use react-dnd because the API is simple, bundle is small, and it takes care of browser quirks in the HTML5 Drag & Drop APIs. I highly recommend looking into it as an alternative

Stpn09:03:24

Thanks, I'll look at it, but my goal is to understand how drag-and-drop works on a basic level, I am not developing any real project for now...

reefersleep10:03:54

Maybe printing the event raw will give you more relevant debugging information. (Probably along with a lot of useless information…)

Stpn18:03:33

@U0479UCF48H There is something strange... It looks like everything started to work, and now it does not get files again... Can it be some kind of browser issue?

Stpn20:03:53

yes, looks like it is a browser issue... In Firefox files array always contains my file, in chrome it is almost always nil.

skylize18:03:47

> yes, looks like it is a browser issue. > Reading through the source of the library suggested above is likely to offer some useful insight, especially given one of the reasons for the suggestion is " it takes care of browser quirks".

2023-03-22

Channels