Transcripts
1. Introduction: Hello everyone. Welcome to this
course in which I'm going to teach you
how you can build thread application
along with image upload using Firestore database
cleaner React application. So let's say first what we're going to
learn in this course. So we will build the
React application. Absolutely. From scratch. You will learn some
basic three-act concept. You are going to
learn some React hook like Utah State
and use effect. You will also be able
to learn how to set up a firewall in your
React application. In this project, we are going to use a particular database. We've got our data. We will also going to write different, different
Firebase query. To perform crud operation. You will learn how to upload e-mail using Firebase historic. So this must thing you are
going to learn in this course. Now, let's have a quick demo of this application that we will building
throughout this course. In this course, we
will be learning to upload image on
Firebase using a storage. Along with, we're also
going to implement full feature in our
React application. Using a database. We will able to perform
create, read, update, and delete using factor in this current
React applications. So I hope you are very
excited about this course. So now let's talk
about the skills required before you
take this course. So basic HTML, CSS, JavaScript required good to have some basic concept about react like how a state and props were. So this is all basic requirement you might have before
you take this course. I hope you are very
excited about this course. And if you find out that
this posted in predicting, then please enroll into this birth in order to
learn all these concepts. Now, I will see you
in code section.
2. Project Set-up: So guys, as you can see
that I have already created a React project with
the command and press Create React app
and the app name. So you can create this project. And I have already opened this project in my
Visual Studio Code. You can see that in this project
we will be using 70 Dui. Let's install the package
related to Semantic UI. So I'm just going
to copy this one. So let's copy this one. And I'm going to
paste it over yet. And we're also going to install Firebase and React router. Okay, so let's talk
all these packages first and wait for the
package installation. So guys are all packaged
water. You can see that. So first let's go
to the browser. And let's say use this one. Okay, this important statement. So we need to bring the
CSS file for the 70 QA. So let's go to the VS Code. And in index.js file, we have to paste here. Okay? Now let's do npm start. Let's wait for the application
load into the browser. So guys, we have
some issue. Here. You can see that in our
terminal after doing and Timmy, and it's mostly happened due
to this import statement, okay, related to
the semantic UI. So the alternate way, what we can do here. So our alternate
approach will be like, We can use this fish tiles set. Okay? So let's copy this one. So either you can comment this important statement or
you can remove this one. I'm just going to
comment this one. And we have already
copied this one. So let's paste here inside
this index.html file. Let's save this file. And guys left set terminal. So we are not facing any issue. Let's go to the browser. The fled, this one. So we don't have any issue
now in our application. And let's verify that that's cemented is working or not
in our React application. So I'm just going to
palpate this one, this piece of code. Okay? I'm just going to copy this one. Let's go to the VS Code. Let's go to the app.js file. Spring here, that
button component. And we can just copy
this one for now. And let's remove all
this content area. Now, let's go to the browser. So guys, you can see that our button component is display. So that once we
have successfully configured Semantic UI in
our React application.
3. Configure Firebase/Firestore: So now it's time to
configure our Firebase. So I'm going to Firebase console and I'm going to
add a project yet. So let's give it a
project name yet. So correct. Image. Let's
click on Continue. Let's disable this one. We don't need Google
Analytics for our project. Let's create the project. It will take one minute to
finish our project creation. So our project is created. Let's click on Continue. And here we have to
select this one. And again, we can give the web application our
ready-made already. Let's register this obligation. So we've got our
Firebase configuration. So let's copy this
one entire thing. Let's create one file under
source, firebase dot js. Okay, let's paste it over here. Let's move this one. After that, what we have to do. So let's click on
Continue to console. And we're going to
use five TO database. So let's click on that one. And here we have to
create database. We can use your production
mode, no issue. Let's click on Next. Let's enable. Our database is created.
You can see that here. So now we have to
reject the Juliet so that we can read and write
on this photo database. So here we can do like true. Okay, so Let's set to true. Then we will ever do, but you didn't write on
this factor database. So now I'm going to
publish this one. Now, let's go to this Torres. So we're also going
to upload the image. So here we have to
also change the rule. So again, we have to
set this false to true. So let's say remove this one. And let's click on Publish. So guys, we are done
with the factors setup.
4. Enable Routing in App: Now let's go to the VS Code. And first I'm going to
create some folder here. So I'm going to have
one components folder. One folder, I'm
going to have pages. One folder I'm going
to have effect, okay? Inside this hazard, I'm
going to put one SVG file. So this SVG file, I'm going to put inside this assets folder
nine components. We are going to create some file like to have one
modal component. And then we're going to
have an AB bar, okay? And then we're going to
have a screen at, okay. Now integers, we're going to
have one home dot js file. And we're going
to have added it. Use that ok, dot ds. So we will be using the same
page for adding a new user, our object in the
adjective user. So less than gender taste
snippet on both file. So I'm just going to
generate its snippet here. And let's generate a
snippet over yet again. Now, let's go to
the app.js file. And let's remove this one. And let's remove this one. And let's configure our reactor Rotterdam in this application. So let's bring your
browser router. Routes. Okay. Now let's have browser router. Let's start this one
and insert this. I'm going to have routes. Then I'm going to have
my individual route yet, but it will be homepage. So I'm just going to render your homepage and
let's copy this one. So this will be the add. And we're going to
render page here. I added it, use it. And you're going to
have one more route or updating the existing user. And we will going to
update based on the idea, that case also, we are going to render the same page that
is added it to user. Because we are using the
same page for adding the new user or abducting
the adjective user. So let's save this file and verify this 1 first
in our browser. So home is already rendering. You can see that Let's
verify add surrendering. And we can also verify this update one with
some random ID. So this is also render. So we have successfully
configured React router down. This application.
5. Working on NavBar: Now I'm going to start working
on our navbar component. So I'm just going to generate
a snippet over here. And from Symantec, we have
to bring some component. So Symantec you ready yet? We need to bring
light component. May know container,
button and image. Okay? We also need to bring youth navigate from
the react router dog. So let's bring that on as
well. Use and navigate. And link also the card. And we have one logo here. You can see that in
our assets folder. Let's bring that one as well. I'm just going to
bring lake logo. And let's go to this directory. And we have Yacc, not SVG. I'm going to store
that offends off. He used navigating to
navigate very well. And let's remove this one. I'm going to use here
amino, intense menu. I'm going to pass down
props, borderless, inverted, and some inline
styling, like padding. I can give you three. Margin, bottom, I can give
you a pixel. And one more. We have to pass a
task that is menu. I'm going to have container. Then we're going
to have menu item. Let's give it a name. Like Paul. I'm going
to use your link. Inside this. I'm going to have image. So let's use the image
compression from Semantic UI. Size will be Mini. And in third source, we are going to pass
global Internet. We can pass test logo, Okay? Once you click on this logo. So you will basically navigate
to the homepage only. We can escape route or we can specify
our home route here. After that, we're going to have one more menu item. Inside that. I'm just going to
have herding life. React Firebase with Upload, okay, with Upload Image. Now, we're going to have
one more menu item. So this will be basically having one button
to add a new user. Okay? Let's say remove extra Meno. And we're excited for this here. So the position
will be the right. And instead this, I'm
going to have button Add. User size is gonna be mini only. The button will be the primary. We are going to have
an onclick method. Then once you click
on that ad user, you will basically navigate
towards the ad page. Okay, so we have completed
this never competent. So let's bring this Navbar
component to our app.js file. You can bring it over here. Now, let's go to the browser. We have got our nice
number here with seven UI. And if you click on this logo, you will basically navigate
towards the homepage. And if we click on Add here, you will never get to
the Reddit user phase. So we have completed our Navbar component in
this React application.
6. Working on Form: Now the next thing
we're going to work on adding the new user
along with the image. So first let's
configure out Firebase here inside this
Firebase dot js file. So here first we have the brain. Get faster. From Firebase. We
have to go to five. And we have to bring that. After that. We also
need a storage here. Let something that
one for me, storage. So we need get storage. Okay? Now we're playing
with light our five dB. So for bonds BB, or to get faster at and sales, we're also going to
upload the image. So we have to also
initialized our storage. So storage, storage app. So this basic configuration is done in our Firebase
dot js file. Now let us start working on
this edit User dot js file. So first, we need to bring some component from
our semantic UI. So we need component here like beta1, grid and loader. After that. We also went to need storage and DD from
art firebase file. So let's say I'll bring
that one as well. From react, we need click. You just take it and use it. And from React router down, we need couple of things
like, you wish better. And youth navigate. So let's bring
those folks. Okay. Now, first let's define
the initial state. So I'm just going to define outside our
functional component. We're going to have name, e-mail, info, and contact. Let's define one state, cost data, set data. And here we can use
and we can pass here. Then you see listed. Now we have predefined some modest kid. So first we're going to have a state for phi that
you're going to upload that image file and
initially treated with a null. Then we're going to
have one progress. So we have to check whether
our image is uploaded or not. On our Firebase. We have to also check the
progress of our image upload. And this value also a null. Then we have to also
check if we have any kind of error or not in our farm. So we are also doing form
validation over here. And this will be also, this will be the input D object. We're going to have
one more state. And here we are taking light if all mixed and mutate or not. So we have to also
check this one. It will be initially false. Now, after that,
what do we have CO2. So first I'm going to work
on our form component. So let us remove this one. In fact, this tape,
I'm going to have grid and this will be centered. So we're parsing this prompts and we have to
pass some more prompts. That will be a vertical line
that will be in Moodle. Then we can have your columns. And then we can have some
Atlantic tile height. We can give a T VH. Then we are going
to have grid row. Then grid dark color. Let's give here
dashed line, center. And let's have here div. And we can check here like
it is submitted true. Then vertically we have to, so a spinner here. So we can use yet loader, okay? That will be active. And in line we have
to pass this props. We have to pass in our
episode the loader. And it will be centered. You can give here huge and in else part and
we are going to have our entire form section. So first I'm going to give
here heading like add user. And we have to use
your fragments. So let's see, use that one. Otherwise, we are
going to see it or if you don't
use this fragment. Because below this heading, we are going to have
our form component. Form. Then we're going
to have form not input. And we're going to have level. Level is there to name this level inside
this input. Okay? So I have judged for this one. And we can give you
a place holder. So we can give light
to enter name. We have to give name
property as well. We're going to have
on Janie method. So let's define this handle
change outside the return. So we can define here
and does change. We will add the logic later. After that, we can have value. So with a name. So here we have to
structure our name, email and contact from data. From data, we can do that name, e-mail, info, and contact. This form input will
be the self protein. We can remove this one
and it will be autofocus. So the first input field
will be the autofocus. Whenever we load this
added it to user pH. So let's save this file and see whether we are able to
see any input field or not. You can see that we've got
one in portfolio. Okay? After that what we have Godot, and we can just copy this one. And we can put it over here. So we have to just
change here level. This time it will be emailed. This will be male. Name will become email. And this email. And we have to remove
the autofocus. Let's copy this
one page to time. Because we are going to have
some more details like info. And we're going to be
using a text area. Okay? We can give you an
intern for after that, we're going to have Info. And this will be done in four. And this will be
the contact, okay? So contact level a
little bit, the contact. And contact. This will be the contact. And they celebrate the contact. Then we are going to
have one more input. File upload, a file input. And here we can give the level upload and type. We can give. By unchanged, we have
to give you a file. So it will be that
file and E dot target. So we have two. So this will receive an
event dot target file. So we can access our image
file under five index, so it will be 0. This 0 to index. We are going to have
our entire file. Okay? So that's why I
have written here. And let's define this
handle change as well. So this quantity when event. And we can do like certain data. You can get it spread out data. And we can do like a dot target, dot name, e dot target value. So let's go to the browser
first. Inflate this one. And let's type something
in each input field. So we are able to type. And let's try to upload
a media as well. So this is also working.
7. Form Validation: Now the next thing
we're going to basically validate
our ball component. So we have to also do a
form validation over here. So let's do that one. So here in Palm we are
predefined and some met. Okay? So all summit, we are going to have
handled somewhat. Let's define this one. And this is going to
receive an event. So first we will do, if you do not prevent default. And after that, we
have predefined light. And we have to write one
validate function over yet, which will basically
validating whether each input for live
in poverty or not. So let's say define
this validate function. Now to find one error object. And we can check here
like if name is infinity, then we can give
here like errors. Dot name equal to
name is required. Likewise, we can do for
other input will as well. I'm just going to copy and paste it over
here couple of time. So this will become now email. We're also going to check email. And this email. Now we have in four as well. There's that message with
respect to input field. And this will be the contact. And this will be contact. So we have defined our
validate function over here. So first it's going to validate whether our input
folded in putty or not. So if it's empty,
so we are going to, so this error message. And after that, what
do we have to do? So here we have to write one
logic if object dot keys. So if you have any error, then simply we can
do like a retard. And we can just pass
this editor, okay? And if everything is fine, then we're going to add our
user returning statement. Whatever you write below
code, it won't execute. Okay? So if you don't
have any error, then we're going to
add our new user. After that, what we have to do. So let's add the error property in each input field as well. So you have to pass this probe. And we have to check
like errors. Dot name. If you have, then show that one. We have to pass your content. And inside that content, we're going to throw
that error message. And it will be the null. So I'm just going
to copy this one. And I'm going to take over a
year for email input field. And I will update
the properties. So it will be email. And it will be the same thing I'm going to do
for info as well. So it will be in poor. It will be Info and same thing. It will goes for
contact as well. So let's save this file and verify this one whether
it's working or not. Let's go to the browser,
refresh this one. And let's just hit Submit. So we don't have any
Submit button here. So let's add that one. So we are going to have one
button to submit the form. Submit. It will be primary. Type will be submit. Okay. Now, let's reflect this one and let's
click on Submit. Method is not display. After tried to submit the form input t. So let's see
what is going on. So here basically we forgot to return our data return error. Let's save this file. And let's go to the browser. For this one. Let's
click on summit. Now you can see
that we're getting this error method like name is required equals required in forever, required
quantity, required. Form validation is completed over here in this application.
8. Image Upload: So the next thing we're
going to try to upload image before we add a user. So first, we will try to
upload the image on Firebase. So what we have to do. So here we are going to be
using one hook you defect. You will see it will
run only once you upload a file. Okay? After that, I'm going to define a function here,
click Upload File. Here, we have to generate a unique file name
so we can use yet, Neil did not get time plus phi dot name. After that. We can have our
storage reference. So here we can use the rep
from our Firebase storage. And we can have our storage. And here we can give
file name. After that. We're going to have here upload to upload. Bite me, but we have
to use this one. But Ahmad Firebase history. And yet we have to pass the
storage and file. After that. We are going to use
this upload task. We are going to be
using on method. In fact that first we are going
to have a status changed, and then we're going to
have a callback function. So we are going to
usually snapshot. And we have to take
the image, upload, progress, the progress, too. Short, dot byte transfer. So basically we are calculating the progress
of the image upload. And here it will be
total bite into and 200. Okay? After that, we can
set the progress. Okay? And here we can use switch case basically to
track the image upload. Okay, so here we can
use short dot state. And we can have is
state-like pause. So we can get some
console logs here, like upload is boss. Degli here. We're tracking our image upload and we
can give you a break. And we can have
one default first. And it having this simply
break, that's fine. But this one, we are going
to have one more gate. And that will be for RNA. And you can just copy this one. You can just pay took over yet. And here we can give lake
upload is that I need. Okay. After that, what were
produced so in the third are when we can check if any kind of whether or not we can just do
a console log here. If we have any kind of era
when uploading the image. Okay? After that, we're going
to have one function. Here. We can use can get download URL. And we can use upload
task, snapshot dark. Then we have to
resolve this one. So download URL. And here we can set. Data. So basically we are going
to update our state. Avs. We are spreading out
are all state property and we're just going to
append our image file here. So we will get this
download URL and that URL we are going to
explore in our database. After that, we have to check
like if you have the file, then we have to execute
this upload file function. Now, we have to use this
progress state on this button. Okay? So this submit
button will be disabled if our image upload
process is in progress. So it fits in progress, then it will be disabled. So here we can check like
progress not equal to null. And if it's less than a 100, that means our image upload
process, vision, progress. In that case, submit
button will be disabled. So once the URL generated, then only we are allowed
to submit the form. Then only it will able to
exploring factor database. So we have to wait
till the 100 per cent. So once it reached
to work the a 100%, then we will get
the downloaded URL. And then only we
can able to store that download URL in
our Firestore database. So we can verify this one, whether we are able
to upload image or not on our Firestore database. So different this one. And let's also
Bennett console here. And I'm going to
upload the image. So we're getting this error. Okay? So to fix this issue, you have to go to this
Google console cloud and you have to
search your project. So we have created a project with the grad high-fat image. So here we can set that present. So we got this project, okay? After that, you have to
go to this cloud storage. Here. What you have to do here, I'm going to select this one. And then here we have
to add a principal. And you have to add
this principle. So you have to add
on this thing. If you are facing
any issue to add an image and you have
to select a role here. So you have to select
your cloud storage. And here you have to
select the storage admin. Save this one. And let's factor if
they're this one. And we're getting some widening
as well in our console. So we will shift
this warning letter. So first, let's upload
the image here. You can see that
upload is running. Let's verify this one, whether our image
is successfully uploaded or not on our
Firestore database. So let's go to the storage. And here you can
see that our image successfully uploaded
on our database. So this part is
computed over here.
9. Add User Data in Firestore with Image: So now we're going to add the user information along with this image in this
file database. Okay? So at the moment, we don't
have any collection here. So we will create a collection. So let's go to the VS code file. So now we have to add the user information
along with the image. So what we have to do. So in handled summit, we have to write it logic to add the user information
with the image upload. So first here, we can do, like I said, each summit Bu, Ru. Okay? After that, we have to convert this handle
submit function to think. Okay. Now we can use here. Wait. We have to bring add
in dog from Firebase. Then we have to bring collection again from our fire bit faster. So let's import automatically. Now, here we have to pass db, and here we can mention
are the collection name. So we're going to
create a collection with the name users. And after that, we have to pass and I'll check inside that. I'm just going to
spread out our data. Then I'm going to add one
property here, timestamp. So we can add timestamp, at which time we are creating
this particular user data. So here we can use
server timestamp. Okay? And after that, we
wanted to get into Lake, navigate to the homepage. So I think we have bring
huge navigate or not. So we have a huge navigate, but we haven't distorted
the reference of use, Navigate,
navigate variables. So I'm storing the reference of use and navigate into
this navigate variable. And here I can use. So after creating a user, we want it to basically
navigate towards the homepage. Okay, Let's do that one. So let's save this
file and let's check whether we are able to
add user information or not. So let's refresh this one. So we are getting
another method here, like DB is not defined. So I think we haven't bring the dB down this
barbaric dot js file. So let's bring that one. So let's bring that DB. Let's save this file. Let's go to the browser. Now. Let just read this one again. I'm just going to add
one user and farmers. And so this will be
John, john gmail.com. Some random information.
Let's keep going. And let's select a user image. So I'm going to
select the image. Let's wait for some time. Now. Let's click on
submit. Our form is. Now after successful
form submission, we are navigating towards the homepage that when
we have successfully, I'm rotate our user
information to the database so we
can verify this one. So let's read this one. Now you can see that we
have got one collection. And inside that we
have a contact e-mail. And we have got one
image URL, okay? We got in for name
and timestamp. So that when we have
successfully able to explore our user information
in a database.
10. Show User Data on Homepage: So the next thing we're going to basically
work on this homepage. So whatever the data we
have inside our fighter dB, we're going to display
in a cart component. So let's work on this homepage where we're going to
lift out different, different user that we are
going to have in our database. So now we're going to work on this homepage where we're
going to lift out different, different user interface card
component with the help of semantic UI from our database. On react first, we
need huge effect. And usually state. And from Firebase,
we also need dB. Okay? And some components. We have to bring
Branemark semantic UA. So the component we
need, like button, card, grid, container, and image. We also need here. Use navigate from
React, router dog. Okay, after that. After that, Let's
define some state. We are going to have a
huge debts which will repeatedly hold
all the users that we have in our database. Initially it will be empty area. We're going to have unloading loading state. And it will be false. Okay? And let's
also store friends. Use navigate into it. Navigate very well. Now, I'm going to
run a huge effect. So whenever our app load, where we want it to
display all the users that we have in our database. So here I'm going to do
set loading to true. Then I'm going to have
one function here. Then I'm going to
write Firebase vary. So it will be like a snapshot. It will be like on, a snapshot, will be able
to bring from our Pashto. And here we have to
pass collection. And in fact that we are going to pass db and the collection name. So we have the
collection name users. After that, we are going
to have one callback. So we are going to
have a snapshot. And let's define the
empty list at it. Then snapshot dogs. And we're going to run a for each loop here on each document. And yet I'm just going to push the document into this
list empathy at it. We are going to have
ID of the dog, okay? So talk dot data because id will be not there in the
factor database if you, if you can see that here. So ID property is
not here, Okay? So we're just adding the
ID property and appending the rate of the data that
we have in our five dB. Okay, So this is our
entire document data. And on top of that, we are adding this ID. Okay? I hope you
are getting this. After that. We're going
to set our users. So you can just pass a list. And set loading will be false. Okay? Let's also handle header. If you have any kind of Herat. So I'm just going to
do a console log. Let's forget this one. And after this. So this is already using sharp. So we are going to have
a pretty dependency. And we have to also
unsubscribe this one. What is the component?
Get unmanned? So we have to do this one. So subscribe. So we have completed
this basic logic. Now. What we have produced, so you have to work on this return part where we are
going to show a different, different user that we have in our database in a
card component. I'm going to use the
container from Semantic UI. We are going to have group. Then we're going to have a grid in which I'm
going too fast. Columns, three, stackable. We have to pass this probe. Then. We are going to have
different, different YuJa. Then I'm going to
map our users, okay? You just dot map. And inside that, again, I'm going to use grid column. And then I'm going
to use here guard. Okay? So first I'm going to provide
a key here, item dot ID. Then I'm going to have guard content in which I'm
going to have image. So I'm using same entity
white image component here. And we can pass source here. Item dot image size
will be medium. So it may say, I'm keeping your medium. And I'm just going to add
some inline styling here. So I'm going to give height
150 pixel width also, it will be one pixel and the image will
be the rounded. So I'm going to give it a
border radius of two per cent. Okay? So far now, we can verify this one, whether our images
displaying or not. So let's go to the browser. So you can see that we
have bought our image. Okay? Now we have to add
the rest of the details. So after this, we're going
to have our card header. Not height. God. And here I'm just going to show
the name, item.name. And I'm going to provide some inline styling
with some margin top. So it will be ten pixels. Let's farmer this one. After this, I'm going
to have description, so card dot description. And here I'm going to
have item.name four. Then our card content will close here and we're going to
have one more card content. And here I'm going to
provide props, card extra. Then I'm going to have do. And inside this div, I'm going to have button. So it will be update. And color we can give here
in green and onClick. So we're going to provide
an onclick method. And if we click on Update, so we wanted to navigate
towards our update page. So we're using the same page for updating the existing
user as well. So here we can give
the route routed already that register
on our app.js file. So this is our route
update with ID. Okay. Now, let's format
this one for now. And I'm just going
to copy this one because we are going to have
one view button as well. So this will be view. And we will define
onclick method related. And the color will be purple. Okay, so let's save this one. And let's go to the browser. So the top card is
not looking good. So I think we have some
styling issue over here. So we can remove
this one columns. Okay, let's go to the browser. So now we are getting the proper card component
with the user information. We have two button,
update and do. So if we click on update, you will never get
towards the update page. So you can see that we
are able to navigate towards that same ad user. So we're going to use
the same page for updating the user as well, okay.
11. Update User Data: The next thing, we're going
to update it, adjective user. So in R2 or rejecting user. So far, we have to populate the existing value into each
respective input field. Okay? So we're going to
update in educating users that we have in
our factor database. So let's go to the VS code. So now we're going to update an existing user that we
have in our database. So let's go to this
additive to users.js file. So if I actually have to
populate the value into each respective inputs that
we have in our database. We are going to
populate the value into each respective input
field with the help of id. So you can see that we
have an idea here, okay? So we're going to use this ID to get the specific user data. So what we can do here. So we have already bring the youth parents
react router down. So we can do that too. The ID. Now we
have our ID, okay? So we're going to
write a huge effect. So just use that will only
run once we have the ID. I'm going to add a ID and
dependency over here. Here, we can check
if we have the ID, then we're going to execute one function that
is single user, which here to define. So I'm going to define this function and
get in real user. And it will be async. So we need that
document reference. So cost document reference. We can bring this
dog Lamar factor. Here. We can pass DB
collection name and ID. Now we need a snapshot of
that particular document. So we can use a wig. And here we are going
to use AND gate dog, which we are going to
be used for more five, Good. So you can see there. So you can see that
we're bringing all this helper method from R5. So here we can use can get dark. And we can foster
document reference. And we can check here like
if the snapshot not exist. That means if you have that particular
document with that ID, then we're just going
to do like set data. And we can get it spread
out snapshot data. So first let's
save this file and verify whether we
are able to populate the value into its respective
inputField or not. So we have some issue. So it will be id. Let's go to the browser. So now you can see that
we are able to populate the existing value into each
respective input field. So let's do this from scratch. So I'm willing to homepage and I'm just going to reflect
this application first. Let's click on Update. Now, you can see that
we are able to populate this existing value for each
respective input field. Now after that,
what we have to do, so we have to basically
update this data, okay? So a few things
we have to inject before we perform the
update operation. So we have to change this title. This time we add basically
updating the user. Okay? So we can check like if we
have the ID that when the user is updating the
existing user details. So it will be updated user or else it will be the add user. Okay, let's save this one
and let's go to the browser. Now, title is got updated. Here in our handle, somebody that we have
to change the logic. Okay? So now if we don't
have the ID that when you're adding a new user
information in our fighter, in our database. Okay. You can just cut this out and
we can paste it over here. And an else condition. We are going to update
the user information. So here we can use try
catch block in GitHub. So first I'm going to add
try catch block here. And I'm going to put
all this inside trial. And I'm going to define catch. And we can just
do a console log. Okay, Let's farmer
this one and update. I'm just going to copy this one. And here it will be updated. We have to specify
DB collection name. Along with we have to
also pass this time ID. And the rest of the thing
will stay as it is. And after successful submission, we want it to navigate
towards the homepage. So it doesn't matter
whether we are adding new user or updating,
educating users. In both case, we wanted to
navigate towards the homepage. Let's save this file. And let's verify this one
whether it's working or not. So let's refresh this
one here, Johnny Depp. So we are having some invalid
collection of events. Okay? So let's go to this
aggregate user. So here we have tested by
dark, okay, not collection. So that was the issue. So let's save this file. And let's try to update
again this record. Let's give Johnny Depp. Let's click on Submit. Now this time we're successfully able to update the
user information. And we have got
one warning here. So let's fix this one. Let's go to this
home dot js file. And we can do this by key here. Okay. Let's see whether it's
working or not. This one. So that one's gone. So we have completed
two operation till now, adding the new user or updating
the adjective knew that.
12. Working on Modal: So the next thing
we're going to work on this view functionality. So if you click on View, Model will pop up in which
we are going to sell additional information
like name, email information, and contact along with
the image as well. And from modal component, we're also going to perform
the delete operation. So let's work on this
modal component first. So let's go to the VS Code. And here we have
modelled component. So first, let's
send data snippet. In this component,
we have to bring some semantic UI component,
Like button model. Okay? So from Semantic UI react, we need to model
that in each button. And this model component is going to receive
bunch of props. So it's going to receive or
pen set open image, name, info, email on tech, Heidi and handled, delete. Now after that what
we have to do. So we can remove this and div. And in model we can
pass on clothes. So open. We are receiving
this blocks from our home component. On open. We can have the same set opened, but this time it will be true. And we are going to
have one more props. So that will be opened. Inside this model. We are going to have model not having just heading
light user detail. Then we're going to
have model content. I'm going to pass
a prop here image. And here I'm going
to use the cuneate. Size will be medium source. Let's hear the message
that we're receiving from our parent component wrapped. Let's format this one. Now after that, we're going to have model description, okay? Inside, we're going
to have header. We'll have the name, okay. Then we're going to
have other detail in a P tag only, having email. And we're going to
have info and contact. Okay. After that, we're going
to have model action, which contain two button
can fill and delete. So let's copy the button
component from here only. And I'm going to use it here. Okay? So color will be the black
and the Tyvek cancel button. So we can just do
like that for Penn. False. Okay. Now we're going to
have Delete button, so I'm just going to copy
this one, paste it over here. So let's remove all this props. Here we have displaced by
content will be delete. Level producer will
be right on Glick. So we're going to have our handled delete in which
we are going to pass ID. This is delete. We have to specify
it is read, okay? And since we have already
specified the content, we can remove this
one and we can judge market close here, okay? And we can remove
this one as well. Let's format this one. So we're done with
our modal component. Now, we have to use this modal component in
our home dot js file. So once you click on view, so what we have to do. So this is our view. So we're going to
have onClick method. And I'm going to pass here
one method handle model, which yet to define. And inside that, I'm
going to pass the item. This item will be object, which will contain name, email, contact info, and evade those details we're going to display in the model component. So that's why I'm
parsing the item here. So let's define
the handle model. And here we have to
define one instead. So couple of state we
have to define first. The first is we're
going to have open. Then set open. Initially, it will be false. Then we're going to
have YuJa and set. So basically, we are restoring the single user information that we're going to display
in our model component. Now after that,
what we have to do. So this is our handle model. So I'm sad that we
can use set open. And it will become true. And we have to use
like set user. And inside that, we're
going to pass the item that we're receiving
from here, okay? You can see that we
are passing the item. So this is a object which
contained name, e-mail, info, contact and image.
Let's save this one. And we have to use this model. So once the user
click on View button, so we have to open the model. So we can open the
model here only. So below this button, we can check if, if open is true, that means they have
to open a model. So let's bring this
modal component. We get called automatically
import this component for me. And here we have to pass drops. Step open, also be able to pass and handled delete
also we have to pass. Now let's just do a console log. And then we will get header. And we have to pass
the rate of the user. I'm just going to spread out so that it will receive
like in this format. Image name, info,
email contact ideal. So let's save this file. And let's go to the browser
and verified it's one, whether it's working or not. Let's click on View. Now you can see that we have got our modal component with
some additional user detail. Light can fall and contact. So on guard, we are just
swaying only name and email. But our button is not
displaying this Delete button. So let's go to the
moral component. And here we have done
some mistake, I guess. So here we have to
add I can, okay, then only it will display I can, you can give checkmark. Let's save this one
and verified is gone. Now you can see that we
have got our delete button. If you click on cancel, the model, we'll get close. If you click on View,
Model will open.
13. Deleting User Data: So the last functionality
we're going to work on this obligation that
is deleting this user. So let's add one more user. James and James at gmail.com. Let's give some random
information here. So I'm adding some
random information. Let's add some contact. Let's add one image. Let's click on Submit. So we are having some issue. So to address this problem, what we can do, so here, we can use here like
columns three only. Okay? Now let's go to the browser. So now you can see that we
have got this card company. And if you add one more user. So like if you're
adding one user, let's click on Submit. Now you can see that
the width of card is getting dejected after
adding a new user. Now, the next thing we are going to work on the
delete operation. So if the user click on
this View button from here, user can delete this
particular user detail. So let's go to the VS code. So in order to delete, we have to specify
delete function. So let's define this one. And we have to pass the ID. And we're going to
define the handle delete outside the return, delete. And this will be a thing. And initially I wonder too, so window pop-up confirm user. We can give message like Are you sure to delete that user? And if you hear a click, Okay, then we can delete
that particular user. So I'm going to write
logic inside a try catch. So first I wanted
to close model. Then we can await delete dog. So we have bring this
one from five torr. And here we have to provide dog vertically which document
we wanted to delete. We can pass DB collection
name and ID. After that. We have to also delete from
our front-end as well. So we can do like set to
users, users dot filter. And we can just
write simple logic. So if I did not match, then we have to keep all
those user on our homepage. And we have to remove that user that we have
selected for, delete. And you can dye it here. Catch console.log. Okay, now let's perform
the delete operation. So let's go to the browser. And we are not getting ID here. So ID is not defined. So id, we're seeing
yet not defined. So here we can just write
candor, delete this one. Let's click on View. Let's try to delete this one. We've got window pop-up. Confirm that if you click Okay, and it will get deleted. So you can see that from
our front-end got deleted. We can also verify
in our fighter dB. So you can see that here also
we have only two document. The side of card
component is not looking good because this card
component will only, once we add a user. To fix this problem, we can try one more thing. So here we can remove
the card group. Okay? So let us remove this one. Let's save this file, and let's go to the browser. So now you can see that
it's looking good. And let's add one more user. So let's see like check, check. Let's give some
tastier, some contact. Let's add image. Now, this time, we
are able to display the card component with
the equal dimension. So we have avoided the auto adjustment of
our card component. So we affect this issue. Now, let's fix some small issue that we have in this
current obligation. If you click on View, background, become
completely black. So to address this
problem, what we can do, so we can target one class name in our
index dot CSS file. So you can vividly eject a background color by
targeting this class name. Okay? Now, what
if read this one. Now you can see that
we have avoided the complete background black.
14. Adding Spinner: We have defined this
loading a TEDx, but we haven't used this one. So here we have
defined one component. It's been a dot js. We can define our loader. And inside this is painted. I'm going to bring
loader component mode Semantic UI react. And we can use here that went. And we can just add
this loader component. So let's save this file. And let's go to
this home dot js. And below this use effect, we can check if you
have the loading here. Then we can return our spinner. So let's save this file. Let's go to the browser,
refresh this one. So now you can see that
we have got our loader and we have some more
digital in this obligation. So let's open console. If you have any issue or not. Look like we don't
have any issue. So here we have some issue. Let's look like warning only. So we can modify this one. So let's go to this
editor to users.js file. And this will be placeholder. So it will be a small only. When I'm going to
replace everywhere. Let's save this one. Let's go to the browser. Read this. Well, now we don't have
any issue here also, we don't have any issue. That is, we have
successfully able to build this React firefighter
credit application along with the image upload.
15. Wrap Up: If you're watching this video, that means you have
successfully able to compute this birth
in which we have performed all crud
operation along with image upload
using Firebase, Firestore database in
our React application. And I hope you have learned some important concepts
throughout this course. So that's it from my end. And thank you so much guys
for taking up this course.