React Native Project with NodeJS and MongoDB- Part3
Welcome to part-3 of the series. You can find the part-2 here.
We will start where, we have left in part-2. Here, first we will add the code to update the password in Account.js file.
Next, in the server -> routes -> auth.js file, we will add a new updatePassword route.
Next, in the server -> controllers -> auth.js file, we will add a new updatePassword function. Here, we are find the user from the _id in the body and updating it with the hashedPassword.
Now, on clicking on Update Password in the app, the password is updating properly.
Now, we will add the logic for Forgot Password. For this we are first adding an onPress handler to the Forgot Password text in SignIn.js file. We are also adding some styles in it.
We need to also add the ForgotPassword component to the NavigationScreen.js file.
Now, create a new file ForgotPassword.js inside the screens folder. First, we will add the required imports and the state variables.
Next, inside the return statement we will have a TextInput box in which we will take the user email.
Here, we are also wrapping the NEW PASSWORD and the PASSWORD RESET CODE with the visible state variable.
We also have a button, which shows text according to the visible variable.
Next, we will add the styles for the ForgotPassword component.
Next, we will add the logic for handlePasswordReset and handleSubmit. Here, first the handleSubmit() will be triggered, which will set the visible to be true.
After that if it is sucessful, the user will be able to change the password and the handlePasswordReset will be triggered.
Now, in the server -> controllers -> auth.js file, we already have the forgotPassword function. It will be using the send grid to send mail, which we created in the part-2.
Now, we also have the resetPassword function in the server -> controllers -> auth.js file
Now, in the app go to the ForgotPassword screen and give the password and click on the REQUEST RESET CODE button.
Once sucessful, we will get the alert to enter the password reset code.
Now, we will get the password reset code in our email.
Now, when we enter the password reset code, with the new password, we will get the below pop-up.
Next, we will update the Post.js file. Here, we are taking the Link and the Title from the user.
Next, we will update the styles for the Post.js file.
Now, we will be able to see the Post page, when we click on the Post link in footer.
Next, we will move to the server and create a link.js file in the models folder. It contains two type of link and title.
Next, we will create the route for the same in link.js file in the routes folder. Here, we have a post and a get route.
Now, we will create a link.js file in the controllers folder. Here, we have a post and get routes.
Next, we will also add the route in the index.js file.
Now, we will go back to the Post.js file and add the route in the handleSubmit, where we are passing the link and the title.
We want to have this link data at Home component also, so we will create context for it. Create a file link.js inside the context folder and add the below content in it.
Now, we will also add it in the Navigation.js file.
Lastly add the received data from post-link endpoint to the setLinks context api in Post.js file. Here, we are also navigating to home after .5 seconds.
Now, in the Home.js we will use the get endpoint to get the links data and show it by mapping through it.
Now, we are getting the links in the Home page.
Now, we will show these links in a nice style and also show a random image in Home.js file.
Now, we will also add the styles for the same in Home.js file.
Now, in Home component we are able to see these links in a nice view.
Now, we want to show these links in a web-view. So, we will install library for the same in client folder.
Next, in the Home.js file we will add a onPress handler, which will call the function handlePress. It will navigate use to a new LinkView.
Now, we will also add it in the NavigationScreen.js file.
Now, we will create a LinkView.js file in the screens folder. Here, we are using the WebView and setting it to the weblink.
We are also checking that if a link doesn’t includes http ot https, then to include it.
Now, when we click on any link in the Home page, it will take us to the mobile view of the site.
Now, we will implement View Count in our app. Here, we will show the number of times a link was visited. So, in Home.js first we will hit a new route view-count with the id.
After that in the server -> routes -> link.js we will put the new route, which will call the function viewCount.
We also need to add this in the server -> models -> link.js file.
Now, we will add the viewCount function in the server -> controllers -> link.js file.
Here, we are updating the views with 1.
Now, we will show this new views in Home.js file. Here, we are using position to move it at the top of the image.
Next, we are also setting it in the context, by adding it in the setLinks. Here, we are mapping through all the links to get the specified link.
Now, we will see the views in each link which will be updated if we visit it.
Finally, we will update our Links.js file. It will be exactly as the Home.js file. So, we are first doing the imports and writing the functions.
Our return part also contains similar code to Home.js file. The differences are that we are showing a horizontal scroll. And we are also showing the most popular views and only the last three.
The styles in the Links.js file is also quite similar to Home.js file.
Now, when we click on the Links component, we see a beautiful horizontal scroll.
This completes our long React Native major project. Hoping you liked it.
