How to use the rehydration with mobx-persist - reactjs

I am new to mobx-persist. I am not able to figure out how rehydration works in mobx-persist. I tried asking about it in github but got no reply so far. I am wondering if anyone here is able to point me the right direction.
The problem that I am trying to solve is to prevent losing the react states on the page refresh. I want to keep the stats in the session storage and load them back when the page is refreshed. (Note: I managed to do it by accessing the session storage directly from the react store but I thought that mobx-persist might do the better job.)
I created a sample here. https://github.com/michaelsync/js-lab/tree/master/mobx-persist-sample.
You can use the following command to run the sample.
yarn install
yarn start
It has two components called "entry" page and "result". User can enter something in "entry" page and show that data in the "result" page. There is one store called userDataStore that has only one property called data.
When you click on "Click Me" in the entry page, the data that you typed on text box will be saved in user data store. and it retrieves the data back from the result page.
The issue is that when I refresh the page, I still lost the react states. I guess it's because I don't understand how rehydration works in mobx-persist.
The steps to replicate the issue ~
run the program by using yarn start
enter something in textbox and click on "Click me" (It will redirect to the result page)
you will see what you entered in the result page.
Refresh the page (press F5) - the data will be lost.
Can someone please help me with the steps that I need to do in hydration and rehydration?
Note: I don't want to use any server-side code or isomorphic rendering to sync the states for now. using the session storage might be anti-pattern but I see it fit in my tiny project.

Related

Local chat in tabs without backend

I'm trying to create a chat in React that will be attached to a browser tab. The message history must be global. I put each message to local storage with a unique name. However, in the second tab, messages appear only after the page is refreshed. If you do not refresh the page, but write something new from the second tab, the values ​​​​in localstorage begin to be overwritten.
I tried to use broadcastmessage, but I ran into the fact that it is called many times, and many identical values ​​come to localstorage at once. I didn't find a solution to this problem.
I also tried using add.edeventListener('storage') but it doesn't work for the current tab.
I also used windows.postmessage, but that didn't work either. Can you suggest how to display messages without reloading the page?

Google Analytics Goal Funnel Count has number differences with Production Data

I have this funnel visualization problem in Google Analytics. I have set up the funnel using the virtual pageview like so:
So basically what it tracks is that in activity page, when user clicks a button, it will show up a modal for registration and hits the /activity/virtual/open-volunteer-modal. After they fill out the forms, they click Register, and it will hits the /activity/virtual/submit-volunteer-modal.
Everything was fine, until I saw some difference in GA and Production values.
In GA, there are 3000 users that filled out the forms and submit their data. I was totally happy seeing this, but:
In Production DB, I only got 1906 users submitting their data.
I checked the code, and there is nothing wrong with it. It basically send a virtual page view when the value has been validated, so my question is how is this possible and is there any way to fix this? Or is it just intended behavior?
After further investigation, I found that some of the buttons that has open-volunteer-modal event is redirecting to submit-volunteer-modal. Hence, the submit-volunteer-modal value was bigger than the open.
Should have sipped some coffee first before working.

cakephp pages not updating without browser refresh

I am working on a site using cakephp 2.10. It appears that the pages do not update unless the browser is refreshed. For example, I sign in as a user, it redirects me to the last page I was on before I left the previous time. (Correct function). But, when I go back to the main page, it shows me signed out. If I then refresh the page, it shows me signed in. I have tried clearing the files in the folders under app/tmp/cache/.... (persistent, model, etc) and I even tried turning debug to 3 to try and get the cache to refresh that way. I am baffled why this is working this way. Any thoughts would be appreciated. I have experienced this on three sites I am working on recently.

GTM History Change Listener Missing Pageviews in GA

I'm using the history fragment to capture the url after the hash for an angular-based site we've built.
Not all my pages are showing up under All Pages in Google Analytics - but DO show when i add page as a secondary dimension to events.
I think this is to do with using the history change trigger to send url fragment as a pageview, but I can't figure out how to make it work.
How do I make sure an exit page is captured, even though it isn't reloaded hence no new history fragment?
(register.creditunions.com = tracks fine, but when someone completes, it goes to /confirm, which they leave, and which is not tracking. I have the confirmed sign ups in my CMS, and they HAVE to go through to that page to get signed up, hence i know i'm not just asking about a page that isn't being seen.)
Google Analytics doesn't detect URL fragments as a part of page path out of the box. You need some tweaks to force tracking of anything after the hash. There is a lot of recipes all over the web. Try this one https://www.simoahava.com/gtm-tips/track-url-fragments-as-pageviews/

Unable to access authorization.user._id after refreshing once

I have developed a NodeJS app (MeanJS) with Yo generator.
I think there is an issue with the authentication module.
I am trying to access the authentication.user._id value in the HTML page using {{authentication.user._id}} and it works fine for the first time when the user logs in. But as soon as the user refreshes the page, this particular value is gone. All other values in authentication.user are still there, but the "_id" value is gone until I re-login. Why is this happening?
I want the "_id" value to persist even after refreshing the page, since the user is still logged in and it is the same session.
Thanks.
In your core.server.controller.js file you need to add this line of code:
_id:validator.escape(req.user._id)
At the begining of the safeUserObject in renderIndex function. Save it, restart the server and try again.

Resources