#17 Get all data from Mongo db and display it in React Native || Fetch data in MERN & React Native

hello guys welcome back to the debug arena in the previous video we have seen how we can register as admin in our react native application and then if that admin tries to login in our application he will be navigated to admin home screen and if user tries to login in our application he will be navigated to user homepage so first let me do the login so I will go to my login page and here these are my admin credentials and when I click on login you can see I have got the pop up and I have been navigated to admin homepage this is my admin homepage where currently I am showing the admin details now in this video what I will do first I will modify the UI of this homepage to make it look better and after that I will fetch all the registered users in our application and we'll show it inside admin homepage so admin will have the overview of how many users are registered and what are the users details so without any delay let's get started okay let's modify the UI of this admin homepage page so here I want to show the header at the top for that I will go to my app.jsx and here you can see currently I have added our admin component inside this login Navigator so this is not a good approach so to solve this what I will do I will create a new stack Navigator here name as admin stack in this stack Navigator all of the our admin pages will be listed here after that I will import this Con Stacks create stack Navigator if you want to learn all of these things then you can go and watch my previous videos I will write return here inside this I will write stack. Navigator this is the pen component and inside this we can register all of our screens so here I will pass the name of my screen which is admin screen and here I will pass the component which is also admin screen now I will add another screen here which will be login so I will write here login and why login so here you can see this is my admin homepage and from here when I click on log out I have to navigate back to the login page so that's why I have to to add login here but here you can notice that I will not pass here component as login I will pass our whole login nav why it is it is because when we press on log out we want our code to go to this Navigator so that from login we can register these screens also otherwise if we pass only login here then it will navigate to only login screen but from there he will not be able to navigate to register screen so by passing the whole login na we solve the issue now I will go to the top to copy the header this is the header I have to show so I will copy this I will come below this is my admin Navigator I will come here and I will write options and inside options I will paste that okay I will have to remove this and here I can write options and inside this I can set header shown as false okay done now I will save this then again I will go up and here you can see that this is my login Navigator and here I I'm navigating to this admin screen so instead of this admin screen I will pass whole admin stack okay now I will save this again I will go down and here instead of this admin screen I will pass our whole admin stack Navigator so now whenever this condition is satisfi we will be navigated to this admin stack okay my header is not coming it is because here I have set header shown to false so let me set it to true I will save this and here you can see I've got this admin screen but you can see I'm getting this back button I don't want this for that I will come here and I will write header back visible to false I will save this and you can see it is gone now I will go to my admin screen page this is my admin home screen and here you can see I have created this user State inside this user state I'm taking the users data like the logged in user data and storing it inside this user data State and here I have written the function of the sign out and here I'm just showing the users data in this bad UI so for now I will just remove all of these things let me just add UI quickly okay you can see here I have added these two things one is text which is showing the name and the other text will show our user type and these are the CSS which I have added so now instead of this name I will pass here user data do name same thing here I will pass user data do user type I'll save this and you can see I'm getting the users details so it is totally looking good now let me try to add the card which will show the users data and you can see here my card is visible so inside this card I will fetch all the users details and we will show inside this cards so here currently I'm showing the logged in user data but later on I will change this and these are the CSS which I have added you can get the code from the GitHub link will be in description okay so our card is ready and in this card here this is the name this is the email this is the user type and here we will get the image now only thing remaining is a log out button so let's add that and it is done you can see here that I have added button outside this view container it is because I want that button to be with 100 and at the last of our page so it is totally looking good now our UI part is done let's go to the back end and create the API to fetch all the registered users in our react native application this is my back end code in this I have created API for register login register as admin getting the users detail updating the users detail so if you want to learn that then you can go and watch my previous videos so now I will come here and let's create one new API which will be app.get because we want to get all the users detailed so the method will be get and the API name will be get all user here I will write a sync and we will accept request and response after this here I will first write try and catch block and inside try and catch block I will create a variable name as data and here what I will do I will write here await because get getting all the users data might take time so this await will help us to wait for that then I will access my schema this is my schema user do find find is the method which will help us to find all the users and inside find if we keep it as blank it will fetch all the users details but if I pass here email is equal to and give some email it will find a particular user so because I want all the users details I'm keeping it blank now I will come here and I will send the response which will be resp response. send status is okay and in data I will share this data okay done and after this if we Face the error I will send the error in response like this okay I think it is done I will save this now I will again go to front end let's go up here I will create one new state which will be all user data and set all user data after that I will create one new function name is get all data in this I will call exos do get because our method name is get after that I will pass this URL inside this URL you can notice that I have passed my IP address because if we want to send our API request to mobile or Android device we have to use IP Local Host will not work and here instead of this user data I will pass my API name which is get all user okay then after this I will handle the promise so in this I will write here response and if I get the response I will just console.log all the response do data because we are getting our data inside the data after consoling I will save this then inside use effect after get data I will call get all data I will save this now let me open the console this is my console I will open my application I will do the log out then I will try to do login and in the console you can see I'm getting all the users data and this data is inside this data variable so now I will come to my application and here after consoling what I will do I will write here set all user data and it will be set to response. dat. data so in this all of the users data will be stored now I will save this now to show all the data one by one we will take help of a component known as flat list so I will come here and import flat list then I will go below and after we are showing the admin details I will write here flat list inside flat list the first important part is data so I will write here data and we are storing our data inside the state known as all user data after that we have to pass the key extractor why do we pass key extractor like we will show all the data one by one so each data should have a unique combination and that unique combination should be mentioned here so here I will write item inside this item all the data one by one will come here like in the first iteration first user details will come inside this in the second iteration second user detail will come inside this then we will access from this item do ID this ID we are getting from back end okay after that I will write here render item render item will contain the UI to which our data will be shown so in our case this is the UI so I will copy this remove from here then I will go up and let's create a component for this UI which will be user card okay then and here you can see I have used this type of Braes if you use curly braces you have to write this code inside return otherwise it will not work after this I will come here and I will write item again in this item all our data will contain 1 by one and here we can pass our user data and here we can call our component which is user card it should be like this then inside this user card I will pass data and this data will contain all the users detail that is this item then I will go to our user card and let's accept that data so I will accept the data after this I will have to extract check name email and user type from this so instead of this user data I will pass here data do name data. email and data do user type I will save this let's open the application and you can see here I'm getting the users details inside this card like you can see some user don't have the user type that's why we are not getting okay this user doesn't have anything so we are getting everything blank and you can see here we are getting user type and all now let's try to add the image for image what I will do I will go to to update profile and here you can see I have written this condition so I will copy this I will come here I will paste that condition inside this URI okay like this and here I will pass instead of just image I will pass data. image so this condition states that if my data do image is null or empty then we will show this image otherwise we will show our data do image so I will save this and you can see we are getting this beautiful profile icon and let's check if some user have profile photo or not I think one user have so you can see this user have the profile photo and we are getting that now if I scroll down you can see here this is the username this is the user email and this is the user type and here user profile photo will come so that's it for the video this is how you can fetch the detail from mongodb and show it into your react native application inside the admin home screen now in the next video what I will do I will add a delete icon here and on press of that delete icon our user will be deleted from our react native application that means he will not be able to do login in our application so stay tuned for that and do let me know in comments how much do you like this video thank you for watching the video

Channel: The Debug Arena

Views: 675

Keywords: get data from mongo db, fetch data from mongo db and show it to react native, fetch data and show it in react native, mongo db react native, data in mongo db and show in react native, react native tutorial, mongo db, fetch data from mongo db, show data in react native, map in react native, flatlist react native, react native learn, display data in react native, mongo db and react native', mern, mern stack

Id: z_IisZ9w50w

Length: 11min 46sec (706 seconds)

Published: Tue Feb 27 2024