How to use ReactJs with Firestore realtime database.

okay guys so welcome back again so in this video we will be doing a quick tutorial on firebase firestore with react and i would try to keep this tutorial as simple as possible so that even the beginners can follow me so the first thing we need to do is to create a new firebase project so here i am inside console.firebase.google.com so the first thing i'm going to do is to create a new project so let me click on add project and here i need to give my project a name so in case a firebase project is a subset of the google cloud project so if you want to use firebase with any of your previous google cloud project then you can select it from the drop down if you have created any previously or otherwise you can simply create a new project so let me simply call it youtube tutorial so youtube tutorial and now what i'll do is simply click on continue and it would take a moment or so to create this project and for the analytics i am simply going to disable analytics for this project so let's simply click on create project and it would take a couple of seconds or a couple of minutes so we see that our project is ready so now let me click on continue and now we are inside the dashboard of our firebase project and now what we need to do we need to enable this project to be used on a web application because react is a web application so i can simply click on this thing here that is add an app to get started so let me click on this web thing here so let's click here and now we need to give our app a name so let's simply give this a name so let's simply call it react firestore tutorial so tutorial not tutorial but tutorial and i do not intend to enable firebase hosting hosting for this project so let's simply click on register app and now we need to or we will be getting us a snippet here that we can later get it from the project dashboard itself so now i can simply skip on this thing so let's simply skip on this thing and let's simply click on continue to console because i can get this configuration file later on also so or what i can do i can simply copy this piece of code inside my clipboard here and now let's simply click on continue to console and now we see that we have added one application to our firebase project and that application is the react firestore tutorial that we just created and now what we are going to do we need to enable firestore database for this project so let's simply click here and make sure that you click on firestore database and not on real-time database so let's click on firestore database and now we need to make some security rules for this project so let's simply click on this create database as of now and now we see that we have two options to start this database that is in production mode or in test mode so if we start this database in production mode we see that we have this thing here that is allow read write if false that is no one would be able to read and write to this database because it is written here if false so if it would have been if true then anyone would have read and write access to your database and i would be coming to this security rules later in the video but for now we need to start this database in test mode and now we see that we have this thing here that is allow read write if request.time is less than timestamp.date and it is one month from now so that so it means that any request coming from this time onwards up till this date anyone can have read and write access to this database so let's start and test let's start it in test mode and let it be like this only so now let's click on next and now we see that we need to set a location for this database so for multi-region databases you you can only choose the us central or the eurovis region and that's what i am going to do and if you were if you are being specific about a particular area in which you need to serve your application then you can simply select one of the regional databases so let me select here u.s central and now let me click on enable and now it would take a moment or so to enable the firestore database inside our firebase project so now we see that we have our cloud firestore ready and we have the database thing is here and since it's a nosql database then we need to create collections inside this database and i would be coming to that in a moment first let me simply cross these things here because they are not of any use and we have the rules tab here we have the indexes here and we have the usage here that is how much we have used our database in the free trial so now let's come to the data tab here and to create a data collection inside a nosql database first you need to create a collection so what is a collection a collection is a group of similar records so for example let's say that you want to create a list of to-do's inside a to-do's collection so for that so what i'll do i'll simply create a collection called to-do's so let's simply give this collection an id and let me call it to-do's like this and now let me simply click on next and now we need to provide an id to this document because in nosql databases the collection contains documents and each documents is an individual row inside a table so basically you can compare this or you can reference this nosql database with sql databases like collections are similarly mapped to tables and documents are mapped to rows inside that table so let me simply give this document an id so let's simply click here auto id though you can provide your own unique id here but for now i am simply going to give it a unique id and that is what typically most of the nosql databases contain a unique identifier for this document and now we have a field so since we are creating a document inside a to do collection so let me simply call it to do or let me simply call it the value of the field would be title that is the title of the to-do and the type of this field can be anything uh uh can be anything of these these types here that is either the string number boolean and so on and so forth so let me simply call it a string let's simply give it a value of get milk simply like this and now let's simply click on save though if you want to add another field to this document let's simply add another field that is is completed and the type would be boolean this time because we don't know that whether the task is completed or not so let's give it an initial value of false so now let me simply click on save and now we see that we have a collection called to-do's and in that to-do's collection we have this document with an id of this thing here that is this id and the fields of that document are these fields that is the title of the to-do and the is completed and in a similar way what we can do we can start another collection so let's simply create one more collection and this time let's simply give this collection an id of movies let's click on next and now we want to give it an auto id so the document id inside the movies collection is this id the field would be name that is the name of the movie and let's call it captain america and i'm a marvel fan so i would be using this movie's database inside the tutorial that is inside the front and react application so let's simply click on save though i can add as many fields as i want to have but that would take a lot more time in making the front end application but the logic would remain the same even if you have a single field or if you have multiple fields so for the simplicity of the tutorial i am going to simply create only a single field inside this inside this document that is the movie's collection so let's call uh call this field a name and the value would be captain america and let's click on save and now we see that inside our database we have two collections that is the movies collection with this document and this field and we have a to do's collection so inside your database or inside your firestore database you can have as many collections as you want and in that collections you can have as many individual documents as you want so now what i'm going to do i'm going to integrate this firestore database to our front-end application so before doing that i need to get something or we need to install a dependency inside our react project so let's go back to our application here so here what i've done is that that i've created a very basic react application using the create react app package and guys if you don't know anything about react then you can go and watch my video that is linked above and that video would be in the description also that is getting started with react and now i am going to install a dependency for this project that is the firebase firebase dependency so let me do yarn at firebase like this or if you were using npm then you can simply do npm install firebase simply like this and now it would take a couple of seconds or a couple of moments to install firebase and i personally use yarn because it is a much faster than as compared to npm so that's why i prefer to use yarn so now the dependency has been installed and now what i'm going to do i'm going to start this application in the background so that the application is also always started and we do not need any more dependency for this project or for this tutorial so let me simply do yarn start to start the application on local host port 3000 and we can see that our application is running here so let me also minimize the terminal and now let me see that inside the package.json file we have this dependency called firebase and let me increase the size here and now what else i'm going to do i'm going to create a new folder inside the source folder called lib and this is only my personal preference to create all the libraries i use inside the lib folder and inside this lift folder i'm going to create a new file called init hyphen firebase.js like this and here we are using the version 9 of the firebase api which provides us with 3 shaking so that our final bundle size is much less as compared to the v8 api so thus we are using the v9 api and if we have a look at the packets of json file we have installed the uh v9 version here so let's go here and here what we need to do we need to import something from firebase app so firebase forward slash app and this is the first thing you need to do inside in any of your react or nexus projects and here we need to get this function that is initialize app and then what we need to do we need to initialize our firebase application using the firebase config which we copied initially or if you haven't copied initially then what you can do you can go to your application here that is your firebase project here and you can simply click here that is project overview and then you can click on this thing here that is this app here and let's go to the settings here and we see that we are inside the project settings and then what we can do we can simply copy this piece of code from here so let me simply copy it from here so let's go back and now what i'll do is simply remove this initialize app because that is already present here so let me paste it here and now we can remove this which we already imported here because that is already present here so now what we are doing is this that we are simply importing initialize app from the firebase app package and then we have the firebase configuration and this configuration is for this particular project so if you have your own project then you might be having a different configuration only these values would be different the keys would remain the same and don't uh don't think to copy this project uh project configuration from this tutorial because by the time you will be watching this video this project would already have been deleted and then finally what we do we call an app and then we simply call we create a variable called app and then we simply initialize our app by passing in the firebase configuration that is this firebase configuration and now since we are interested in using firebase austral firebase firestore for this uh tutorial what i'm going to do i'm going to import get firestore from the firestore package so i'll say import something from firebase forward slash firestore like this and what you want to import we simply want to import get firestore let us get the firestore database for this particular application or for this particular project that we created and here at the very bottom we'll simply say uh let me copy it from here that is initialize file store simply like this and now what i'll do i'll simply say const db equal to get firestore and this takes in only one parameter and that is the firebase application that is this application that we just initialized and since we want to use this db in multiple parts of our application what we so what i'll do i'll simply export this as a constant here not export but export this as a constant so now our firebase initialization is complete and now if we go back to our database once again so let's go back to our database once again so if we have a look at our cloud firestore we have two collections that is the movies and to do's collection but in this video we'll be targeting the movies collection and we'll be getting all the data that is present inside this movie's collection we would be doing all the correct things here that is the create read update and delete but initially i wanted to show you that is how to read data from this firestore database so let's target this movies collection here so let's go back to our application so here what i'll do i'll create a new folder called components in which i will be creating all the four or five components that is read the database to create a new object inside a database and so on and so forth so let me create a component here or a components folder here and here i'll be creating a new file called uh list movies dot jsx so you can use js or jsx whatever you like i prefer to use gsx so let's movies.jsx and here i would be simply using this snippet called rfc to export a default uh functional component here that is list movies and here the for inside this div what i'll be doing is this that i'll be creating an h1 here or an h4 here which would simply say list movies and i'll be including this component that is list movies inside our app.js file inside the main tags here though this video is not about the ui i am simply focusing on the uh crud applications of firestore so i won't be doing anything about the ui the ui would be plain simple html here and here we will be seeing list movies like this and this list movies has been automatically imported from this components folder so as soon as i save this we see that we have this component here that is list movies and now let's go back to our list movies and inside this list movies we would be getting a list of our movies from the firestore database so here what i'll do i'll create a state variable called use state that is called movies not use state by using the user state uh hook here and the initial movies would be an empty array and here we need to import the user state hook from react so let me import it from react and now what do we need to do we need to create a function here that is called get movie or get movies so let's create a function called get movies like this and inside this gate movies i need to reference this collection called movie so to get a reference to the movies collection inside the firestore database what we'll need is the collection from fire store firebase fire store thing so we will say import something from firebase forward slash firestore uh store like this and here we need to reference the collection here like this and now we have a collection uh method here and we need to pass in something here to get the movies collection firstly we need to pass in the fire store database that is the database we initialize inside the inetfirebase.js file uh that is this this thing here so let me do it and it would make more sense so to get the list to get the collec ticket uh get the movies here firstly we need to say const movie collection ref collection ref would be equal to collection that is imported from firebase firestore and here we need to pass in the db that we created that we exported from this init firebase.js file that is this thing here so since it's a constant export so i have imported here or it has been automatically imported from this file and here we need to pass in the second argument also and that would be the name of the collection and in our case that would be the movies collection and let's go back to our firestore database here and make sure that this name matches this thing here that is movies so if we were using to do's then we would have been passing here to do's and not movies but we are references movies collection so therefore we are passing here movies simply like this and now we have a color reference of our collection here and now to this collection what we can do we can use another method here from this package that is firebase fire store and that is get docs get docs not get dock that is for an individual item but here we need to use get docs here and now what we can simply say we can simply call this function that is get talks and here we need to pass in the movie collection riff so we can say movie collection ref and then it's a promise so we can use the then and catch block so then a response like this let it be an empty empty thing from for now and then the catch block so error like this and if there is an error we can simply console log the error here so console.log error dot message like this and now inside this response let me show you the response first that is what is coming inside the response so console.log response is simply like this so let me save this and when do we want to get call this method here that is get movies so as soon as this component mounts we want to call this function that is get movies so what i'll do i'll simply use an hook here that is use effect by using the use effect snippet and i want to run it on component mount so the dependency would be an empty array and here we need to also import use effect from react so let me import it here from react and now what you can simply say we can simply call this method here that is get movie simply like this so let's save this so now since i saved this application and everything seems to be connected so let me right click and click on inspect here and if you open the console here we see that we got something here that is we got the metadata the query the firestore and the snapshot here so what are we interested in we are be we are interested in this snapshot thing but how do we get that snapshot here so that would be a piece of cake in this thing here so what we can say we can simply say uh const movies or let's simply call it movies movies equal to result or response dot docs and response dot docs would contain each and every document that is present inside the collection so before doing anything here what i'll do is simply log it log in the docs here because that is what we are interested in that is in all the documents of that collection so let me save this and now we get something else here and if we open it we see that we have something here that is length one and then we have this zero item here that contains the individual document and this won't make any sense to you until and unless we expand this object by using this thing here that is the response.docs we need to map this array into our own array so what we can do we can use the map method so we can say const movies equal to response dot docs dot map and here we have an individual document like this and then what i can do i can simply return something from here and i want to return an object here that is the data of that document so let me put it that into the data field here so that would be doc dot data like this and this is the function so you need you need to call the data uh function here and then we need to pass in something else here and that is the id of the document uh let me write it first and then i'll explain it to you each and everything so dot dot id let's save this and now what i'm doing basically here that is i am looping through each of the documents that is present inside this movie's collection and then i am using the map method to get an individual document and as you know that each of the document has an id that is this is in document this is the document id and this thing here is the document data so therefore i am mapping that document into a new array with the data and the id also so now what we can do after getting this thing here that is movies what we can do we can simply set the movies inside the state variable that is this state variable and this movies is not these movies so what i can do i can simply simply rename this variable to make it more explicit so let's call it morphs and now what i can do i can simply uh set the state of this movie's state variable using this morphs thing so i can say morphs simply like this and now our movies would be containing the new movies that is coming from the database and now what i can do i can use an ordered list or an unordered list here inside my html here i can simply provide an unordered list and before writing the list elements here what i can do i can use use effect one once more to show you that is what is contained inside this movie's state variable as of now so i can say use effect or use the user's snippet and here the dependency would be the movies state variable and what i want to log we simply want to log movies here because uh this effect would run as soon as this movie the state variable changes so therefore i am using this separate use effect hook for this movie's thing here so let me save this and now we see or let me uh we see that let me close this thing here now we see that as soon as the component mounts this effect ran and initially our movies was an empty array that is defined by this state and after a bit of time when we call this get movies as soon as the component mounts we got back an array uh that is set up that is uh we got back some documents from the database and then we said the movies from this new movie moves thing so that's why this effect ran again that is this use effect ran again and now if we expand this we see that we have the data here and the id here and this id is same as this id let me show it to you that is this is the id here and the data would be this data that contains the key and value pair that is name captain america and that is what is present here so what i can do i can use this movies object or this movie's a state variable to list all the movies here inside this ul so i can see movies.map and here we have an individual movie and then what do we want to do we want to simply return an li tag here so let me simply return an ally element here so let me do it this way so li and the key of this li element would be movie dot id because that is a unique identifier of this element and then we can simply spit out the movie id and movie uh name here so we can simply say movie dot data dot name simply like this so let's save this and now we see that we have captain america so now what i'll do i'll go back i'll make one more more button here and that would simply call this get movies function again so let me create a button here and it should simply say refresh movies and later in the video we'll be also seeing that is how to monitor real-time data changes inside the database using the snapshot listener but for now let's uh manually do it so on click what would happen so on collect i simply want to call this function that is get movies simply like this and now let's save this so now let's go back to our firestore database and now let me try to add one more document here let's generate an auto id for this the field name would be name the value would be iron man and let's save it so we see that another document has been added to this collection iron man and captain america so now let's go back to our application and now if i click on this refresh movies then we would be getting another element here so let's click on refresh movies we see that this time we have iron man and captain america so till now what we have done is that we know that how to get a list of all the documents inside a particular collections so now what i'll do i'll show you that how do we add a movie to this movie's collection so for that what i'm going to do i'm going to create another component here and that would be add movie so let's click on new file so let's click let's create a new file here that would simply uh say at movie.jsx like this let me create a functional component here add movie and then i want to create an h1 here that is add movie would be an h4 here and then this would return a div like this and this is only for notification purposes on this page here and inside this art movie i want to have a form so let's create a form here the action we are not interested in we are we would be doing it manually that is we will be controlling the form manually and then here i would like to have an input element the type would be text and then this should have a value and this should be a controlled input so we need to use a state variable here so here we can simply say use a state name set name initial name would be an empty name that is the name of the movie and the value would be name and this is old plain react stuff this is nothing to do with firestore database and then we have the on change events on change oh we have the we have the event and then we can simply say e dot we can simply say set name would be e dot target dot value simply like this and let's also give it a label here so label so for this thing we need to provide an id here id would be name html for name and here the label would be movie name like this and then inside this form we would be also having a button that would be of type of submit so submit like this and here we can simply say add movie like this so let's save this and now we need to include this component that is this add movie component inside our app.js so that it is reflected here so let's go to our app.js and just below the list movies i can add this component that is add movie and it is automatically imported from this components folder so let's save this and now we see that we have this add movie component here though this looks very ugly but we are not interested in the beautification of this application we are interested in the logic of this application and now here what we need to do we need to handle this form here so what we can do we can create a function here that is function handle submit like this and then we would be having an event here and we can simply say e dot prevent default so prevent uh default like this and then firstly we need to check so if name equal equal to an empty string then we simply want to return that is we do not want to add in a document or otherwise let me simply make an alert here that is alert name like this so let's save this and inside this form let's pass on this handle summit function so on submit would be equal to handle submit like this so let's save this and let's try it out so let me simply press add movie we cannot do it because that is an empty value and if we simply say black widow like this so let's click here and now we see that we got this thing here that is black widow so let's try to add this black widow to our firestore database so the first thing we need to do we need to get a reference of that collection so again we need to do this thing here that is import collection from firebase firestore and now here what we need to do we need to get a reference to that movies collection so we can see const movies collection or collect ref equal to not red but ref equal to collection and then we need to pass in the database and then we need to pass in movies here simply like this and now this is giving an error because database is not imported from that thing here that is from this file so we see that we need to do this thing that is this collection db movies a couple of times so i'll tell you that is the shorter way of doing this stuff in a brief moment of time but first let me try to add this movie to this movie's collection and now we can use this add dot function here that is a promise in itself so add doc and here we need to pass in the movie collection riff and then the data which you want to put in there put in that database or in that document so here we can simply say name would be name like this or if you want to simplify it you can simply pass the name here because the key and value names are same here so simply like this and then it's a promise so we can again use then response and here we can simply console.log the response so console.log the response and if there is an error we can simply log in the error like this so console.log error dot message like this and let me remove this alert statement from here so if everything went well this time as soon as i click on add movie we would be adding this movie to our firestore collection so let's go back to our firestore collection once and we see that we do not have any document related to black widow so iron man and captain america are only only here so let's click on add movie and if you go back to a firestore database we see that oh we got a green flash here if you just pause the video briefly so we see that this time we added this black widow here inside this collection so this is how easy it is to add data to your firestore collection and if we right click and inspect we can see the response that is this response here and this response is something which you might not understand but what we can do we can simply uh we can simply log in the id here so if i do ref dot response dot id so basically it would return us the id of the document that is inserted inside the database so let me minimize this thing here and this time let me add in doctor strange not stanch but strange let's click on add movie and we see that this time we got this thing here and again we see that we do not have an id here okay so the thing was that i did not save this file here i simply mentioned it here but i did not save the file so that was that that's the reason i was getting this zoo thing here but now as soon as i saved this application and i tried this to add this movie a couple of more times we see that we got these two document ids here which you can get from this response dot id so now we know that how do we add a movie here and if we do refresh here we would be seeing a couple of doctor strange here because that was my trial period here so let's refresh it and now we see that we got doctors trained a couple of times here and now what i'll do i'll simply show you that is how do you edit a movie so that would be pretty simple and for to edit a movie what i'll do i'll simply inside this list of movies i'll simply add in the id of the movie also uh beside this list element so let's go to this list movies here and inside this li tag what i'll do is simply spit out the movie id also so that we can get hold of the movie id itself so let's click here and now we see that we have the id of the movie as well here like this that is the individual ids of the movie and now let's simply go to this components folder and let me create a new folder file here that would be uh let me do it this way so edit edit movie.jsx like this and before going to edit movie.jsx i wanted to show you one more thing that is how do we uh how do we make a single uh singleton of this thing here that is collection tp movies because this is one thing which is used in almost each and every component where you want to reference this movie's collection so for that what you can do you can create a new file inside your left folder let me create a new file called firestore dot collections dot jss js like this not jsx but js and here what i'll do i'll import something from fire fire store so import firebase forward slash firestore like this and what you want to import we want to import collection here from this thing and now what we want to simply export here so export uh export const movie collection uh ref would be equal to a collection and then we can pass in the db here from the init firebase thing and then we can simply pass in movies here not movies but movies here like this so let's save this and now we can use this movie collection drift in each of the components in which we want to use this movie's collection and then we do not have to import this collection each in each and every file so let's copy this movie collection riff and let's go to this addmovie.jsx and again this db is coming from this init firebase.js file so now we have a single source of truth truth for our collection here so let's go to the list movies here and instead of doing this thing here what i can do i can simply say movie collection riff that is this thing is imported from this file that is movies firestore dot collections and everything would work the same way as it was previously working so let's again copy it and let's go to the add movie thing and again let's remove this collection thing from here and let me paste it here and let's simply import that thing from the firebase collections here and now you might relieve yourself from making typo errors inside this movie's collection name so now let's go to the edit movie thing here let me paste in a rfc snippet to create an uh functional component let me copy almost each and everything from this add movie component because that would be almost similar so let's copy each and everything and let's go to this edit thing and let me paste everything here so now we need to import the user state hook and now we need to create one more state variable so let's use the user state snippet and that would be the id of the movie set id initially it would be an empty string and then here we need to let me i'll come to this handle summit uh after we create the form here so this input field would remain the same and this would say edit movie and to pass in the id of the movie to be edited uh edited you can use your uh ninja techniques to click on something and then you can simply open the edit form and then you can use have a hidden field for the input but since i want to keep it simple or i want to make it make it explicit so i would be copying and pasting the id of the movies from here inside the edit form also so here let me create one more label and input field in the same way and this time the html4 would be id and this would be the movie id to be edited the id would be id and the type would be text the value would be id coming from the state variable and this set name instead of set name it would be set id like this as simple as that and now we can simply say update movie like this so let's save this and now we need to import this component inside our app.js file so let me simply import it here so edit movie like this so let's save this and now we have some errors here and that is because we have this add doc is not present so let's go here and now let's try to handle the handle the summit function here so let me comment it out from here let me delete it from here because that is not required here that is the add doc function so now we see that this is a pretty ugly looking form so let me put a break statement here to make it look prettier so to update a movie we need to pass in the movie id as well as the new name of the movie so here we want to return from this handle summit function if there is no id specified here so if there is no id or if there is no name then we want to return from this handle summit function so the first thing to edit this movie or to update this movie what we need to do we need to get our reference to a particular document which you want to update so if you want to update this document that is this doctor strange we want to get a reference to this document with this id so how do we do that it is pretty simple to do so firstly we need to import something from firebase firestore package so import something from firebase forward slash firestore and here we need to get a reference to the document so we can simply extract dock from here and now we can get a docker from this dock function here so we can say doc ref equal to doc like this and then we need to pass in the database and that comes from the firebase package or not the firebase package but the initialized firebase project that is this db so we pass in the db here inside this thing here and then we need to pass in the collection in which that document exists so in our case it was the movies collection and then finally we need to pass in the id of that document like this so now we have a reference to that particular document with that id and now what we can do we can again use one more function from here from this firestore package and that is update dock like this to update a document and here we can simply say update dock and here we need to pass in the dockriff so dockriff we just created on this line number 14 and then we need to pass in the updates here and the updates would be name simply like this uh here i could have done it like this name name but since both the things are same that is the key and value are same so i can simply pass a name here and since it's a promise again we can use then and catch so then response so console.log response dot response dot i don't know what is coming here inside this response so let's simply log in the response here dot catch error and console.log the error so console.log error dot message simply like this so let's save it and now let's try to edit this movie that is with this id because we have a couple of doctor strangers here so let's copy this id let's paste the movie id let's paste in the let's put in the updated name for this id so let's put here hulk like this and let's click on update movie so nothing happened here but if we try to have a look at this document that starts with xag and let's go to of database here and if we have a look at this document here we see that this time the name of the movie is hulk and we see that the document has already been updated so if we click here refresh movies then we can see that this id has been updated and we see that we got hulk here so this is how easy it was to update data inside your firestore database and if we simply inspect it and we see that inside the edit movie on line number 17 17 there is no response coming here which means that there is a promise it would be a void type okay so one more thing here is this that if you provide an idea which does not exist so this says that if the uh if the document referred by a particular document reference id is not does not exist the update would simply fail so let's try to do that as well and let's see it in the console that that what error do we get here so let's try to do that so let me pass in an audio which does not exist and let me try to update that movie so if we try to update that movie so we see that we get an error here that is from line number 18 here there is no document to update so which makes sure that only the specific ids present inside the specific collection would only be updated and there is one more thing apart from this update doc that can be used to update a document and that is the set dock so basically what update does is that that it only updates the specific fields from the collection whereas set would simply update all the fields from the collection from the particular document that is let me explain let me let me use that as well so this time i would use set dock instead of this update dock so let me copy this piece of code from here and let me paste it here and let me comment it out from here uh instead of updating doc i would be using set doc and we would be passing in the same doc ref and this time inside the object let me simply pass in uh let me pass an age here and it's the hp 26 and watch what would happen if we use the set dock method it would completely remove the previous document and it will simply create a new document with this field here that is h26 so let's save this and let me copy this hulk from here and let me paste it here and let me paste in this uh a movie name hulk uh hulk or let it be like mafia let's click on update the movie we see that nothing happened here but this time the movie name would be gone from here so we see that the movie name is gone from here and that is because the set dock method completely updates the whole document it does not it keeps in the name field here whereas update would have kept the name field here so as we can see that is inside this document that is with this id we have a field called age and this time again what i'm going to use i am going to use the update talk method by passing in the name value so that we can see that if we use the update update dog method then only the changed fields are updated whereas in the set dock whole of the document is overwritten so let's see that in action so let's comment the set doc again from here and let's again use the update doc thing from here and let's save it always and this time let me provide in mafia here and let me click on update movie and if you go back to our database we see that the update dock method keeps the previous field that is age which is not updated and it also adds in the name field here so it depends on your application that is which thing you want to use but i would prefer that as this thing is destructive that is set docker is destructive whereas update dock is much more safer than said talk so it depends on you that what you want to use but i prefer to use update talk so now let's see that how do we delete a movie from our database now to delete a movie from the database what i'm going to do i'm going to go to this list movies collection here and here inside the map method where i'm mapping all the movies that is this movies i want to put in a delete button here i simply put in a button here so it would be an ugly looking button again so button so delete or let me put an emoji here if i can get one so trash and here we would be having an on click event on this thing here and here i would like to call a function called uh call in a function called delete movie like this and here i would like to pass in the movie id so i can say delete movie movie dot id and now i like to create this function that is delete movie somewhere here inside this component so i'll say function delete movie and here it takes in an id here and here if everything went well we can see that so let's simply make an alert here alert id so let's save that and we have this button here with the trash icon here so if i click here so we see the id is passed here and if i click here we see the id is passed here so now we know that this function is working so now again to delete a movie what we want to do we need to get a reference to a particular document to be deleted so again we can use the same thing that is const doc riff would be equal to doc that is coming from firestore that is let me minimize the skid movies and this use effects here so we got the dock from firebase firestore and now what i need to do we need to pass in the database here that is the database which we have initialized and then we need to pass in the collection name so in our case it would be the movies collection and then we need to pass in the id of the reference document so we can simply pass an id here that is coming here as a parameter and this should be docker f like this and instead of making an alert what i can do i can simply say delete uh or let me import it first so now what to delete a document i can simply get one more function from here or more method from this firestore package and that is delete dock like this so let's use this delete talk method so delete dock and here we need to pass in the reference and again it's a promise which returns us nothing so uh and here we need to pass in the document reference and that would be doc riff and dot then and here we have a void here because this is there is nothing returned here i can simply log here that is console.log document deleted like this and then we can catch the particular error if there is any so i can simply say error so console.log so console.log error dot message in case the document is not fine by this id so let's save this and we let's click on refresh movies so let's click on delete this doctor strange movie which starts with with dasc so let's click on delete and let's click on refresh movies once again and we see that that document is deleted and if we have a look here we see that that document also does not exist so let's also try to delete this document that is xaq or the name and h field here so let's click click delete on this thing here and if we go here we see that that document is now does not exist anymore so now we can also add in a movie here and now the best part of this application comes and that is get real-time updates from the firestore collection as soon as they happen so to do that what i'm going to do i'm going to create one more collection here or one more component here not the collection here and that would be called uh real time movies uh realtimelist.jsx so uh real time movies.jsx again i would be using the snippet called rfc and again uh let me put an h4 again here so h4 like this and now what i need to do i need to get a reference to that movies collection so i can simply have a state variable here that would be the data and the set data or the movies and the sit movies so i can use the user state snippet here would be movies set movies an initial state would be an empty array so now let me import user state from react and i would also want to use the use effect snippet because i want to start listing for the movies as soon as the component mounts so i'm using the use effect snippet here and here i would need to return something but this effect should run only on only on component mount and on dismount that is this return would be called on dismount or unmount not dismount but unmount so we imported the use effect hook also so now the first thing we need to do we need to call one function that is on a snapshot function from this firestore package so let me import something from firebase firestore like this and here we have a function or a method called on a snapshot like this and now we can call that function that is on a snapshot and here we need to pass in a couple of things that is the reference and the observer so the reference would be the movie collection drift that we created initially inside the firestore collection because otherwise we need to import the collection thing from here and then we need to create use this thing here so why not simply use this movie collection riff so let's go to this real time movies here and here we can simply pass in the movie collection riff and again this movie collection drift is imported from our file that is firestore.collections thing here and then we have an observer here that would be simply called a snapshot or i'm simply going to call it snapshot like this and then this function that is on snapshot returns as an unsubscribe function that we can call inside the componented unmount method because otherwise if you did not call that unsubscribe function then multiple snapshot observers would be added to your application and you might get updates a couple of times or a couple of a couple of more times so it would be all it it's also it all it's always advisable to simply call the unsubscribe function that has returned from this on snapshot on component date amount so i can say const unsubscribe equal to this thing and then it should be called unsubscribe like this and then we can simply execute this function on component that unmount so here what we can do we can simply set the movies from this snapshot so again i can simply call it set movies and now this thing is pretty similar as the list movies thing so i am directly using it here so snapshot dot data sorry not a data but the snapshot dot docs dot map and here we can pass in the we can track in the individual document and simply we want to return the data like this that is we want to do it like this so firstly we need to return the id so we can say doc dot id like this and the data would be doc dot data like this let me increase the size here and we need to execute this data thing here because this data is a function here so let's save this and that's all what you need to do to listen for real-time updates so let me simply grab in the list item from this list movies thing here so let me simply copy this ul from here and let me paste it there inside my real-time movies because that is the same thing which we initially did and i want to remove this delete movie thing here because that is already handled inside this list movies so let's save this and i think that everything seems to be fine here and now let's go to our app.js file and let's include this component there so let's go to our app.js file and let me comment out this list movies from here and let me add in the real time real time movies like this [Music] so let's save this and we see that we have our real-time movies displayed here and let me try to add in one more movie here and this would be like let's say thor let's try to add it we see that as soon as we added it it is automatically reflected here so let's copy this id and let's change the name to something else so let's call it thor ragnarok though i did not like the movie so as soon as i update the movie the the real time changes would be applied here so let's click on update movie we see that the document has been updated here and let's also verify it inside our firebase console that is that start with kh 81 so let's go here so kh81 we see that we have thought ragnarok so this is how easy it is to work with firestore database using react application so guys that's all about this video and i think that i've covered each and every topic that is the create read update and delete and also the real time changes and now the last thing and that is the security rules for this firestore package so if we have a look here we have these rules here and if i wanted to explain the rules here it would be too difficult to include that in this video itself because that's a separate video about rules and if you want you can go and watch my video that is linked above that is made for android fire store but the same rules work for this react fire store also because firestore is a service that is provided by firebase and that can be used inside any of the front-end client applications like the android the ios or the react applications or view angular or whatever web applications in short so you can go and watch that video and in that video i've explained in details about fire store rules and i guess that that video is a super hit video about fire store rules and i can guarantee you that you cannot even find the same kind of explanation about fire store rules on the google on the firebase web page itself or the firebase documentation so i would highly recommend you to go that go and watch that video that is about the firestore security rules so guys that's all about this video so if you like the video do hit the like button and if you haven't subscribed to our channel do subscribe to our channel so thank you bye take care and have a good day and have a great day

Channel: Mafia Codes

Views: 23,651

Keywords: yourstruly, firebase Firestore with react, how to use Firestore with reactjs, realtime firestore updates, setDoc vs updateDoc firebase, firebase security rules

Id: F7t-n5c7JsE

Length: 57min 1sec (3421 seconds)

Published: Mon Mar 07 2022