Fork me on GitHub
#re-frame
<
2020-10-12
>
jmckitrick14:10:50

When handling a success or failure after an http-xhrio event, how can I prevent re-frame forwarding to a blank page? Is it as simple as a correct return value (true or false) from the event handler? That’s usually the case, but doesn’t seem to work.

manutter5114:10:41

The usual trick is to have the # as part of the base URL for your web app. That prevents the browser from trying to load a new page.

manutter5114:10:19

It’s typically a setting in your client side router (reitit, secretary, bidi, etc)

manutter5114:10:30

In reitit, for example, there’s an option called :use-fragment that you can set to true to automatically put the # in the right place.

p-himik14:10:23

What do URL fragments have to do with the :http-xhrio effect? Redirecting to a blank page would make sense only if that URL is used for js/window.location. And even then, you would have to have something that displays an empty page.

p-himik14:10:49

@jmckitrick Are there any errors in the JS console in the browser?

p-himik14:10:38

Either there are some errors or you're not describing the full picture.

jmckitrick14:10:44

Here’s my base url:

jmckitrick14:10:09

Let me try again and check for errors…

jmckitrick14:10:32

I’m seeing all success messages in the console.

jmckitrick14:10:54

I need to know more about the fragment issue

manutter5114:10:18

“Fragment” is just the part after the # in the URL. It’s designed to let web pages have a table of contents at the top of the page, with links to sections farther down the page.

manutter5114:10:03

The part before the # is the web address of the page itself, and the fragment after the # is the name of an anchor tag within the page. So if the fragment is the only thing that changes, the browser stays on the same page and (in the old days) just scrolls to the section indicated by the fragment.

manutter5114:10:46

Modern web apps hijack that functionality so they can use the fragment as the marker for different web app screens. It works really well, and you can even bookmark specific screens within your web app.

jmckitrick15:10:26

ok, thanks for that

jmckitrick15:10:56

In the context of the reitit router, I don’t think I need to worry about it

manutter5115:10:24

Yeah, looks like you’ve got that all up and running correctly.

manutter5114:10:37

Sorry, I was assuming that if the page is redirecting to a blank page, the error would have to be upstream from the :http-xhrio effect. I should have been more explicit.

p-himik14:10:45

@jmckitrick Then you're not describing the full picture. You said "forwarding" - what does it mean? Just a change in the UI? Or does the URL change as well? To what URL? And many other questions.

jmckitrick14:10:38

Before clicking, here’s the URL:

p-himik14:10:46

Do you use :button inside of a :form?

jmckitrick14:10:20

good question, but no.

jmckitrick14:10:24

Just input fields in a div.

jmckitrick14:10:52

here’s the url before:

p-himik14:10:17

OK, so the URL is the same. Then where does the white page come from? What renders it?

jmckitrick14:10:29

I’m using a base setup from luminus template, which sets up re-frame and reitet front-end router

p-himik14:10:46

Ah, my hate for templates is tingling. :)

p-himik14:10:58

It doesn't matter what you use - check what is rendered.

jmckitrick14:10:59

ok another clue

jmckitrick14:10:03

The page is blank

jmckitrick14:10:11

However, a force refresh brings it back up again

p-himik14:10:56

It seems like you have something akin to

(when condition
   [main-app-component])
in your UI. And when that :http-xhrio effect is handled, something sets condition to false.

jmckitrick14:10:29

let me see..

p-himik14:10:01

If the URL is not changing, then it means it's purely within your app's state and has nothing to do with requests. E.g. try to manually dispatch the event that fires when the request is successful - it should lead to the blank page just as well.

p-himik14:10:10

BTW that "check what is rendered" is still meaningful even if you see a blank page. There might still be DOM elements (visible via regular DevTools) or React elements (visible via React DevTool extension).

jmckitrick14:10:59

I really dislike Chrome, but I’ll start it up and try the react devtools

jmckitrick14:10:59

So.. after rendering, the react tools say I have the re_frisk element on the page and nothing else.

p-himik14:10:05

Check your components, from the root down the path that is supposed to be rendered with that URL. Somewhere there should be a condition that's false.

p-himik14:10:39

Also, check if you have any JS console filters in the browser - maybe there are errors but you have accidentally filtered them all out.

jmckitrick14:10:27

It’s been a while, but I forgot the reg-event-db handlers need to return the updated db, and I had a console log statement as the last line in the function.

jmckitrick14:10:37

Thanks for your help!

p-himik14:10:35

Ha! Yep, that happens. :) HPH

jmckitrick14:10:17

Ok, I’ll try to add details… it’s a SPA, and other click/http events work fine.

jmckitrick14:10:25

This is a new one, using a ‘save’ button and a POST

jmckitrick14:10:41

After clicking, the ‘on success’ handler is triggered, and the data are received correctly.

manutter5114:10:45

Your URL looks correct. If you’re not seeing anything in the web page, maybe something is happening to the contents of your app-db?

p-himik14:10:03

Let's go into a thread to prevent spamming the whole channel.

jmckitrick14:10:04

However, the screen goes white, to a basically empty page with just skeleton nodes

manutter5114:10:00

I’ve had buggy reg-event-db handlers that failed to update app-db correctly and screwed up the display.

Lu14:10:19

You need a (.preventDefault evt) on your form submit-handler

manutter5114:10:27

For example, if it returns nil instead of returning an updated db

manutter5114:10:43

Oh, if you have form elements on your page, yeah, that could be doing it to.

manutter5114:10:13

With :http-xhrio you don’t need to use forms, you can just use inputs and buttons directly.

Lu14:10:36

But it seems that he’s not returning db from the event actually it might be either

manutter5114:10:48

Or like Lu said, add .preventDefault to the form submit handler.

Chicão19:10:07

Hello guys, I'm working on a project that uses re-frame, but there are some pages when I press F5 to reload the information / data on the page disappear and sometimes I have to click on the homepage again. Does anyone know anything I can read to better understand why this happens? I was comparing it with react and sometimes in an application with redux the data is there whenever I give F5, the actions are called again and saved in storage. Can I believe that event-fx is not being called correctly for this problem to be happening with the re-frame? ps: srry my bad english

p-himik19:10:20

When you refresh the page, the app-db is created anew. It's a clean slate, that's it. Whatever you set to run when that particular page is loaded, will run, and the value of app-db will be created from that.

p-himik19:10:48

I can't really suggest any reading other than the excellent re-frame documentation.

👍 3
Chicão19:10:58

Ok I'll read the documentation.. thks

tobias22:10:11

Late reply, but what I do is continually save to local storage on every user action (with a 1 second debounce) . Then on app startup I populate the db with the data from local storage. That way data is "still there" from user perspective if they hit f5