all right now it's time to build the
front-end portion of our application so
let's get right to it let's start here
in our source folder which is where our
front end is and we'll just start with
App.js is let's start with some cleanup we
don't need this constructor and we
actually don't need this method here
either they come by default with the
boilerplate project we don't need those
we're not going to be making Ajax call
here this is a pretty dumb component and
then let's replace the default markup
that we have with some new markup so
we'll have an h1 which will be our
basically our title says heroes and then
below that let's create something called
a header bar which is just an empty div
with a nice blue bar and then below that
this is where all of our hero's go
pretty much the application is gonna go
here and I'm calling it heroes for now
because that's gonna be the main
wrapping component I'm gonna have some
CSS and I'm just copying and pasting this
in and get this from the github project
home let's collapse our bar and then
let's check and see what this looks like
so far in the browser okay starting to
look pretty good we got a title we got a
bar ready to build out our list of
heroes over here on the side so let's do
that
I'm gonna come over and I'm going to
create a components folder where we're
gonna put all of our components and
inside of that create a new component
and call it heroes now inside the heroes
component we're going to need to import
React and component alright so let's
start with a component class and abrir
just gonna call it heroes and then we're
gonna go ahead and set the initial state
of heroes to be an empty array this is
we're gonna stuff the returned from our
Ajax call to display on the page here
and then down here let's start writing
our JSX so we'll have an empty div and
inside of that a an unordered list of
heroes where we're gonna list out all of
the heroes those will go here and then
below that let's have an edit area area
perfect and then our edit form goes here
too so we'll just put some comments
there now let's go ahead and actually
get the heroes so that we can see them
listed out here so to do that and
actually before we can do that we need
to actually have some data so let's jump
over to our index file up here let's
modify this route just a little bit so
let's call this heroes and instead of
welcome to Express
let's just say const heroes and that's
going to be
arrey and then let's return one so an
hero has an ID a name so I'm gonna use
the tick because that's my favorite and
saying what's the tick saying spoon have
no idea why but that's what it is
if you've ever seen the tick before that
makes sense to you if not that's
complete nonsense so we'll send back our
heroes sorry and we want to do res.json
because we want to send back some JSON
cool let's restart the server and then
let's test this out make sure this works
so we'll jump over to the browser
remember Express is running on port 3001
so we can say api/heroes and we should
get back yep we do there's our JSON so
we're ready to consume this and display
it over here so let's do that we can hop
over to our hero's file and we can just
sort of list out our hero's here so what
we could do is say this don't state dot
hero's and map and map will loop over
our hero's object and we can work with
each individual hero in that collection
and then we could have we could have
just a list item that has the hero name
let's just do this for simplicity at the
moment and we'll start to build this out
more and then up here we need to
actually make our Ajax call so let's do
that I'm gonna use a component did mount
method so our components mounted it's
ready to go and we use the fetch API to
call /api/heroes which
returns a promise we get a result we'll
take that result turn it into JSON which
is a built-in method on fetch and that
because is yet another promise which has
our actual JSON in it and then in there
we can say this.setState and then
heroes is equal to our JSON okay so
we're making the API call we're turning
the result into JSON and they were
taking the JSON which is the array and
we're putting it into the state and then
we're looping over the state and
listening out the heroes let's go ahead
and add this component to our App.js
file since we're done here and let's go
ahead and put it in so we'll just say we
can say heroes and it'll automatically
get pulled in and imported up here at
the top cool alright now let's go back
and check out our app
tation and we're pulling in our items so
if we added another item it would show
down below this just go ahead and
continue to build this out and again we
don't want to put all of this here let's
actually make this into its own
component so we'll pull this out and I'm
gonna do a new file here and let's go
ahead and save it I'm just gonna call it
hero.js and we'll put it inside of
these source components here we'll just
save it right there then we need to pull
and react and we actually don't need
component we just need to React and this
is gonna be a stateless component and
we're gonna call it hero and we'll build
out the innards of this thing and we'll
have a list item and that list item will
contain a delete button so we can delete
the hero and it will contain an element
which has all the hero of properties on
it so we'll call that hero element and
inside of that we're gonna have a badge
which will display the ID and then we
can just copy option shift copy these
three rows down we can change this to a
name and we can change this to sink okay
and then up here we're gonna look at
props hero which we haven't created yet
the ID and then let's copy this in as
well and actually I should have done
that and then copy the line down would
have been a little bit faster here and
then we'll update the name and we'll
update the saying okay we're pretty much
ready to go here other than the fact
that we need to add in properties so
let's add in props up here otherwise we
won't be able to read them and we're
ready to use this component in our
hero's component let's let's go back and
we can just do return and we can say
hero we'll just let it pull in our hero
component automatically if you remember
it does that up at the top and then we
need to pass in that prop that hero's
props.hero right there and then
we'll just say it's equal to hero okay
if we do this and nothing else this
should work just fine so if we go back
over to our application and oops made a
little bit of a typo there so let's go
ahead and fix that so it's not props.hero
it's not props.name its
props.hero.name and props.hero.saying
and now we're looking a
whole lot better cool alright so the
next thing we need to do is add in the
ability to edit this item so that's what
we'll be doing next now what we want to
happen is when we click this item
when an edit form to show up and we want
this to be highlighted in the edit form
to contain the data from this item so
the first thing you need to do is
actually handle the select from this
item here so let's jump back over here
and I'm gonna go back to the heroes
component and in fact I'm gonna go let
me move this to the side and let's close
everything but this stay focused here
and what we need to do is we need to
pass in a basically a click event
handler for this hero so we click on a
hero we can handle the event so first
let's just add that event here and we'll
call it a handle select and then that's
going to receive a hero so when we click
on this hero element any hero element it
will handle the select and pass that
hero in to the select event and we also
need to go ahead and start with a
constructor here because we're gonna be
using events so we're gonna need to bind
the context of those events so bear with
me here let's carry it create a
constructor and then inside of that
we'll call super and then we'll just add
our state back on and then the next
thing we want to do is we want to bind
so we'll say this.handleSelect
equals this.handleSelect that bind
this and the reason why we do that is so
that inside of our function here this
has an actual value if we don't do the
bind up here then this will be unknown
and that is not a limitation of React
with a limitation of es6 classes just
the way it is so now when we handle this
the select what we want to do is we want
to go ahead and set a selected hero so
we're gonna do this.setState and
we're gonna do a selected hero and set
that to hero right here now once we've
set the selected hero we need to show
this edit area form which we haven't
created yet so let's do that now I'm
gonna open up a new file we'll save it
and we'll call it EditHero and we'll
put it in the source and the components
and let's give it the right file
extension there we go and then let's
import React and again this is going to
be a stateless component and it's gonna
be called EditHero ok and we're gonna
put our edit form here now actually
gonna copy this in because it's a little
bit lengthy ok so let's look at this
markup because there seems to be a lot
of it it's not that bad but let's go
through it we're gonna look at the
selected
and if there is a selected hero then
we're gonna return the enough markup to
create the Edit form if we scroll down
the else condition is to return an empty
div so we're gonna only gonna show the
Edit form when there is a hero selected
that's all that's doing and then we're
gonna loop to the Edit fields and on the
ID portion we're gonna look at the props
and say are we adding a hero this is a
boolean value that we have it created
yet
if so then allow the user to change the
ID if not then the ID will just be a
label and then as we move down the form
we're gonna have two more inputs one for
name and one for saying and the value
will be the selected hero name and
saying so we're bound to the selected
hero so when we change the selected hero
in this form the selected hero objects
going to change and that's what we're
gonna eventually pass back to the
database and then we're handling the on
change of inputs because this is how
forms work in React and these are
controlled inputs so we're actually
gonna have to handle the change of these
inputs so that we can make sure that our
selected hero changes along with those
inputs when they change so let's go
ahead and build this out in our heroes
file where we're actually going to
consume this edit hero component so
let's go back here and we'll add an edit
hero as we've done before many times and
then we need several different things
here the first thing we need here is
adding here adding here is a boolean
that tells us whether or not we're
adding a hero or editing a hero we're
gonna set that equal to this.state.addingHero and that doesn't exist
so let's go ahead and add that to our
initial state up here so we'll say
hero's and adding hero by default will
be false okay now the next thing that we
need to do is we need to pass in the
selected hero so we'll say selected hero
and that's going to be equal to this.state.selectedHero and if you
remember on our select event up here
we're actually setting that selected
hero to the hero when a hero is selected
now the next thing we need to do is we
need to handle the on change event of
those inputs so we're going to go ahead
and do on change and we're gonna have an event called this.handleChange
doesn't exist yet we'll create that in a
moment
we've also got an on save event in
form so we'll visit this.handleSave
and we've got a cancel event so on
cancel it equals this.handleCancel
okay let's go ahead and add these events
in up here and I'm just gonna go ahead
and so you don't have to watch me type
all this I'm just gonna go ahead and put
them in and I'll be right back with you
alright I've added those in here's all
the events and I just stubbed him out I
haven't coded anything so you didn't
miss anything and then of course they've
been added in down here so let's go
ahead and take a look at the application
still nothing is happening here and
that's because we're not handling the
click we haven't wired this up and we
need to do that in this hero component
so what we need to do is is pass in an
event here so we're gonna pass in the
let's see handle select is what we
called its arena say on select equals
handles select and now that we're
passing an onSelect prop we need to
do something with that prop so let's
go over to our heroes file our hero file
excuse me and let's go ahead and handle
that so in the list item each time we
have a click an on click in the list
item here we need to handle that and I'm
going to copy this in alright so on
click we're going to call the on select
from our props and we're gonna pass in
the currently selected hero and then the
other thing we that we need to do is we
need to set a class name so that we know
that this item when it's selected stays
highlighted so we'll do that and I'll
copy that in alright here we go on this
line we've got the class name and the
class looks at the hero and compares
that to the selected hero and if those
two things are the same then it applies
a selected class if they're not then
there is no class so one last thing over
on heroes we need to actually pass in
our selected hero because we're not
doing that yet so let's do selected hero
equals this.state.selectedHero
ok perfect
save that I'll get some formatting we're
looking good alright let's jump over to
our application and have a look oh and
we've got a silly area here this needs
to be this.handleSelect all right
and now if we click on one of these we
see the Edit form and the item stays
highlighted so the next thing we need to
do is wire up the cancel button because
that doesn't currently do anything so
let's go back and do that in this method
have to do is say this.setState and
we're gonna say the selected hero and
we're just gonna set it to null because
there's no longer a selected hero and
what that will do is reset the form so
if we click this now we say cancel and
we go back right this is no longer
highlighted and the form goes away
perfect now notice in our edit form we
can't actually edit this form so I can
type all day but these inputs are not
accepting that and that's because these
are controlled inputs so we need to
handle the change and we've already
specified that here on the on change
we've already got a method waiting to be
implemented here so let's do that in the
handleChange what we want to do is
first we want to get a reference to the
currently selected hero so we're going
to say let's selected hero equal this.state.selectedHero because the
things in the state are immutable means
you can't change them so in order to
change it we have to make a copy change
the copy and then put it back this is
generally considered a good thing
because it makes it so that you can't
change the state really without very
explicitly doing so and now we want to
change you that the name or the saying
of the selected hero based on which
input change but how do we know which
input change they're all calling this
same event well we're gonna pass in an
event object and that's already me and
passed in and then what we'll do is
we'll use array notation on the selected
hero so we look at the event target name
so if we come back over and look at our
event targets you can see that we have
our event target name is set to name and
name is set to saying here so when this
happens this will be selected hero dot
either saying or name depending on which
event got passed in and then we'll set
it to the value of the input so that's
how we can use one event to handle
multiple inputs and then the last thing
we want to do is just update the state
so this.state and selected hero
equals selected hero
okay now that we've done that let's go
back over to our application click on
one and now we can edit these fields
right and you can see that as I make
these changes
it makes the change over here on this
side as well all right so we're good
let's go ahead and implement the ability
to add a new item to do that we're gonna
need a button so let's add one in I've
got one ready to go and we need a handle
enable ad mode so I'm gonna add that in
okay so I've added that in both up top
here I've bound it and down below here's
the method and what we want to do is we
want to set the state here and we're
gonna set two things we're gonna set
adding Hiro because that's not true and
we're going to set the selected hero
to a default value so we're gonna give
it all empty strings all the way across
the board and the reason why we're doing
that is we're looking at this both of
these properties really so selected hero
if we go back over to the form see if we
all pass the selected hero we don't see
this form at all so we need to pass in a
selected hero otherwise we see nothing
because this is how we're controlling
the visibility of the form and that the
boolean just tells us we're in an edit
mode versus add mode so now we click on
the button we get the form here now it's
important to note that now that we've
set the adding hero state here to true
whenever we cancel out we need to make
sure that we put that state back so we
need to say adding hero here is false
now once we've done that we come back
over if we click we do not get to edit
the ID if we add a new hero we can edit
the ID which is exactly what we want so
handling all the different states them
you might have here okay now the last
thing we need to do is just implement
this delete and this save but really we
need to wire those up to the database in
order to do that so we're on to Cosmos
DB we're ready to rock and roll so let's
go ahead and do that
