A minimalistic ClojureScript interface to React.js
Lucy Wang 2020-06-24T02:19:00.212400Z

looks quite like the useCallback hook provded by native react

ruben.hamers 2020-06-24T03:36:37.216400Z

Hey guys, I got a quick question. I have made a reitit backend that runs on localhost:3000. Now I'm building a frontend with reagent that runs on localhost:8280. I'm trying to make http(ajax) requests to from my reagent frontend. however I keep getting failed requests. I think I forgot to setup some proxy settings or something. When I invoke the the same request through Insomnia it all works as exected.


Why do you not create a function that takes inner value as argument?


And call f with the value on click?


Like {:on-click #(f @inner-value)}


Is it not CORS? Do you have the network logs from your browser?

p-himik 2020-06-24T06:26:58.220900Z

@neo2551 It goes to show once again that I should stop working earlier in the day, when I can still think. :) Thanks! Creating a function in that way is exactly the patter that I've been using forever in other places, but here I just blanked on it.

p-himik 2020-06-24T06:28:20.221100Z

But a solution with an extra atom might not be that bad if you have many such functions. Hmm.


Simple > ease


I guess it depends if you want to test your views. Because you could also give the functions as argument?

p-himik 2020-06-24T06:32:55.223300Z

That wouldn't make sense in my case. I don't want to parameterize behavior.


Make a function that returns a map of function xD

p-himik 2020-06-24T06:34:36.224400Z

I would say there's a fuzzy border separating the two approaches - the one with recreating functions and the one with wrapping the data in an extra atom. What to choose depends on the particular scenario. How to choose - hard to say, maybe it'll come with more experience of using the extra atom approach.


Probably as long as you hide the implementation, it is fine.


Actually I follow the same pattern of forms with subscriptions.


The reason is I don’t want the text field input to go through all the reframe mechanism, but still have the desire to control the content.


The additional atom acts as local state and cache.

p-himik 2020-06-24T06:47:54.227900Z

Oh yeah, but the need in re-frame apps is a bit different. Also, apart from just avoiding extra data churning, it's a good pattern to control intermediate values when a user is still typing. And I think it's the only pattern to preserve the cursor position, but this one is implemented by Reagent itself, so you only need to think about it if you use some third-party components that Reagent doesn't know about.

Ruben.Hamers 2020-06-24T06:56:07.228700Z

yeah could be, I also added some additional headers to the request, maybe they are incomplete

Ruben.Hamers 2020-06-24T06:58:55.229400Z

keeps getting status 0 in the response as described in:

Ruben.Hamers 2020-06-24T06:59:58.229800Z

so yeah seems like CORS

p-himik 2020-06-24T07:00:42.229900Z

Just look at the JS console - it should have all details. You cannot say anything by just "status 0" alone.

Ruben.Hamers 2020-06-24T07:01:22.230100Z

I'll look for it tonight/tomorrow. cant look right now πŸ˜‰ thx

ruben.hamers 2020-06-25T03:28:27.232500Z

The console shows that the response is returned correctly,

ruben.hamers 2020-06-25T04:11:04.232700Z

So I fixed it by installing an addon to my broswer (cors everywhere).

ruben.hamers 2020-06-25T04:11:19.232900Z

I think it is a problem with my backend reitit app

ruben.hamers 2020-06-25T04:11:37.233100Z

cant really find how to enable cors headers / middleware for all requests

victorb 2020-06-25T12:52:14.233900Z

> So I fixed it by installing an addon to my broswer (cors everywhere). That sounds scary. Basically to get "CORS everywhere" to work you'd need to proxy all requests and add headers, which to me seems to indicate that all your traffic is now going through a middle-man. You should check the implementation of this extension before you continue with it

Ruben.Hamers 2020-06-25T12:52:36.234100Z


Ruben.Hamers 2020-06-25T12:52:49.234300Z

I think I need to add some cors support to my reitit backend

Ruben.Hamers 2020-06-25T12:52:58.234500Z

traced it down to it

victorb 2020-06-25T12:52:58.234700Z

to enable CORS you'd just have to return a specific set of headers in your http requests. So setting Allow-Access-Control-Origin to localhost:8280 (frontend) should do the trick for GET requests at least

Ruben.Hamers 2020-06-25T12:53:11.234900Z


Ruben.Hamers 2020-06-25T12:53:18.235100Z

my backend does not add them yet

Ruben.Hamers 2020-06-25T12:53:28.235300Z

so ill check that πŸ™‚

Ruben.Hamers 2020-06-25T12:53:43.235500Z

at least i know the ajax calls are setup correctly now

victorb 2020-06-25T12:55:17.235700Z

yeah, true. For the future: you can start Chrome with --disable-web-security to disable CORS checks, make sure you use a new profile + don't visit your bank and such with it disabled though.

Ruben.Hamers 2020-06-25T12:56:02.235900Z


Ruben.Hamers 2020-06-25T12:56:09.236100Z

thx for the help;)

ruben.hamers 2020-06-26T03:40:53.242300Z

Alright; I think I have fixed it in the cleanest possible way: In my backend (reitit) I added a dependency to a package called: ring-cors, then I added a middleware handler that wraps the headers:

(defn cors-wrapper
  (wrap-cors handler :access-control-allow-origin [#"<http://localhost:8280>"]
             :access-control-allow-methods [:get :put :post :delete]))
and added this handler in the reitit middle ware section:
:middleware [
                                ;; wrap cors headers
                                ;; swagger feature

;; other middleware

ruben.hamers 2020-06-26T03:41:16.242500Z

just to wrap up the question πŸ˜‰

p-himik 2020-06-24T07:00:42.229900Z

Just look at the JS console - it should have all details. You cannot say anything by just "status 0" alone.

Ruben.Hamers 2020-06-24T07:01:22.230100Z

I'll look for it tonight/tomorrow. cant look right now πŸ˜‰ thx

lepistane 2020-06-24T16:03:43.231300Z

hello is it possible that some react native/react components will rerender only when setState is called and not otherwise? Are there any examples of reagent components using setState instead of ratoms?


You could check reagent 1.0 (alpha) documentation, especially the :f> keyword

lepistane 2020-06-25T11:16:24.233500Z i dont think i can use hooks for this example i need component