Fork me on GitHub
#re-frame
<
2018-09-18
>
b2berry15:09:35

Anyone have a recommendation on how to get control of a [:form] control? I’m working with Stripe’s checkout function which is embedded inside a form. I’ve tried gaining control with an on-submit dispatch but I can’t seem to prevent the form’s submit action. Any tricks?

manutter5115:09:11

Is this a form you wrote, as opposed to something Stripe is providing to you?

manutter5115:09:14

You might need any or all of the following: call preventDefault on the event; call stopPropagation on the event, and/or return false from the handler.

manutter5115:09:28

(by “event” I mean the JS event that gets passed to your handler.)

b2berry15:09:34

I was reading about that and looks like it’s strongly discouraged https://github.com/Day8/re-frame/wiki/Beware-Returning-False

b2berry15:09:25

That said I can’t seem to get an event handler to get control. On slecting the checkout button that stripe provides the form action is submitted.

b2berry15:09:49

The form it’s embedded in is my own form, though I’m not sure yet what javascript wizardry they do to perhaps prevent me (or re-frame) from gaining control.

b2berry15:09:17

[:form {:on-submit #(re-frame/dispatch [:create-order/checkout]) }
    [:script {
              :src ""
              :class "stripe-button"
              :data-key  "<key>"
              :data-amount "2000"
              :data-name "Demo Site"
              :data-description "2 widgets ($20.00)"
              :data-image ""}]]

b2berry15:09:27

This, for example, ignores my event handler

manutter5115:09:03

Ok, I’d recommend

...
:on-submit (fn [e] (.preventDefault e) (re-frame/dispatch [:create-order/checkout]))...
if you haven’t already tried that.

b2berry15:09:21

I’ll give that a go

b2berry15:09:11

That didn’t work 😕

manutter5115:09:14

It’s possible they’re hard-wiring an on-click handler into their submit button

b2berry15:09:32

That’s what I’m thinking, was just hunting down their javascript to peek inside.

b2berry16:09:51

Hard to tell… I’ve tried pulling in the Stripe React components but with no luck https://github.com/cljsjs/packages/tree/master/react-stripe-elements

b2berry16:09:10

react-dom.inc.js:1815 Uncaught TypeError: _assign is not a function
    at react-dom.inc.js:1815
    at validateFormat (react-dom.inc.js:15)
    at react-dom.inc.js:16
(anonymous) @ react-dom.inc.js:1815
validateFormat @ react-dom.inc.js:15
(anonymous) @ react-dom.inc.js:16
react-highlight.inc.js:189 Uncaught ReferenceError: ReactDOM is not defined
    at Object.module.exports (react-highlight.inc.js:189)
    at __webpack_require__ (react-highlight.inc.js:21)
    at Object.module.exports (react-highlight.inc.js:100)
    at __webpack_require__ (react-highlight.inc.js:21)
    at Object.defineProperty.value (react-highlight.inc.js:72)
    at __webpack_require__ (react-highlight.inc.js:21)
    at react-highlight.inc.js:56
    at Object.defineProperty.value (react-highlight.inc.js:58)
    at __webpack_require__ (react-highlight.inc.js:21)
    at Object.<anonymous> (react-highlight.inc.js:48)
Gives me some nasty-grams in the console.

b2berry16:09:46

My lunch hour is about over, might have to tinker later. This demo shows success with these strip react components but is there something I need to do differently in re-frame to rope in native react components?

dfcarpenter23:09:19

beginner here. I keep getting the errors

re-frame: no handler registered for effect: :event . Ignoring.
re-frame: no handler registered for effect: :loading . Ignoring.
re-frame: no handler registered for effect: :solutions . Ignoring.

# part of active-page handler 
(case page
       ;; -- URL @ "/" --------------------------------------------------------
       :home {:db set-page
              :set-history page}
       ;; -- URL @ "/about" -----------------------
       :about {:db set-page
               :set-history page}

       :solutions {:db (assoc db :active-page :solutions)
                   :dispatch [:get-solutions]})

(reg-event-fx
 :get-solutions
 (fn [{:keys [db]}]
   {:http-xhrio {:method :get
                 :uri (endpoint "solutions")
                 :response-format (json-response-format {:keywords? true})
                 :on-success      [:get-solutions-success]               
                 :on-failure      [:api-request-error :get-solutions]}
    :db (assoc-in db [:loading :solutions] true)}))

(reg-event-fx
 :get-solutions-success
 (fn [db [_ solutions]]
   (-> db
       (assoc-in [:loading :solutions] false)
       (assoc :solutions solutions))))

in a view which is making an ajax call on load. I also have the subscriptions set up correctly as far as I can tell.

dfcarpenter23:09:58

nvm I had the http handler as a reg-event-fx instead of reg-event-db

b2berry23:09:10

Gets me every time 😄 Welcome to re-frame by the way