Full Stack React & LoopBack

Full Stack React & LoopBack [4] – Add, Edit & Delete Meetups

hey guys welcome back in the last video we set up our meetups so that they display on the home page here and we can click on one and it's going to take us

to a details page we have our edit and delete links or buttons but they don't do anything just yet before we get to that what I want to do is make it so that we can actually add a meetup you'll

see that this goes to meetup /ad but it doesn't go anywhere because we haven't created that route yet we haven't created the forum yet so let's go ahead and do that now alright so I'm gonna

create a new component in my components folder and we're gonna call this add meetup is what did I do create a folder on a I mean delete that this is gonna be a new file called AB meetup j/s

all right so let's go ahead and copy we'll take one of these and copy it let's do that we'll do the meet the meetup details so we'll just copy that go to our add meetup paste that in and

let's see what are we gonna get rid of here we don't need the link on actually we'll keep the link there just in case well let's change the class name to add meetup and let's see we're actually not

gonna need a constructor there's not gonna be any state to this component we will need the you know we actually we won't need this let's just get rid of everything except for the render all

right and then the render I'm just gonna get rid of everything in there except for the the div and let's just put an h1 in here for now we'll just say add meetup okay we want to explore add

meetup and that's our component for the moment hey that rhymed that's our component for the moment so now let's go to our route okay which we

know is main je s and we're gonna bring in that add meet-up component so let's say import add meetup from dot slash add Meetup and then we're gonna add a route for it

so let's copy one of these go ahead and actually you know you want to make sure of this right here meetup / : ID since this is a placeholder you want to make sure that this is last because if we put

meetups / and then a placeholder in front or above of meetup / add this one is gonna hit get hit first when we go to meetups / add in the URL all right because it's gonna look at that ad and

it's gonna basically look at it as an ID so make sure that you put this above that one alright and this is gonna go to meetups / add and it's gonna go to the add meetup component alright so let's

see if I did that right we'll go ahead and save we already have a link in our sidebar add meetup which goes to that place and there we go add meetup so let's go ahead and add our forum so

we'll go back to the render here and let's see we're going to let me see let's let's actually put a back button just like we have on the details page so let's see just like we have here this BR

and then the link back I'm just gonna copy that and put that in the ad meetup right here and then right below the h1 we're gonna put in our form and this form is gonna have an on submit and this

on submit is gonna call a function called this dot on submit and then we just need to bind this so that we can use this inside of that function okay and if you guys have worked with

her react you've seen this before like I said I'm not gonna explain every little bit of react so inside the form here let's go ahead and we'll put in a div and we'll give it a class name my brac

angle brackets not working we'll give it a class name of input field okay so this is a materialized class okay input field and then in here we're going to have an input with a type of text it's also

going to have a name equal to name and it's gonna have a ref equal to name and this ref is how we're gonna grab on to it when we submit it now in your react components you want to make sure you you

end it with a slash like this okay or else you're gonna get an error so under that let's put a label so we'll say label now with JSX we can't do for like we would in regular HTML we actually

have to do HTML for just like we can't do class class we have to do class name so this will be for name label and we'll say name all right so let's save that see what it looks like what's this down

here cannot read property bind of undefined I do that wrong this start on submit bind wait a minute oh it's because we didn't actually create the function here on submit so let's just

add that real quick so we'll say on submit and for now let's just return I don't know one okay so that just gets rid of that error so we have our name field

that's good we're gonna need a city and an address as well so I'm gonna copy this whole div right here paste that in I'll paste it in one more time this one here is gonna be for city so let's

change the name let's change the ref and for and the actual text all right and then we're gonna do the same here this will be address all right and then we just need a submit button so we're gonna

put in an input here with the type of submit let's give it a value of save and let's give it a class name of BTN all right let's take a look and there we go there's our form so like I said it's

gonna submit to this function here now this is gonna take in an event parameter so we want to pass in something here I'm just gonna put e and then we want to prevent the default submit behavior so

we can do that with a dot prevent default and I'm sure you guys have seen this even with vanilla JavaScript all right and let's just do a console dot log just to test this out now we should

be able to access our the values of the field using the ref right here so for instance this is ref equals name so I should be able to save this dot refs okay plural dot name dot value all right

so let's save that and then we'll go and we'll type something in here and submit and you can see it's it's logging down here good now what we want to do here is we want to construct an object with

these field values so let's create a variable we'll call it new Meetup set it to an object and in here let's say name we'll set it to this dot reps dot name dot value and we'll do the same

for city and address so this would be city address all right so we'll get our our new meetup object and then what we're going to do is call another function called add meetup and then pass

in that new meetup value okay and we'll create that function up here okay and then we're gonna pass in here new meetup Y is e new meetup all right and then we'll test it out by just logging it all

right let's save and go ahead and try it out so meetup we'll just say Jas meetup and City Boston address for Main Street and we'll submit and there it is so we get an object with all of our fields now

what we want to do is use Axios to make a post request to our back-end ok we want to make a post request right here to slash meet-ups and that's gonna add it to our database so let's get rid of

this we already brought Axios in so we're gonna say Axios and i'm going to use the dot request all right and then inside here like shy which puts semicolon working with promises so this

is gonna be a dot then so we don't want to send me : so Axios requests now this is gonna take in a couple things it's gonna take in an object we want to specify a method which

is going to be post it's gonna be a post request we're gonna specify the URL that we want to submit to which is gonna be HTTP localhost 3000 slash API slash meet-ups

now I know that this is the same URL that we made a request to fetch them but when we made the request to fetch it was a get request this is a post requests okay so the URL can be the same it's

just the method that has to be different okay now since we're making a post request and adding data we need to send that data along so we're gonna say the data is going to be the new meetup that

we're passing in all right and then it's gonna give us a response back so we'll say dot then inside here will say response and what we want to do with this is nothing really we're just adding

it so let's just redirect and we can do that by saying this stock crops dot history dot push okay and we're able to access props dot history because of the router the router adds this history

object alright and then push is just basically going to direct us to wherever we want which is going to be the home page all right and then I'm gonna do just do a simple dot catch here as well

actually I'll go right here and say dot catch and we'll say error set that to console dot log error look if there is one okay so let's go ahead and try it so we'll save and we'll go to our form here

let's let's just refresh this and let's add let's see what do we got here angular and react so I think we need a view j/s meetup so it's a view j/s meetup city will say I don't know Newark

New Jersey address I'll say five five five Essex Street and save and there we go view j/s meetup like on it city Newark and address 555 Essex Street good so we can now add meetups

and if we go to our loopback Explorer and we go to get slash meet-ups and we click the try out there it is so we're now successfully adding data to our back-end from our front-end alright

so let's see how many what do we get for time here just seeing if let's see I guess we can move on to the delete because that's not gonna be too bad so yeah we'll take care of the delete so

let's see we'll go to our meetup details and we just have a button here it doesn't do anything so we need to add a an event to this button just like we did for the the forum so this is gonna be a

click event one second all right so yeah let me just put an on-click in here alright so on click and this is gonna equal actually we don't want quotes we want curly braces I'm gonna

say this dot on delete and then we need to just bind this alright and then let's go up here and let's go ahead and add that so I'll say on delete okay now for the ID the way that I'm

gonna get it is through the state okay because we already set the state when we did the get Meetup so we'll put that in a variable here we'll say let meet up ID equals this dot

state dot details dot ID and then let's do an Axios that I bring an act cost I did I used it up here so we can do Axios dot delete and we want to pass in here some

backticks and we want to do HTTP localhost 3000 slash API slash meet-ups slash and then the meetup ID which we can put in with this syntax here okay and this here is not part the syntax is

money sign this is not part of react this is just es6 if we use a template literal or template string with these backticks we can insert variables with that okay so that that has nothing to do

with react alright you could just as well concatenate it with a plus sign and just use quotes instead of backticks alright now this is gonna give us a response so get rid of the semicolon I

always do that and then we'll say dot then and this is gonna give us a response oops alright and then in here we just want to redirect so this start props dot history

dot push and let's go to the home page or the meetups page and then we'll do a dot catch and error console dot up console dot log error okay so that should work let's save it just there we

go alright so let's actually just add a dummy meetup to delete alright so we don't want that and click delete and there it goes so we can now fetch meetup so we can

view the details we can add them and we can delete them the only thing we have left to do is we want to be able to edit them now we are doing pretty good on time here so I think that will just take

care of that as well alright now we're gonna need an edit component just like we have an ADD component it's going to be very similar to the add it's gonna be the same form except

we want to pre-fill it so it's gonna be basically a mix of the add component and the details component so let's go ahead let's create that file under components we'll call it edit meetup is and let's

copy the add meetup component and then paste that into the edit alright and then let's see what we're gonna need here let's keep all that stuff we'll change it excuse me we'll change this to

edit we are gonna need a constructor and you know what I'm gonna do is just get rid of everything except the render all right and then for the render let's do this before I forget to so this will be

export edit meetup actually let's just leave it as this for now we'll just change the title here to edit because I just want to add the route real quick alright so let's go to our main J s

that's where our routes are we're gonna bring in edit Meetup alright and the route for this I'm gonna copy that put it here it's gonna be meetup / edit / ID and then it's gonna call edit meetup

alright so let's try that out now we already have an edit button that should go to the right place or does it yeah meetup / edit / id looks like we're getting an error down here let's see

cannot read property bind of undefined so that the reason for that is because I deleted the on submit function yeah I deleted the on submit function which I probably shouldn't have so let's let's

get that back from the add meetup page this right here grab that that and here and then that's pretty much going to be the same we're gonna grab the values except we're gonna call

a function called edit meetup instead of add so if we save that it should now load there we go now we want to bring in the current Meetup we don't want this to be a blank form

obviously so to do that we're going to create another function called get meetup details actually you know what I'll do is let's go to the actual meetup details page and yeah let's grab this

this get meetup right here and it'll bring that to edit meetup and paste that in alright except we'll call it get meetup details alright now we're getting the ID from the URL from right here so

we're getting it the same way using the match dot params alright and then the request is going to be the same request a get request to the API meetups and then the ID and then in the response we

want to set the state except we're not going to we're not going to have details we're gonna have each value as a state value so we'll have the ID the name the city and the address so before we get

into this let's actually just yeah let's delete that for now and then we'll go up and create a constructor look create a constructor here and this constructor is going to take in props

I'll give it props for being such a cool constructor and then super props and then we're gonna say this dot state equals an object equals an object and then it's gonna have an ID which are

gonna set to nothing we're gonna set all of these initially to nothing so name city and not state address okay and then let's see we're going to we're going to

go into our dot then this should be tabbed over and inside here we're going to set our state so we're gonna say this thought set state alright we're fetching from this URL and

then we're getting our response and then what we'll do is we'll set an object which will be our state and we want to set ID to this dot response dot data dot ID should be a comma and we're going to

do the same for the other two the other three so having named this will be response dot data dot name city and address all right so that'll set the state to

each one of those and then let's go ahead and put a comma here with an arrow function and let's just console.log the state now this isn't going to be called automatically so what we'll do is use

our component will mount lifecycle function and we'll call this dot get meetup details save let's go over here cannot read property data of undefined so let's see what the hell happened here

33 that's not right edit meetup call 25 so it's talking about this so this dot o it shouldn't be this why'd I put this I should just be response because we're getting it from the return from the

promise from this request right here so let's save that all right there we go so now we're getting this information here which is what we want to insert into this form all right so what we can do is

go down to the render and go into the input and put a value okay so value equals not that value equals this dot state dot name okay each Val each field has its own state value now so that's

gonna be the name we'll go ahead and copy that and then for the city we'll say this dot state dot city and then we have the address which will be this dot state dot address

all right let's save and see what we get all right so now the pro the form is filled now if I go and I try to type something in to change this it's not gonna work and this is this is a

protected form this is something that really confused the the absolute crap out of me I don't want to curse because YouTube is being insane about cursing lately they're gonna demonetised my

video if I say that the S word but anyways if I try to change this it's not gonna work so what I need to do is add an on change event to each of these fields alright so we're gonna add in the

input we're gonna say on change okay so on change equals and we'll save this dot now if it was just one field like we could do you know on name change or even if we want we had two fields we could do

on name change on city change but when you start to have a lot of fields you don't want to do that you want to have just one event for all of your fields so I'm just gonna create one function

called handle input change so let's go ahead and do that we'll so handle input change all right and then we need to do dot bind this because we want to be able to use this inside of this method here

now this is one way to do it this is how we've been doing it as you can see right here with submit but another thing we could do is go up into the constructor just to show you if we go in the

constructor under the state and just say this dot handle input change equals this dot handle input change dot find this and then we don't have to add it down below to all three all right so now this

should be just fine so what we'll do is copy this the on change and then just add that to the other inputs as well so all of that and this here as well okay so now we'll save that and we're

gonna get an error over here at least I think we're gonna what's going on because we don't have that handle change function so let's go ahead and create that we'll go right here and we'll say

handle chain input change now this is going to take in an event parameter this is how we're gonna figure out what actual input is being changed so we'll create a variable called target and

we'll set it to e dot target and then let's create a variable called value and we'll set that to target dot value this is kind of a long way of doing it you can get the value by e dot target dot

value but we're kind of breaking it up into variables all right and then we want to get the name all right so basically whatever is in this right here this name attribute so it'll be name

city or address so we're gonna say constant name equals target dot name okay and then we want to set the state we want to set whatever is for instance whatever we're typing in let's say the

city field whatever we're typing in each time we type it's gonna fire this event off and it's gonna add that to the state the state the city that's inside of the state so we need to do just like we've

done before of set state okay and then we're just gonna put in here object and we want to just put some brackets here because this is like this is basically like a variable or a placeholder and we

want to set that to the value okay whatever this is alright this is a an easier way of doing it than adding a separate change handler for each each input all right

I haven't lost you guys so let's go ahead and save and now it should work we should be able to edit okay so now we can actually edit our fields which is good and it's changing the state each

one each time we type it's calling this function okay so now that we can do that we want to handle the submit ok go so it gets submitted and then it's gonna call edit Meetup

alright so that's that should be the last method that we need to create so let's go ahead and do that so I'll put this let's see where should we put this we'll put it right above the on submit

I'll say edit meetup and then this is gonna take in the new Meetup alright and this is gonna be almost identical to the add meetup so let's go over there let's go to add meetup j/s

and let's take a look at this function here let's take everything inside of it put it in here now the one thing that we need more than absolutely there's a couple things there's basically two

things we need to do here one we need to switch this to a put request since we're updating we want to go to I'll just show you on the back end here we want to go right here put slash meet-ups since

we're updating now it needs to know which one to update so we need to add that to the URL we need to add that to the end here to the route so let's change this to a back tick so that we

can add a variable and we'll say slash and then remember that the ID is stored in the state so we can get it from there so we'll say this starts state dot ID alright and let's give it a shot so

we'll save let's go back to meetups let's reload this this is the view j/s meetup I'm gonna go ahead and change the title here to look let's change it to view dot J s meetup

and will change the city to let's say I don't know let's sail in and save and now view dot J s meet up and now it's in Lin alright so we now have full crud functionality in our application so are

now at the point that I showed you in the beginning all right now there's there's one thing we have left to do and that is to basically compile our client source to the client folder that's in

the loopback the loopback server all right so we're gonna stop the video here and then we're gonna do that in the next one hey guys if you've been watching my videos for a while and you really like

what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for

discounts for you to me courses personal support and more so check out the patreon link in the description below for more info

In this video we will create components and functionality to add, edit and delete meetups from the backend LoopBack server

CODE: Full app code
https://github.com/bradtraversy/meetupz

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia