Welcome to building web apps with the myrn stack. Using MongoDB, Atlas and Google Cloud Platform.
We are going to be learning the myrn stack by creating an exercise tracker app. My name is
Beau Carnes. And I am a teacher and developer with free code camp.org. We will be first starting with
an introduction to the myrn stack, then we'll be going over some database concepts. Then we will
talk about how to get started with MongoDB Atlas, which is the database we'll be using for the our
myrn stack app, then we'll be getting into our code. And I will be actually creating the backend
of the exercise tracker app and showing you how I do it. After that, we will have an introduction
to react, and then start creating the front end of the exercise tracker app with react. And finally,
we'll connect the front end to the back end. So what is the myrn stack? Well,
it consists of the following technologies. We have MongoDB Express react and node j s. That's what
myrn stands for. So node j. s is the JavaScript runtime environment that allows you to exercise
JavaScript code outside of a browser, such as on a server. And Express is a web application framework
for node j s, it allows us to easily create a web server. And then MongoDB is the document
based open source database. So in our app, we'll be storing our data in MongoDB. And then finally,
the front end is react, which is a JavaScript front end library for building user interfaces.
And then finally, at the bottom there, we will be using mongoose, which is a simple schema based
solution to model application data. Basically, it makes it easier to use MongoDB in node j s. So
let's review some database concepts, we're going to just review some terminology. So what a lot
of people are used to our tabular or relational databases. So we think of things like databases,
tables, rows, and stuff like that. So MongoDB has similar concepts that use different terms. So I
just want to kind of make everyone aware of those terms. So instead of table we have collections,
instead of rows, we have documents, we can do join operations with the lookup operator. Instead of
foreign keys, we utilize references. And just as a point of clarification, a lot of people
talk about MongoDB as a non relational database. But really all data is relational. So sometimes,
I use the term tabular to describe the legacy databases that use tables. MongoDB is very well
suited for handling data with a wide variety of relationships. We're not going to cover
all of these concepts in the app today. But I just wanted you to be aware of some of the differences.
So let's look at the document model. This is an example of what a MongoDB document looks
like. It looks a lot like JSON, we can see a variety of relationships and address a title,
and MongoDB stores data on disk in the besian format, which stands for binary JSON. This
provides a wide variety of support for data types, like strings and integers. The document model also
allows for nesting documents inside each other. The sub documents are one of the great things
about the document model. So it allows us to apply the concept of data that's accessed together is
stored together in an application. We also have the ability to store information inside arrays,
which is another powerful feature of the document model. And as I mentioned, these
documents are JSON structured objects, which is how most developers think of things. So a person
is an objects that has various attributes like a job title, address, and stuff like that. So this
allows modern development practices to use the document model in a very intuitive way without
having to break the data apart, to put into tables and normalize things. So we will be using MongoDB
Atlas, which is a really fast and easy way. To get started with MongoDB. So some people
would just run up MongoDB locally on their local computer for testing. But MongoDB Atlas actually
makes things a lot easier, even if you're just doing a local project. So the first step for
getting started with MongoDB Atlas is to sign in. So if you go to a web page, you'll just get this
Getting Started screen. And once you've logged into MongoDB, Atlas, we need to set up a place
to store the data, we need a cluster. So this is the screen that you'll see when you first get
logged in. And to start building the cluster, you're going to click the New Project button,
that's the button right here. And then after you click that, you'll be able to build a cluster,
the big green button in the middle here allows us to create and configure a cluster. So once
you click that, it will bring you to this screen where you can create an A new cluster. So here you
can see that in MongoDB Atlas, there's a bunch of providers, we'll be using Google Cloud Platform.
And then you can choose the region, we're going to be using the free tier today, which is going to be
great for our app. And just when you're getting started and learning how to use things,
I recommend starting with the free tier. And then once you get things going, you can always switch
to another tier later. So you just got to click a region associated with the free tier. And then,
so the free tier is just the mo sandbox, it gives a server side server size of 512 megabytes,
which is typically plenty to get started with. And then one thing to notice is that the bottom
is always going to show you how much things cost. So in this case, it's free, then you can
click Create cluster, and then the provisioning will start. So you can see it says it's going
to take seven to 10 minutes to provision. And it's often quicker than that. But you know,
it's just gonna take some time to set things up. So once it's created, we're ready to get a
couple of security things configured. And finally get a connection string. So once it's configured,
you'll you'll be on this screen where you can set up the security. And just so you know, I'm
doing this all in a slideshow right now. But in a in a little bit, we'll actually be on the actual
website. So you can see where all this is on the actual website. But from a security standpoint,
we need to set up IP whitelist addresses and a database user. So for this project,
since it's just going to be hosted on locally, we can add your current IP address for the whitelist
IP address. And then you can create any username and password for the MongoDB user. So now we can
get our connection information. There are a few different ways that we provide information to
connect to MongoDB Atlas, through the MongoDB shell, which is a command line interface with
the application connection string, which is what we'll be using today. And through MongoDB compass,
which is a GUI tool for interacting with data stored in MongoDB. So then, after you click
the Connect your application, you'll be taken to this screen on the right here. And we're provided
information on getting a connection string, and then some connection examples for different
languages. But we'll just need the connection string. And normally, you would click copy
here. But this is just a slideshow, so I can't do that. But we will be going to this exact screen
and copying the connection string to us in our app. Okay, we're just about to write some code.
But let's just quickly review the collections in our database. Our application is going to contain
exercise exercises and users. And every exercise has one user. Once you see how simple this is,
you'll realize that we could have probably just had one collection. But just for the sake of
example, to see how it would work. We're going to have the exercises and users collection. So now we
really will get into the code. So I have Visual Studio code up here. And the first thing we're
going to do is verify node is installed. So I'll just do node dash V and I do have it installed. If
you Don't, you're gonna have to make sure you install it. But I'll leave that up to you to
figure out how to do that. So next we'll create the initial react project by using create react
app. And if we use the MP x command, then we can run create react app without installing it first.
So other MPs create react app. And then I'm just going to be calling it myrn. Exercise tracker.
And then this is going to create a directory containing the default react project template
with all the dependencies installed. So while this is installing, I'm actually going to go back over
here to just talk a little bit about a MongoDB object IDs. So this object ID is automatically
generated by the MongoDB driver, and is guaranteed to be unique across a collection. So you can see
different parts of the object ID represent different things. And we can define our own
ID if we'd like. But it must be unique for each document in a collection. For this application,
I'm just gonna let MongoDB handle it. So let's go back over to Visual Studio code. And you can
see that our myrn exercise tracker is all set up our react project. So right in the terminal,
let me just make this a little bigger here, right in the terminal, I'm going to do cd mern,
and go on to the directory there. And normally, if I wanted to start a web server, the React web,
the React development server, we I would type in NPM start here. But first, we're going to create
the back end. And then we're going to come back to create the front end. So we'll start by creating
the back end and connecting it to MongoDB, Atlas and Google Cloud. And then we'll come back and
write the React later. So inside this folder, we are going to create a new folder called back end.
So a lot of people would create the back end in a separate folder from our front end folder. But
just to simplify things, since this since this is a simple project, we'll just create the back end
folder right in our in our react front end folder. So let's go into the back end folder. Okay,
now we'll create a package dot JSON file inside the folder by doing NPM and net, and then why
to answer yes to all the questions asks. Okay, now we can install a few dependencies. So NPM,
install Express Corps, mongoose, and dot E and V. Okay, so what are these packages? Well,
we already discussed Express, which is a light and lightweight and fast web framework for Node
JS cores stands for cross origin resource sharing. And this allows Ajax requests to skip the same
origin policy and access resources from remote hosts. The cores package provides an express
middleware that can enable cores with different options, which is this is going to make it so
we can easily access some something outside of our server from our server. So also, we already
discussed mongoose, which makes interacting with MongoDB through Node JS simpler. And the
last one is known as.mv, which loads, it loads environment variables from a dot EMB file into
process dot EMB. This makes development simpler. So instead of setting environment variables on
our development machine, they can be stored in a file, we'll create a dot EMB file later. So
we'll install one final package globally. So I'll do npm install g for globally and node
mon. So node mon makes development easier. It's a tool that helps develop Node JS based
applications by automatically restarting the node application when files when file changes in the
directory or detective. So let's see looks like we have some sort of error. I wonder what I Oh,
I should do a sudo. Whenever you're going to install something globally, we'll do sudo install
g node mom. So whenever we update our server file, it will automatically restart the server So that's
what node mountain mon does. So now it's time to create our server. So inside the back end folder,
I'm going to create a new file called server dot j s. So I'm going to start, I'm actually
just going to paste in some code here. And then I'll I'll talk about what the code is. So first,
we're going to require all the things we're going to need, actually, we're not going to need body
parser, I originally thought we're gonna need body parser. But it's actually it's not needed in the
new version of Express. And this since we're, it's included an Express, so I can actually change that
to express there. So we're gonna, we're just gonna need Express and cores, and then this configures.
So we can have our environment variables in the dot EMB file. This is how we're going to create
our Express server. And then you can see the port that the server will be on, then we have our
middleware. So this is the cores middleware. And this is going to allow us to parse JSON, because
our server is going to be a sending and receiving JSON. And then you can see this line here is what
starts the server, it starts listening on a certain port. So once we have that, I can
save this, and I can start the server. So node mon server right in the terminal here. So now we have
the server running, you can see it's a server is running on port 5000. So now we've gotten to the
point where we can connect our database, we can connect to our database on MongoDB Atlas. So at
the top of this server file, after this require cores line, I'm going to add the following line
const. mongoose, equals require mongoose. So mongoose is what's going to help us to connect
to our MongoDB database. So now, the next section, I'm actually just going to paste in here. So after
we set up our middleware, we're going to do this. So we have our UI, which is our our database UI.
This is something we have to get from the MongoDB Atlas dashboard, which we'll do in a minute here.
So here, mongoose dot Connect, and we pass in the URL, that's where our database is stored. And
that's how we start our connection. So you can see we have some flags here. The first one is added
this new use new user parser. True, that's added because Mongo, the MongoDB Node JS driver rewrote
the tool it uses to parse MongoDB connection strings. And because this is such a big change,
they put the new connection string parser behind a flag. And it's cached similar for this use create
index true, it's to deal with a Mongo D with MongoDB, deprecating the ensure index function,
you don't really have to remember all that just put these things in every time to deal with some
of the updates to MongoDB. So for the connection string to work, we are going to have to set this
environment variable. So in the server folder, first of all, I will save this, and then we're
going to see an error down here, because we don't have this environmental variable yet. So I'm going
to go into my back end folder. And I'm going to create a new file called dot e Nv. So now we
need to get the URL or the connection string from MongoDB Atlas. So let me go over to that. Here's
MongoDB Atlas. And I already have the the cluster have created. So if I create, click Connect here,
connect your app to your application. And I'm going to copy the connection string. So now I
can go back over to my file here. And we just have to create the environmental variable. So remember,
it's called Atlas underscore u r i, and then I'm gonna set what is equal to and now I'm
just going to paste in the URL connection here. And one thing I have to do at the beginning,
you'll see that there's this password here. So he I just have to have to type in my password. So
don't tell anybody what my password is. But it's mean 123. For extra security, I always have the
exact same password as my username. No, that's not true, you should never do that. But in this case,
that's what I'm doing here. So now we should if I save this, and then if I restart my server,
we should see MongoDB right in the console terminal MongoDB database connection established
successfully. So we get that right here. So connection dot once. So once the connection
is open, it's going to log that that MongoDB database connection established successfully.
So we're now connected to the database. But now we have to start being able to put things into
the database and read things from the database. So we'll create our database schema, using mongoose
will have two entities, well exercises and users. So inside the back end folder, I'm going to create
a new directory called let's see what I do wrong their new folder called models. And inside models,
I'm going to create two new files. So exercise dot model dot j s. And then I'm going to create
another file called user dot model dot j s. Okay, so for the user model, I'm just going to print
some code, and then I'll explain what it is here. So this user schema, you can see that first we
require mongoose, then we get a new mongoose dot schema. And so all mongoose schema start basically
the same. And we have our user schema, that's the the name. And this only has a single field, which
is username, then we have some validations to the username, we know it's gonna be type string,
it's required, we know it has to be unique. Trim means it'll trim whitespace off the end,
if someone types in some spaces, it will be trimmed off, and then max length,
or min length of three. So it has to be at least three characters long. So then we're going to also
include timestamps, which will automatically create fields for when it was created,
and when it was modified. And then we just have mongoose dot model user that can be anything,
that's just the name that we're going to use, then user schema. And then what's going to,
we're going to export here, so a lot of this is going to look the same for any mongoose schema.
So I'm going to save that. And then we're going to do the exercise model. So you'll see the exercise
model is going to look almost exactly the same. With just a few changes, zoom out just a little
bit. So everything's the same except this time, instead of one field, we have four fields. Now
it takes up less space. Because the validations are all on the same line is the field. And we
don't have as many validations. So you can see we have username, description, duration, and date. So
this is all the information we're going to store about the exercises. And you can see they're all
required, but we have some different data types. We have strings, we have a number and then the
date datatype. So now we have got, we've got those created. And now we need to add the API endpoint
routes. So the server can be used to perform the crud application, the CRUD operations,
which is create, read, update and delete. So inside this back end folder, I'm going to
create another folder named routes. And inside that folder, I'm going to create a file called
exercises dot j s and a file called users. That j s. So we'll come back to those files. First,
we'll tell the server to use the files we just created. So toward the end of this file,
right before this app dot listen. We're going to add some lines here. So we have to require
the file And then use the files. So here we're requiring the files. And then basically, we're
just importing them into here. And then we're doing app dot use to use these files. So now,
whenever someone goes to our root URL, and they put slash exercises at the end, is going to load
everything in the exercises router. And if someone goes to slash users, it will load everything in
the users router. Now, once I show you this on the browser, it will probably make more sense. So but
so you'll be seeing that soon. So let's build out the router files. I'll save that. And then
there's gonna be an error here. Because we haven't actually built out these router files yet. Let me
go to exercises that j s. Actually, we'll start with the users that js. Okay, I'll paste in some
code, and then I'll explain it here. So we need the Express router. Because this is a route that
we're creating. And here, we are going to require the model. So this is the mongoose model that we
created that we just recently created. And here is our first route. So this is the first endpoint
that handles incoming HTTP GET requests on the slash users URL path. So we have our root URL,
which is localhost. I think localhost 5000. So we have localhost 5000. And then it's slash
users. And then if it's just a slash at the end, slash users slash, then if it's a get request,
then this is going to happen. So it says users dot find. This is a mongoose method,
that it's going to get a list of all the users from the MongoDB Atlas database, the find method
returns a promise. So the results are returned in JSON format. And you can see right here,
so after it finds, then we're going to get all the users and then rest that JSON means we're going
to return something in JSON format. And what we're going to return are the users that we got from the
database. And then if there's an air dot catch, we're going to return a status 400 with an air
with just the error message here. So the second, and the second endpoint handles incoming HTTP POST
requests, you can see it has slash add on the end. And it's a POST request, then we'll handle those,
the new username as part of the request body. So req dot body dot username is going to be it is
going to be assigned to this username variable. And then we're going to create a new instance
of a user using the username. And finally, the new user is saved to the database with the Save
method right here. And we return So then after the user is saved to the database, the MongoDB Alice
database, then we'll return user added in JSON, or else we'll return the error message. So finally,
and this is what you have to do for all just the standard thing for these router files,
manage module that exports equals router. So we're just exporting the router. So let me save that.
And I'll go into the exercises file, and I'm going to paste some code in here. And these are the same
two endpoints. So it's going to be basically the same. We're requiring router, we're requiring our
model that we created. So if it's now it's if it's the root URL, slash exercises, slash at the end to
the get request, then we're going to run this mongoose command, exercise that find then after
we find all the exercises from the database, we'll take those exercises and then return them as JSON,
or else there's an error. So this part is a little different, but it's it's basically the
same as before. If we have exercises slash add, and it's a POST request, then instead of just
having a username in the body, we're going to have the username we'll have description,
the duration and the date. little sign up to these variables. And you can see that we're converting
the duration to a number. And we're converting the date to a date data type. And then we just create
a new exercise using all of these variables that we got up here. And then we save the exercise. And
after it's saved that then it's a promise, we're going to return the JSON exercise added. We'll
add some more API endpoints soon. But first, let's test the server API, we'll be using a tool called
insomnia to test the API. Another popular tool for this purpose is postman, they both do pretty much
the same thing. So once you get into insomnia, or you could use postman will create a new post
request using JSON. So I'll do a POST request. And all this stuff can be changed on the next screen
here. So we have this post request. And we'll go to the URL http colon slash slash local host. 5000
slash users slash add. Now, we should still have our server running. So in the body, I will select
JSON. And we are going to send a username, we're going to add a username. So I'm going to create
this JSON object here, username, boat. And if I click post here, oh, I mean, I'm gonna click Send,
and it says user added. So now we can send a get request to get a list of the users back. So first,
let me just add another user. So I'll just do Quincy here and send that and user added. So
now we can do a get request to get the list of users back. So instead of users slash ad,
it will just be user slash without the ad at the end, I'll change this post to get and we don't
need this here. And I'll just click Send. And you can see our users here with some additional
information here. So you can see MongoDB automatically created this object ID. And then we
also had the created at and updated at date here. So we have the username Bo, and the user username,
Quincy. So we can also see the users we just added on the MongoDB Atlas dashboard. So let
me go over to that. So here is the MongoDB Atlas dashboard, cloud that MongoDB comm so if I click
Refresh here, we should see, yep, we see our users here. So if you were back on this screen,
you would have to click collections. And then it's going to load our users here. And then if you see
in this documents, we have Bo, and Quincy. So these are the exact users that we added. So
we've successfully created our back end that can put items into our MongoDB Atlas database. Okay,
let's add a few exercises. So let me go back over here. So instead of slash users, it's going to
be slash exercises. And then it's gonna be slash add. So just so you see how this is all working,
I'll go back over to our code editor. And when you go to slash add your exercises slash add and
do a POST request, it's going to be expecting a username, a description, a duration, and the date,
it's going to be expecting variables in our JSON object that have all of those keys or all those
names. And that's going to take all those things, and it's going to save an exercise. So let's go
back over to insomnia. And in JSON. We need a username and set that to bow. And then we
need a description. And we'll set that to run. And then for duration. And the duration is in minutes,
which you'll see once we create our our front end. We'll do nine minutes. And for date. I'm actually
just going to copy this date from over here. Once we create our front end, you'll never have
to actually enter a date because you'll be just selecting a date from a drop down menu. But it
says for entering it directly into the database, we'll just copy and paste. So if I click Send,
we should see Oh, can I get because I forgot to change this to a post request. Our server did not
have anything for a get request to that URL. But let's try a POST request. Okay, exercise added,
well, let's add one more exercise, which is going to be a bike ride, same username, and
this time it was for 30 minutes. And I will change this to, let's see 27. And if I just send that,
we just added another exercise. So we can do a get request. If I just delete slash and change this to
dot get, and then click Send. Now we did, we sent this JSON, but it just didn't do anything with it.
It's okay to send it, it's just extra, didn't do anything with it. But you can see over here, we
have our two exercises we added. So username, Bo description, run duration, nine, we have the date.
Same down here we have a bike ride. And if we go over to MongoDB, Atlas, and then I'm just going to
click Refresh. Going through the exercises. And you can see, here's the two exercises we added.
So again, right from here, you can actually do some editing, like if I want to say, actually,
this was 60 minutes that I can update. And so we were able to easily update, we can delete things,
you can do all sorts of changes right from this dashboard here. So that makes things that's nice,
it kind of makes things simpler. So now that we've tested everything, we'll finish up the
exercise routes. So let me go back into the code editor, we're actually done with the users routes,
all we're going to have is the get an ad. Now in like a real production app you'd have up you'd
have an update and a delete. For now we'll just do that from the MongoDB Atlas dashboard. But
for the exercises, we will have everything, well, we're going to have all the coal crud,
we'll have delete, update. And that's what we're going to add. Now. I'm going to right here. I'm
going to paste them the other route. And then I'll talk about him here. So we just add this route, we
have a slash colon ID. So this colon ID is like a variable. So this is a mango. This is an object ID
that's created automatically by MongoDB. So if you go to exercise a slash, and then put the object ID
from the database, and then you do a get request. Well, we're going to return just the information
about that exercise. So we have exercise that find by ID, and then the request that params the ID. So
this is getting the ID directly from the URL here. And we're finding by that ID. And then once we get
the exercise, we're going to return it as JSON, or else we are going to just return an error.
So then the next thing is going to starts off the same. So this was the get request. And this
looks exactly the same. But instead of get it's the leet. So if you pass in the object ID, but
it's a delete request, instead of a get request, it's going to do find by ID and delete. Again,
it's going to get it right from the URL here. And it will delete it from the database. So it
says that then after it's deleted, it's going to return exercise deleted. So the next one is the
update. So if the route is exercises slash update slash ID, so the object ID, and it's that post,
then we're going to update it. So first, we have to find the current exercise, and then we update
it. So exercise that find by ID, and we pass in the parameter right from the URL here. So after we
get the exercises that then and then we what we're gonna do with the exercise is, well, we're going
to take the exercise that username, so this is the exercise we just got from the database. But we're
going to set the username to equal rec, that body that username, because it's going to have this
route needs to receive a, a JSON object that's going to create it's going to contain a username,
a description, a duration and a date. Just like when you're adding a new a new exercise,
but this time, we're taking all the information And assigning it to the fields of the exercise
that already exists. And then we're going to save the exercise with the new information. And then
we're going to return exercise, updated. So now that we've seen all these in points, let's go and
test these other ones. So I'll go right back over here. And let's test the first endpoint we added.
So first, we need to get an ID, I'm just going to copy this ID right from here. And then we'll have
slash exercises slash ID. And this is going to be a get request. If I send this, it will just return
a single exercise. So before it returned, all the exercises. But now that we have this new route,
where it's localhost 5000, slash exercises, slash the ID is going to return just the first exercise
that corresponds to that ID. The next thing we're going to try out is the we're going to try editing
it. So slash exercises slash update. And then we have slash exercises slash update. And then we
have the ID here. I wonder if I can hear now we'll be let's see more of exercises slash update slash
ID. And this is going to be a post. This is the one where the description is run from before, it
has to receive a username, description, duration and date. So that new description, instead of
run from what it was before, it's going to be walk and duration is now going to be how about 120. And
then we'll keep the date the same. So I'm going to copy this date and paste it in here. So right now,
the way the program works is that you always have to send it the user name, description, duration
date, you cannot just send the field that you want to update, you always have to send all the fields
or there'll be an error. Now that's some something that you can refactor later is make it so you can
just receive one of the items instead of all of them. But for now, we have it set up for you,
it has to accept every single field. So if I post this, and then I'm going to change this
into a get request and take out the update. You can see that the same ID now has a description of
walk in a duration of 120. But actually, we don't even want that anymore. So we're going to delete
it. Instead of sending it to get request, I will send a delete. And then if I send that exercise
deleted. So now I'm just going to go to the URL, the route that returned all of the exercises. So
just slash exercises slash and then a get request. And you'll see that now we just have one exercise,
whereas before we had two, one of them's been deleted, so we just have the one. Okay,
now that we've tested this, we're actually done with the back end, we just had a simple back end
with some crud routes. So now it's time to start the front end. Before we get into our front end
code. Let's talk a little bit about react. Now, I'm just going to give a brief overview of react.
If you want a full in depth tutorial, you can check out the React tutorial on the Free Code
Camp YouTube channel. React is a declarative, efficient and flexible JavaScript library for
building user interfaces. It lets you compose complex user interfaces from small and isolated
pieces of code called components. Now, our project isn't too complex, but it's still gonna give you a
good introduction to react. We use components to tell react what we want to see on the screen. So
this is an example of a type of react component right here. And when our data changes, React will
efficiently update and rerender our components. So this is a react component class, you can see
it says react component. That's what this extends here. And a component takes in parameters called
props, short for properties, and it returns a hierarchy of views to display through the render
method. So you can see we have a render method here, and then it's returning something here. The
render method returns a description of what you want to see on the screen. It takes a description
and displays the result, it returns a react element, which is a lightweight description of
what to render this syntax here, it kind of looks like HTML. But it's actually a special syntax
called JSX, which makes the structures easier to write. So this is actually converted into
HTML when it goes through pre processing. And j access x comes with the full power of JavaScript,
you can put any JavaScript expressions within braces. So you can see this brace these braces
where it says this dot props that name, this is getting the is the props are kind of like a
variable. And you can see the example usage. So to call this react component or to place on the page,
you'll use something like we have at the bottom. So we have the name of the React component,
and then we pass in the props name equals bow. So right in what we're returning, when it says this,
that props that name, it's going to put bow, so on the page, it will return shopping list for bow. So
another common difference between JSX and HTML is instead of class we have class name. But for the
most part, you can write JSX, just like you would write HTML. So let's go to the code. So remember,
earlier, we did create react app that created our whole react project, I'm going to close some
of this back end code, because we're not going to use that right now, because we're working on
the front end. So right now, I'm going to go over some of what the front end code. So if I go to the
source directory, and then we're going to go into, actually, let's start in public, and we'll go into
the index dot HTML. So this is the HTML page that loads when you go to our website. So let me kind
of explain this, you can see how react works with it. So for one, we don't need any of this, these
comments. So delete that. So it's easier to see what's going on here. And you can see this line
right here is where our react is going. Our react app is going to load says div id equals root. And
you'll see in our JavaScript, we are going to load our react app right into that div, the only thing
we really need to change here is the title. So instead of react app, I will call this exercise
tracker and save that. And then if we go into our JavaScript that loads with our HTML, it's right
here. So this is our basic JavaScript file that loads and you can see it's going to load react,
React DOM, the index that CSS, we are not writing any custom CSS so we can get rid of that importing
app. This is where we're actually going to create our file. Our This is basically the the starting
point where we're going to within the app dot j s, we import it here. And that's where we're going
to create our front end react app. And you can see down here, this is the main thing that renders our
app, React Dom dot render, it's going to render our app, which is what we're going to be working
on next. And it's going to put it here, document that get element by ID route. That's what we
were just looking at in the HTML file, the route here. So we're loading our app into that element.
So we're not going to use service workers. So we can delete some of this stuff. When you can delete
that, when you use create react app, it sometimes gives you some extra things that you don't need.
So let's go into the app dot j s. That's this file here. So this is our main app, our main component
or main react app that we're gonna put all of our code that will display on the page. And actually,
let's get this started so we can see what this looks like right now. I'm going to open up a new
terminal window window. So in this new terminal window, I'm just going to switch into the our
directory, the x XOR, size tracker directory, and mern exercise tracker, and then I'm just
going to do NPM start. Okay, so this is going to start our app, and it will load right here,
right on localhost 3000. And here is our react app. You can see it says Edit source slash app
to save and save to reload. So It's going to hot reload or automatically reload this page, anytime
we make some changes. So what I'm going to do here is just do some basic changes here. So let's see
what we're going to do, we we're not going to use this logo, we're not going to use this CSS here.
And let's just return something basic. Instead of what we have here, I'm going to delete all this.
And we're just going to return it just want to say hello world. And for the class name app, I'll just
call it container. So if I save this, and I go back over to my browser, it says, Hello world. And
so anything that we change here and update here, you will see I'm actually on the page. So you can
see this is being returned this JSX, which gets loaded into our HTML with this JavaScript file,
and appears on our page. So now let's add the bootstrap CSS framework to our project to make
styling easier. So I'm going to open up a new terminal tab. And I will do MPM install bootstrap.
Okay, well, that's installing. I will go up here. And I am going to import bootstrap. So import,
bootstrap, slash dist, slash CSS slash bootstrap dot min dot CSS. So we have bootstrapped,
imported now. And now let's set up react router, the React router. So I'll do MPM install react,
router DOM. Okay, React router is going to make it easier to route different URLs to different react
components. You'll see how it works as we go along here. So I'm going to have to import it. So right
at the top right after we import react, this time, I'm just going to paste in a line here, import
we're importing browser router as router and route from react router DOM. Okay, now we can create a
router element. So now that we're importing this router from router, React router DOM,
we have to put everything that we want to be used with the router inside a router element. So what
I'm going to do here is to router and then at the end, we will put the closing router tag. And then
now instead of our hello world, we're going to update it to the clock to start actually
building the actual app here. So I'm just going to paste in some information here. And you'll
see that we have a router element for each route of the application. So we have a few components.
These are all components that we're still going to create, we have the navbar component, exercise,
list, component, exercise, create exercise, and create user component. So these components,
we still have to create here. And you'll see that there's a route element for each route in the
application. The path attribute is set to the URL path. So if you go to our route URL with a slash,
at the end, it will load this component. If you go to the route URL slash edit, and then we have
an ID, this is the Mongo DB object ID over the exercise component, or the Create component or
the user, the create user component, depending on which path. So that's what react router does is
it helps us map specific URL paths to different components that will load on the page. So we're
going to have to create those five components. And we'll create them in separate files. But first,
let's import the files we're just about to create into app dot j s, right after the import for
bootstrap. So right after this, I will import all these. Let's add some semi colons. And so you see
that we're importing these are the names of the different components. And these are just where
they're located components up navbar component, component slash exercise list that component with
these files we're just about to create. You can see they're all in the components directory. So
that's what we'll create now. So inside the same directory as app dot j, s. Inside the source
directory, I'm going to create a new folder. And it's going to be called components. So inside
this components folder, I'm going to create a new file called navbar dot component, dot j s, yes,
I'm just going to paste in this code here. And then I will go over a little bit. So most react
components are going to start with the start the same, you're always going to import react and
component from react. And then, since we're using react router, I'm going to import link that's
going to allow us to link to different routes. And then all components start like this. Export
default class navbar, that's the name of the component extends component. And all components
have to render something. So we're going to return render this return statement. And this
code right here is basically just the navbar from the bootstrap documentation converted to work for
our purposes, you'll see that instead of class, we have class name. As the links instead of an anchor
tag, we use this link from react router. But it's going to show up the same way as as just a link on
there. And we show which we're going to link to here and the different URLs you're going to link
to. And then we have special classes, just the style using bootstrap styles. So you can always
just check out the bootstrap documentation if you want to learn more about the styles you can
do with that. So at this point, we're going to create our other component files. So I'm going
to create exercises list dot component, dot j, s, I'm going to create, edit, exercises,
that component dot j s, then we'll have create exercise that come ponent that js, then create
user dot component, dot j, s. And those are all of our component files. Right now we're just going to
create stubs for these components, just so we can see if everything works so far. So in the
exercises list component, just put in this, this is just some basic, just the most basic component,
you can have importing react and component, export default class, exercise list component
extends component. And then we're just going to render, you are on the exercise list component. So
I'm just going to copy this code and go into the exercise component. I'll paste that in. And so the
exercises list, we're going to do edit exercises. And again, instead of you were on exercises list
component, or just you, you are on the Edit exercises component. And I'll copy that again,
let me make sure this is saved. And here, instead of exercises lift weight, I meant to copy Yeah,
copy this, it'll be easier to start with this one, instead of exercise is going to create,
I'm just gonna select Edit and do Command D to select two places at once. And then I can
just type in two places at once. And I'll put the word create in both spots. So I'll
save that. And then our create user component. So good. I'm actually going to copy this code,
paste that in here. Instead of create exercises, Command D, I'm going to do create users. So you
want to create users component. The last thing I need to do is save app that j s. And now we should
be able to test this out. So let me go over to the browser. Ooh, failing to pile I see what
happened. This is the wrong type of quotation mark. So there we go. And let me go back over
there. cannot resolve create user component. Here is where I may have just spelled something wrong.
Let's see come ponen Oh, yeah, I just spelled this wrong wrong. So let me rename. That's why it's
good to test every once in a while while you're building things just to make sure everything's
working. Let's see. It's looking for an exercise. And I just put an S at the end of this. So let's
take that off. And now we're going to work and it's working. So it says you are on the exercise
list component. When we click the different things exercise, you are on the exercise list component,
click here you are on the Create exercise component, and then click here you are on
the create user component. And now I'm back on App dot j s. And there was one thing I want to improve
just to use the styling better from bootstrap inside this router, are going to have a div. And
we'll set the class name to equal container. And then we just need a closing div here at the end.
And then I'll just indent this a little bit. So let's see what that looks like now. Okay,
I think that looks a little better. So we have some space on the sides, and everything's just a
little more centered. Okay, let's start creating our first component. So we already created the
stubs of the components. And now we're going to create the Create exercise component. So here's
create exercise that component. So this will allow us to add exercises into the database, we're going
to add first add a constructor. So right here, I'm going to add the constructor here. And what
you got to do constructor props. And in Java, and JavaScript classes, you need to always call super,
when defining the constructor of a subclass. So we're gonna do that all react component classes
that have a constructor should start with a super props call, will set the initial state
of the component by assigning an object to this that state. So do this that state equals and we
need a property, we are going to create properties of the state that will correspond to the fields
of the MongoDB document. So we'll have username equals empty string description. Oh, that's not
supposed to an equal sign. That's supposed to be a colon there, let me fix that. And then we'll have
duration, we'll start this as zero because it's a number. And then the final thing is the date,
which is going to be a new date. And then these are all the parts of the database fee. But we're
also going to have something right just for this component called users. And you'll see how we're
going to use that in a minute here. So state is are basically how you create variables and react,
you're never going to do something like let name, equal bow or something like that. So in react,
you're always going to create everything in state. So whenever you update, the state
will automatically update your page with the new values. So users, the reason why we have the users
array here is because on our page, there's gonna be a drop down menu, where you can select all the
users that are already in the database, you can select a user to associate with your exercise. So
now we need to add methods, which can be used to update the state properties. So at the end of our
constructor, I'm going to add a method here and change user name. I think my pass and he, I'll
explain that he just in a moment here, but when the username is being changed, we're going to set
the state. So to set if we want to set the here's something you will never do, you're not going to
this dot State DOT username, equals and then put in what the new username is, you always want to
use the set state property or the step set state map method here in react. And inside here, we
can set just the item we're going to change user name, is going to equal e dot target dot value. So
this is going to be called in we're gonna have a webform where there's going to be a text box where
someone enters the username. So whenever someone enters a username, it's going call this function,
and it's going to set this date EDA target dot value. Well, the target is the textbox. And this
is the value of the textbox. So it's going to set the value of username to whatever the value
was in that text box. Now, if we just set we're just setting username, it doesn't necessarily,
it's not going to put all the rest of our state to nothing, it doesn't replace state, with just this,
it just updates this element within the state, it's just going to update the username element
within the state. So we do the same thing for all of our other ones. So let's just paste in here,
I'm gonna change things. So on change username, it's gonna be on change description. And then
this can be description. On change, this is going to be duration, and it's going to be duration. And
then we have date. And then we have date here. Now this one's going to be a little different,
we're going to use a library to make a calendar that appears, and you can click the date on the
calendar. So we're going to pass in the date here. And we're just going to set it with the date that
passed then, after those methods, we will add one to handle the Submit event on the form. So we're,
you'll see the form at the end of all this, I'm just creating these methods to handle the form
first. So on submit, when someone clicks the submit button, this is what we're going to do
first want to eat up prevent default. So this will prevent the default HTML form submit behavior
from taking place. So instead of doing what it normally would have done, it's going to do what
we're about to define here. So I have a const of an exercise. And remember, I said you'll never
just create a variables normally, in react well, that's inside a single method, you can create
variables if they're only going to be used within that method. So const exercise equals, and then
we're just going to set everything so the username is going to be this dot State DOT username,
and description is going to be this dot State DOT description. And then we have duration is going to
be this dot State DOT duration. And then date is going to be this that state that date. So for now,
all we're going to do with this exercise is do a console dot log console dot log exercise. Now,
eventually, this is going to be the part where we submit the exercise to the database. But
we're just going to finish up a little bit of our front end first. And then we're going to connect
our front end to the back end. So after this, the user the exercise has been submitted, well, let's
do window dot location equals slash. So we're just going to take the person back to our homepage,
which is going to be the list of exercises. So once you submit an exercise, it will go back to
the list of exercises. So now we just have to make sure that this the word This works properly in our
methods. So if we see the word where it says this dot set state, this dot set state, if we were to
do a console dot log this within this method, we would see that this is undefined. So we need to
make sure that when it says this inside a method, it this, we know what this is referring to. And
we want this to refer to the class this whole class. So what we have to do is up here, I'm
going to paste in some code here. And it says this the on change username equals this the on change
username that bind that this. So we're binding this to each of these methods. So the word this
will be referring to the right thing. We're just about to add the form that people that will allow
people to enter exercises. But first, we must add one final method, people filling out the form like
I was mentioning earlier, they're going to select the user associated with the exercise from a drop
down list. Eventually, the user list will come directly from the MongoDB database. For now,
though, we'll hard code a single user. So let's add a method here. This is going to be
coming component did mount. Now this is a react lifecycle method. So there's a few lifecycle
methods in react, that react will automatically call at different points. So component did mount
will automatically be called right before anything displays on the page. So when this create exercise
component is about to load to the page, right before anything loads, it's going to run this
code. So what we're going to do here is do this dot set state. And we're going to set the state
of our users array. So users is going to equal now here, we're just doing a test user. Eventually,
we will load this directly from the database. But we're doing one step at a time here. And we
also want to set the username to test user, the drop down menu will automatically have the first
user in the drop down selected. So we want the username to be set to that user, right at the very
beginning. The final thing we need to do not, the final thing we need to do is to add the form code.
So I'm just about to paste the form code in here, right at the bottom, and then I'll kind of just go
over it here. I'm going to paste that in. And so this is just a pretty standard HTML form, we have
our heading create new exercise log on submit, when you submit, it's going to call this the on
Submit. So you can see we have these curly braces, and we can put in JavaScript or different methods.
And so we can say that we're gonna call this.on submit, when someone clicks that button. So we
have our username, which is just this is a drop down menu. So in this drop down menu, we set
the value to this that state that username, and then on change wherever you change the selection,
this that on change username. Now this is where we do something a little fancy. So inside a select
box, we have different options. And we're getting the options, right from our users array. So you
can see we have the curly braces, which means we can put some JavaScript in here. And it says this
that State DOT users, which is an array of all the users which will come from our MongoDB Atlas
database, that map, that map allows us to return something for each element in an array. So we have
this function. Now, this could also be an arrow function, if we were going to refactor. But for
now, it's just a regular function. So it's going to take a user. So for each user in the array,
it's going to return this is going to return an option, which is an option of the select box.
And in this option, we have a key, which is the user value, which is the user and then the actual
text that will appear, which is also the user. And then we have the description, which is just
a standard input box. But we set the value. And we set the on change method to be called anytime
This is changed. We have duration, which is in minutes, like I mentioned before, so we have the
value the on change method. Now the day is going to be a little different. We have a date method,
a date picker component, which we still have to add. So this date picker component is going to
pop up a calendar where you can select an actual date. So we put what the initial selection is,
and what happens when you change that selection. So this is going this date picker component,
we are actually going to install a package with NPM. So we don't have to create ourselves. This
is already a package that exists. So down in the terminal, we'll do npm install react date picker.
And while that's installing, we are going to have to put in a line to import it at the top. So
right at the top, I'm going to put in two lines. After we import react, we're going to import date
picker from react date picker, and then aligned to import the styling for that date picker. So
at this point, we can actually test this. So I'm going to save this and we'll go back over to our
browser. And I'm going to create click Create exercise log. So it says Create new exercise
log. I'm going to open up my browser for on a Mac is Command Option j if you're on Chrome,
but it may be something different. And by I said I think I said open my browser. I meant open my
console. So I'm gonna open my JavaScript console. Whoops did not need to click that, Okay, I'm gonna
open up my JavaScript console. And you'll see when I click when I create something, so I'll
select test user, I'll put run, I'll put 10, for 10 minutes. And then we'll just, here's the date
picker I was talking about. So we can select a date here. And if I click Create exercise log,
you'll see two things happened. First, it, logged it to the console here, gets the assess test user
description, run duration, 10. And then we have the date that we put in here. And then right after
it logged it, we got taken back to our exercise list component. So you can see with bootstrap,
it makes it responsive to different sizes here. So the exercise list component, we still have to
create, but eventually it will show all the exercises that are in the database. Okay,
now that we've created that component, and we've tested it out, we are going to create the create
user component. So let me go over to the create user component. And we are going to have a another
constructor. So actually, this constructor is going to be kind of similar, I'm going to start
by just copying this constructor from the Create exercise component. And I'm putting
it in the create user component. But this time, we're only going to have an on change username,
and then add an on Submit button, our state is only going to have a username like that.
And then just like our other thing, we're going to have a on change username method. And we will
have an on submit method, which is gonna be pretty similar. So I'm just going to copy and paste just
like before. So again, it's just going to be a simple web form with just a user name field. And
then once this is submitted, we're instead of exercise, we're going to call it user. And then
we're just going to have the username. And I'm going to console dot log the user. And this time,
instead of not changing the location back to the homepage, we will do, we'll just keep the user on
this page. So they can enter multiple users at a time. So to do that, we have to do this that set
state and we have to set the username to blank, because after someone's already entered the user,
we should have we should set back the blank so they can enter another username. Now,
just like I said before, we are eventually going to make this connect to the database. But for now,
we're just going to set the state just like that. So let's see if I see this is grayed out here. I
don't know exactly what's wrong. types, this set state. You know, I don't think anything's wrong.
So I don't know why it's giving us this error, let's just test it out and see what happens. But
first, we're going to have to add our code for our form. So whoops, I'm going to go to the render. So
what we're going to render here is just a very simple web form that has one field. So it says
Create new user, there's a submit button. And then we just have one input box with a value
of username and on change is on change username. So if I save this, we can go back over into our
browser. And oh, I see what I did wrong there. So I just put this in the wrong order. So that should
be parentheses and then brackets. And then I can just take this up to here and get that. Okay,
so now we should be able to save it. Okay, so we already tested create username, let me clear
the console here. Now we're going to test create user. So if I type in Bo, and click create user,
it will show up in the console. And then this is blank so we can enter another user. So that
works. So now we can submit users and it shows up in the console. Or now we're going to work
on connecting the front end to the back end. So far, the front end and the back end of our app
are separate. So we're going to be connecting the two together by causing our front end to send HTTP
requests to the server endpoints on the back end. We'll use the axios library to send the API GTP
request to our back end. So in our terminal, we'll install that npm install axios. And now
we'll complete the implementation of the create user component, and send data to the back end.
So at the very top of the create user component, I'm going to import axios. From axios. And then we
just have to go down to the submit button. So in the submit button, right after console, that log
will still log the user. But now we are going to send the user data to our back end. So I'll
do axios dot post. And then we'll we have to put in the the URL. So it's HTTP. colon slash slash,
localhost 5000, slash users slash ad. And then I just do a comma, user. So after we post that,
we'll do a dot then. So this is going to be a promise. So after it's posted, then we're going to
do something. And what we're going to do is take the result. And we're going to do console dot log,
rest dot data. So you can see this actual step POST method, that's going to send an HTTP POST
request to this back end endpoint. And it's going to the endpoint is expecting a JSON object in the
request body. And that's what we do here, we send that as as a second argument. So let me
just go into our back end. So you can actually see what that looks like in the back end, I think I'm
going to have to open that file again. The server dot j s, or actually, it's the in the routes that
users that j s. So this is the route we're doing. So we're sending a get request or a POST request
to user slash add. And it's going to expect in the body request body that username, the username,
and then we create a new user, and then we save the user. So now that we have this done, we can
just save it, and we can test things out, I will create a new user, Mary, in the new create user,
user added. And right now if I add a user that's already in the database, like Bo will see an error
right in the log. Now something to do to refactor later would be to handle this error differently.
But right now, we're not going to do anything about that, we're just going to have the air in
the log, because it won't accept any duplicate username. So if we go into MongoDB, Atlas,
the dashboard, and I click refresh, we should see the mirror username. So now we see username, Mary,
and it's been added to our database. So we got that working. Let's go back over to the code.
And let's start completing the implementation of the Create exercise component. So go over to
the Create exercise component at the very top, just like before, we are going to import axios
from axios. And then we are going to do an axios dot post, right and on Submit. So it's actually
going to look very similar to the create user one. So if I just copy this, and bring it over here,
right after we log the exercise, we will post it. But instead of slash users, it's going to
be slash exercise. Instead of user, it's going to be exercise. And then we'll just log the result to
the console, which would be exercise added. So you can see right in the let's go over to the back end
again. When it gets this route the post, and then we have the ad, we'll get all the information from
the body, we create the new exercise, and then we send the JSON exercise added. And that's what will
show up in the console with the console dot log rest dot data. So we're not quite ready to test
this out. Because we still need to update our component will mount method so If you remember,
we have a drop down menu where you can select users. And it should show all the users that
have currently been added to the database in the drop down menu. So I'm just going to
cut this code out here. And right now, we are going to do another axios. But this time, it's
going to be axios dot get, we're going to send a get request to HTTP, colon slash slash local host
5000 slash users. And after we do the request that then we are going to take the response,
we'll pass it into this arrow function. And now we want to check if there is a response. So if
response that data dot length is more than zero, so base, we're checking that there's at least one
user in the database. And if so, then we can, I'm just going to paste in that set state that I cut
out before. But we're going to not use this sample data anymore, I'm going to put response dot data
dot map. So map, so data is going to be an array, and we're going to map the array which will allow
us to return something for every element in the array. So what we're going to return is user.
And while passing the each user in the array, we're going to return user dot username. So to
kind of explain that where it's user dot username, let's go back over to MongoDB Atlas dashboard. So
the array of users is going to be each of these items. So this is the first item in the array,
this is the second item in the array, this is the third item in the array, but we just
want the username field. So if we go back over here, instead of getting everything, all those
different fields, that's why we're just going to return user dot username. Because we don't,
we don't care about the object ID or the created or updated at date for this. So for the username,
this is going to be response that data. And then I'll do the zero index of the array,
the first element in the array dot username. Okay, so username is automatically set to the first user
in the database, this what we just did. So now we can test this out. So I can go back over here. And
go back to the exercise tracker. So I will do a let's see exercise, create exercise log. So look,
now it's showing a drop down menu of every name from our array, we're getting this right from
our array. So I will choose marry. And for the description, I will put bike ride, and then the
duration 65 minutes, and then the date. Just click that here and then create exercise log. Okay, it's
good thing we're testing it out, because I just realized this post URL is wrong. It's supposed to
be exercises with a plural here. So let's try that one more time. Go to create exercise log
Mary bike ride 65 and choose a date. And good, we don't see an error in here. So now I can go
and check out MongoDB Atlas. And then we'll see we have the exercises here. So go to the exercises.
And this is one we already had. But if we go to the bottom, now we have Mary Mary, bike ride,
duration 65 and the date that we entered. Great, this seems to be working. Okay, now, we will
complete the exercise list component. So let's go to the exercise list component right here. So
this is still a stub. This is going to show every exercise that has been added to the database. And
this will be the homepage of our app. So at the very beginning, we are going to import some things
we're already importing react, but I am also going to import link from react router DOM and then I'm
going to import axios. So now we're going to start with a constructor to initialize the state with an
empty exercises array. So we'll do constructor props and we are going to first do super props
you always Start with super props. And then before we I created a method, and then I would bind this
to the method, but this time, we'll do it the other way around. So we know we're going to
create a method called delete exercise. Because in the list of exercises, we are going to have,
you're going to be able to click a button to delete the exercise. So we're going to bind this.
And then I just have to initialize the state. So this dot state is going to be equal to, and since
there's only going to be one item, I'm going to just put on one line, it's going to be exercises.
And that's just going to be an empty array of exercises. So we got that, now we're going to
get that list of exercises from the database. So we're going to do that in a component did mount
method. Just like before, when we got the list of users from the database, we're going to get
the list of exercises from the database. So we'll do axios dot get. And then I'll just put HTTP,
colon slash slash local host 5000 slash exercises, slash, and then we'll do a dot then. And we'll
take the response. And we will do this dot set state. And before wait on fastest exercises, is
going to be response response that data. So before when we were getting the the usernames we did, we
got just the username field. And because we didn't want to return all the fields, but in this case,
we do want all the fields for the exercises. So we are just going to we're going to get the object
ID, that username, that description, duration, day created, update that we're gonna get all
of this stuff. And we're going to put it into the exercises array here. So after this, we are
going to just catch any errors that there's that we would have. So we have error. And let's see,
we'll just console that log the error if there's an error. And I think there's a few other places
where I could have also caught an error that I made me a missed, but we have this here. So the
code will run before the page is rendered and add the list of exercises to the state. And obviously,
we got the axios dot get endpoint that's going to get all the exercises from here. So if we
go to the exercises here, so here, let's go to that get endpoint. That's just this one right
here. So when we go to the exercises, slash, and it's a get request, we'll do exercise that find
which is going to return all the exercises and return it as JSON. And now we have in,
we'll get here, and we will set the state. So this component, like I said, will also allow users to
delete exercises. So let's create the method for that. So this time, I'm just going to paste in the
code. And now I will explain it. I'll do it right after this. We have delete exercise, and it's
going to take an ID. So this is the object ID that we will be deleting the object ID that MongoDB
automatically assigns to the thing that we're going to be deleting. So we have axios dot delete,
we're saying a delete request to this URL slash ID, it's going to put the ID at the end. Remember,
this is an exact route that we created in the back end. So once that happens, we are going to do dot
then. And we're just going to a log that it's been deleted, it will say exercise deleted that we get
right from the back end. So after we delete the exercise on the database, we also have to delete
the exercise from what's being displayed to the user. So it's going to be a table and there's
going to be a row for each exercise. And we want to delete that element, that item right from the
table. So we can do that. This is where react makes makes things really easy. So we're just
going to set the state and we're going to set the state of exercises and whenever you do set state,
it will automatically react will automatically update the page with that new state. So look
how this is going to work. This that's Data exercises. That's the array of exercises. And
now we're going to filter it, that means we're only going to return certain elements back to
exercises here. And this is what we're going to do. So for every element in the exercises array,
we're going to return it. If l dot underscore ID does not equal ID. So whenever the ID of the
exercise in this exercises array does not equal the ID that we're deleting, we'll pass it back to
the exercises array. So this is just a way to just remove the exercise that we're deleting. So you
may be wondering, where does this underscore Id come from, we've just been using ID, we've never
made an underscore ID. Well, if we go back to the MongoDB dashboard, you'll see that underscore
ID is automatically created. So the ID in the database is underscore ID. And that's just created
automatically when we create the object. So after this, we can, we're going to update the return
statement of the render function. So this is where we create the JSX, or like, it's similar to HTML
that's going to display on the page. So just paste this in here. Let me so you can see here, we have
our heading. And this is going to be a table. And then this is a styling from bootstrap. And then
we have all our username, description, duration, day actions, or headers. And then this is where it
gets into interesting the body, it's going to call that method, it's going to call the exercise list
method, which we need to implement. And that's going to return the rows of the table. So directly
above this, I'm going to paste in the method here, exercise list. So it's called this that exercise
list and exercise list, it's going to return this, this that state that exercises dot map, merge dot
map is going to return something for every element in the array. So for every element called current
exercise, it's going to return a component. So this exercise component is something that we are
just about to create. So for every element and the exercise array, it's going to return a component.
And that component is basically going to be a row of the table. And we're going to pass in some
props, there's two props are actually three props that we're passing in, let me make some more room
here. So we're gonna pass in the current exercise. So these are basically you can think of them as
variable. So here's the variable name, here's the value. So we passing in the current exercise,
we're passing in the Delete exercise method here. And then we're going to pass in the key,
which is the just current ai exercise.id. So this exercise component, let me just put in this
exercise component, and then I'll talk a little bit more about it. So I'm going to put it up here,
above the other component. So now, this one file actually has two components in it. We
have this exercises list component dot j, s, that's the file. And we have two components,
we have the exercises list component, and we have the exercise component right above here.
There are two types of components in this file. Now, the exercise component is implemented as a
functional react component. And here, this is implemented as a class component, you'll see
the word class here. So the key thing that makes a functional react component, different from a
class component is the lack of state and lifecycle methods. So we don't have a state, we don't have a
component didn't mount lifecycle method. So if all you need to do is to accept props and return JSX,
you should use a functional component instead of a class component. And you can see that for most
of the components in our app, we have a separate file. But since this is such a small component,
we've just put it in the same file in the exercise list component dot j, j s. So let's look at what
this component is doing. It's accepting the prompts, which are the prompts are passed into
it like exercise, so the exercise and the key here and so it's going to return a row of the table,
a table Row. So we have prompts that exercise that username and or the exercise was passed in props,
action, description, duration, that date. And you can see we have a substring here. That's
because the date is a full date time string that includes date, time and timezone. And we just want
the first part of it, which is just the date part. So now we have a link, we're using the link from
react router DOM. So it's going to, it's going to link to a certain URL, which is just going
to load another component on the page. So we're gonna go to the Edit. So it's edit slash props
that exercise the ID. So this is a component that we still have to create that we're creating next
for edit the exercise component. And then we're also going to have a delete button after it's a
delete link, and so on click, once you delete once you click that, it's going to call this props that
delete exercise. So we've just passed in the method from the other component, that will the
exercise method is right here. But we've passed into this other component. And so we can actually
delete that exercise here. And so it's going to call down here the Delete exercise component,
or let go here, where it's going to send a call to the database, or to the back end, which connects
to the database, you can see the squiggly lines here, it's just notifying us of best practice.
Technically, the best practice here would be to use a button and style it as a link. But in this
case, we're just going to do like this. If you want to refactor it later, you can style this
as a button, you can create a button instead of a link here. But because the H ref isn't going
to anything, the best practice would be to make this a button. Like I said, we're not going to
take the time to do that right now. So now we've finished this. But before we test it out, we are
going to create the Edit exercise component. Now the exercise component is very similar to
the Create exercise component. In fact, I'm going to start by just copying all this code, and then
just pasting it in here. Now, another thing you could do for refactoring is you could actually
combine both of these into a single component, and then just update things with the props based
on what it's going how it's going to display. But for now, we're just going to create two separate
components. So this is going to be called edit exercise, instead of create exercise. And all
this stuff is going to stay the same. Something new is going to happen though, in this component
did mount. So here we are in, we're going to get the users. But in it really everything's gonna be
the same here, except we're not going to set the username, because we are going to set the username
from the exercise we are editing. So we're going to have to put in another axios dot get command
here. So I just pasted this in, we have axios that get we're going to http local sites as exercises,
we are passing in the ID. Now this word says this dot props dot match dot params, the ID,
we're getting the ID directly from the URL here. So we are now getting the exercise that has that
ID from the back end. And as a response, it's going to return that exercise. And we're going to
do this that set state. So we're going to set the state of the user name, description and duration
was with the response that data that username that data, that description, and so on here, and
then here, we're going to convert it into a date, we're going to so we have the correct date here.
And now there's just a few other things we need to update. So instead of this actual step posts,
and then exercises slash add, it's now going to be exercises slash update. And then we have to pass
in the ID, which is going to be this dot props. dot match.params.id. And then we're still we're
going to the second thing we're going to pass on is exercise here. And we can still keep this
the same. And then we just have a few things to change down here. Instead of create new exercise.
It's going to be edit exercise, log or edit with a tee and then down here. It will just be edit
Exercise walk. And we just finished that. So like I said, it's very similar to exercise and create
exercise is very similar. So now we can test this out. Let me go into our exercise tracker
app. Just going to close the console for now. And you can see we have these logged exercises
here. Let's just add one more exercise. So we can have another thing on our list there. So how about
run quintiles and we go for a run for only one minute. So this is going to be a very short run
because he has to take his daughter to school. So create exercise log. And now we have three
exercises foamiran Quincy bike ride bike ride, Ryan, we have different durations. And now the
Edit thing should work. So actually, Quincy is going to run for a little more than one minute,
we'll go to Edit. And then now it's going to be 100 minutes. And if I click Edit exercise log,
it's now going to show 100 minutes here. And if we go to the the dashboard here on MongoDB Atlas,
we should see yet quinti run and duration 100. it successfully edited that. But now we're going
to try the lead. So if I click Delete, it deletes from our table automatically. And
let's go see if it got deleted from our database refresh here. And it has been deleted from the
database. We just have the two items now. So now this app is completely complete. We've done the
whole thing. And hopefully you've learned a lot about how to create an app with the myrn stack,
and how to use MongoDB Atlas. The code is all going to be in the description for this. So
thanks for watching. My name is Beau Carnes and I hope you will use your code for good