If there is no mistake:
React-Router's <Link/> component can carry over data (state) when the user doesn't leave the current tab or you force the user to open new tab on left click using target="_blank". Otherwise the state you send with it is lost because we'll have a new empty history stack.
localStorage can be used to share state between tabs but it's problematic in scenarios where i just want to store the data for only the regarding tab user is expected to navigate.
e.g. I want to set a state using the state/data I've stored for that specific tab and doesn't want to store it anymore/ forget about it. In this case, synchronization problems may occur when the user actually creates multiple tabs using the same <Link/> component but doesn't navigate to all of them. How?
Say, I've removed the state item from the storage when the component is unmounted in one of the tabs user is already navigated and, later on the user is navigated to another tab expecting the item in the storage to set the state. (The component in this tab will try to set state with non-existent data / will crash.)
I could hold the state till the window's onunload event is fired at best, but the problem still exists because localStorage is shared across all of the tabs and removing an item affects all the tabs like i've mentioned. ~ I have to remove the items somehow, can't rely on storage of 2MB to 10MB forever. I tried to find other solutions like clearing it once in a while on user logout/login but that would force the user to take those actions again, once in a while.
So I want to be able to store selected the state/data on sessionStorage of the newly instantiated tab and it gets cleared for me when that tab is closed and I don't have to deal with the regarding problems.
The problem could be defined with simpler words as:
I want to send a piece of data from one tab to another with empty history stack in the scope of only that tab.
Because I don't need it anywhere else.
I can do things like setState using that data, remove that data etc. and the other tabs launched in need of that data don't get affected.
I've searched through the other questions but there are not detailed answers covering this scenario or I couldn't come across with a best practice for this kind of stuff using ReactJS. Sorry If this is a duplicate.
Related
I'm new at using redux and I couldn't find anything helpful to solve my dilemma.
I have a react app with a redux store. I have filtering options at the top of the app (some datepickers, etc) and some tabs (Link elements) with different content as the main part of the page.
I would like to be able to open the tabs in new window (by clicking open tab in new window) and sync the state (which consists of the filtering) over to the new window.
Right now I'm achieving this using redux-state-sync, but that only solves the initial load. From there on, I would like each new tab to manage its own state and pass that on when opening in new window one of its tabs.
Is there an obvious way to go about it?
I tried using localStorage, sessionStorage, but that brings me back to the point that I don't have access to each tab's state, only the last updated state.
Any help would be much appreciated!
Just add to uri of new window some post option, like localhost:3000/?sync=true
Then in App.js's componentDidMount function parse this argument, and then dispatch synced state (from indexDB for example) to redux. Your reducer should look like this :
case "SyncState":
return (action.value)
break
I'm making a chat interface in ReactJS, and each item in the chat log displays the same avatar icon over and over again. Currently the problem I'm facing is that when new items are added the chat log, this image blinks in every list item, which does not look very presentable.
I want to know if there is a way to reuse the Component (most probably not) or the bitmap data, so that once loaded in memory, it can be shown more quickly without a perceivable blink. I have tried using data URL, but not to much avail.
Per request in comments further details:
I have a separate Component to show each chat log item. It contains an Image component to show the avatar.
On the top log I'm using a FlatList and in the renderItem I'm rendering the said chat log component. Whenever any message is sent or received it is appended to the array that the data in the FlatList is pointing to.
Whenever an item is added the list gets re-rendered causing the Image to be created again (I have searched but haven't found any good away of appending items to a FlatList without affecting existing children). Therefore I believe the solution lies in making the image load faster so that the re-render is not so perceivable.
One reason I think of the flickering is if you reassign the key of list items and forcing it to re-render. Check if there is any such case. Thats one of the main reasons component to re-render on listviews.
I used react-infinite-scroll-component it's working just fine.
However, I want to avoid making the user lose his scroll position when he leaves the page and clicks back?
Also please put on consideration Firefox and Safari.
Not 100% sure because I haven't used it - but since no one else has chimed in... the docs say the component has a prop named key that is described as:
the key for the current data set being shown, used when the same
component can show different data sets at different times,
default=undefined
Also, it has a prop named onScroll that is described as:
a function that will listen to the scroll event on the scrolling
container. Note that the scroll event is throttled, so you may not
receive as many events as you would expect.
... which I suspect one of the arguments of which will tell you which keys it loaded / scrolled through.
So my approach would be to use componentWillUnmount to save the last key it loaded into a parent property (or Redux store if you're using Redux)... and when the component loads, if the key exists in the parent (or Redux store if you're using Redux) then pass it that key.
Let's say we want to create a new Task. We have 2 categories of information we want to collect from the user for creating a new Task: general params, action params.
To make it easily separated we are separating between them with tabs. so each gets its own react component, both stored in different react-tabs tabs.
In the parent component I have a save button and I want that at any given time, the user could click it to send the entire state from both the tabs' state to the server.
While I could forward event handlers from the parent to the children (as suggested by other questions on this topic)... doing it for each of the 20 controls (dropdowns, textfields, date time pickers) in each of them requires a lot of boilerplate code and seems unreasonable.
I'm looking for a best practice for this situation. Thanks!
I am trying to build an app using Extjs 4.1. In general: it is a viewport with a tree panel on the west and a center panel that it is actually a tab-holder panel. When a user clicks on a tree node a tab is populating the center view. I had set an attribute in the tree panel that after selecting a node it gets deselected (deselectAll). The reason for this is that the user can open many tabs from different places (e.g. within each tab). But, when I set the above attribute it is producing an error (the “data” is undefined). The data that is undefined is the data related to the tree node. So, the question concerning selection model:
How can I address this problem (a solution may be to select the fist node, but I don’t want it)?
As for the history utility, I need to implement browser back button. Especially I want to disable browser’s refresh button. If user opens let’s say 15 tabs and accidentally click on browser refresh or “F5” he/she will lose everything. I had tried many things but with no luck. I am unable to understand “Ext history util”. So,
Is there any good example out there?
Could anybody guide me on how to do it?
Notice that the application is built respecting the new “MVC” architecture.
Stopping the refresh event is pretty easy - providing that your page has the focus. E.g.:
Ext.getDoc().on('keypress', function(event) {
if (event.getCharCode() == event.F5) {
event.stopEvent();
console.log('you stopped the refresh event');
}
});
If your page doesn't have the focus then there is nothing that can be done -- but most of the time your page loses the focus when a different browser tab is opened so F5 would be refreshing that one instead anyway.
I'm still trying to wrap my wits around the first part of your question, but I thought I would share that.
EDIT
Instead of trying to stop the default browser behavior (something which you can only do on a very limited basis), you should look into state management. ExtJS supports it on many components. Here is the ExtJS example.
Also here is the example of controlling browser history.