I´m learning React (so understand the why of my question).
I created an API with AWS and the front-end is React+Redux.
To access the API data the visitor has to register. For that, it has to create an account.
Once the visitor created the account, he will receive an email with the confirmation code... Code that he was to provide on my view.
Between the creation view and process and the confirmation view (just and input where user has to enter the code and hit a button), the user can...
Stay in that page (1)
Close that tab (2)
Close the browser (3)
So, and here´s my question: Which is the proper way to NOT render the create user view once the visitor create an account and until he confirms it, in a single page app where the root page renders all the views through conditionals (local state and Redux store).
Initially, I thought in Local state. It worked just for case 1.
Then, I thought… “I can create a localStorage where the key could be user and value the user that we visitor picked. And, until he introduces the code and hit the button, and, consequently remove that item for the localStorage, avoid rendering the create view”.
However, I do want to know you considerations. I´m not a big fan of cookies. Also,
I didn´t want a Session storage since I want to be persistent.
I will appreciate any kind of suggestion.
Thanks for your time.
You can use local state take one new empty state.
Now set the state value when user introduce the code using
this.setState({}) method once you get the code in state you can check the value present in the state or not the time of click event at button. If your state has code then it should go further else you give error message or popup message to user to enter code.
Related
I am creating a React app as a personal project. I am using OAuth with implicit grant flow, which has my user redirect to a different page for auth, then redirects back to my app. Everything is working as I expect, but when the user is redirected, all my state is cleared.
For example, my user finds a specific book from a list of books, this takes the user from the index page to that specific book's show page, and the book's ID is saved in component's state. When the user wants to save this book to their personal account, they log in through OAuth and come back. Now the book is no longer saved in the state and the user needs to search and find it again as a logged in user. I want to avoid using redux and react-router if possible, and the only workaround that I've thought of so far is to save the book ID into localStorage, which I'm not sure is a good practice.
Is there any other way I can get around this?
When you redirect the user to the login page, you can provide a URL param like afterLoginRedirectionUrl that contains the book id, e.g. /books?activeBookId=3
In the log in component, after success, redirect to that url if the param afterLoginRedirectionUrl is present. This way, when going back to /books?activeBookId=3, you can set the initial state of your component to the active book id present in the URL.
About your comment:
I want to avoid using redux and react-router if possible
Redux or react-router won't solve this problem. They store the data in the same way you do it right now, In memory, and as soon as you refresh or close the page all the data will be lost.
About using localStorage: if it is working for you, you can continue using it. It is standard and supported in all major browsers. In case you are dealing with very structured data, maybe it will be good to take a look to IndexedDB too.
I have a ReactJS front-end app mixed with a Laravel back-end app.
I'm facing a problem with auth. I'm authenticating the user with Laravel auth but I have some trouble on displaying components. I have some posts (/posts/1 or /posts/2 etc...) and when the user visits the page, he can modify the post if he is the author.
I'm storing as a state the id of the user and checking like this :
if(this.props.user.id === this.props.posts.id_user) ...
But this is really unsafe since the state can be modified by anyone with the dev tool. By modifying the state, the user could modify a post even if he is not the author because all displayed components managing the edit would be accessible for him.
Is there a "magic" trick to prevent it?
First of all, the state you are talking about is the app state, the one that resides in the browser, if the user change that state, the effects will only be affected by the user itself, in his browser, theoretically, is not changing the data or state in your backend/database, unless you don't implement the same validation you are talking about.
If you do if(this.props.user.id === this.props.posts.id_user) in your front, you absolutely have to do it in your back, that is the place where the real validation counts, that's where the user can't change the user id, because, for example, you will be using the one in the user session that is stored in cookies or a Redis server.
Always validate in the backend
Can you show me how to re render Flatlist on refresh? I use SQLite database for my local database and I have two pages one for display all workers and one for create worker. How I re render automatically page for display all workers when I create new Worker (live reload/refresh)?
Depending on the requirements of your application, the most easiest solution would be to use the get method you're using to pull data from your application as soon as the user presses the create worker button and update your data array in your state or props (preferably props). React Native will always re-render if it detects a change within the state or props.
One issue with the above method is, it will refresh for the current user, but imagine a different user is using the app too, it won't live refresh for them unless they refresh the component themselves (this could be tabbing in and out of the page).
One work around would be to use Socket.io (https://socket.io/), to build a truly real-time application, Socket.io would allow you to listen for changes from all users and send an update request to all users which in turn should refresh their applications depending on the changes.
EDIT:
Add the below method to your WorkersView class, assuming it is different from your createWorker screen then the WorkersView screen will update every time a user enters the screen.
componentDidMount() {
this.props.navigation.addListener('willFocus', this.getAllWorkers);
}
Note: I would recommend using a storage system like Redux or AsyncStorage, then you can communicate information across all your screens more efficiently and effectively.
Single page apps require careful management of events, DOM elements, and javascript objects in order to avoid leaks.
We're going to manage memory and squash leaks as best we can. That said, the application is large, uses many libraries, and could be left open for days at a time.
We need a safety valve.
I'm looking for ideas on how to unobtrusively trigger a page refresh in a single page app as a way to force the release of memory.
One idea is to detect when the user is idle for more than N minutes and do a refresh then, because it's unlikely to interrupt them. Much of the application state is saved in the URL using AngularJS ui-router, so this will work some of the time.
The problem is that while some state is in the router, not all of it will be. The user could have unsaved changes, or have some modal or flyout menu open which isn't in URL state. A solution could be to detect user changes and ban a refresh if any changes have taken place that aren't in the url. I don't see how to implement this generically though. Maybe we just put everything that's even a little bit important into URL state.
Another idea is to watch the application state change event $stateChangeStart and, every Nth time, do an actual browser navigation to that URL instead of just an app state change. This will never result in lost "sub-state", but will cause a slower page change response and a screen flicker. Maybe every 20 screen changes this is OK though.
Does anybody have any better ideas?
Just an idea on unsaved changes and data:
I have an a single page app that in one section has several tabs each containing a form. When each form becomes "dirty" it triggers a notification to the Main Controller, and sets a flag for that form. When a user saves a particular form the flag becomes unset. If the user tries to navigate away - before the route change occurs, it checks to see if any of the flags are set and then notifies the user via a modal that some particular information hasn't be saved. The user can then decide whether to continue with the route change or go back and save the data.
This could easily be modified to perform the same check on page refresh and if there is unsaved data either cancel the page refresh or save the changes to the browser's local storage for recall after the page has finished refreshing.
I have auth component working greatly till I implemented a page for the user to change the user's info. I experienced some unknown results till I found out that after user's info being changed by that action, the user data loaded by auth component in session still remains the same. I wanted to know if there is any way to force auth component reload the user data from database again?
I considered re-logging in the user but it makes the logs complicated and places some bad traces in program. is there any more beautiful way to do so?
$this->Session->write('Auth', $this->User->read(null, $user_id));
you got to update it, cake does not do everything for you ;)