hey this is henry and welcome to today's
tutorial what we're going to be doing
today is building a simple to-do list
with the pern stack and in case you
don't know what the pern stack stands
for it is p for postgres e for express r
for react gs as our friend framework and
an n for node.js as our backend language
now by the end of this video you'll have
a better understanding of how all these
different types of technologies interact
with each other and go on to building
more complicated applications
now let me give you guys a quick demo
so let's say i
need to clean my room
which i really need to do so i can add
that i can even edit the information so
let's change this to car
uh yeah i'll just keep it like that and
then i can also delete the information
so even though this is just a simple
credit application and it is trivial
there's a lot of things that's happening
between the front and back end so in the
next section we're going to go over a
diagram overview of how this application
is going to work and give you guys the
big picture
now before i move on there is going to
be some prerequisites or more like
pre-setup like the first thing you
already need is to have node.js
installed
second you also need to have postgres
installed and if you don't i'm just
going to give you guys a video that's
well i'm going to look at the bottom of
my video that's going to show you guys
how to properly install it
besides that you guys need to have a
basic understanding with javascript
react.js and if you understand restful
apis that's going to also help you guys
a lot throughout the whole process but
besides that i'll see you guys in the
next section
okay so let's just quickly go over this
diagram to get the big picture so you
can see that this is going to be our
front end so right here you can see the
submit button along with the
data that's going to be able to get edit
and deleted so anytime i click the
submit edit or delete button within my
react application what i'm really am
doing is sending an http request to my
restful api and depending on the http
request and the route that's being hit
it is going to tell my database or it's
going to instruct my database and what
type of credit operation needs to get
done
okay so anytime i click the submit
button i'm sending a post request to
create a to-do anytime i want to edit
something i'm sending a put request to
update to do delete delete
and then when i want to read it to do
i'm going to use a get request
so i think one of the hardest part about
learning how full stack application work
is really understanding restful apis
so i'm going to really oversimplify the
definitions but this is really all you
need to know a restful api uses transfer
protocol in order to run cred operations
so
what i mean by that is that our transfer
protocol is going to be http requests so
we have access to post put delete get
and a lot more but these are the four
main ones but essentially we're going to
be using these http requests and then
our restful api is going to take them
and then it's going to instruct the
keyword it is instruct our database of
what type of crowd operation needs to
get done
okay so a lot of the misconception that
a lot of people have is that credit
operations occur within the restful api
but that's not true at all rather the
cred operations only occur within the
database whether that's postgres or
mongodb or mysql it only occurs within
our database so i'm just going to say
this our restful api is just going to
take our http requests and then it's
going to instruct okay so hopefully that
makes a lot more sense and in the next
section we're going to start building a
restful api
okay so let's start building our restful
api
so the first thing i did was created a
simple print to do folder and you can
name this whatever you want but really
the big idea is that it's going to hold
our client and server folder
so i'm going to first do my gear server
and then i'm going to cd into that
server so you can see here it's popping
up right there and immediately i'm going
to run npm in it
so npm edit is going to keep track of
all our packages inside our application
and we're going to answer a few more
questions to give more details so entry
point is what's going to glue
our application together
so after that i'm going to do npm
install express
pg and coors
so what are these libraries
well express allows us to quickly create
a server
in node.js and then we have course which
allows different domain applications to
interact with each other so for example
our server is going to be running on
localhost 5000 and our react
applications
application is going to be running on
localhost 3000 and then finally pg is
there to connect our database with our
server in order to run some postgre
queries okay
so once we set this thing up i'm going
to say touch index.js which is going to
again be the glue
i'm going to go over here
and record the libraries
so i'm going to require express
and then i'm going to create a variable
called app which is going to take my
express library and then it's going to
run it
now i pause all these cool methods in
order to create a server so anytime we
want our server to start we have to
listen to your part number so app.listen
for 5000 is what we're going to be
listening it to and then i'm going to
have a callback function that's going to
indicate it has started so server has
started
on port
let's kind of test this out really quick
to see if it works
i'm going to say
node index
and indeed it does work but the thing is
is that i don't want to use node i
highly recommend that you npm install
globally nodemon because every time we
want to see changes we have to restart
terminal and turn it back on so by using
no man
or no mod you're going to watch a single
file and then every time there's a
change that's going to be done it's
going to on instantly restart it
so nodemon
okay and you can see it's going to be
watching a file and then the next thing
i want to do is create some middleware
so
middleware
i'm going to use app.use so anytime
you're going to create a middleware you
have to use app.use and i'm going to put
course
and i totally forgot to require that so
const course
okay so now that's set up that's all we
have to do and i just kind of want to
jump ahead as well that anytime we're
building a full stack application you
need to get data from the client side
and the only way to get data from the
client side is that we have to get it
from the request.body object so let me
show you how we can do that so by using
this
oops let me go back inside here
so this right here
essentially is allowing us to give us
access to request that body and then we
can get json data okay so this is still
a little bit confusing we're going to
build and i'm going to reference this a
lot okay so i'll see in the next section
and we're going to create a database and
a table for postgres
all right so let's get started building
our database and table
so i'm going to first show you guys this
diagram to give you guys a big overview
of the commands we're going to be using
so you can see those are postgres inside
there there's going to be a lot of other
databases like to do databases or hotel
database
now inside these databases we're going
to have a table
so in this case i'm going to create a
table or i'm going to create a database
called to do database and then inside
there i'm going to create a table called
to do
another purpose of having a table is
that if there's anything that's related
to room for example in this database
then it's going to be placed inside the
room table anything that's related to
guests is going to be placed inside the
guest table
okay
and writing a database or creating a
database is as easy as saying create
database and then specifying the name
along with the semicolon and then after
that we have to move inside that
database and then we have to run create
table to do we don't stop there we also
have to define a schema and the reason
why a schema is so important is because
we don't want to put anything inside our
database you want to be specific on what
we're going to be putting inside there
and then finally as you can see here we
have all these different commands that
we can run within our postgrad terminal
in order to make it easy for us to move
around so let's get started so i'm going
to go back to my visual studio code
and right off the bat i'm going to
create a file called database
dot sql
and the reason i created this is because
it's going to make it more visually
pleasing when we write our commands so
let's create a database so create
database
and we're going to name it as pern to do
all right semicolon and then next we're
going to say create table
and then to do
now i have to specify what it's going to
look like so let me just set this little
preferences up
the first thing i'm going to do is to do
id
and the reason why i have to do id is
because i want to ensure that this to do
is going to be unique so for example
anytime i'm trying to delete i'm trying
to update or get a specific to do i just
want to reference this to do id because
it's what's going to make it
distinguishable from the other to-do's
and then i'm going to say serial primary
key
so what is this so primary key is
exactly what i just said last time
essentially indicates that this value
right here or this column is going to
make this entire to do unique from the
other to do's and then we have serial
which is going to be this function
that's going to increase our primary key
to ensure uniqueness so if you're still
a little bit confused
don't worry about it we're just going to
go over that while we code this thing
and then finally i'm just going to have
description inside here
and i'm going to say
a give a far char of 255
which means i'm setting a max character
of 255.
we just wrote our commands and now you
should already have installed postgres
so let me just put this aside
so i'm going to open this command line
right here so you should already
installed it and then what you're going
to run is
psql-u representing as user and we're
going to be using the user postgres so
anytime you install postgres you
automatically have a user by default
called postgres which is a super admin
and a super admin has full access to
everything and then it's going to tell
me what's my password
and that's what you wrote inside your
installation process so when you install
postgres it told you to put a password
inside there so we're going to put
inside here
okay so i'm inside my database so let's
kind of run through the commands that i
was talking about when i do slash l
it is going to show me all of my
databases
so for example if it's still a little
confusing essentially all of these
little things that you see over here on
the side is representing each of these
databases okay
so once i have this thing down i could
do ctrl c to get out of this really
quick
okay
and then inside here i'm going to
see that i have jwt off so i'm going to
move inside that database so i'm going
to say c
jwt off
okay so now as you can see here it's
saying that you're connected to the
database jwt off as user postgres okay
and then i can look at all the tables
that's inside there by simply saying
slash dt so in this case this has a
single user table okay awesome
so now
we're going to make our own database so
i'm going to go inside here i'm going to
grab this command and i'm going to put
it right there
and check this out it's going to say
database created or great database
and then once we have that down we can
do slash l i can see right there that we
have indeed added it to our database or
added to our postgres i'm going to do
ctrl c again to get out of here and then
i'm going to move inside there so slash
c into print to do
so you can see it does the same exact
process and now i'm going to run slash
dt to see whether or not we have any
tables you can see here it says did not
find any relations so now we take this
thing right here
and then we put it right there
okay so awesome so we created a table
and now if i do slash dt you can see
that indeed we have created a table
called to do
now i think it's also worth mentioning
that you don't have to call this to do
id you can also call this t id as wall
so i'm just going to show you this
command later but essentially it's going
to get all of my to do
you can see that right here is what we
define our schema as to do id and
description and like i said again
doesn't have to be to do id i'm just
being explicit some people just like to
say tid
or you can do whatever you want with
that
okay so in the next section we're going
to connect our database with our server
okay so let's start connecting
everything together
so connecting like our database with our
server is really easy when we use the pg
library so what i'm going to go is
create a file called db.js and this is
going to configured how we're going to
connect to our database so i'm going to
say cons pull
require
pg library so remember we installed that
pg library and dot pool
and now we can instance this poll by
saying const pool
equals to new pool
and now we can set up our configurations
inside here so what's inside we have to
first specify our user
so in this case we're going to be using
the postgres user
and then we have to define the password
as well so kthl 822 is mine
we also have to say what the host is
which is going to be localhost
and then we are also going to specify
our port which is going to automatically
run on port 5432
and then which is also very important we
also have to specify the database which
is going to be perm to do because as you
can see here we created this database
called perm to do and that's the
database we're going to be using
so awesome that's all it takes to
connect to your database so i'm just
going to export this guy so at
module.exports
and then pull
okay so since that's all set up for us
i'm going to go back into our index.js
and i'm going to require that
so by using the pool
we can run queries with postgres
oh my god what's happening dot slash db
there you go
okay
and just to kind of give us a heads up
i'm just going to start writing the
routes that we're going to be working
with with this query stuff
so the first one is that we want to
create a to do
next one i want to get all to do is
get a to do
update a to do and then finally i want
to delete
a to do
so we're going to work on each of these
routes and we're going to be using this
new connection that we have over here to
run queries with our postgres so i'll
see you then
all right so let's start building some
routes so right off the bat we're going
to start with create a to-do and to do
this we're going to say app that posts
the reason it's going to be post is
because we're adding data and i'm going
to
name as well as to do's
okay
and i'm going to run
rec.res which represents requests from
the client side and response we're going
to send back to the client
and then i'm going to use async now the
great thing about async by using this
we're allowed to get these really cool
tools that makes asynchronous requests
easy so for example anytime we're
creating data over trying to get data
it's going to take some time so async
provides us something called a wait
which waits for the function to complete
before it continues
okay
so you'll see that pretty soon so then
we also have try catch which makes our
error handling so much more easier
the reason for that is because it's
going to run a regular code and anytime
it finds the error it's going to catch
it and it's going to throw it out
and this is how our basic error handling
is going to be done
okay so now that's done inside here
i need to be able to get data from the
client side to determine what exactly
i'm wanting to add
so remember how i said we need to do
something called express.json so i just
kind of added a comment over here that's
going to let us add request that body so
by using this we can access this object
right there and if you don't know what
it is i can just console.log that thing
i should give you guys a heads up but i
am going to be using postman
postman is great when it comes to
wanting to test your applications or
your restful apis
so in this case i'm going to create
something new and you can see right off
here that we have all these different
types of http that we can use so in this
case we're going to be using posts and i
also need to specify that i want to hit
the slash deduce routes so let me do
this really quick
so i'm going to say http
localhost
5000 and then slash to do's okay
and now remember how we can access this
request.body so i'm gonna go inside to
body right here i'm gonna say raw
and i'm gonna specify it's gonna be json
and then i'm gonna create a json data so
in this case remember we're working with
description so i'm just going to say
description is i need to clean my room
so now if i click send
we look inside here you can see indeed
it pops up right there description i
need to clean my room and this is
exactly the data that we're going to use
to save it within our database okay
so hopefully that clears things up
so remember we have the subscription
that i'm going to be using so i'm going
to destructure that so i'm going to say
cons description
and i request that bottom
okay so time for some actual queries
so i'm going to say const new to do
and then i'm going to say await
pool
dot query so remember that pulls what we
just created right there and now we're
going to start writing some queries
so in order for this thing to work in
order to add data we have to use the
insert into command so insert n2
and then after that we have to specify
which table we're trying to insert into
which is going to be to do
and then we have to specify what type of
column we're trying to add data into so
in this case we have a simple
description
and then we have to specify the values
of that and this is going to look a
little bit weird at first but we're
going to have something called dollar
sign one so what is this this is going
to be a placeholder
or essentially going to be a variable
that's going to specify this description
so we're going to have the second
argument inside this query which is
going to define this dollar sign one so
remember how we have the description
which is coming from our client side i'm
going to put it right inside here
now
our description is going to be the value
of this dollar sign one
okay
so if it's still a little bit confusing
don't worry about it let me just wrist
out jason this and i'll explain it again
okay
so i'm going to do this really quick and
now i'm going to open my postman one
more time and i'm going to try to hit it
you can see we had a status of 200 and
don't be scared but you're going to see
a lot of gibberish
so you see all of these things but this
indicates that we have done something
successful so we look inside our
database and i say select
all from to do like i said again you
don't have to know this command yet i'm
going to explain it later
but you can see that indeed that we have
added that data inside our database so
pretty cool and look you don't have to
set it as dollar sign one that's just
the pg library allowing us to add
dynamic data we can actually just do it
straight inside here so for example i
can just say like insert into
to do
description because i'm trying to hit
this column right there
i also have to specify the values of
this guy
and i'm going to say single quotes
like let's just say hello for example
and then that's all i have to do
so you can see i inserted the data and
if i decided to see what's inside there
again you can see that i have added
hello
it's nice and you also see that we are
incrementing this thing one two we
didn't do that but because remember we
set serial primary key it's going to
automatically increase it to ensure that
we have uniqueness all right so
hopefully that made more sense as you
can see here that this dollar sign one
is just going to allow us to put in some
variables of what we're trying to add
inside our database
so you can see that we have all of this
ugly thing over here so we want to make
sure we're returning back the data
so what we have to do is say returning
returning star
so returning star is used whenever
you're inserting data or you're updating
or deleting so anytime
you're doing these type of actions
you're going to return back the data
so let me show you again i go inside
here
and i try to hit this route you'll see
we'll get something different
so you see this we have now all of this
data and you can see that this is the
data that we just added inside there i
need to clean my room to do id three
and we want to just hit this rows right
there because we don't want to see all
these other things so inside i'm just
going to say new to do that rows and
then i'm going to hit the first item
so now i'm going to hit it one more time
i guess i should change it up a little
bit and this is good for us because we
are really
we're going to in the next round we're
just going to try to get these to do's
so now we go to the bottom you can see
we have something that's a lot more
easier to read
so awesome
okay so we created our to-do next we
want to see all our to-do's and this
one's really easy
and if you're going to memorize it right
off the bat
so i'm going to say app.get because
we're just simply wanting to get theta
i'm going to say slash to do's and then
i'm going to do the same process request
a res
i'm going to use this async
stuff try catch so this is really my
regular convention that i like doing
console.error enter that message
and then
inside here what we're going to do is
we're going to be saying const
all to do is
a wait is going to take some time hold
that query
and guess this select so remember we use
select
oh my god i can spell it select all from
to do
and that's all we have to do really so
remember how i kept writing this command
just to see my to-do's this is exactly
the same as that command so now i can
say res.json multi-deuce remember it's
going to be in this real stuff the only
reason why i don't have to say returning
stars because the purpose of select is
to even give us the data back so we
don't have to say returning star
so let's check this thing out
[Music]
so i'm going to go inside here
and i want to see all of my to-do's so
i'm going to make a get request and
check this out
how cool is that so now we have all
these different to-do's that we just
created and we can we can just spit it
out by simply running this command all
right so pretty simple
so in the next step we are now wanting
to still get it to do so it's still
going to have this thing but we want to
get a specific to do
so it's still going to be at that get
because we're getting data now i'm going
to say seduce and i'm going to also do
colon id so what is that
let me just finish this really quick
just the basic setup
okay try catch error
console.error error.message
okay so what is this thing essentially
this allows our our url to be dot is
it's going to allow our url to be
dynamic so we have access now to
something called console.log
to request that params so whatever the
client specifies in the url
it's going to spit this out with the
variable id so it's a little confusing
so let me show you what i mean so i'm
going to go back inside here and you can
see that we're going to try to hit this
route so i can say slash seduce and then
i can just write something random so
indeed that's what i'm going to write
and look inside here
if i click enter
you can see that we have an id of random
and this is actually coming from this
area right here you can see we specify
id i don't have to call it this
i can just name it whatever i want and
if i save this and i enter it again
it's going to do the same exact process
so subject random
okay so hopefully that makes sense
because that's what we're going to be
using to specify what type of to do we
want to get so you're going to see later
on we're going to specify it as one two
three
you name it
so let me just change this back to its
regular form
and uh
yeah okay so now what i'm going to do is
i'm going to destructure this so const
id
from request.programs
and then
now i'm going to try to get this id so
const to do
and i'm going to say wait because it's
going to take some time hold that query
now select
all from to do
okay and now i'm going to introduce a
new player which is called the where
clause
and the where clause specifies what type
of to-do we actually
we actually want sorry about that
what exactly we want
so in this case i'm going to specify the
column to do id
because remember we named it inside
database.sql
i'm going to say where the to do id
equals two dollar sign one and i'm going
to specify it with the id
the reason why this is important
is because
i can specify this as seduce and i want
to get the one so it's going to say
select all to do is where the to do id
equals to one two or three so you'll see
this in action real soon
and then i'm going to simply say
res.json to do that rows and i'm going
to get the first item because we're just
getting one to do
all right so let's see that really quick
so in this case you can see that we have
all our to do's right here
and i want to get number three so i or
you know what let's do number four
so if i stick click
enter you can see that we get our
specific data so nice so by using the
web class we can be specific on what
we're trying to get
okay
pretty simple and we're going to work on
the next route which is going to update
a to do this one is probably a little
bit more complex from the rest but still
not as bad so since we're updating
information i'm going to say app.put
i'm going to specify it as studios
and it's going to be id
so the reason i need to specify id
because i want to know what exactly or
what should do i need to update then i'm
going to run async
so the regular stuff
and then what i'm going to be doing
inside here
okay so what i'm going to be doing
inside here is i need to have two things
remember we have access to the
request.body to get information
about the description that we're trying
to add to the database and we also have
request params to specify what type of
to do we want so we're going to need
both of them in order to update
and i'll explain why
so we have id over here request.params
and then we're going to have const over
here which is going to be uh what is it
yeah description
request dot body
it's awesome we're going to be using
these tools to update our information so
here's how the query works i'm going to
say cons update to do
and then i'm going to do a weight again
pull that query
and now this is the query i'm going to
run i'm going to say update
update i'll have to do i have to run
update and i have to specify the table
so update and to do's table
and then i have to run set
so what do i set i have to set the
description column
to whatever i specified right there
so i want to actually set the
description to the description that's
specified
side
and then i also have to specify where
it's located at so i had to say where
the to-do id
equals to dollar sign two
okay so this may look a little confusing
but remember how i said these represent
variables so we don't have to just do
dollar sign one we can do unlimited
amounts like you could even go up to
like dollar sign 100 if you need to
right but basically these are just
variable holders so all i have to do is
go inside my second argument array
specify the first value which is going
to be description
so this is representing this one right
there and then i have to create a comma
right here and specify id so this id is
coming from here and it's going to
represent this dollar sign too okay
and now
i can just do res.json
and i'm just going to keep this simple
i'm just going to say
to do
was updated
okay so let's see how this is going to
work
so i'm going to go inside here
i'm going to try to change i need to
clean my car
so let's go up here really quick
and let's say let's
i need to clean my floor
so now i have to change this to put
because i'm trying to update this and
now if i click enter hopefully it works
you can see i have a status of 200
and indeed to do was updated so let's
just double check to make sure it did
so if i go inside slash four
and i look into the bottom
oops i have to make this to a get
request
it did change so it says i need to clean
my floor so cool we're able to update
our information
and if you're still confused like i said
again i'm going to do a quick review
over all the queries we just did
and finally we have deleted to do which
is really easy it's exactly kind of like
the get request so what we're going to
be doing is app that delete because
we're deleting data
seduce and all we have to do is specify
the id
in the regular process request.res
try catch
since that's all done and ready to go we
don't have to add data to a delete so
all we have to do is specify what
exactly we want to delete
okay
and inside there we're going to say
const delete to do
and we're going to do the same process
away pull
that query
and i'm going to say delete
from so i'm going to run this command
delete from and we to specify in the
today's table and then all you have to
do left is say where it's located at so
where the to-do id
equals
to dollar sign one and that is just
going to be as you guessed it id
and then we're just going to do another
res.json and just say
to do
was delete it
so congratulations uh well actually no
we can't say that yet until we test this
out so let's make sure that we can
actually delete this one right here so
in this case i want to delete that fake
sample that i created over here so hello
so i'm going to say slash 2. specify
it's going to be a delete request
because remember i specified as delete
and now if i click enter
to do what's deleted and let's make sure
it does get deleted
oops
make a get request
check this out it was deleted okay so
congratulations you officially created a
restful api of postgres so in the next
section i'm just going to do a quick
overview of the queries we did so you
can have a better picture of what
happened so i'll see you then
all right so congratulations for
building a restful api with postgres so
i'm just going to give you guys a quick
review because i want this to really
ingrain in your mind
so as you can see inside here we had a
basic server that we set up and then we
did something called database.sql so
this made it more visually pleasing for
us to write our commands again you don't
have to do it this way you can just put
it directly inside the command line so
what we did was create table learn to do
and then we created a well sorry not
create table we created a database
called print to do and then we created a
table within that database called to do
and we had to find two things inside
there the first one we defined was the
description which was given a max
character of 255
and then we set something called to do
id with the primary key and the reason
why it's so important is because we want
to ensure uniqueness between all our
other to-do's because if we want to
delete update or get a specific to-do we
will have to reference something that
distinguishes the rest of the other
to-do's which in this case to do id and
then you can see primary key indicates
that this to-do id is what makes it
unique and then we have the serial
function which automatically increases
the primary key to ensure that's unique
as you can see inside here that's what
happened one to two
now in order to connect to it it was as
easy as taking the library so require pg
that pool and then we just had to
configure where and how we were going to
connect to it in this case we have to
specify the user the password the host
which is localhost because it's running
on our local machine our port by default
postcard runs on 4432 and then our
database which was perm to do
so as you can see the reason we
connected to parent to do is because
that's what we specified
okay so now when we go to index.js we
start to create some routes
so whenever you're creating something
inside postgres you have to use the
insert into command okay so the insert
into command specifies the table that
you want to insert something in and the
column which is going to be description
and then you have to enter in what that
value of the subscription is going to be
in this case we had dollar sign one
which was really strange for a lot of
people who just started but essentially
this is just a simple placeholder and
this value is going to be specified in
the second argument array which is going
to be description so this description is
going to represent this dollar sign one
over there okay
and then uh and also it's worth
mentioning that all of these different
commands that you see here these queries
that i'm having over here can just
simply be run inside the command line
themselves
and also we have returning start because
we were adding data
so we want to get back that data again
so anytime you're trying to insert or
you're trying to update or delete you
have to use returning star to show what
exactly you're using
and then we had to do res.json.roast
because that's where the data is located
at
and finally
inside here we just had to do select all
from studios and this allows us to get
all the to do from that table right
there
and as you can see here you don't have
to specify stars i don't know if i was
specific on this but it doesn't have to
always be select star star is just
simply there to say that we want to get
everything so if i go into my command
line and i say select
instead of star i can say description
from
to do
i just get the description so i can be
specific on what i'm trying to get so
instead of actually trying to pass
everything to the client side i can just
minimize that and just pass what i
really need to pass over to the client
side and then we just press that json
that data
and inside here we introduce a new
player called the where clause and the
word clause allows us to be more
specific on what we're trying to do so
in this case remember we were trying to
get all to do's but only were the the to
do id equals to what we specified in the
client side so we're gonna say where
specified the column and then the number
the equals two
then we worked on update which was a
tiny bit more complex but it was still
nice and easy to work with so we have to
use the update command specify the table
and then we have to use set
describe the column that we were trying
to change
so we set that equal to the description
define and the client side and then we
have to specify where
that to do we want to update it was
going to be located at so we have to say
where to do id equals to whatever you
specified inside there okay and already
you can see we had dollar sign one
dollar sign two
you can go up to any dollar signs you
want to it's just that inside your array
you just have to specify it inside there
so if i added a dollar sign three i will
have to add it inside this array as well
of what that equals to
and then finally delete which was really
easy all we had to do was specify delete
from the command specify the table and
see where it was located at
okay so we use that where clause again
so pretty simple stuff so
congratulations so in the next section
we are going to start creating our
client side
so uh just so you guys can see i'm just
going to create a
new terminal over here and then i'm
going to say mpx create react app and
i'm going to find it as client okay so
after this thing finished loading we'll
just start building our application
all right so as you can see my client
side has finished loading
so before i even like jump into cleaning
this thing up i just want to show you
guys quickly of this diagram again and
the different components that we're
going to be working with
so let me just kind of zoom in a little
bit
so remember we're going to be having
three components to this front end so
we're going to have first a input
component then we're going to have a
component that's going to show all the
to-do's and then last we're going to
have a component that's going to open
our edit model okay so let's get started
so i'm gonna go back inside here and i'm
just gonna clean some things up so we
don't really need these anymore oh we're
gonna need them eventually but let's
just focus on the client side
so i'm gonna go inside here and i'm just
going to clean some things that we don't
need so in this case we don't need this
we also don't need this logo svg
i'm also going to get rid of the service
work here
set up tests all right and then we're
going to go to index.js clean all these
things out really quick
right along the server worker we don't
need that anymore
and then i'm going to go to app.js and
i'm just going to
get rid of this logo stuff so we don't
have any errors and i'm just going to
take in the fragment
and i'm just going to clean this all out
we don't need these things anymore all
right
i'm going to put fragment inside there
and here we go and just to make it even
better we're just going to create a new
folder called components so we're going
to talk about those three components we
just did so we're going to do new file
remember we're going to have a search
input so input to do djs
then i'm going to make another component
which is going to list
all of our to-do's.js
and then finally i'm going to make a new
file that's going to have the edit to do
okay
and that's pretty much the setup for
components right now and also we are
going to be using bootstrap for so let
me kind of get that set up for you guys
as well
so go inside here
bootstrap 4
then we're just going to open this thing
up
and just go down here
take the css
and we're going to put it inside our
public index.html so i'm going to just
put my
link probably right here and if you want
to you can just get rid of all these
comments they're not going to help us
really and finally we are going to be
using a model so i'm going to take this
all this data right here
and then i'm going to put it right there
which
oh yeah right there i'm going to put it
near the body
okay
so pretty neat okay so uh that's pretty
much your setup so the next section
we're gonna start building the input
view
alrighty so let's get started
so i already went to my client folder
and i did npm start to get everything
ready so let's go inside our input to do
and let's start setting some things up
so i'm going to start saying import
react from react
and then i'm going to make a simple
component just to get enough on the
board
i'm going to return a simple h1 that's
going to be input to do
and i'm going to export default this
and i'm going to require it within
myapp.js so let's go inside here
and i'm just going to add a comment
that's going to save components
and it's going to say
import input to do
from dot slash components slash input to
do
all right
and now i'm just going to put it right
there
all right and now if i look in over here
you'll see that i have input to do and
it's a little bit too close on the side
so i'm going to make sure that i space
this thing out with my container
i'm gonna take this okay over here and
i'm gonna put it oh no not there
i'm gonna put it right there and it
should be a lot more spacious
so yeah that's a little bit better and i
kind of want to make that to the middle
so let's go into input to do and now we
can start doing some real things
i'm going to make a fragment
and i'm going to put my fragment right
here
and then i'm going to put my h1 as pern
to do less okay
and i'm going to add a class name
of text center
and i'm also going to add a margin top
of five because it as you can see it was
a little bit too close
so that looks nice for us
and the last thing we need to do next is
that we need to create a form because we
are going to submit something new so i'm
going to create a form over here we
don't need this action
and i'm going to have input right here
type of text
i'm going to keep it like that
and then i'm going to have a button
that's going to say add
so let's see how that looks like
pretty ugly so we can make that look a
little bit better
so class name
i'm going to add a btn well not btn
there but i'm going to say form control
for here
that should make it a little bit better
okay and right on the back you see it's
kind of knocking the ad out so let's
just kind of decorate that as well
so i'm just going to say class name
btn btn success and then after that i'm
going to add a d flex because this thing
goes hundred percent so i want them to
be together
now as you can see now it's going to be
put together it's awesome
and it's still a little bit tight so i
guess i'm going gonna add a margin top
five there as well
i'm just really abusing this margin top
five
yeah it looks a lot better okay so now
it's time for us to reactify this thing
we want to start containing our state
within this so i am going to be using
react hooks so i'm going to use use
state
and inside here i'm going to put on the
top
so i'm going to say cons
and i'm going to say um let's see let's
call it description
and then we're going to say set
description
and i'm going to set it to use state and
add a default value of an empty string
now if you don't understand this
basically this is our state and this
right here is the only way to change the
state and then we have use date
to show our default value
so now i'm going to go to my input i'm
going to set the value to that state
that i have over there just description
so just to prove my point that this is
our default over there i'm just going to
add something like for example hello
so now if we look inside there you'll
see by default we have a hello inside
there okay we can't change it because we
don't have an on change yet so i'm going
to open this thing up
and what i'm going to do next is that i
want to
change or update the description so i'm
going to say unchange
and i'm going to use e for event
and it's going to do set description
to e that target so it's going to target
whatever's in that input and it's going
to get as a result
the value of it
okay
either target.value
so now if i just type inside this thing
i can just add random values and it's
going to update and we want to get rid
of that hello because we won't start
that
okay so pretty neat so we have this
react stuff set up next we want to be
able to submit our form to send data out
so how do we do this let's create a
function that's going to call unsubmit
form
so i'm just going to you know yeah i'll
just make this error function
and
inside there i'm going to use my try
catch again so i got to use the async
stuff
and i'm going to set this to error so
console
dot error
error that message
and i'm going to put an e inside here
because it's going to send an event and
we don't want this thing to refresh
so i'm going to say e that prevent
default
now inside here is where we're going to
start
like sending a request so i'm going to
package this description over here so
i'm going to say const body
equals to description i'm packaging it
all up so normally you'll have a lot
more than just a simple description if
you're building a complex application in
this case i'm just going to keep it like
this
and then i'm going to say const response
and i'm going to start sending a request
to add data so i'm going to say
fetch so i'm going to use the fetch i'm
going to specify http
localhost
so i'm trying to add data so remember i
have to go slash studios so by default
fetch makes a get request so we have to
add some more configurations
so i'm going to set inside here that our
method is actually going to be a pulse
request
okay
and what i'm going to be sending inside
of there is going to be json data so i
just have to set the headers to
type and the content type is going to be
a result of application slash oops let
me get rid of that slash json
okay and then finally i have to
what am i going to be sending over there
so i have to have a bot
i'm gonna have to stringify this
package it all up
string the five
and then i have to stringify that body
over there
all right
looks pretty solid so let's kind of test
to see where this works and i'm just
going to go console.log
response to see if everything works well
now you should have your server on
because we're going to start interacting
with it right now
so let's go over here
and i'm going to say
okay so let me open my
little console
i'm going to clear all this so it can be
a little easier to read let's say i
need to wash the dishes
so now if i click add
let's hope it works
wait i just noticed this thing just
refreshed okay so that's a problem
because oh yeah because i didn't connect
to my form yet okay so yeah we have to
do that first
so let's say on submit
so this is going to be triggered when
it's submitted
and then i'm going to run on submit form
and now it should be
working now i'm going to go over here
and i'm just going to write in my data
like now i need to wash the dishes
and that's what i totally forgot
so remember when you're making a fetch
request it's going to take some time so
we need to wait
we need to wait for this thing to finish
and then we can console.log that
response
so now
and i hope finally this thing is going
to start working
and again it's just a working progress
so no problem at all
and i'm just going to write i you know
i'm just going to say hello
clear this up and i'm just going to add
it and cool we had a status of 200 so
let's make sure we really did get that
data so open up your command line over
here psql
dash u so the regular process again
pthl822
and then i'm going to go into that learn
to do stuff that we created and i'm
going to say select all from to do i'm
going to determine whether or not i
actually have it
and look at that
i have the data over here and i wasn't
able to add the other one so that's neat
so you can see how it was added over
there if i decide to add
another data
let's check this out really quick
cool it works so we're able to add data
okay so since that's all set up in the
next section we're going to start
working on the list to do so we can
display all our information
so i just realized i wasn't complete of
this component instead of saying
console.log response i actually want to
do window.location
so once the response has been sent it's
going to refresh and show the changes
okay so make sure you change it to this
next i'm going to go inside let's seduce
and create that component
i'm going to import react
from react
and then i'm going to say cons list
seduce
and i'm just going to be returning
something really simple just get us
started i'm going to call it lists
to do's
and then i'm just going to export
default this guy
okay so that should be all set up and
now i'm going to go to my app.js again
and i'm going to import that
that slash component slash
what is it called again list to do this
and i'm just going to put it right under
here and we'll see whether or not it
does pop up
all right so let's go inside here let's
see if it pops up over there
less to do should be right there awesome
so now we can do some real damage or
sorry no not real damage we can do some
real stuff
so i'm going to take in some fragments
and i'm going to go inside here say
fragment
and now i'm going to take in a table so
i'm going to use bootstrap 4's tables so
i'm just going to go into w3schools so i
already have it set up right here if you
want to get to where i'm at simply what
i did was i just wrote w3school which
bootstrap four tables and the first
thing that's going to pop up is this
basic table
so what i'm going to do is i'm just
going to grab
this table
tag over here to the end of the other
table tag i'm going to copy that
and i'm going to take it and i'm going
to put it right inside there
okay
and i can see there might be some
confusion so just to double check around
the same page right
w3school bootstrap 4
for table okay and then you should be at
the same location as i am and then you
can just click on this thing right here
and you'll be led to
so i'm going to start using w3schools
and i'm just going to copy their codes
and just put it directly into here to
make our process a lot faster
so now if we look into a react
application you can see that we have our
table
and we're just going to clean this up a
little bit more
so first of all you can see it was a
little bit too close so again we're
going to do a margin top five
and i kind of want to do text center
as well
and we don't want to have first name
last name or email we want to first
display the description
and then i want to display the edit
button
and finally i want to display the delete
button
now we don't need these other datas but
i am going to keep one for reference so
when i map each of the data once i fetch
it i want to be able to know how i
should structure it so i'm going to take
john doe put him inside there and i'm
just going to delete the rest
all right so let's see how that looks
like that should be a lot more cleaner
okay so let's get started
so i am going to be using a few banks
i'm going to be using use effect
and i'm also going to be using new state
so these stuff are going to help us with
a process so use effect is going to
make a fetch request to our restful apis
every time this component is rendered
okay so i'm going to go inside here i'm
going to write use
effect and i'm going to write a function
that's going to hit this one so it's
going to say ket to dose
hasn't been created yet so i'm going to
create it at the top so i'm going to get
error
and
yeah i'll just do an error function
again so get to use
async sorry
now i have to write async
and this is going to equal to
try catch
and i'm going to console.log
error.message
and let me just change the error to the
better
all right
and then inside here we're going to make
another fetch request so i'm going to
say const response equals to a weight so
remember we're going to make a fetch
request right here
to http
slash localhost
5000 slash to do's and by default fetch
makes a get request so that's we can
just keep it like this
and next
i'm going to get some data back but i
can't just simply console.log it i need
to parse it so we're going to be getting
json data back so i have to say const
let's say
json data
and then i'm going to say response
dot json
so i'm going to have to parse it first
because we're getting json data and then
now i can console.log
json data so let's see what we get as
results
so let's go inside here
and let's check this out oops i almost
forgot as well that it does take some
time to parse data so we have to say
wait for this as well
so things should start working once
again so cool look at that we get all
our data from there
so now we can utilize this array and we
can put it
inside our use date so
we're going to create a state right here
we're going to say
cons
and let's just call these to do's and
i'm going to say set to do's
and i'm going to give it a default value
of just an empty array
and after that i'm going to set that
json data into there
so i'm going to say set to dose because
that's the only way to change the state
and then i'm going to put inside json
data
okay so in case you don't know what's
going to be inside there we can double
check
and i could just run
console.log
to do's so this is our state
so let's see what we get from there
so as you can see we're making a lot of
requests and that's because the thing
about use effect is that it just keeps
on like making requests
once the render happens so and ensure
that we only make one request i'm going
to go inside here and i'm just going to
put it like this
so this is going to only make it do one
request and now you can see that
our state that we just console.log has
all the data so now we can start mapping
all of these things and just spit it out
so i'm going to
open this thing right here i'm going to
get rid of this console.log
and we're going to start mapping so
remember how i had to reference this
thing so i'm going to use the same exact
structure so i'm going to say
to do's dot map so we're going to have a
to do and i am going to structure it as
tr because remember it's like this
and then the first td
is going to be
results of to do dot description
how did i get this because if you look
inside here remember
if i open my console and i look at the
data that we have
so i have to refresh this
oh oops
sorry let me console.log this again so
at least you guys can understand how i'm
getting these data
so i'm just going to console.log to do's
and then if we look inside here
you can see that we are going to be able
to get
access to the description
so let's do that really quick
so i'm going to say to do that
description and finally i'm just going
to add a td that's going to have edit
and then i'm also going to have a td
that's going to say delete these are
going to eventually be buttons but at
the meantime we're just going to be
focusing on mapping the data
and now if we look into here
check that out we're able to list all
our descriptions and then we have
potentially our buttons that we're going
to be using to edit information and to
delete so in the next section we're
going to start focusing on deleting and
then later on editing
okay so let's start focusing on our
delete button over here so i'm going to
start opening this thing up
and i'm going to go to the bottom of
this delete button right here
and i'm going to try to make it to a
real button so i'm going to say button
button and it's going to say delete
and i'm going to add a class name
of btn and btndanger so it looks like a
real danger button
okay so that should make it look a
little bit better there we go oops okay
let me get rid of that little
sign over there
okay so now things should get a little
bit better
so the thing about delete button is that
i want to have it happy on click
so when i click on this thing it's going
to specify the id that i'm trying to
delete from this specific to do and then
it's going to make a fetch request to
delete that data so let me explain
really what you're seeing here is that i
need to list all my unique keys and the
reason this is happening is because it
wants to make sure all my to-do's are
unique
so if i go inside here i can simply say
key
and remember my to-do
dot to do id is what makes my deduce
unique
so in the same concepts i can use this
to do id and put it inside here
so what i'm going to do
is that i'm going to say on click
and i'm going to create a function
that's going to
oops
i'm going to create a function that's
going to be called delete to do
and it is going to take an argument of
that to do id so we can specify what a
cycle we want to delete so i'm going to
put inside here to do that to do id
okay
and now i'm going to start defining it
so you see we already have error that's
been spit out so let's go to the top
things are starting to get a tiny bit
messy so i'll just kind of
add a comment here that this is going to
be the delete function
i'm going to say constellate
it's going to also make an asynchronous
request
and i'm going to do try catch
error
console.here error.message
okay
and inside here we're going to make a
fetch request specifically a delete
fetch request in order to uh delete that
specific to do in our restful api
so what i'm going to do is say cons
delete
to do
and remember we're having an argument
site here so i'm going to put id inside
here
so i'm going to say delete to do and i'm
going to say await
and it's going to be a fetch request
to http
localhost
5000
to do's and then we have to specify the
id over here so in this case i'm going
to make some template strings and
essentially type of strings allows you
to put variables within your
your strings so i'm going to add dollar
sign and i'm going to add that id over
there so remember i'm going to go to
to-do's and i'm going to delete the id
that's specified as the argument that i
passed inside there okay
so now uh to make sure that we are truly
doing this oh i almost forgot that i
also have to configure this as a delete
so i'm going to add an object over here
and i'm going to say the method is going
to be delete
okay
and that's all i'm going to be doing
to ensure that everything is working all
right let's just do console.log delete
to do
to see that whether or not it was
successful
let's go inside here
let's go for let's say for example this
one
so let's say i click delete
and you can see that we have a status of
200 so this was i need to clean my room
so let's make sure we deleted that
it should delete this one right there
so cool we deleted the information
so that's all we need to do to delete
information
and in the next section oh sorry no not
in the next section the thing is is that
i want to be able to uh
instantly get rid of this i don't want
to keep refreshing because you can see
it's still there
and after i refresh it then it's going
to go away right there's one less clean
my room
so
to ensure that we don't have to do this
i prefer to use a filter
so what i'm going to be setting is i'm
going to say set to do's
and i'm going to grab that to do state
that i have over there i'm going to say
to dose
and then i'm going to do a filter
so filter essentially sets up a
condition and if the to-do is
like fit that condition then it's only
going to return those that qualified
so i'm going to say to do
and i'm going to say if the to do
that to do ids so i'm getting all the
introduced studio ids does not equal
to that to do or to the id that i
specified inside my argument
then spit those out so it's going to
spit every other to do except the ones
that i'm trying to delete so you'll see
what i'm going to do pretty soon
so let's go inside here
and check this out
so i have all these data i could just
delete
okay look at that so i could delete all
these information and it's going to
shorten my array
and we can look inside here that
the information was deleted
so cool
so in the next section we're going to
start editing your information
all right so let's start working on
editing information so i decided to just
have a clean start so let's say i need
to clean my room again
and i'm just going to add that really
quick so we can edit something at least
and i'll just add a second item
between my floor
very creative
okay so now that's all set up so i'm
just going to go inside my edit to do
and i'm just going to make a simple
component
and then i'm just going to say cons edit
to do
i'm just going to return a simple h1
that's going to say edit to do
and then i'm just going to export
default that
and instead of putting it inside the
app.js i'm going to be putting it inside
list to do's
so what i'm going to do is i'm going to
go to the top of this
and then i'm going to
import that
so i'm going to say import edit to do
from
edit to do
and now i can go to the bottom right
here and instead of having that edit
button or that edit text being displayed
i can put it inside that
component
so now let's see what this looks like
okay so we have two very big ones but at
least we know it's going to be working
so now we can do some real things with
this edit to do component so i'm going
to open this fragments
and
we're just going to put it right here
all right so let's go back into
w3schools
and then we're going to so if you can
join me you can write w3schools
bootstrap 4 and modal so i already have
it all set up and then you can click on
this
and the first thing you're going to see
is this blue button which is exactly
what we need because if we click on it
we want to display a modal
so i'm going to take all of this data
right here
and then i'm going to go to my edit to
do and i am going to spit it in here
and you're going to get an error so we
just get rid of all these comments
all right
a modal header needs to go away too and
i think nope there's one more
all right so now if i refresh this or if
i save it
data should be different
so if we look inside here you'll see
that we have a button so right here we
can like open things up so i'm going to
change this to edit button and i'm just
going to modify this by having another
edit button here along with the input so
we can edit our information
let's do that
so instead of open model
i'm going to say edit
and then i'm going to go down here
and say
all right
and then instead of modal body i'm going
to have a simple input
input type of text we'll just keep it
like that for now
and then
and also i think i should add a class
name
control
to make it look a little bit better
and then remember i want to have a edit
button besides the close button so i'm
going to take that and i'm going to put
it right there
call it edit
and this is going to be red so i want to
make this warning
keep it consistent i'm also going to
make this warning as well
so let's see how this looks like
so we go inside here you'll see that
this looks so much a little it looks a
little bit better than our last one so
now we can put in some data and then we
can click edit to edit the information
so currently at the moment
this description doesn't have any
correlation with this edit model so we
need to pass that props inside this edit
component
so remember in list seduce we are just
mapping all those different types of to
do's so we can add that as a prop for
edit to do component
so i'm just going to add to do inside
here
now we have this for disposal so go to
edit to do
and let's add inside here to do because
there's a prop i'm going to structure it
and to ensure that we're on the same
page console.log to do to see what i'm
talking
about so if i open my
my inspect
so you see what i'm talking about
see now
each of these items
have access each of these to do's have
access to these things so you can see
that this one goes with i need to clean
my room and then this one right here
goes with that
second item right there
all right so i'm going to open this back
up and now i want to be able to display
it so i'm going to have to keep track of
it
so i'm going to take a new state
and now i'm going to say kant's
description
and then i'm going to say set
description because i want to set a new
description later on and a new state
so i'm not going to set it to empty
string but rather since i already have
this to do i'm going to set it by
default to do to do description
the reason for this because i want to
edit the information so i really need to
know what's already there
and then what i'm going to do next is
i'm going to set the value to that
it's going to be description
so let's check this out really quick
if you look inside here you'll see that
i need to clean my room but you're also
going to notice something really strange
is that if i click on this
it's going to say i need to clean my
room as well it's not i need to clean my
floor
now the reason for that is because the
correlations are wrong
so a modal works this way when you click
on a button it's going to target a
specific id
and then in this case this id is my
modal so it's always going to be opening
this model so we need to ensure that
each of these buttons and each of these
models are unique
so let's make sure that these things are
different and the best way to make sure
it's unique is we can use that to do to
do id
so let's do that really quick so i'm
just going to use the numbers now you
can't just use numbers with your ids so
you also need to put like a string on
top of that so i'll do that really quick
so i'm going to say template strings and
i'm going to say id and then i'm going
to add that to do
that to do id
so this is what it's going to look like
in case you're still a little confused
of what's happening
all right like do it like this
essentially what i'm writing is going to
be id is going to equal to id
and then it's going to be whatever
number we specified so it's going to
look like that and then we're going to
target that so i'm going to go inside
here
and i'm going to say dollar sign
this
and i'm going to say oops sorry not
dollar sign yet
let me get rid of this
i'm going to run a template string and
i'm going to do the hashtag because
we're targeting that id
and then i'm going to say
id
and then i'm going to specify that
number
all right so now they're all unique and
they'll present each other's when we
click on their individual buttons
now if i click on i need to clean my
room you'll see it's right there and now
if i click on this one it should say i
need to clean my floor so cool so the
next step is is that i want to edit this
information and then click edit to
transform it
or to update it
so i'm going to go down here
and i'm just going to go over to my
input and i'm going to run the unchanged
because i want to change the information
so inside here i'm going to say
e is going to equal to set description
i'm going to say either target that
value
so now i can change this thing
oops i also have to add this as well
don't forget that
and now if i click edit i can start
adding some information into this thing
okay so next
what's going to happen after that is
that when i click this edit button right
here
i want to be able to send that data so
this one right here is going to be
changing the description state and this
one is going to ch is going to send that
description state to update it
so i'm going to set unchange this
on change and on click
and it's going to send a request
to
let's set it to
update description so this is a function
that we're going to be using
and i'm going to put inside there
all right so we haven't set this up yet
so let's do that right now
and i'm just going to add comments
because it might be a little bit
clustered so edit
description
function
and what i'm going to be doing inside
there is that i'm going to make that
function so i'm just going to air
function so it was called
what i call the dash i think was edit
description
oh it's update description sure i'll
just do that
so
update description
your function
and i also want to make this
asynchronous so i'll just add that right
there
a regular try catch
here console
dot here
that message
and i'm going to pass that e because i
don't want this thing to refresh yet i
want to run my code so either prevent
default
okay so that looks pretty solid so now
it's time for us to send a request so
remember anytime we're going to be
adding data we have to package this
thing so i'm going to say const body
is going to equal to that description
okay so i'm packaging it all up and then
now i'm going to send a response
to my restful api
oh if i can spell response
and i'm going to say await
fetch
and i have to specify that route so http
localhost
5000 slash deduce and then remember we
have to also specify the id
so let's make this template screen again
and we're just going to say to do
that to do id right because each one has
their own unique id over there so once
we specify this we also have to
configure it a little bit more because
like like i said again this is
automatically going to make a get
request
so i have to make an object to say that
the method is actually going to be a put
request because we're updating then the
headers
that's going to be a
content type
make sure you put that strings so it's
going to be a content type and inside
here it's going to be application
json and then i have to add that body
over there so again i'm going to package
it all up json.stringify
and then i'm going to put in that body
over there
so if all works well and i guess just to
double check on this
let's just console.log the response to
make sure that everything is working
so let's do this really quick let's go
out here
i'm going to inspect
so i'm going to go to my console and i'm
going to see if i can actually edit this
information
so i'm going to say
let's actually change this up a little
bit so i'm going to edit this and say
wash the
dishes
so i'm going to edit this
so it says that it was a status of 200
that's a great sign and now what we can
do is we can check inside our
command line to see whether or not that
actually did work
and it says wash the dishes so cool so
we're able to update our information so
the only thing that we need to do left
is just do window
location
slash so we're just going to start
refreshing it so we can see the changes
being done okay so now if you look at
that you can see that changes has been
done i can even change this back to car
and you can see the data has been
updated
okay cool
okay so what's next well there's also
there's something a little bit weird
with this is that if i see wash the
dishes and let's say that i want to wash
the clothes
and let's say i don't actually want to
change it this way so if i x out of this
and i go back it doesn't change it back
to wash the dishes i don't want that
i want to be able to make sure that this
thing changes back to its original
description so let's go back into our
coding editor and let's do that
so i'm going to open this thing right
here
okay so since that thing is set up right
there what else okay so
whenever we click on this x button right
here so where does it this x button we
want to make sure that we set it back to
its original form so i'm going to set
unclick to this
and i'm going to be running
set description
i'm going to set it back to its original
form
so let me show you that really quick
so if we go inside here
and we go back to our to-do list and i
edit this
and i want to change this to close and i
don't want to actually edit it and i
click x
it should change it right back to it so
nice
so we just need to apply this to the
close button and when we click outside
so let's go back inside here
there it is i'm going to take this on
click right there and i'm going to apply
it to all the other ones
so remember we had a close button so i'm
going to apply it to here
and when we click outside the model
button i want to make sure it resets it
itself again as well so i'm going to be
putting that inside
where is it i'm gonna put it right there
okay cool so now let's just go back to
this again so if i decide to edit
dishes now and i click outside
i'll change it back to its original form
and if i want to edit the information
and i click edit
oops okay sorry i accidentally clicked
out so
let's say i want to uh
clean
the floor
and then i click edit
you'll see that it edits the information
i can also add data as well
add that and then finally i could delete
it
so congratulations you have officially
worked on the pern stack
so in the next section what i'm going to
do is give you guys a quick overview of
what you guys did
okay so do you guys remember this graph
so this is exactly what we did we
created our react application we click
submit edit delete and it sent an http
request to our restful api to instruct
our database what needs to get done now
i feel like a great way to review is
just kind of going over how they
interact with each other so i'll just go
inside here and i'll just show you guys
what's happening
so as you can see this is our input to
do and right there we sent an http
request to todos made a post request and
we were sending a description as our
body so if you look inside here this is
exactly what we're going to be taking so
let me align it together
so when you make that request it's going
to hit this route it's going to take
that description that we just specified
and then it's going to insert that
description to that value that we
specified and it's going to return it
nice now if we were to go to list to
do's
so remember what we did here is that we
made a request to http localhost 5000
slash to do's so if you go down here you
can see all we did is hit that route we
selected all the need to do and then we
returned it back to here
then we set that as our state
and then if you look over to our edit
and delete so we actually didn't do get
a to do but don't worry it's not much
different so we go to update a to do
where is it at oh yeah there it is
so whenever we were going to update
something we had to specify exactly like
what need to do was going to be so i had
to hit slash to do specify the ids
also say it's a put request and i have
to send the data that i want to replace
it with so in this case it was going to
be description
right there so
after that it updated it set the
description to what i specified and i
told it where it was going to be located
at which was to do id
and then finally when we deleted
something all we had to do and i think
it's inside here
yeah so anytime we delete it all we had
to do was specify the method was delete
and hit this route and specify also the
id of it so if you look down here you
can see that we put inside
we passed this id and then we took that
id over there and then we deleted from
that deduce table where that to do id
equals to that okay so i think you're
starting to understand of how these
things are being put together and how
like full stack applications are being
built with the print stack
so again congratulations uh from here on
i think of best ways to really kind of
help you build applications is really
just kind of start building your own
applications uh maybe try building the
to-do list without watching this
tutorial and really test yourself of
whether or not you really mastered of
just working with the postgrad database
okay but besides then uh congratulations
and i wish you best of luck in building
your other applications