FULLSTACK REACT GRAPHQL TYPESCRIPT TUTORIAL

[Music] what's up youtube and welcome to this full stack course in this course we are going to be going over react and graphql but also we got some postgres in there we got some css uh what else we got we got prisma we got a few different things so anyways it's a pretty big course so i just wanted to go over what we will be doing in building uh in this course so this is the app right here um so this is a landing page we got to sign up here you can go ahead and do that oh by the way it's a twitter clone with uh not quite all the functionality but that is kind of what we're building anyways so you can sign up you can log in here darwin test.com and we got a password and we can log in here i don't know what that's about anyways okay so this is kind of what our app is gonna look like our finished app uh we got our logo down here we got our home we got our profile uh we can tweet something here test tweet one and we can press tweet and it's gonna come down to the bottom here uh for our test tweet we can like tweets so if we come in here these have already been liked as you can see we can click uh like there and we can uh press that to unlike it so that functionality works nice we've got another tweet button over here we can reply here like that and we can also see the many replies if on an individual tweet so that's good our right side over here we got a trending bar and this is just by the number of likes and then we got a profile over here we can come and edit our profile uh edit our image here image uploading and all that is uh included in this course uh so that is good what else we got uh here is just our uh liked tweets here uh and then we have let's see someone else might have a following here oh we can come in and actually follow users so we can follow and unfollow the user just like that and then if we go to our profile it shows we're following one and the person we are following um so i'm probably missing a few things there but that's kind of the basic functionality that we have for this course um so yeah let's get right into it hopefully you like it [Music] for our back end it's gonna be node.js with graphql we're gonna use prisma kind of as an orm our database is going to be postgres here and we're going to be using typescript as well all right and then for our front end we are going to be using react apollo client to connect to our database uh sorry to our back end and again uh typescript on the front so this is what we're gonna be doing and we're gonna be doing it somewhat from scratch so uh yeah it should be kind of a long process but hopefully it is helpful so let's uh get right into it all right so we're going to go ahead in this video we're going to be doing kind of the setup of the project so the first thing we're going to want to do is to come over to here and this is just kind of a bunch of different prisma examples that can kind of give us a starter uh kind of a starter code base to work with so you can see here they're getting updated pretty pretty regularly um and there's just a bunch of them so the one we're gonna be using is we're just going to go and use this graphql auth so this will give us the ability to sign in with a username and password so either you can go ahead and google that or um come to this url up here and what we're going to want to do right now is to get the code so we can uh get the https here and we want to copy this over so go ahead do that and then you want to come over to some sort of terminal here i got mine here all right so the first thing we want to do is cd into anywhere that you want to store this directory so for me that's desktop so i'm going to do this and then i'm going to make a new directory uh with mkder and i am going to call it what tweet twitter we'll call it twitter clone and we're gonna run that and then we're gonna cd into twitter clone well let's open it up in our um vs code where we want to do the majority of our work here all right so this is where we're going to be doing most of our work so we're going to come in here and open up the integrated terminal here uh we don't need that and we can just bump this size up a little bit so you can see a little bit better and we want to go ahead and go get clone and then we want to paste in these examples and it's going to clone in for us all right so once that is done running we are good now if we look in this folder we have all these different ones and uh we don't actually need all these different ones so let's go into the typescript one that we're going to be using and into our graphql auth and we can just pull that out uh bring it out we'll move it boom that's all good and then you can see that that is here so we want to let's actually bring that out again here let's just pull it out to the main uh root folder so now it's up here so that's good and then we can go ahead and we can just delete the prism examples folder so let's do that okay so now we have all this so let's rename this actually um to we're gonna call it server and then we're gonna have our app folder so that should be good so they come down to the bottom here and we're gonna cd into server boom and then we're just gonna run uh npm install npm i okay so that is good now we got our node modules and we got a ts config down here which is going to be for our typescript which is great and then we got our src and we got type so they gave us also a few queries and what not rd in there and then our mutations so we have kind of a nice base right here to work with which is uh helpful um so this is how this is gonna work so let's come in we're in our server and all we have to do is run i believe npm start nope npm run dev okay and now you can see we should if we control our command click rather it should bring up our graphql playground boom so that's kind of nice and you can see on the side here if we bump that up a little bit uh i got our docks and we have a few things already set up for us so this is kind of neat uh we already have some sort of back end running and it seems to be working this is just from before when i was testing it out and then we have our schema here so that is all good so that is in a nutshell uh our back end setup now right now it's using s uh sequel light and we are gonna switch that to postgres but i think we'll probably be doing that in the next video but let's go ahead and finish up with um our uh our front end here so let's get that going so what we're going to want to do um we can add type script we're going to use create react app but we can also add typescript just with a a template here so i'm going to use yarn for that so i'm going to copy that over and then come back over to our um code here i'm going to open up a new window here and we are going to say and paste that in so yarn create react app and then in here i'm going to come in and i'm going to call this we'll go web all right so that is all done installing all our dependencies are done and we can see in this web folder here we have our uh front-end react app set up with typescript as you can see with the ts config here if we look in here we just have a bunch of tsx files and uh yeah this is kind of the base of our app so let's give it a go here and we are just gonna say npm or yarn start i think you can use npm or yarn doesn't matter uh that is not found but that's because we got a cd into our what do we call a web and then we'll go yarn start all right so now we have this up and running at local host 3000 so that is good now the back end and the front end aren't connected at all yet um and the back end's not even connected to a database so we're going to have to fix all that but uh yeah that's kind of the basic setup that we have for this project so from there it's just kind of adding as we go so that's going to be it for this first video we should be releasing these videos uh once or twice a week and just kind of see as we go so hopefully uh you like the video and um come back next time we're gonna uh connect the back end to a database a postgres database all right thanks for watching [Music] all right so welcome back and in this video we are going to be going over how to connect our prisma backend to a database and we're going to be using postgres here and if you want to check out this article it kind of runs you through it but we're going to do it also so you'll see how it works all right let's get into it so the first thing we got to do here is actually create our database and we are going to do that using um pg admin now you can do this kind of in the terminal um or however you want to do it but i find just a gooey a little bit uh easier so go ahead and uh download postgres get that all set up and then come back here either with pg admin or in your terminal or however else you might be doing it all right so we're going to come in here and for our database we're going to create a new database and we are going to call this twitter clone and i'm the owner here and we're not going to have a password or anything so let's just go ahead and save that and it go ahead went ahead and created that and all our information will be in our schemas here once we do that but right now i think that's all we got to do all right so let's get this connected here so let's come into our server file here and we have this prisma folder here so we want to come in here and we can create a new file and call that dot env and this is going to be where we store our environmental variables okay and then if we come into our schema.prisma you can see we have a sql lite hooked up here now we don't want that because we want to use postgres so we're going to come over to here and we can actually just copy this from this article here or you can just copy what i write and then come over to here and paste that in and this is how we're going to set up our postgres so we're going to have our environmental variable so we can copy that database url and it's our provider is going to be postgres and that's going to be our database let's come over and save that boom and then we'll come back over here and we're going to paste this in now what we want to do is uh give this our string our connection string so let's go that is equal to open up some code quotes rather postgres uh regress ql and then we're gonna have a colon slash slash the the user and we're gonna say at localhost and that's gonna be five four three two and then slash twitter dash clone so we don't have a password or anything here so for us that's fine oh make sure you uh close out your quotes there so let's go through this we're going to be using postgres as our database the user is me there this is going to be our port that we're on and this is gonna be the name of our database now if you have a password or something you're gonna need to add that too that's all in that article if you want to check it out so that's basically all the setup we need to connect our database now there's a few things we have to run here to get things going so the first thing we're going to do is we want to migrate our database but before that we want to create our generate our schema here so we can cd into our server make sure you're in the server folder and you're gonna run npx uh prisma and it's gonna be generate and you can see here that uh that was successful so that's great and then what we want to do there's a couple other commands we can run to automatically migrate our database so one of them is going to be mpx prisma migrate and we're going to say save dash dash experimental because it's still in the experimental stages but seems to work pretty good and then it's going to ask you to name your migration so we'll just say first and boom that worked perfectly so we have uh our database we have our model um for post we have our model for user so that seems to be working good and then we can just copy this over and if we want to actually push it up which is we uh what we do want to do we're going to say mpx prisma migrate up experimental and hopefully this works too and that looks like it was also successful here so now we want to check and make sure that worked and everything's connected so if i come to my uh pg admin here and i uh maybe refresh here and then let's look into our schema and come down to our where to our tables and you can see that we have a post table and a user table and this shows also our migration so that is great now we are connected to a database so pretty easy pretty quick and uh pretty cool in my opinion so that is good um that's going to be it for this video and in the next one we're going to start creating our uh sorry in the next one we're going to start connecting our front end to uh our back end with a polar client all right thanks for watching [Music] all right welcome back so in the last video we set up our database and in this one we're going to be connecting our front and back ends together now how are we going to do that you might ask well we are going to be doing that using apollo client and we can copy this over and uh yeah all we're going to be installing here is apollo client and graphql and that will give us um something like this here so let's come back over here to our app running and i got my front end and my back end running but that doesn't really matter right now so let's open up a new window here and let's go and cd into our uh web folder and i'm gonna go yarn add and then paste in those things and let that run all right so now most of the work we're going to do is all going to be in the web folder i think for this video so you can close up your server there and look in our src and we're going to have an app.tsx here and this is our main file we've gone over that i believe before but we do not need anything in here i don't believe so let's actually just get rid of all this and we can just delete that and we can we'll allow that there we can get rid of this here delete that and then we're gonna come in here we can get rid of this too actually we don't need that logo um and that's all for that so let's just uh let's add in a div here and uh we'll just say uh test for now and just save that make sure that works we got our app running and that's still working there so what we want to do here is create our clients so we're going to come up here and we're going to go const and we're going to say clients and then that's going to be equal to new and it's going to say apollo client there and then we're going to open up some brackets here and create an object and in this object we're going to have a uri which is going to be the url of our backend so for us um and we'll probably move this into a dot env file in a few in the future but uh we just want to show you how to get this set up here all right so for us that is http and we got our autocomplete right there and we're going to say localhost 4000 which is the port that we have this running on and then it's going to take a second option here and that's going to be the cache and there's a few different options for this but this is the one i've seen most and uh i think most people use and that's going to be new in what is it called memory cache memory cache i'm gonna call that there now we have to import uh a bunch of this stuff here so let's come up to the top and we're gonna say import and open up some brackets we're gonna say apollo client there we go apollo provider and then in memory cache as well okay and that is gonna be from and all that is from at apollo uh slash client all right so that is all good now we want to make use of this so how we do that is we're going to wrap this entire thing in uh the provider that we're bringing in right here so let's come down here and we can uh wrap this here in a apollo provider there and close that off and bring that down and we're going to wrap that entire thing here so what we have to do is add the client here and that is going to be equal to client all right and that takes care of that we can go ahead and save that and now we have access to our back end from our front end so that is great but we want to make sure this actually works so let's go ahead and let's come in here and we're going to create a new folder and we're going to call it components good and inside here we want to create a new file and we're just going to do let's just test this out so let's just go users.tsx okay and uh we'll just delete this file after but we just want to make sure that this is uh working for us so let's come up to the top here and we are gonna go what so let's come up to the top here and let's create a react functional component here and that's just a snippet i have i think uh yeah there's plenty of libraries for snippets but you can look one up if you want and that just creates a react functional component for us so that is good um and when we create these users we actually need that to be uh we want that to be uh an upper case let's rename this to users with a capital u okay and this too okay good and then up here we want to bring in a couple things so let's go import and we're going to import gql which is our graphql and then we're going to bring in use query and that is going to be from again that apollo library at apollo uh what is it applause client here and that's uh that library's got kind of everything we need to set that up all right cool now we want to um create our first query so how are we going to do that we're going to come above outside of our function here so come down give yourself a little bit of space here and let's go const and we're going to say users underscore query and this is just uh all uppercase by convention but you don't necessarily have to do it that way and then we're going to go equals gql and then we're gonna open up some um backticks here not regular uh quotes but backticks and then below here we're gonna write the word query and again we're just gonna say user's query again this doesn't have to be capitalized that's just kind of a personal choice and then in here we're going to say users and that is going to be id and that is going to be name now this doesn't actually exist yet so we have to go and create this in our back end so maybe we should go and do that first um before we continue here so uh close out your uh backticks also okay so that is good so let's come and open up our server here and we are gonna go into our query so they are in our src here and we're going to say where types and query so in here all right so we see we have a user query here but we don't have any users queries so we just want to be able to get all the users so what we're going to do here is we're just going to copy this one up here and actually let's go yeah we'll copy this down so now we're going to transform this into users so we want to have uh this t.list.field and now that's going to be called um we're going to call it users here and then in here it's not going to be type post but it's going to type user okay and then that's gonna resolve that's good and then it's gonna return uh prisma dot user dot find many and then we don't need to call that with anything so let's come here and we're just gonna call that um with no arguments or object there okay so that is all we need to do for this server again so let's uh get rid of the query here and come back in here all right so let's start uh displaying these users here so we're gonna come in here into our function and up here and we're gonna go const and we are gonna go like this and we're gonna have three states so we're gonna have loading loading state we're gonna have an error state and we are gonna have the data that we get back from uh this query here let's give ourselves a little more room okay so those are the three states we're gonna have and that's gonna come from the use query that we brought in okay and then inside here we're gonna pass in our users uh underscore uh query so that is all we need to do for that let's come down below and we're going to go if loading then we are going to return and we're just going to return right now a loading state so let's just say loading and then we're going to say if there's an error we're just going to return we'll turn we'll return the actual error message so air dot message okay so that's great there now let's come down and in the actual thing here in the the meat of our component here let's come in and we're just going to map through our users and we'll display them so let's open up some braces here and let's go data.users and then we'll go dot map and we'll say user and then we'll do an arrow function here and we will say uh we want a p tag and then inside the speed tag we're just gonna say user dot name and that'll be the name of our users make sure we close off uh our brackets there so let's come in anyways and save that that'll reformat for us nicely and we can come back to the app and let's actually bring this in here all right so where we have our test let's bring in our users component here and we can auto import that there and that should work nicely and there we go so let's check it out see if that works who knows probably made some errors but uh yeah all right so it looks like typescript has a bit of an issue with this i thought we might be able to get away with it but typescript doesn't have any of that so we gotta i guess do our first types of lesson here so come down here and this is gonna be uh an interface here we're basically just gonna come in here and type this so that this works here so i'm just gonna give us a little more room here okay so this is what's called an interface and we're gonna call it you gotta name it so it's gonna be our user interface and all that we have returning here is a name property so that's what we're gonna write in here and then you got to give that a type and that is going to be of type string okay so then we come down here right now this is complaining about uh the user have uh having an implicit any type so we want to change that with this so it knows what it's going to return and all we have to do here is go colon and then user and that'll fix that error so if we go ahead and save that now and we come back over to here we can see we are all connected that's a little bit uh there we go you can see these i guess are a couple users i created here and if you want to go ahead and create one i don't know if we did this yet but you can do something like this where you have a mutation with a sign up um with these fields or whatnot um okay so that seems to be working good and looks like we're all connected to our uh from our front and our back end so that's good and that's gonna be it for this video um the next one i think we'll probably start building out uh our back end schema a little bit um and maybe think about routing a little on the front end we'll we'll see what we're doing but uh stay tuned and uh come back for the next one [Music] all right so let's talk routing here so this is going to be kind of vitally important to almost any application you might be building and in react uh maybe the most famous railway we do uh routing is with a package called react router here so this is the documentation here and in react it's kind of interesting because we're not actually routing per se react router kind of fakes it and what we're really doing is just kind of switching out components all right so let's come over here and we're going to copy over this react router dom here and there's another package for native and stuff so you want to make sure you're getting the react router dom so then we're going to come back over here and we are just going to open up a new window and make sure we're seated into our web folder so cd into that and we're just going to go yarn add and paste that in and let it run all right so once that's all done and installed we are going to move over to our um our app.tsx over here so come over here and let's just minimize this so we can get a little more room here and this is what we have had up until this point and now we're going to add some routing this is where we're going to do all of our routing in this file as well as our authentication and whatnot so how are we going to do this well first let's go ahead and we got to bring in a few things here so let's come up to the top and we're going to go import and we're gonna open up some braces here and we're gonna have a few things so we're gonna have browser router we are going to have oh we'll call that uh we're gonna alias that so as router um and then the next thing we need is route and the last thing we want to do is switch and all of those are going to come from what uh react router dom here let's come down and this is where we're just going to get rid of everything right now i guess so we can do that let's come down here and just delete all that and then come up here and in here we're first going to add a router here and then this is where we're going to do everything inside of here so this has to wrap our entire router components here and then we're going to come in here and we're going to go switch so come in here and go route and our first route we're going to go path and that's going to be where it's directed to um and we're just going to go slash this is going to be our home route here and we can close that off and then inside here is where we're going to add our component so remember before in our components we created this users.tsx so why don't we just use that for now so we're going to bring that in and then that's all we need to do for that so if we go ahead and save this now our initial route that we load to it's going to show the user so let's come back over and i have my app running here and we got some sort of error here all right so if we look in here we can see that we don't have the types and that's giving us a bit of a typescript error here so we can come back in here again and we can go yarn add and we just want to pass in that at types react router dom alright so that seemed to work that took care of our type error and often that's just what you have to do if a package uh isn't typed already um so that is fine let's go ahead and control uh get rid of that all right so now if we come over here we'll see we're getting this working fine again so this is again just our home route our slash route so that is great so now we want to come back over here and we want to add another kind of route so let's first come over and create a new component here and we're just going to call this we'll go landing.tsx and this will be kind of a landing page route that we're going to do so let's come up to the top and we can go uh rfc and that's going to create a react functional component um and we can go like this and then inside here let's just do an h1 and then we'll just say landing and that should be all we need for that okay and then we want to come back over here and this is where we're gonna add in our landing route now let's come down below here just to start with and show you how this is gonna work so let's go route and then we're gonna go that's gonna have a path and that's gonna be equal to uh we'll go slash landing okay and then we'll close this off here and come down in here and now we're gonna uh add our landing uh component which we should auto uh bring in here there we go auto import that and now we have a landing route now i want to show you guys something here so we're going to come over back over uh to here and we're going to go slash landing now this should take us to our landing but it doesn't it keeps us to the same thing so why is that doing that well let me tell you so it's doing that because this is hitting the first route that we're going so it's hitting slash and it's navigating to that and that's the switch statement here so in order to navigate that we can either go like this and add this route last and if we save that and come back over and now we're getting our landing at slash landing so that's one way to do it so another way that we can do that is we can add the kind of keyword here exact and then we can bring this below here and then that should also uh fix our issue for us because it's only gonna go to that one exact route so again even though it's below it's all still going to the slash landing okay so that's kind of the two ways you can do that um i think we're just for now we might have to switch it back we'll probably add some exact routes later but for now let's just bring this back to where it was and go ahead and save that all right so that's kind of an intro to routing as we go along create components we're going to have different routes and we'll be adding them to uh to this component here but i think that's a good intro um the next one we're gonna maybe add our authentication to our front end um yeah so stay tuned for that [Music] all right welcome back so in the last video we handled routing um using react router in our app and in this one we're going to want to add a login and sign up so kind of uh some basic authentication so let's take a look at our mutation here and this is our mutation type here and this is our sign up mutation right here so let's come down and take a look at what we're doing so we're going to pass in a name and email and a password which is going to be hashed here um this is what we're getting we're going to get back the token which is going to be signed using jwt and our app secret and also our user and then what we do with this token is up to us so i thought of a few different ways we might want to do this so in the past i've used cookies and stuff but i haven't done uh much local storage for this so i thought let's go ahead and try that out so that's what we're going to be doing for this um so let's get right into the actual uh coding here so let's come back over to our app here um and we are actually gonna need to handle um our client our apollo client a little bit differently in order to make sure we are getting the token so uh let's go ahead and uh change a few things up so we're gonna need to add one package here so come down i have my servers running here but we are gonna go and cd into our web right here and then we're gonna go yarn ad and we're gonna add a package and that package is called apollo link context okay and you're going to see why we're going to need this but it's going to be used to kind of create the context that we're going to use to get that token and pass it along for each each request so otherwise we're going to be getting a chord there and stuff if we continue with this here so let's just go ahead that looks like it's done so let's go ahead and get rid of this right here then we can come down and let's uh kind of start over again so the first thing we're going to want to do is we're going to want to bring that in so let's come here i'm going to go import and that's going to be called set context there and that's going to be from um this package here and it is going to be called paulo dash link context there great and then we are going to want to do a few things right here all right so the first thing we're going to do here is come and go const and we're going to go http link and this is going to be to our url so it's going to go equal new http link and that's going to be auto imported so that's coming from our apollo client right there which is good and then we're going to come in here and we're going to create an object here we're going to have a uri okay and that's just going to be our uh http colon backslash backslash local hosts uh 4000 so that's our previous url that we are using all right so once we have that we're going to come down here and we're going to create our off link all right so let's go const auth link and that's going to be equal to set set context there and then we're going to have an async function and that is going to um have a request and then we're going to pass in the headers here because we want to pass along that token into our headers with every single request in order to determine if we're authenticated if we're not authenticated that sort of thing and then we're just going to go const token and this is where we're going to get our from our local storage right all right so let's go const token there and that's going to be equal to local storage dot get item and we're going to pass and we're just going to call it token in our local storage we're going to store it as token here okay so that's good and then come down below here and we're gonna go return and again we wanna return and we're gonna uh spread in here our headers and then we're gonna go headers and open this up and then here we're gonna go authorization and then we're gonna go token and if there's a token we're gonna go some backticks and we're gonna go bare and then some curly braces passing token here and then if there's not we're just gonna uh set it to null there okay so let's save that it'll reformat a bit okay i think that's looking okay let's get rid of this down here all right so that's looking good now below this we also need to create our actual client still so let's go const and we'll go link and that is going to be equal to the auth uh link that we created up there and then we're gonna concat onto there we're gonna the http link okay and then we're gonna go const client and finally here uh lowercase client and finally here we're gonna actually create our client so new apollo client okay and then open up our object here and we're gonna go link here and we're gonna pass in uh actually we don't need to pass in anything there and we're gonna have a cache and then again we're just gonna pass in like what we had before our uh in uh memory cache there and called that all right so we got a little error here oh it must have erased make sure we auto import that now we're getting a couple errors here these are looking like typescript errors uh so i'm not too sure how well uh that's being typed but let's just cast that as any for now that should take care of that and we'll just go link uh we'll go link as any okay that should take care of those errors okay so obviously a little more complex than we had before but this is gonna be necessary in order to uh set our headers which we need to do in order to tell if we're authenticated or not so that's gonna be necessary but uh yeah that's about it so let's get out of here for now and then we're gonna come in let's actually create our uh we'll go our sign up first but first actually let's go in here and let's create a new folder and we're going to structure this as pages okay and then inside of the pages where we're going to want to actually do our signup component.tsx so to start off give us some structure let's come into our components and let's just copy over our users component that we have and we'll just adjust accordingly because there will be a few things similar that we need so we're going to come over here and let's get rid of this and let's go use mutation that's what we're going to need for that then come down here and we're going to use a form called a form component library called formic and if we come over to here you'll see this is a library that we're going to use um it's just going to handle some validation for us stuff like that so yeah i think that will be useful and that's what we're gonna do because it's uh my video all right so let's come down here open up our terminal again and let's go yarn install formic and then we also want a library called yup which is going to be helpful for our form validation so let's run those two not yarn install yarn add all right that is good and i think what we actually might need to is the types for uh yeah performance written in typescript so that'll be fine but yup um i don't think is so yarn ad dash d at types slash yup should do it all right so that is good let's get that out of here and now we can actually start with our form so come below here it's a little room and import some stuff here so we're going to import first a bunch of stuff from formic so we're going to go error message we're going to go uh field we're gonna go form and we are gonna go for mc okay and all that's gonna be from uh formic good and then below that we are gonna also bring in uh we'll just bring it in now but uh actually yep so import uh we'll go everything as yup and that's gonna be from yep okay and the last thing we want to do is we're going to want to redirect after we log in so we can do that by going import and we can import use history and this is just from react router dom and that is yeah like i said from uh react router dom right there all right so now this is being used right now so now we've done queries like this before but we are going to change this to a mutation so let's actually let's just get rid of all this right now we don't need any of this get it out of there we're going to change this here to uh sign up and actually like to add uh this stuff at the bottom here so let's go export default uh sign up um i don't know it's just a style choice there but whatever you choose all right so we have our sign up here now let's go ahead and actually create our mutation so we're gonna go const and we'll go sign up uh under s nope i'll sign up underscore mutation and that's going to be equal to gql and then we do our backticks here and we're going to go mutation and that's going to be called sign up as you can see in our mutations that we had before and then we're going to pass in the values so dollar sign names our first one and that's going gonna be string and that is also going to be uh maybe i don't think it's required in our back end but uh we'll see anyways uh then email and that's gonna be a string and that's going to be required and then we're going to have a password password and that's going to be also a string and that is also going to be required all right come down here we'll call sign up here and then we're going to get the name and that's going to be the name we're going to get the email and that's going to be the email and we are gonna get the password and that's gonna be the password so that stuff's gonna get pretty repetitive i think um so you get used to it but this is gonna be a structure for basically any mutation that we want to do going forward all right come in here open this up and what do we want to get back well all we want to get back is this token which then we're going to take here and we're going to set into our local storage okay so that's basically all that is make sure we close off our back ticks there and that is what we have so how are we going to do this well let's come and get our a little bit of structure here all right so let's come in here and actually get rid of all this here um okay so that's good so the first thing let's just give us a little bit of a title here so we got a h1 and we're just going to call that sign up okay then below that we're going to go formic here and in this we're going to have a bunch of different values so come down here and the first thing we want to pass in is an initial values okay and that's going to be equal to initial values which we're going to create above so don't worry about that yet and then we're also going to want a validation schema so we can uh validate whether the input we're assigning is actually correct or not um so validation uh schema okay and that is going to be equal to again same thing validation schema here and then give us a little room here and we're going to want to come in and we're going to have an on submit here so on submit and then this is going to be equal to an async function here and then we're going to pass in the values that's the values of these forms here and we're gonna have a set submitting okay and come over here and do an arrow function and open up some brackets here and then on our in our on submit here we're going to start by setting uh submitting so set submitting and we're going to set that to true and then we're gonna go const and we're gonna have a response okay and that's gonna be equal to await and we're gonna call sign up and in this sign up we're going to pass um our variables from our actual form and that's just going to be the values so the signup is what we're actually calling this is our mutation and we're passing in the values that we're getting from this formic form here okay so once that's gonna be done we're gonna come down here and we'll go local storage dot set item and this is where we're going to actually set our item so we want to we say we're going to call it token here and then we're going to get the response dot token or dot data rather dot uh dot sign up dot token okay so you can see this is what we're setting into our local storage we're gonna save it under the name token and we're going to get the response that we get from this mutation which will as we saw in our mutation which will be the actual token okay so that's great then below here we want to go set submitting okay and we'll set that back to false and then finally once that's all done we want to go history dot push here and we want to push to uh what should we go well they're going to be logged in at this point so we'll do a protected route at that user's row we have so let's go slash users okay so that is all good and well and then we want to make sure we close off here our form here so in here come down here and we want to bring in some of these things so we're going to go form okay we're going to have a field okay and that can be self-closing and then in this field we're gonna have a name and that's gonna be email okay and then we're gonna have a type and that's gonna be equal to text okay and then we are gonna have a placeholder okay and that's gonna be equal to email all right so that's good for the first one so that's how the fields are going to work you're just going to give it a name and a type a placeholder and then formic's going to handle all the rest so then we're also going to have an error message okay and that's going to be in here and in this error message this is gonna be if everything goes wrong or if the validation fails or whatever so let's go email okay that's good for that and then you're gonna pass it a component um here and for us we're just going to go it's just we're going to add a div component but you could add some sort of custom component if you had some error message uh handling there so let's go here and let's just copy this down a couple times and we can just change these values around so here we have email uh but our next thing is what uh we'll go name and we can just pass this name okay and then same for this and yeah that's it all right so here we're gonna have a password here so let's come over here change these over to uh password here and also we want this one to be password as well okay and then we actually have to do this another time because we have a confirmed password don't want to forget about that so let's come down here and let's go confirmed confirm password this is going to make sure our passwords are the same or we know the password and then here again let's go confirm uh password all right so i think that is all we need for this so let's go ahead and save that okay and the last thing we want to add into our component here is we want to come over and let's add a button so we're just going to have a regular button right now no styling or anything i'm going to have a type and that's going to be equal to submit and that is going to be it for that close that off and let's go sign up and add that to there go ahead and save that okay so that's kind of the the format our form is gonna look like let's uh go ahead and add this to our app and see if it's even coming up or whatever so let's come in here and come down here to our routes and let's just come in and we'll just copy this up here and we'll change this to sign up and we'll pass in our actual sign up uh auto import that okay now hopefully that works so come over to our app let's go to slash sign up and we got something broken here and we haven't brought in use history or anything yet so let's go ahead and do that and i guess at the same time we might as well finish off our sign up uh all the things we're gonna need so let's come in here and first we can just bring in uh use history like this so let's go history is equal to use history okay so that will handle that error and let's come in and create our actual uh mutation here so instead use query we're gonna go use mutation and then instead of user's query here we're just going to go sign up mutation which we have right here okay and we created above and instead of the all this stuff we're just going to come in here let's get rid of this here and open up some square brackets not some curly brackets and then go sign up which is our mutation that we're calling and then we want to return the data from from that that we're going to get back in the form of a token and then we don't need any of this either so get rid of that now we haven't done this initial values or this validate schema yet so i say we might as well uh go ahead and do that i don't know why that's giving us an error i guess we gotta bring it in again okay auto import that okay so let's come down here all right so let's come here and go const initial values okay so let's come we got email and that's gonna be uh empty string and then we're gonna have a password we have a password then we're going to have a password and that's going to be an empty string and then we're going to have a confirm password and that again is going to be an empty string and then we're just going to have the name here and again empty string now what we want to do here is actually create an interface for all this so let's come up here because we want to do some typing here we haven't really done much of that so let's go interface and we're going to call it signed up values and then here we're going to have email and that's just going to be a string we're going to have a password and that's gonna also be a string and then we're gonna have confirm and that's gonna be a string you're getting the point here everything's gonna be a string strings for everyone and that's good name and that's going to be a string okay and then if we come down here to our initial values we just want to pass that in as our types sign up values right there okay so now that's nicely typed there and the last thing we want to do i think in this file here is we want to use uh yup to do some validation so come down here and let's go const validate o validation schema okay and that's going to be equal to yup and then we're going to say dot object okay and then open up our object here and these are all the things we're going to want to pass in so let's go email and that's going to be yup dot oh that's not it that's going to be yup dot string and then it's gonna say dot email and it's gonna say invalid email address so this is gonna be what we're gonna return if the uh if the email is not valid and then you can just kind of chain on different things so there's also a dot required okay and that's gonna be uh here and that's gonna say email uh we'll just say email required okay so the two things it's gonna have to be a valid email which yup will uh address for us and it also has to be required so that's how you do that looks like we're not bringing in you up here let's see see if we can auto bring that in nope let's come back up here and bring in yup so let's go import uh we'll just go i think it was everything as yup from yep see if that handles it for us i think it does so validation schema uh which valid day make sure we change this to validation these two have to match of course all right so that's how you're gonna handle this now i don't want you to have to watch me type everything out here because that's going to be pretty boring so i'm just going to paste this rest of this uh validation in here so this is what we're going to have uh we're going to have a password you have there's a max function here so it has a max 20 characters and it's also required and that confirmed password and this will show that these have to match and then a yap dot string for name uh with at least uh less than 15 characters okay so that is gonna be all we have for this now our values we have to actually pass those in um so make sure you didn't if you had value here make sure that's values so we need to pass that into our variables and that looks like we're not getting well no errors there we'll see this is uh a lot of typing to not have any errors for me so let's go over to our uh component actually take a look here and we're having uh something here with this here so we're having a yup air let's come back all right this is giving us an error i don't know if we need this let's actually just go ahead and get rid of that there okay so go ahead and save that now let's come over again okay and we look like we are working well here now let's uh maybe give this a try um so let's maybe bump this up so you can see a little bit better uh let's go so you can see if i click away from the email it actually gives us our email required and that's that yap informix stuff password so let's come in here and they're gonna all do the same thing so come in here and our email let's just create something so darwin test dot com the name we're gonna have here is darwin uh our password is gonna be password and our confirm password is also gonna be password now you can see we're actually showing here that uh is something we definitely do not want to do so when we come into our field it's because uh we come over here we come down into our form here and you can see for our confirmed password and our password we have uh not done our types correctly so these should all be type of password not uh otherwise we're gonna be showing our text for our password which is not what you want okay so we come back here you can see that that does that now before we have signed up here i'll let's inspect this and see what we're actually doing so we want to be setting a token because that's what we're doing in our file so come over here and go to application i don't know if you can see this very well so we're in our local host there's nothing set here and when we press sign up we're hoping that this uh signs us up so you can see the token comes in and we get redirected here and these i think are just our test users from our user component so that looks like it's working fantastic let's come over and do a little more work so we also need a login component now we're just going to do that we're just going to copy over this whole thing because it's going to be very similar all right so we got to create that so let's create a new page a new file and we'll just call it login.tsx and we just paste this whole thing in here and we want to change we'll just go from the top and just change what we need to so instead of signup mutation uh let's highlight all those here and get rid of that and we're gonna add a login underscore mutation mutation all right that's good and then here anywhere we have that we want to change that to let's just go through them all and get rid of that and say lowercase login okay and all we need for our login we don't need this here so we get rid of that and we don't need this down here we don't need our names for that so that's good and we're going to the same thing as token back so that's all fine now our login values we can capitalize that and all we need is the email password so that's good we need to capitalize this here we need to do what uh login that's actually good login values capitalize that get rid of these here basically just change everything to login that we need again don't need name or confirm password get rid of those that's good uh what else we got initial values that's all good that's all good login that's great local storage we still want to do the same thing there and we're set in the local storage uh and then we're still gonna push to users so that's all good we don't need any of this uh we only need oh we do need we don't need confirmed passwords so get rid of that we do need password but we don't need name and yeah so just email and password that's good let's change this to login for our button okay and again this needs to be login so if we go ahead and save that i think that might be good for us so let's come back over to our app and again we will need to just copy over this copy down this route and let's go log in and log log in auto import that okay we go ahead save and let's come back over all right sorry about that there looks like my obs just crashed real quick but let's test this out here so we got darwin at test.com is what we signed up with earlier and then we're just going to go uh password for our password and when we click when we uh click login here we want to see our token show up which will show that we are logged in and we got redirected there which is good and our token shows up which shows that we are logged in so that is basically some authentication um in the next video we're gonna go over how we can do protected routes basically uh so if you are logged in you'll only be able to see certain routes and if you're not maybe i'll go to the landing page or something like that but uh yeah we'll get to that in the next one um this one's going on quite long uh but yeah thanks for watching see you in the next one [Music] welcome back and in the last video we created our sign up and our log in components and handled some authentication on our front end and now we kind of want to put that to use by adding a some protected routes so what we're going to do is we're going to create a is authenticated component and then we're going to wrap whichever routes here that we uh do not want to uh have anyone visit unless they are authenticated so that's kind of the plan for this video so let's get into it and start uh coding this up so let's come over to our components folder here we're going to create a new file and we're going to call that is authenticated.tsx okay and in here we're going to do what we did before and just come in to our users here and highlight all this and copy it and we're just gonna copy this over so we have some sort of base to work from here all right so that's good so let's get into how we're gonna do this here all right so let's get into this so we're gonna get rid of this here we're going to come in and this users we're going to change to uh is authenticated okay so that's going to be our component name um and then let's come in and write our graphql query here so let's come in here and say const and we'll go is underscore logged underscore in and that's going to be equal to gql we're gonna go back ticks here and then here we're gonna open up some uh braces here and we're just gonna go me so we're gonna query the me query and all we wanna get back from that is id and we can go ahead and save that so this is all we're going to be getting from here and if we check out our mutation here let's just take a look at this um so let's actually that's going to be a query so let's go queries so let's check out our queries rather and you can see that we have a query right here so this is our me query and that's what we're going to be hitting um and basically this is just going to find uh the number by our user id and uh so that'll determine if we are uh authenticated and we'll show you how we're gonna use that first we gotta make sure we close off these backticks here all right so we wanna come down after that and we're gonna uh add our query user so that's is uh underscore logged in okay and then this can all be the same and then we can get rid of uh this inside the div here actually we can get rid of the divs too um so let's get rid of that and actually just give her this return statement to start with so what we're going to do here is we're going to come down below we're going to add another if statement so let's go if and we're going to say there's not any data dot me so if this returns nothing data. me returns nothing then we're gonna go like this and we're gonna return uh redirect which we're gonna auto import and this comes from react router dom so redirect and we want to redirect we need to pass it into two so where it's gonna redirect and then we're gonna go give it a path name good and we're gonna give it the path name of slash uh landing i think is what we had so go ahead and save that there and make sure uh the redirect we actually closed that off there okay so that's good so if this doesn't happen so if we do have data so this is the case when we do not have any data for ourselves now we want to uh pass in if we do have data now how are we going to do that we're going to come down below and we're just going to return children which we haven't brought in yet but we will as a prop so we're going to wrap it so anything inside of this is going to be the children so we're going to come up here children pass that in that's good and we're gonna wrap the uh what we want to restrict so what you need to be authenticated for in our case that's gonna be users so let's actually change this over here so let's go slash users that'll be and that'll give us our users and we'll just go we'll keep our landing i guess like that so come over here and we're gonna wrap that so is so we'll wrap this so let's go is authenticated and that'll auto import for us okay and then we're just going to come down and bring this and wrap the entire thing okay so that looks pretty good all right so we're getting a little error right here um with our typescript so let's come in and we're going to type this so interface and we'll say props here and then in here we want to go children and we'll make this optional and we can add a a property here called uh react dot react node okay and we could destructure that too if you want but uh it doesn't matter to me then we come in here and we're going to add our props okay and that takes care of our error there however if we save this and we come over to our app here we're getting a little problem here now the way to fix that is we want to come in and we actually have to wrap this in a fragment so let's come over here and we're just going to wrap it in a react fragment here and we got to put these in some curlies here okay now if we go ahead and save that come back over all right now we can see we are not authorized because we have not signed in although i don't know if we're actually going to that so let's go to landing okay we can go to our landing then if we come over and we want to go to our login we're able to do that however our protected route is what our protected route is slash users so we shouldn't be able to go to slash users unless we're logged in so you can see we're not authorized so now if we come in and we go log in and we come over here bump this up for you a little bit and i think it was darwin at tests.com password is password and we log in we're redirected to our users and now if we refresh we're still logged in we can go to these uh this slash users url all right so let's come back here and just go over quickly what we did again so if we're authenticated whatever routes are within the authenticated uh component here whatever the children of it we will need to be authenticated to visit and the other ones you do not need to be authenticated and again just coming down here is authenticated uh if data dot me if nothing comes back for this we're redirecting to the landing page and otherwise we are showing the component so i think that's good for uh kind of a protected routes for this one uh in the next one let's actually go back and style uh some of these uh login pages and stuff actually get this looking not like complete uh trash so thanks for watching and see in the next one [Music] all right welcome back so in the last video we handled the protected routes here and now we actually want to make our login and our sign up form not look uh like complete garbage so let's do a little styling so we'll style our login and our signup form and that will be it so let's uh get into it all right so let's just take a look at what we're working with right now so this is what our login form looks like right now we want to make it look a little more similar to a twitter login so let's uh add some stuff to our login and our sign up and get it going okay so let's come over to our login.tsx right now and we're going to come in and just add a few class names and then we'll style it up in some css after that so let's come down um and actually let's come over first into our src and we're going to create a new folder here so come into here and create a new folder and we're going to call it styles inside our style file here let's create a new file and we'll just go login.css and that'll be our for our login page and actually let's add we're going to add one more thing here so come over and add another folder and we'll call it assets and inside here we're going to have images and what other sort of assets we need so i have a twitter logo that i am going to paste in here but you can just find one either from the github or um or from google so i'm going to paste this in and this just looks it's just a twitter logo it won't show up in my vs code but you'll see it in a second so it's just a png file and that will be our logo for this okay so let's come back over and add these uh class names over to here so there's not a ton we have to add but there is a few things so come down here and we're going to change a few things here so let's come in here and we're going to change this to an h3 and then we're going to change this to uh log in to we'll just call it fake twitter here because that's what it is a fake twitter all right so then come up here and above this we're going to have our logo so we're going to go img for image tag and then src and then we're going to have to bring this in so we'll bring it in as twitter logo like that okay and then we'll have our alts here and that's just gonna say logo okay great and then we are gonna have our style we have a style tag here and just give it a width so it's not bigger than uh not too big that's gonna be 50 picks and then below that we're gonna have a class name and that is gonna be equal to uh logo okay and then make sure we close this off here and that's all good now as you can see here uh the twitter logo we haven't brought that in so come up to the top and we gotta import that so we're gonna go import uh we called it twitter logo i think and that is gonna be from and it is dot dot slash styles slash what assets slash uh twitter logo dot png okay so that's good for that let's come back down and finish up adding our other uh class names here so most of these we're just gonna hit by the form element or whatever but we are going to add a couple things so so i can just go dot register and that will give me a div with the class name of register and then inside here we got an h4 okay and that's gonna say uh don't have an account question mark and then below that we're gonna have a link and we need to bring that in okay and that's from react router dom and this is just gonna link to our uh slash sign up okay close that off and in here we're just going to say sign up so if you don't an account this is just going to be a link to our sign up page and that is all for that okay and then what else do we have in our uh submit button here we're gonna have a class name on here so let's go class name and that's gonna equal logins dash uh button here okay and that'll say login all right and this login here we actually want to put in a span okay and we'll just say log in again okay and then go ahead and save that now what we need to do is come over to our login.css and add all our styles here but before we do that i want to do a little introduction into css variables here um so css variables will allow you to add variable names to handle whatever it is certain styles throughout your entire application so what i want to do is i want to come into our app.css and just show you how that works so let's go app.css here open it up and we don't actually want any of this here so let's get rid of that we don't need any of that okay and then we want to come in and i'm going to show you how to do this so let's go colon root this is css variables and then here so in here we're just going to go dash dash main dash color so this is going to be the main color for our app and it's going to be the twitter color so i'm going to paste uh the color i have for this so i'm going to paste the color i have for this here okay and that's good for that and then the next one we're gonna have is gonna be button dash hover dash color okay and then again let me paste this in here okay and that's all we're gonna have for our first two so basically the root element is just gonna allow you access to these variables throughout your entire application um so that's gonna be that for that and then we also want to bring into here we're going to import our dot slash styles slash login dot css and this is going to be available throughout our application as well so let's go ahead and save that we can get rid of this for now and now let's come in and actually code these styles up so i might fast forward through some of this because it's going to be pretty boring watch me type css but uh we'll show the end result and i'll also have it on on the github so you can check it out [Music] okay and now just to show you in here this is how we're gonna use a css variables so what we want to do is go var so it's going to be the variable and then we just pass in the variable so it's just dash dash main dash color is what we called it okay and that's basically how you use css variables [Music] all right so that is quite a lot of styling here let's just go over it we got our div we got our background color for our entire um our entire screen here we got our logo uh component here uh we got we're just hitting our form instead of the class names we're getting input instead of that and then we got some button stylings here and uh log in and we also have a register for the button that goes back to the sign up page all right so i think let's uh maybe take a look at this all right so this is what we're looking at here this is our sign up page here and then if we click sign up we come back to here now we need to add a couple stylings to our sign up page as well because as you can see our button's off here as well as uh our sign up and we don't have any logo so let's come back and add these to our sign up page all right so let's come down to the bottom here and add in a few things so we're going to have a dot register div here and inside of this div we're gonna have an h4 again and this says already uh what have an account question mark so if they already have an account then we're gonna hit this link here and bring that in from react router dom okay and that's gonna be two and that's gonna equal slash login okay and close that off and say uh log in down here okay save that let's see if that works oh we're getting a little error here okay so this needs to we're just gonna bring this outside here come down save that okay and now we have this here so i already have an account log in it'll bring us over to here and then sign up will bring us here now we want to get this logo and then this over and this button fixed so let's uh handle that real quick all right so come back up to the top again and here again we want to go h3 and we'll say sign up and then above that all right and then above here we want to get the same thing so we can just come back over to our login here and we can just copy this over right here this image from there bring it back over here paste that in okay and then we got to bring this in here so come back up to the top import twitter logo from dot dot slash styles slash assets slash twitter dash logo dot dot png okay and then that go ahead and save that now let's take a look refreshes and that's all good now the last thing this button here so let's go ahead and fix that so come back down to the bottom here and this is the button we want to fix so we want to add a couple things one thing we want to add is a class name to this so let's add we can just add the same class name for the login and the sign up all right so the class name is going to be equal to log in dash button there and then we also want to go like this and add a span here and then inside that span is where we want to put the uh sign up button here so go ahead and save that come back over now we got a beautiful button when it hovers gets a little darker we got our sign up and we have uh everything working pretty good here that uh spacing's a little off but don't worry about that for now we can go ahead and fix that another time all right and then click that it goes to login okay so i think that is the styling for our uh fake twitter here uh for a sign up in our login not the best looking thing ever but actually if you go to the twitter actually looks somewhat similar so not crazy off again this isn't a css course but hopefully that was uh that was helpful anyways all right in the next one uh either we're gonna start working on our back-end in our model or we're gonna maybe style our uh we'll have a a landing page or something so thanks for watching and see you in the next one [Music] all right so welcome back in the last video we styled our signup and our login forms and now we're just going to do a little more css i promise we'll get to the good stuff soon but we got to style our landing page so it doesn't look like complete garbage all right so how are we going to do that well we're going to come into our landing.tsx and i'm going to write up some markup and then we're going to have a file for our landing.css and we're going to add that and i'll probably just go through that and speed that up a bit and you can copy the css either after or when we go through it but first we're gonna have to add one thing here so if we come over uh to a chrome and we're gonna add font awesome and we're just gonna do this with the cdn uh i don't wanna go through the whole process of adding this uh into our file so let's uh cop this link tag over and then come back over here and in here we're actually gonna go in to our public folder here and our index.html and then all these link tags we're just going to add one more and just paste that in there and once that's good we are good to go so we can go and save that and get rid of that okay now like i said i'm just going to add this markup and i'll speed it up and then we'll get into it from there so me all right so that is our markup for this page basically no real functionality going on uh other than maybe our link tag here so let's just go over what we did so we just added some class names uh to our divs and whatnot so we got a main a wrapper uh we got a left side and then here this is our font awesome uh so these three different font icons come from font awesome and that's why we added the cdn for that okay so that's good and then come down here uh we got our we're bringing in our logo so we're bringing that in up here again good and then this link is from react router dom and we're going to either sign up or a login so if we uh go ahead and save that we can come over to our uh our landing page here this is what we got uh so obviously not styled at all but we have our logo and our our links and whatnot so now we've got the fun part so now we want to come over and uh actually style this up with a little css and put these uh class names to use so we're gonna come down in here uh close some of this in here we're gonna have another style here so we're gonna add a new file here dot css save that and then this is where we're gonna add all our css and then we can bring that in up here so let's just bring it in right now and we'll import um dot dot slash styles slash landing dot css all right so that's good for that and then we want to come back over and actually uh add our styles in so again i'll speed through this and then we'll go through it after my all right so that is a lot of type in there but let's come back up and just go through it here so we got our main div that we have uh we're gonna use flexbox right now um we're going 100 these vh is view height uh let's keep going so then we're just getting more granular as we go so then we come down we go main and then the wrapper component which is inside of that or the wrapper class which is inside of that and then we just keep going as we go um so we don't need to go through all this but basically you can copy that down if you like and let's see how it looks so if we come back over here we see we got a little bit of an issue and i'll show you why that's happening so let's come back over to our app here um this div is hitting all our components because we're bringing it in globally so what we're gonna do is we're gonna go uh doc container and we're gonna add a class name where we had uh the div before so that's in our login or our sign up so come into your login and if you just have a div here add the container class to that and then once that's done come into your sign up as well and add a container class to that and that should take care of that so once that's all good we can close out of these here we can come back here make sure you save that login.css as well and then your landing page make sure that's saved and then let's come back over and check it out all right so that uh looks a lot better and uh if you check out twitter this is actually fairly similar to uh what twitter's landing page actually looks like uh it's obviously not perfect but the same css course in the next video we're gonna start mapping out our database and actually creating our model so that'll be a little bit more interesting probably but uh yeah thanks for watching [Music] all right so uh welcome back here and in the last video we uh we're doing a bunch of styling with our landing page and now we're gonna get into the meat of this uh project here um we're gonna start building out our back end and starting with our uh our model here our database model so we're gonna be working first in our schema.prisma and we're gonna work on our profile here and uh before we get started here though i would just suggest you come in and install if you're using vs code or something the uh prisma extension just to help with uh formatting stuff it'll make life a little bit easier for you if you're not using vs code don't don't worry about it just uh yeah try to code along all right so we're back here and we're gonna start here by creating our profile so we're gonna come in here and we will create our uh model all right so we're gonna come in here and we're gonna go model and profile and open up some brackets and then this is where you're gonna add all your different uh fields that you wanna be on your model um for your profile so we're gonna have an id for that and that's going to be an int and there's a few things we want to add on top of this so we're going to have the id flag here and then the uh we're going to have a default option here and that's going to say auto increment the other thing with this prisma plug-in here is it gives you a lot of auto-complete which is nice so we're going to auto-increment so if we're not going to add one it's just going to increment by one each time we create a new profile so that's for that and uh yeah i'll go through and create the rest of them and then we'll come back okay so these are our different fields that we're gonna have on our profile so we're gonna have a bio a location where you're at a website if you want your avatar is going to be your kind of profile picture and then we're going to attach it to our user so each profile is going to be attached to a user and that's what these fields are so we need a unique user id here and then the user which is going to be connected through this relation uh field that we attached there all right so that's good now we also have to add this onto here but it does it for us uh automatically you can see um now the only thing is though we don't want an array of profiles we just want a single one that it's attached to so we're just gonna come on and uh put a question mark and the question marks are gonna mean that it is not necessarily required so it's an optional parameter there and that's what all these are here because we don't necessarily want to force the person to have any of these uh or even a profile in general okay so that's good now let's come and let's actually create uh one more thing here and that's gonna be a tweet here so we're gonna do a model for the actual tweets that we wanna create all right so this is our tweet model again the id with the default it's going to auto increment uh we have created at so we know when it's created and then we're just going to have a content uh and this is going to be required for a string and then we're going to attach also um to the user and we're going to call that author so that is basically all we need to do for that now go ahead and save this all right so we're gonna open up our thing here and we want to uh migrate this over to our postgres database so we wanna have all these uh fields so let's go like this so we're gonna go mpx uh what is it mpx uh prisma migrate and we're gonna go save so you first have to save it and then you want to go dash dash experimental like this and then they want you to name your migration so we'll just say profile for now and then that looks like it uh worked it saved this and then we want to go up again and we actually want to push this up and you do that by going up so npx prism migrate up experimental and it looks like that pushed that uh just fine so that is great and now we want to come over and we actually want to create um our uh mutations in order to create a profile and update a profile so that's what we're going to do next so let's come over here and the first thing we want to do is come into this types folder here and we want to create a few new types so we have a new one here for uh profile so let's go ahead and say profile.ts just like that uh and we can come over we got this post one let's just copy over what we got for that okay and we'll just use that as a kind of template here so paste that in here and we'll change this to um profile okay that's great now all these are going to be off here and that is just fine because we haven't created them yet so what we're going to want to do is have all these different things so let's just create this right here and copy that over so let's just paste this down below here and just change this as we go so we got bio we got location nice and then we have website okay and we have also avatar okay so those are all good all right so we're getting a few errors here so we want to kind of work through this here so let's actually come back to our schema here and i believe i forgot to add before the uh tweets so we on our array of tweets is going to belong to the user so make sure you add that so that's good and then you can uh migrate that up again but we're still gonna have a few issues so let's get rid of uh we got rid of our posts here instead of and replace that with our tweet so let's go ahead and do that for everything else so let's go under users here and this is going to be tweets we'll just replace that go ahead and save that index here we don't need this but we can replace that is gonna be tweets okay and we don't have that file yet so let's go ahead and create that so let's go new file and that is gonna be uh capital tweet dot ts so we want to go ahead and create that so let's again just come over here and we'll copy this over um here so copy that over come into here paste that all right so we're gonna come in here get rid of that that says tweet there and then again here uh come in here and say tweet as well okay and then we have some different uh models here so we're gonna have an id also we're gonna change this to uh content that's gonna be that and then we're just gonna have an author and that's gonna be all we don't need this tweets obviously for here and then let's come back into user and we've got one thing here and that's going to be tdot model dot uh profile and we'll call that go ahead and save that and this is actually not tweets that's tweet go ahead save that and so we're still getting some errors here and remember we want to get rid of post everywhere here so let's come in uh anywhere we have post here so we got rid of it here got rid of it everywhere else uh let's come into our mutation actually and we can just uh comment these out for now we might come back and use those kind of as a template later uh create draft and get rid of this as well okay and i think that and i think that should be it so go ahead and save that and then um we haven't really played with this much yet but we're going to have in this permissions file on this index.ts we're going to have some different rules here so we got rid of posts so we don't actually need this right now so we get rid of is post owner here we can just comment all that out for now i don't know if we'll be using it later or not and then these two will just uh actually these three we'll just compliment comment them out at the moment this one too and this one actually too okay so go ahead and save that all right then in our query here we want to get rid of post here too so let's get rid of this we don't need that filter post we don't need any of this get rid of this and what else here uh post here where's that end right here so get rid of all of this go ahead and save that users that's all fine in our tweets.js2 we spelt this wrong so come and fix that author not author all right so that's good that seems to have resolved i had to uh delete my node modules and stuff there seemed to be some issue with the model here but um we're good now if you're running to an issue i'd suggest deleting your node modules in your package.json log file i'm in doing a fresh install there and after that gets resolved um let's go ahead and show you what we did for our mutation so we came in and i created a create profile this is going to be the mutation to create a profile here and how this works is you're going to pass in the type so the model which is the profile for us and then the different arguments that you want for that so that's for us a bio a location and an avatar on a website so the same things that we had in our schema file okay and then we're also going to check to make sure the user is authenticated which is this check here and this get user's id is coming from our utils folder here uh file there and that's uh the function that is going to check if we're authorized or not okay so that's good and then um actually let me paste in here also our update file here so so this is our create profile here and we're also going to want to have an update function here so let's go here and this is going to be our update mutation and these are the different so we have a string arg and these are uh nexus uh i believe not prisma itself but uh the other package we're using so we actually got to bring that in so you can see we got an arg there and we'll auto import that and that's for uh integers basically and string arg is obviously for strings so same kind of deal here basically the exact same thing is create profile except for we're going to call the update function so this is how we call it prisma.profile.up and for our create we're going uh prisma.profile.create and that is how that'll work all right so that's our create profile and our update profile um and kind of a little bit of our back end there um in the next one we'll probably build out the front end and start actually seeing our profile uh in our react app and uh yeah thanks for watching [Music] all right so welcome back in the last video we handled creating our profile and stuff in the back end and writing the mutation for that in this one we're gonna handle uh the same thing on our front end so we're gonna have a profile page and then i create an update profile uh function so that is what we're getting into today let's uh get right to it all right so the first thing we want to do is to come into here to our pages folder we're gonna create a new page here and we're going to call that page profile.tsx and then inside here we're going to have our profile so let's get a little code up here so we'll go rfc that'll create a react functional component for us and that'll just kind of bootstrap that it's going to be called profile i actually like to move this here to uh the end of the file like that and then we're gonna have a mutation and stuff here but let's first just come in and make sure we can import this into our app.tsx so let's come in here let's go in h1 here and we'll just say profile okay go ahead and save that and now let's come over to our app.tsx and bring this in so for this we're going to want to be authenticated so we have our is authenticated routes within here so let's copy this down and then we're going to have slash profile and then in here we're going to bring in our profile and that will auto import there alright so go ahead and save that i have my server running here all right coming over here we see that we have our profile so that is good now let's get into the actual coding here okay so let's start building out we'll just start building this out first so let's come over in here and come up top here and we're going to start by building out our query here so this is going to be our profile query with our id our bio location all that different information that we might want for our profile so let's get into that so we're going to export this just in case we want to use it somewhere else we're going to const and we're going to say me underscore query and that's going to be equal to gql which we're going to have to bring in that'll auto import there and then we go back ticks come down below and we're going to go query me and then this is where we're going to have our query so it's going to be our me query and then we're going to add all the all the different fields that we want to bring in here for this all right so those are all the fields we want for this and then we want to come down here and just close off uh our back text there like that and that is going to be our me query we go ahead and save that all right so then we want to come down in here and let's come in here and we're going to go const and we're going to say loading error and data are the three properties we're going to need and then we'll go equals use query which we need to bring in and we can auto import that there and then we're going to pass in our query so that for us is called me query there it is then we're going to go below say if loading return loading and copy that down and we can do the same for air and in here we actually want to put the error so again we'll go error dot message and that will give us our actual error message in case something goes wrong and now let's come in here and actually build this out a little bit so let's give a class name on to this div here so let's say class name and that's going to be equal to container and that's just a class we had already added for some of our other styles so that'll work for that and then we're going to come down below here and we're going to have a p tag here and inside that we're just gonna go data dot me dot profile dot bio and copy this down a couple more times and then we're just gonna have our location and we actually got to make sure we closed these off so then we got our profile.location the last one we're going to have here is profile.website and the avatar we're going to bring in later when we do uh our kind of image there so that'll be good so data.profile.website's for last for that and then above here we're not going to add this in yet but we will have or actually that'll be below here so below our h1 here we're also going to have data dot me dot profile dot id so if there already is a profile we're going to turn area here and then we're going to pass in a function called update and if there isn't we're going to have a create profile so you'll be able to create your actual profile but for now let's get rid of that because we haven't created those yet and let's go and do that all right so for our create and our update um components here of our profile we are going to use a package from npm called um react modal so let's just come over here real quick all right so we're going to be using this react modal package just to give us a quick and easy modal it's obviously a super popular package here and yeah we'll be using that and then also we got to import the types for that as well so let's go ahead and do that all right so come into your terminal here open up a new window here and cd into the web folder and then we're just going to yarn add and it is called react dash modal and let that run and then once that's done installing we also want the types for that so let's go yarn add and we're going to go dash d for development and then at types slash react modal all right so that looks like an installed no problem we can close this up we don't need that right now and let's come over to our components here and create a new file and call that create profile dot tsx all right again let's just go rfc that'll give us a react functional component to work with that's great we can copy this down paste it here create profile that's good so now we have our base now let's uh we'll just work down from the top here so give ourselves a little bit of room up here and again we're gonna do a create profile mutation so that's what we have to do to start with so let's go const all right so that's what our create profile mutation looks like we're just passing in a bio location website and avatar creating it and we're just getting back the id from that okay now we want to add a little bit of typescript here actually so come up here and let's do an interface and we'll call it profile values then here we're going to pass in our our actual values so again it'll be the same and don't forget to actually close off up here our backticks very important and spell string right okay and then let's come down here and again create our mutation so come in here bring in use mutation and pass in your profile mutation and then we're going to have one more thing here so we're going to comment pass in a second argument here and this is going to be called refetch queries so refetch queries and then we're going to go like this and pass in a array of the queries that we want to refetch so we're going to say query and then we want our refetch rather the meat query here so every time we create a profile mutation our we're not going to update our dom so we want to actually refetch this uh me query which is going to get from anywhere the me query is being used all these values again so that's why we want to pass that in there because we want some update to our dom now we're going to have some state right below here so let's go like this and say const and this is gonna be our modal state so let's go modal is open and set is open and we're going to pass that into use state which we got to bring in and we're going to start it as false okay go ahead save that and then below this we want to do our initial values and this is a formic again so const values and we're going to pass in our typescript here profile values that we created and that again is coming from here pass all those in and that's going to be equal to the same thing so bio and all these are going to be empty strings to start all right and then we want to create two functions which we're going to use for our modal so the first one is going to be open modal and we're going to arrow function here and we're going to go set is open and we'll set that to true if we hit the open modal and let's copy this down and then below here we're going to say close modal and set is open and we'll set that back to false now i'm going to go into our login here and copy over the form element from formic so we're just going to copy all this formic here and we're going to use that and then switch that over to our uh our create profile so let's come in here okay and then we want to say field tier 2 bring that in and error message so once that is all uh formatted we're good and we can go back and get rid of some of the stuff so we're gonna have a button here and this is gonna be called not a login of course but uh create profile and then we don't need this history.push get rid of that we don't need any local storage here get rid of that we can say create profile for that we don't need any validation schema for right now we might come back to that so we'll just comment that out real quick we don't actually have a response we need to get so we can just go straight await create profile that'll handle that and now let's come in and change this form up a little bit all right so let's go through and just add the different fields that we're going to use for actually creating our uh profile here alright so we have our bio location our website again we're going to have a handle our avatar later so that doesn't need to be added so that's all good and one point of note here is that for this field we're going to be using a text area this can be a little bit larger for our bio so in order to do that with formic here we gotta write as text area um and type text again now we also want to add a little bit of styling to our text area so come over to our app.css and i'm just gonna paste in what i have for this so you can go ahead and copy that down or it will be in the final code there all right so now let's actually handle our modal which will this actual form will be inside so we're gonna come up to the top here and we're gonna add a button here okay and inside this button we're gonna say create profile and we're going to add an on click here and that is going to equal open modal all right so we hit this the modal open but we don't actually have a modal yet so let's create that so come down below here we're going to say modal which uh we have to bring in to the top here so let's do that from react modal so we got our modal here and inside the modal we're gonna have a bunch of different uh fields all right so we're going to wrap this entire thing so bring this modal down to the bottom here we're going to wrap our whole form here so all of our formic there and then you can see we have this custom styles that's underlined here because we haven't actually created that yet so let's go and create that so come over to our styles here and we're gonna have a new file and we're gonna call that custom modal styles dot ts and i'm just gonna paste this in here and these are gonna be our custom styles and uh so this is how we can uh style our modal everything we need so a few there so then we want to bring in custom styles up at the top here that should uh take care of that all right so now we wanna see if we can create our profile so let's come back over to our profile here and for now we're just gonna actually get rid of all this because we're not gonna have any of that so let's come here and just try to bring in our create profile okay so go ahead and save that and then let's come over and check it out all right so this is what we're working with right now so this is our create profile it's a little small right now bump that up for you and uh if we click this we're gonna get our bio our location and our website here and then we're going to be able to create our profile just like that so that's actually exactly what we want to look at um let's actually try it out this is a test bio location vancouver website next stop blog let's hit create profile okay so nothing happened there when we created our profile and let's go and see why that is so we had to come in here and we had location spelt wrong so go ahead and fix that make sure all your spelling's right uh oftentimes if your mutations do not work it's often you have something spelled wrong here so make sure everything matches up fine and you should be good so let's go back and test it out all right so let's come here we're going to create a bio we'll say test a location test and a website test.com and then we're gonna go create profile and hopefully let's inspect this and we can see here i console.log this and we're getting our bio our test and our location back so that worked now we're not closing this or anything and nothing's showing up yet so let's go create that all right so let's come in here and there's a few things we want to change actually let's go to our profile first and just see if we can do this so we're going to come and comment out these things okay and now let's just see if those are showing up refresh these and we can see that our values are all showing up here so that is all very good but one more thing we want to add is we want to close our modal and submit so let's add that so we're going to have our set submitting to false and then after that so once everything's done submitting we're going to go set is open and set that to false and that'll close our modal for us okay so that should be good for that let's actually change this that's not a capital that should be a lowercase a that's good just make sure everything's looking good now the next thing we want to do is create an update function here so we're going to update our profile so let's come back in here and come into our components i'm going to say a new file and we're going to say update profile capital p dot tsx and this is gonna be quite similar to our create profile so let's copy over that and we can just paste this in here and then let's just go through to the top and uh start changing things up so the first thing is everywhere we have this we're gonna want to say update profile alright so that's good for that and we're gonna have to come through and do some of those lowercase but that'll be fine and we have one more thing we need to add to our update profile and that is going to be well first let's lower case this and lowercase this make sure those are update lowercases now let's add an id here because that's one difference we're going to have between our create and our update functions and that's going to be an int and that's going to be required so make sure you have that and then come down below all right and then let's keep moving down this can still be profile values that's fine but we're going to add an id here too and that's going to be a number and then this we do want up uppercase here but this can be lowercase and here we have our create profile mutation we've got to change this both of these to uh update okay so make sure those match again we're going to want to refetch the query with the me query so that can stay like that that's good we're gonna have a modal here that's gonna be the same now one other thing we're gonna want to bring in an actual query and that's why in this profile here come up here that's why we exported this query because we want to use it other places and one of those places is going to be our update profile so let's come up to the top here below here and we just go const open up some brackets here and say loading air data that's going to be equal to use query bring that in you want to pass in the me query here and auto import that okay and the reason we're doing this is for our update profile we're actually going to want to have initial values because when you are updating you're going to want initial values so let's come down below this used state here and we're going to have our loading and our error and then these initial values are going to be the same here except for we're going to add an id here all right so these are going to be all our initial values here and that's coming again from the me query uh update profile we're going to need to export that make sure that's exporting properly good this should say update profile this modal is going to be the same that's good this capital should be lowercase update profile that's all good and then these text areas should all be the same and this again should be update profile okay so i think that is all we need to do for update profile it's looking pretty good let's uh give it a go so we want to bring that into here now we don't want to show the create profile on the update profile at the same time so what we're going to do is now use this as a conditional so we're going to go data.me.profile and if there is a profile then we're going to call the update profile and bring that in and then if there isn't that's when we want to create our profile okay so go ahead and save that so let's check it out alright so you can see that we do have a profile already it's showing and now if we update we see we have our initial value set like this and we can change it to something else so biotest and then testing test.com that's fine and then if we say update you can see it it uh closes our uh our modal there which is exactly what we want and these update right away and that's that refetch query that we talked about earlier all right so that's it for this video hopefully that was useful in the next one they'll probably continue building out our profile page and maybe adding to our database models a little bit all right thanks for watching [Music] alright so welcome back and in the last video we started building out our profile with our update profile here and our create profile um but now if we come over and take a look at our actual profile page we can see it kind of looks like garbage um so let's make it less garbagey so with our profile um we're gonna have the same layout for every page so our profile page is gonna be the same as our home page so basically it's gonna be three columns here with a main section and then a left nav and a right uh sidebar as well so we're going to start structuring that out and just kind of build this out a little bit so this is going to be mostly um markup and some styling so i've actually gone ahead here and added a couple style files here so primary.css i've added this so you can copy this into the or from the repo i would suggest and also uh profile.css okay so those are good so go to the github rebo if you need those styles and copy that and i'm probably just going to do the markup and speed through some of this and then kind of talk it through after that is complete so one thing we actually also want to do here is to come into our app.css which is here and right now we're bringing this uh login right here but we don't actually want to do that because that's going to apply globally if we do it here so we're going to come into our login and we want it for our login so we're going to come up here into our login.tsx here and just import it because we just want to use it locally here and actually we're going to want to do the same thing in our sign up so come over to sign up also and uh we're gonna import the uh same thing at the top here so come in here and we'll import styles log in and save that okay cool so now i'm just gonna get into the uh markup that all uh after all that's done so let's go into our profile here and uh i'll probably just speed this up and then uh we can we can walk it through a little bit [Music] hmm [Music] okay so now that that is all good and uh done there there's a few other things that we want to make sure we add so in our update profile we're going to change our button a little bit so we're going to change this to this which is going to be edit profile and then this class name make sure you have the edit button and then we want to do the same thing here same uh same class name and that's just gonna be a little bit of a different style and uh create profile for that so make sure you add those and then one other thing is in our app.css we want to add uh i think just this accent color here and that's gonna be for our border and whatnot so come on back here and let's just uh walk through this real quick so like i said before we're gonna have a three column kind of layout here and that if we come out into our profile.css actually our primary.css and come up to the top we're going to be using css grid and i don't know if we've gone over that before but that's this is how that's going to work so you uh say display grid and this is going to be our main layout for the same for each of our pages so our home page is going to be the same as as this after so we want to go display grid and then you go grid template columns and then the width of each column here and fr is some sort of fractional unit here so 0.7 1.3 and 0.9 so a little bit smaller this will be the largest section at 1.3 and then kind of the medium section on the right side so this is left middle and then right and the rest of the styling you can just copy down but it's just css so nothing so spectacular there okay so coming down in here we haven't changed any of our queries or anything so that's good we're going to have a primary and this is gonna be our left nav section which uh i think in the next video we'll probably build out into our navigation on the left okay um one thing we brought in history here that is from react router and they have something called a function called go back so that'll just take you back to the last uh screen you are on so that is for that uh we're bringing in we're gonna have our nickname this is gonna be an avatar right now we're just kind of a placeholder but after we're gonna uh do uploading photos uh probably to cloudnary i'm guessing um so this will be replaced in the end and then we have rather showing our update profile or our create profile which we did before depending if we have a profile or not um so that is all good and then we want to make do a check here to make sure there's a profile and if there is we're gonna show uh these different things our website oh again this is react router so that's to link and that is how you do that you give it a there's going to be an outside link to like a website or something so we got to give it a path name and then use uh backtext to do that so that is good and we just hard-coded some followers and stuff right now and we'll be adding that uh later on so let's take a look and see what this looks like so this is what we have right now again this is gonna be our avatar here in the future but it is just being hard-coded now we have edit profile we have the website which is a link uh you can see at the bottom here um it goes to test.com i don't think that's a real thing so i'll click on it and then our name uh for our user is here and here and this is a back button too which i guess that was not the wrong link before but uh that'll take you back and then again the edit profile we can go ahead and edit our profile and update it so that is gonna be it for this video um again this is more of a markup and styling not too much react specific or uh graphql specific stuff but uh yeah on the next one i think we'll build out our nav and then we'll get into uh image uploading and stuff after that so stay tuned and i'll see you in the next one [Music] all right welcome back so in the last video this is kind of where we ended up and that was building out our profile a little bit and now we're going to build out this kind of left side nav here so let's go ahead and do that all right so a couple things we've added here i've added a left nav.css here and again the code will be in the description but uh just some css for you to add for the button and for some titles and whatnot so go ahead and get that code and add that if you would and then the other thing we have done is added um our twitter logo to um our uh favicon so that is uh this up here so you see how it's a little twitter logo instead of the react one so we did that by coming over here and we just want to come and add it up here so i've uh replaced this favicon.ico with our twitter logo so you may want to go ahead and do that too uh otherwise no worries so for this video uh we're just going to build up that left nav so let's come in to our components here under our src and we want to add a new file here and we're going to call that nav actually sorry left nav dot tsx okay and then let's just get a functional component up here so rfc react functional component we're going to do that i like to copy this over here and paste this down here again you don't have to do that but you can if uh you want so again this is going to be another kind of markup tutorial so i'll probably speed through some of this as i go but again the code will be in the description and then we will go through it after i get it all in there [Music] okay so that is our markup uh for this left nav here so just to go through it real quick we're bringing our link component from react router dom there we're just uh having an image which is going to be the favicon of the twitter logo there with a little style in here and then we're just linking these are just going to go to users these will go to different pages once we have those routes set up but right now we don't have that the only route we really have is profile um so that's gonna link to that and then we have the different fun awesome icons with that and then the name and with our styling we have a little hover effect and stuff so you can go and check that out here uh when we hover over the h2 we're gonna add a background and stuff so you'll see that um but other than that pretty basic pretty straightforward for a button here we have some styling here it's just gonna make this a little unique and that is gonna be our tweet button which will eventually lead to us being able to create a tweet so that's uh great for that now let's come in to our profile here and let's add this to the actual nav here so you can see right now we just have a left nav here so we're just going to replace what's in here and in here we're just going to add our left nav here and import that like that and that should be good so once you do that let's uh go and check out and see if this is uh working so we can refresh the page and after a minute there it uh comes up and this is our uh left nav here so not looking too bad uh these links right now don't really go to anything the tweet isn't uh actually gonna be working but again yeah this will be open up a modal eventually and we can uh we'll have a tweet here and most of these things i don't know if we'll have messages and notifications and stuff but we may be replacing that but we'll definitely have our home page and a way to tweet and whatnot again our edit profile still works and then below here in the middle we're gonna have all our tweets um of either our tweets or the people we follow or like and all of that stuff and then the right we're gonna have like popular tweets i believe so i think that's good for this so uh yeah thanks for watching and uh in the next one we're gonna be uh building out um our our uh avatar here so that's gonna be image uploads and whatnot so that should be a good one so uh stay tuned and i'll see you in the next one [Music] alright so welcome back in the last video we built out kind of this left side nav here and in this one we're gonna be doing uh some image uploading so as you see here we just have a kind of a placeholder for our profile picture um our avatar and we're going to want to replace that or be able to update that so we want to be able to click here and have some way of updating our image along with that now how we're going to do that we're going to use this puppy over here cloudnary so why don't you come over here um sign up for this and they have a pretty nice little free tier so that is good for our testing purposes so come over sign up you'll see you got some information here and once you are here we're going to come over to here to the settings and once you're in here we're going to head over to upload here and you're going to scroll down here all the way to see something called upload presets and we're going to want to add one of these so you can see i already have one added here but i'll show you how to do it so you go add upload preset going to name it whatever you want um the signing mode here so we're going to do just an unsigned one right now so it's going to be less secure and i'll show you at the end how you can actually do assigned one too but just for this simplicity sake we're going to do an unsigned one so click unsign for that if you want to add it to a folder or something you can go ahead and do that and add a name and that is it and then go ahead and click save so that is good for that so that should look something like this for us we're just gonna use this darwin one and uh then come back over to your dashboard okay and you're gonna see your account details are here now uh we're gonna you're gonna click go more here and you're gonna see i'll blur this out here but uh the app uh or the api based url so you're gonna wanna copy this and that's gonna be the string that you are um gonna write your information to now like i said this isn't gonna be secure because uh if anyone knows the string they could hit that url endpoint um so make sure uh that is okay with you and again i'll show you how to do a signed one which will be more secure at the end just we'll go over it but uh for this testing purposes i think that is good all right so this is kind of where we left off um on our profile over here and uh we're gonna want to go and do uh most of the work in our update profile here but before we do that um go to the base of your web folder here and add a dot env file okay and i'm going to blur this out but we're going to add something called react underscore app and this is important because react gives you the ability to use environmental variables but so out of the box they give you this but you have to start it with react app and then the name of the actual variable you want to use so i've added mine here add yours there because we will be using that to upload our images all right so once you've done that come back here and we're just going to add something to the actual profile.tsx in here um because we want to replace this placeholder in case we do have an avatar to uh show all right so we're gonna come below here and we're gonna go data dot me dot uh profile dot avatar that's what we need and then we are gonna open up uh give it a question mark and we're gonna open up a ternary operation here okay and then we are going to want to pass in here um our actual uh image component so if we have an avatar we want to pass it in as an image so you want to pass this in and this is going to have our src and it's going to be to our data.mee.profile.avatar however we're only going to be seeing this if we do have an avatar and if we don't we want to use this so come back here and we're going to go like this and then pass this down it's getting messy let's save that okay so this is what it should look like now so again if we have an avatar we'll show our avatar and we have a width of 150 we change that a little bit and added a border radius also so at a border radius 50 that'll make it a circle and then if we don't have an avatar we're just going to show this same thing again and i think that's basically all we need for this uh profile here so let's go on to actually um uploading images the actual good stuff all right so we're in our update profile and i want you to come up here to uh the top here so we're gonna be using use ref so we're gonna go const and we're gonna go input file we'll call it and that is going to be equal to use ref and we want to bring this in down here and we're just going to set that to null to start there and then we're going to need a couple more things from use state so let's go const and we'll go image and set image and that is equal to use state and then we're just going to pass in an empty string there and then we'll go const and we want to have a loading state here so we'll go image loading because this is going to be outside of our formic here and set image loading here okay and then again that comes from use state and then here we're gonna pass in false to start because we are not gonna be loading so let's go ahead and start using some of this here let's come down all right so we're going to be in our modal here so the first thing we want to do here is add our input components let's go ahead and do that okay so this is our input component here now we're not going to actually want to show this but this is what we're going to use for file uploading so we got to make sure it's a type of file uh the name is going to be file we don't actually need a placeholder here probably because we're not actually going to be showing this uh the on change we're going to create a function called upload image here so we're going to pass that in and then this is from the user ref that we created called input file which was at the top here so we're going to be referencing that and then we have a style display none because we don't actually want to show it all right so now we're just gonna go below this uh again outside of the formic and we're gonna add our actual image and um kind of the placeholder that we're gonna click on if we want to add a new image so let's go ahead and do that all right so right now this is the upload image that we added to our state so to see if we are uploading the image so we're gonna have a ternary here we're gonna have multiple uh so just try to follow along there so we're gonna have a ternary here and if uh it is uploading we're gonna show the loading state here and if it's not we're gonna show this and here we got another ternary so we're going to check there's an avatar if there is we have this span with this image inside of it which is going to be our image so if we have an avatar we're going to show it by putting data.meetupprofile.avatar in there and if not we are going to have this placeholder that we had before and in both we're going to have this input file.current.click and this is the usref that we added up at the top up here so this is where this is going to come in and it's going to reference that so you have to add current after and then click is the function so on click we are going to be hitting uh where to go this input here which we're referencing now kind of the last thing we got to do is we have this upload image uh function that we have not created yet so let's go ahead and do that come above the closed modal here and we'll go const upload image and we will make this uh an async function here we have the e and then we're gonna have a few things so we're gonna first go like this const files and that's gonna equal e dot target dot files okay so that's gonna get the files i'm gonna go const data and that's gonna equal new form new sorry form data then below that we're gonna have data dot append and we're gonna append a few things to this so we're gonna go data.append and we're gonna pass in file and then the files which we created right here and we're gonna go files at uh zero here because we only wanna pass in the first one now uh if you wanna use kind of multiple file uploads or image uploads or whatever you're doing you'd have to do that a little bit differently but for now we just want one so that's good then we'll go data dot append and we're gonna go here and you have to write upload underscore preset and this isn't something we made up with this is a cloudinary thing so you have to the name of the upload preset is going to come second so that's going to be for us darwin there so whatever you named yours call it there that and then we're going to go set image uh loading here and we're going to set that to true and now we're going to use fetch to hit the cloudnary endpoint so we're going to go const and we're going to go res and that is equal to await and we're going to use fetch here we're going to go process.env and then we're going to add our react app cloudnary endpoint okay and remember this is what we added from our dot env so all we have to do is process.env and then the name of it and it will bring it in for us and then we're gonna have a few things one method and that's gonna be post all caps and then the body is gonna be the data that we have created here so the body's gonna be the data that we've appended our files to and uh our preset information and all that so that is looking good and then come down below here and then we're gonna go const file is equal to a weight res dot json and we have to pass it in as json there okay so that is looking good and then we're gonna set our image to file dot secure underscore url and then finally we're gonna go set image uh loading here and we'll set that to false to show that the image loading has completed okay go ahead and save that all right and then the last thing we want to do you can see when we update our profile we're just passing in the values so what we actually want to do is come in here and we're going to pass in an object so we're going to spread in these values using the spread operator here and then we're going to go avatar avatar and then we're gonna pass in the image as the avatar and close off our braces there and then go ahead and save that all right so we actually want to change a couple things here because we don't actually want to know uh if it's uploaded to the back end yet we just want to know if it's on the front end uh so we're going to change this to the image this will be the text of the image that we're going to upload there and then again here we just want to see if the actual image is uploaded before we push it to the back end so go ahead and save that and let's come over and we have no uh avatar yet so that's good we're gonna click edit profile we're gonna come in the stun's a bit off but that's all right we're gonna click on this and then we're gonna select an image we're gonna open it up oh open that bad boy it's gonna show up there perfectly so that side's working now we're gonna hit update and hopefully this uh will update our image perfect all right so that is working good that is basically image uploads uh with cloudnary and react now i do want to show you quickly how we're get you would do secure uploads we're not going to implement it because uh this is a little more time intensive but i'm just going to show you an example here all right so this is if you wanted to have more secure uploads you would use the signed upload so again you would select in cloudnary the signed option instead of the unsigned and then you need to add a few things so the things you need to add are going to be a timestamp and you can do that by by like this here um you're gonna have your upload preset that was the same as the other one and you're gonna need some sort of cryptographic library so you can download something from npm uh this is a react native application so it's using uh one that's not uh it might be actually uh react to but anyways some cryptographic um uh algorithm here this is shot 256 a very common one but there's uh you could add uh something else i would suggest this and then you're gonna have this text string so we went back ticks and you're going to add your timestamp which is here you're going to add your upload preset and your cloudnary secret api key and that's on that front page let's just go show you there so that's on this front page so that's your secret api key which is right here obviously i will not show you that okay so you add that uh all into one big string and then you're gonna upload uh the uploaddata.append like we had and you're just gonna append each of these things so you're gonna have to file uh the api click key with your cloudnary api key uh your upload preset uh your append your timestamp and your signature there all of which come from here and then basically everything else is exactly the same so if you're looking for a more secure way to do your file uploads or your image uploads or whatever to cloudnary uh that is a good way to do it anyways that's it for uh this video hopefully that was helpful um next time i think we're actually start creating some tweets so implementing some actual tweet functionality so thanks for watching and i'll see you in the next one [Music] all right so in the last video this is kind of where we uh ended up we're able to upload an image and in this video we're gonna be creating actual tweets so if you look here right now this button and click on it doesn't do anything so we're gonna add uh this feature where we can actually tweet something because that's gonna be important for twitter now let's uh head over here okay and just a little housekeeping i've added a tweet.css which is going to be this tweet button and stuff some styles for that and uh kind of the styles for the modal that we're going to be using for creating our tweets so uh that will be in the code you can go and copy it over because i don't want to write all the css in front of you now another little thing in our update profile here i've added just some typing because this is typescript and i haven't been doing much of that so uh we have a change event an html element and then in our use ref we have uh an html element there um and that is basically all uh the typing i've added for that so you can go ahead and add that if you like and uh yeah let's get into uh this video okay so if we head over to here our mutation.ts this is in our back end and this is how we are going to create the tweet we've already looked at this but i just want to show it to you again so we're going to pass in some sort of content that's going to be the tweet itself um and then that's all we're really passing and then we're connecting it to the user which is our cells and that shall create the tweet for us all right so i think that's all the preamble we need let's get into actually creating this create tweet component all right so let's get into this so we have our components uh folder here we're gonna go in here and we're gonna create a new file and we're going to call that tweet.tsx okay and then in here we're going to create a new component so we're going to go rfc that's going to create a react functional component for us and that is going to be our basis now what we can do is come in to our uh update component here our update profile rather and we want to copy a bunch of this over so we're just going to go and copy everything inside here and then we will just replace what we need so copy that over and then come in here and we're going to paste that looks like we're not we're missing a div up top here so let's go div here and that should be that and obviously we're getting a bunch of red lines because we don't have a ton of stuff but let's also bring in kind of this open modal state so let's bring in all that so our state here or open modal copy that over and we can paste that up top here and then these two functions are going to be the same copy those over and we can paste that below here okay so that takes care of some of this okay and then we want to bring in the modal make sure we're bringing that in up top paste that in we can uh go and add all our missing imports like this as well and that is uh command and period and you can uh import all the different missing imports there okay and we still don't have up we actually don't need a lot of this so we're not going to need the input here or any of this image uploading we don't have an image there so we can get rid of all of that there so we got our formic um we haven't done our initial values yet so we can actually copy that over too so you can see in our update profile here we have all our initial values so just copy that over and paste that in here somewhere and paste that in here and we are just going to have one value here and it's going to be content and that is going to be an empty string to start and we're going to have uh we're going to have a new interface here so let's go tweet values and then we'll just create that above here and this is going to be our typescript interface interface and then we'll call it tweet values like we just said and we'll just have content as a string and that takes care of that okay so we're looking pretty good right now um let's go ahead and just start adding our actual mutation here so come up to the top here get a little bit of room here and we're going to go const create underscore mutation all right sorry tweet underscore mutation and that's going to equal gql auto import that give us some backticks there just like that and then come in here and we'll go mutation and create tweet it's what it's called on the back end there and then we'll go dollar sign content this is the only thing we need to pass in and that's going to be a string and then in here again create tweet and then again content and that is gonna be content okay and then in here we're just gonna get back the id okay so that is all we need for this gql did that not get we're not using it i guess but that should get brought in there we go okay and then in here we want to actually use this tweet mutation here so let's come up to the top and we'll go like this const create tweet and that's going to be equal to use mutation and then here we're gonna put create underscore tweet underscore mutation okay and then again we're gonna go like this and we're gonna have uh our refetch queries here and then we're going to pass in here um an object which is going to be query and then we'll pass in the me query which will auto import there okay so it looks like it's not bringing in used mutation here so make sure we're doing that bring that in and we're looking good right there and then we're going to want to do a validation schema which is from yup and that's just to make sure we have uh more than a certain number of characters or with twitter i think it's 256 now maybe i don't know we're going to do 256 for us but less than 256 characters so come down below here and we're going to go const validation schema and that is going to be equal to yup which we are gonna bring in dot object and then we're gonna pass in an array here or sorry an object here and our only value is gonna be content there and that's going to be yup dot string and we are going to say dot required because it's going to be required and you can just chain these different things on right so then we're gonna go dot min and that's gonna be a minimum of uh one and then we're gonna say uh must be more than one character okay and then we're gonna say dot max and we can pass in our max value that we want and for us that's gonna be 256 and then we're gonna go uh must must not missed uh be less than 257 characters okay so we can go ahead and save that um and we haven't brought in yup so let's come up to the top here and we'll just bring in you up there and that should take care of that okay and we can uh pass in our validation schema here to our formic make sure that's there and we want to change this to create tweet just like that and our variables again we are passing an object and spreading in our values before but since we only have one value here we can just press uh put values like that okay so that's looking pretty good okay and then also we want to switch out this edit button for a tweet button so i'm just gonna paste this in here and we got a new button a little bit of styling on here again it's just going to be opening the modal uh and then we have a span with a tweet button like that okay so that's good and then scroll down here and we don't need a lot of this so let's get rid of all of this and we're going to change this to content okay and that's going to be text and it's also going to be a text area we're going to change the placeholder here to say what we'll say uh what's happening which is uh i think what twitter says okay so that looks good and our error message is going to say again content okay and then i'm going to pass in here we're going to get rid of this and i'm going to pass in a footer above this which is just going to be a line and then at the button down here which is going to type submit and it's going to have the class name of tweet button and this has a class name of footer and i think that's about it the one other thing we do want to add is a little bit of styling at the top here and that is going to be like this so inside the modal above the formic we want to add this and this is gonna be just like an exit uh an x or whatever in our top left and then again just a header with a line for some styling and make sure you get these class names in uh of header and of uh exit up here um all right so i think that's basically all we need so let's go ahead and save that and let's go oh well i guess we gotta bring it in so we actually want to go here and go left nav uh where that is our component our left nav component and as you see right now we have our uh spam with our button that says tweet here but we actually want to bring this in so we can get rid of uh this entire thing here and then inside here we just want to actually bring in our tweet component auto import that all right and then just from a styling perspective actually we want to change a couple things here so come into our custom modal so for our min width right here we're going to expand this a little bit so we're going to go 30 and then below here in our min height we're going to make that a little smaller so that's going to be 10. so go ahead and save that okay and then finally we want to make sure that we're bringing in our styles so we have to import our tweets from our styles slash tweet.css that's uh created right here so go ahead and do that and then i think we should be good so let's uh check it out here all right so this is our app here we can go and refresh just make sure everything's working good and then we're gonna click on this tweet here we get our model our modal rather popping up and it says what's happening and we can just say test tweet and then hit tweet okay so it goes away but obviously we have no idea if anything's happening because we're not showing our tweets or anything yet so let's go and check out our pg admin okay so if we come over to our pg admin we can see let me bump this up a little bit we can see here that we uh have actually created our tweet test tweet and my author id so that looks like it is working great and that's gonna be it for this video and the next one uh we might start building out our actual home page and uh start showing our tweets and that sort of thing so thanks for watching and i'll uh see you in the next one [Music] alright so welcome back to another video here and in the last video we were able to implement uh creating tweets like this um and in this one we are going to go over and kind of style our homepage and stuff however i did realize that we have zero ways of logging out right now um so right now we're having to uh inspect our element and everything and then clear the token uh manually and obviously that is not ideal so today we're gonna be uh implementing some log out functionality and uh clearing that token so uh let's get right into that all right so just to start off a little bit of housekeeping here i want you to come into primary.css and uh we're gonna get rid of this uh left div right here so right now just um go like this and comment it out um and we might be using this again later but for right now we're just gonna get rid of that and i'll uh that'll become apparent uh later on for our styling um and now i want you to i've added a couple uh files here one called logout.css and it just has some basic styles here of course the link will be in the description uh in the github repo so you can go ahead and copy that down or go to the github for that and then the other thing is this log out modal so right now we have some custom modal styles for our normal modal but this one's going to be slightly different so we have some different styles for it all right so go ahead and add those and uh yeah and then we'll get into actually coding this up all right so we need to create a log out component and we're going to put this at the bottom here but we haven't made this yet so come into your components folder add a new file and we'll call it logout.tsx all right so then come in here and we're going to go rfc here and that's going to give us a functional component to start out okay so that is good and now let's uh just start bringing in some different stuff so let's go const history and that's going to be equal to use history okay and then we need to bring that in okay so bring that in there and this is going to be used because we're going to redirect after uh we log out our token because we don't want to stay on the same page because that will not work and then we're gonna have a few other things so we can actually go and copy some of this modal stuff over from a different component here so let's uh look in here what do we got some uh we've got a modal here so we can just open and close modal let's copy those over and just paste that a little room below here and then this state is also going to be copied over there um so this can go up top copy that over yeah and then we can actually copy our actual modal here so let's copy this over and put it in here too and we'll just put it down here and then uh let's close off the modal there okay so that's good for that we'll bring all that stuff in in a minute we gotta bring a new state uh let's just go command dot and uh we can add all missing imports there speed things up a little bit here now we have to do our uh me query here so let's go like this and we'll just type this out actually so let's go const and we're going to go loading again error and data and that is equal to use query and we'll bring that in here and then we're going to pass in the me query here so me underscore query and we can bring that in so that's great and then the same thing as always so if it's loading uh we will return uh p tag here and we'll say loading with a triple dot and then copy that down here and we can say if uh error and we can actually go like this and say error dot message as usual close that off okay so that's looking good so i guess next let's come down a little bit here um and let's actually do our handling of our logout so give yourself a little bit of room here scroll up a bit and let's go const uh handle logout okay and then we'll go equal and there's gonna be an async function async and that is going to be an arrow function okay and then in here we actually want to remove our token because that's basically all that's going to consist uh all our logout's going to consist of is just removing the token that we've added to our local storage so we can go like this local storage dot remove item and then pass in the item we want to remove which for us we called token of course we could have called it whatever we wanted and then so we're going to remove that token there and now this is where we want to use the history.push because we don't want to stay on the same page there uh so history dot push and then we're gonna push them back to the uh log in uh route that we have created okay so that's good go ahead and save that um that is looking good and now the last stuff we got to do is uh kind of create our actual log out button or whatever we want to do and that's going to be inside this modal um but let's just uh code this up so i'll probably just code this up we'll speed it up and then i'll go over it [Music] all right so that looks good let's go over this a little bit here we're bringing in a few things so we have to bring in our modal make sure we're doing that we already brought in our use history here um make sure you're bringing your styles from logout.css and as well your logout modal okay so that's good um and then basically we just have some markup here so we have a logout class name here the wrap is wrapping our entire div here then we have our open modal this is gonna be a span and inside our h4 here we're gonna have an image which is just our avatar and then we're gonna have a span with our uh our data.name this is why we need to bring in the me query here um and then we just have an ellipses as an icon there so this is what we're going to click on so we're going to click on this span it's going to open up our modal so that's this on click open modal here great uh and then we just have our modal here we've absolutely positioned it at the bottom of the screen um what else and then in here is our actual handle logout so this span if we click on this it's going to handle our logout and it's going to say our logout is our data dot me dot name is uh what we're clicking on there okay so that is good let's go over to the left nav and actually add it to uh the component all right so now we're in our left nav and we wanna actually add it to the bottom so we're going to go right below the tweet here and let's go log out import that automatically and then let's go ahead and save this and that should do it for us let's go check this out great so that's looking okay this is at the bottom obviously it's not styled perfectly but uh for how sloppy this is that'll have to do um so basically we want to remove the token so maybe let's open up here and go inspect so we'll go to application right here let's bump this up for you a little bit too much so this is the token that we want to be removed when we click on this so hopefully this will work here um maybe give ourselves a little more room and hopefully this will be removed okay so we're going to click on here it's going to show our modal here and it says log out at darwin which is us so we click this hopefully this gets removed let's see so you can see this gets removed and we are redirected to our login page and again that is over here let's go to our logo component and this is basically our entire handle log out we're just removing that token and redirecting to the login page anyways that's it for uh kind of how to log out um and remove our item with local storage here um in the next one we're gonna actually style our homepage and get our tweets showing and that sort of thing so uh stay tuned for that thanks for watching [Music] all right so welcome back here and in the last video we added our log out here as you can see um and that was working good and now in this video we're going to start displaying some tweets and right now we don't have any sort of uh home page or anything so we need to go and add that so we're gonna add a home page and we're gonna kind of have a similar layout to this except for whenever all our tweets um below and right now we're not gonna be doing anything with our followers so we'll add that back in later but we just want to get some tweets displayed as we can so that is good and let's get right into it all right so come over here and first of all i just want to tell you to add these style files so i have an all tweets dot css right here and just some basic styles uh to make that look okay so you can copy that down or get it from the repo and uh then the other one was this home.css so same thing um you can either uh get that from the repo um or try to copy it down in slow-mo but i don't want to type out all that css so uh go ahead and do that and then we'll get into the actual coding all right so the first thing we want to do is come into our back end here in our server and we have a tweet.ts already so you'll have that but come over here and we want to add one thing so we want to add a t dot model dot created at okay and you might have to restart your server in uh in order to get that error to go away there but that should be good and you should have a created at um field here um if we go down and check in our schema.graphql we check our tweets we have this created at now in our schema okay so come over to your query.ts also and we need to add a kind of all tweets type uh query here so what we're gonna do in order to get that is we can just copy this down here okay and then we're just gonna replace here and come in here and we're just going to say tweets okay and then this is going to be of the type tweet great and then this is going to be ctx.prisma.user but we want uh ctx.prisma.tweet and uh that's going to be find many and that's literally all we have to do to get all of our tweets in a query so pretty simple go ahead and save that again you might have to potentially restart your server but once you do that you can come over here and we go localhost four thousand now we come over here and we have a tweets uh query and it has all our fields there okay so that's it for the back end so we can get rid of this now uh we can close this up and now let's get into uh coding out the front end all right so the first thing we want to do is create a new page so let's come over to our pages here open this up let's go file and we'll just say home dot tsx that's great and it's going to be very similar structure to our profile so come into your profile copy that and then we're going to paste in that profile here okay and then we want to change obviously uh the name here to home and at the bottom two home great and then we want to get rid of basically everything we had on the inside here but we want to keep our structure so we can get rid of this here kind of all the way up get rid of the avatar and yeah basically we're just gonna get rid of everything other than the primary and the left so up to the profile here so get rid of that and then we're gonna come in below here and we're gonna go dot home and that's gonna give us a new div there and then we're gonna go dot home slash header or dash header rather and a div in there and then in here we're gonna go h3 and then we're gonna go home dash title okay and then here we're just gonna say home and then inside here is where we're gonna have our homepage tweets and all of our tweets and those are gonna be two components that we're gonna create um so let's right now uh just do an h1 and we're just gonna say tweets are gonna go there all right so that looks good there now let's come up to the top and we're gonna bring in some different things here so instead of profile here we want to bring in home.css so that should be good save that and then after we'll bring in our tweets but let's just check this out because i think our queries are gonna be the same so these should be good um i think everything else should be basically good but let's check out uh and make sure this is working so what we want to do we want to come over to our app.tsx here and in our authenticated route so if we are authenticated we have this users right now but we don't need that so let's go and get rid of that and then also let's add an exact here so if we have a a slash here it's just gonna go to this and instead of users which isn't really something that we're gonna need we're just gonna add a home okay so we can auto bring that in and now let's go check out and see if this is working okay so let's refresh this and then we can redirect once that's done we can redirect over to dot slash and we're getting the same thing right now so right now we're not really showing anything but is given us now we do seem to have a little issue here for some reason the uh this has changed to a blue color instead of black so we want to change that back all right so our issue seems to be coming our login.css and we're uh looking at our a tags here so our link tag and our color here let's just comment that out and see if that does it for us okay that seems to work so that's good so we get rid of that for now and our home seems to be working good so this is all good so now let's come and actually create some of these components so let's come over into our components here and we're going to get kind of all our tweets so let's come in here create a new file and we'll call it all tweets dot tsx and we'll just go rfc create a react functional component give some structure here and then we'll have all our tweets here okay so this is good now let's start building this out a little bit so let's first uh add our query so we're going to come up above all this and we're going to add our all tweets query here so we're going to const tweets underscore query and that's going to be equal to gql bring that in and we're going to go back ticks here close those off and then inside here we're going to go query and then we're going to say tweets query open up some brackets and then we'll add all our fields right here so tweets let's add the rest okay so we're going to be looking at all our tweets here with a tweets query uh we got an id when it's created at because we're gonna want that the content is the tweet itself then we're gonna get our author um and then our profile with our avatar and whatnot so that's looking good let's come down and add it here below this so let's go const as usual and then we'll go again loading and then we have air kind of the typical ones we have data perfect then we'll go use query which we got to bring in and then we will pass that in as tweets query just like that okay and then the same things with the loading and the error state pass those in same thing as usual and then we're going to want an interface here because we're going to do a little typescript so interface and then we'll call it all tweets and then we'll pass in the different fields here okay so that's our interface here so you can see we got the different fields here um and as you can see i don't know if we've done this much before but you can nest these different things here so we got our author and then our profile is nested as well so that's looking uh pretty okay so now what we're going to do is we're going to get all those tweets and display them in a certain way so let's uh type all that out down here now for a date here we're going to want to pass in uh we're going to want to use a library called date fns so we got to add that so come down to your terminal open up a new window make sure you're in the web folder here and once you're there you can go yarn add and it's called date dash fns is the library so once that's good we can close out of this and we're going to add in here or that's why we needed our created at a field there because that's what we're going to be using for to show the date of when the tweet was created so open up some braces here format distance and we're gonna go sub days here bring that in and then we're gonna go new date and then we're gonna pass in the date that it was uh created at so tweet dot created at and then there's a second argument here and that's gonna be zero here and then we wanna go to the new date and call that there and then finally it's getting a little scrunched over here we're just going to go a go and we need a comma here make sure that works good and then we can go ahead and save that so the sub days are going to be the difference so we have when was created at and this is our today so that's how long ago the tweet was created basically is what that's gonna show if that makes any sense at all hopefully it does okay so then come down below here and just finish this off all right so let's just go over this real quick uh we're gonna get our data with all our tweets so that's basically every tweet we have we're passing in our interface of all our tweets here that's what that is uh we have a container with a header this is gonna be our avatar image and then we're gonna have our name and the time that the tweet was created and also the content of the tweet of course so that's good let's uh bring this over to the home real quick and instead of tweets here uh let's go below tweets actually and we'll just go uh all tweets and bring that in perfect go ahead save that and let's check it out refresh this all right so this is showing up right now the stein's a little bit off but we will fix that but we have our name here and we have our uh test tweet and all that so that's looking good now let's create we want to be able to create a tweet up here so let's go ahead and add that so come into your component here and let's add another file here and we will call it homepage homepage rather and dot tsx so this is gonna be fairly similar to our tweet.tsx so let's go copy this over and we just paste that in here and we want to change the name of it of course so sorry come over here and instead of tweet we will say home page tweet now let's go and start uh changing a few things so a lot of it's going to be the same so our create mutation tweet can stay our tweet values can stay so all this can stay our cree tweet mutation with our mi query and all that uh we don't need this as a modal so we can get rid of this this can stay this validation schema can stay again get rid of this everything up until here can go because we don't have a modal which means we can get rid of this modal here we're going to add a class name to this div here and that's going to be equal to home page tweet that's great and then our formic rank of our initial values our validate scheme is going to be there our on submit's going to be the same uh the only thing we can get rid of this here the value is great and i think that is pretty good content we still want this what's happening uh that can stay the same error message is good uh we do not need this footer i don't believe so get rid of that and for this tweet button we're gonna change some of the styling so the class name instead of tweet button we can go [Music] home tweet uh button dash button all right then actually below the formic here we want to add in that footer so let's go dot footer and that'll add that and that's just going to be a line below that so go ahead and save that that should be pretty good let's go ahead and add that to our home.tsx so above actually are all tweets here we can get rid of this tweets now okay so in here we just want to go uh homepage tweets home page tweet rather so add that in auto import it and go ahead and save that all right so this is looking a lot better now so if what's happening we have our tweet functionality and then we're gonna show our tweets below here but some of the styling's so a little off so let's add some changes here okay so i realized we're not actually bringing in our styles so of course the styling is going to be off a little bit so let's import and it's dash dash styles dash all tweets dot css all right so go ahead and save that let's check it out go ahead and hit refresh and now we got our styles looking okay so our test tweet uh we have our name there things are looking good and then we can have a add a tweet here all right so let's actually test out the functionality of this tweet make sure it works so let's just say another test tweet and we can press tweet here and then if we refresh we can see we got our uh our second tweet there and as you can see this is our data fns rather uh less than a minute ago so it'll give us kind of a nice um little date uh there okay so i think that's basically it uh obviously when we press tweet we'll actually want to refetch our queries here so maybe we should add that right now actually so right now uh when we tweet this we're doing a me query but what we'll actually want to refresh is this tweets query so we can say come up here rather and we can say export and that'll export it for us and then we can bring it in here so instead of the me query here what was it tweets tweets query so auto import that now save this now let's go check it out refresh this now when we add this we want to be able to refresh so it should show up automatically so let's try that out last test tweet and let's press that and you can see it shows up right away so that is awesome now i think we have one other styling issue here which is i think i had a little line below this so let's check that out all right so come over to the home.css here and we're just going to add a border bottom to this home dot title here and then we're just going to add a little padding and just the width like that um just because we want a little line so let's go and check that out all right that looks okay all right so that's basically all we need for this video it's starting to kind of come together a little bit there we got our tweets obviously we're just showing our tweets because we're not following anyone we don't even have any other users or anything we'll fill out this right maybe with the most popular tweets or something eventually but i think in the next video we're gonna start uh have adding the ability to like tweets so that should be interesting so uh yeah stay tuned for that one and i'll see you in the next video [Music] okay so welcome back here and this is where we left off in the last video so we're kind of displaying our tweets our homepage here and in this one we are gonna be going through and adding the ability to uh like a tweet so we'll be doing kind of the front and the back end in this one hopefully and uh yeah so let's get it going all right so i want you to come over to your schema.prisma here and we have to add some new stuff in here so give ourselves a little bit more room right now and we're going to add a new model um so let's come down we'll copy over this user model here copy it down and we're gonna be adding one and we are gonna call it uh liked tweet here okay so like that and we're gonna need some different fields so let's go through and add those okay so for this like tweet we got an id um and we are going to be attaching it here to a tweet or putting whatever tweet that we're liking here uh we're gonna say when it was like that we want a date time and then we're gonna attach it also to a user now we wanna go through so we got our user here and we wanna add that to here as well so come down here go below the profile here so we can go like this and say we'll call it liked tweet and then we can say liked tweet like that and it's gonna be an array of like tweets so we're gonna store an array of like tweets and attach it to the user here so that is what that is gonna say and then also we want to add it up here on our tweet so we're gonna come in here as well and have a field here called likes okay and that again will be liked uh tweet and that's gonna be an array as well so that is basically all we need to do for that i believe all right so this is me in the future speaking now in our schema.prisma we actually do not want this user id in our liked tweet to be unique so we're going to go ahead and get rid of that and then save that and then we can generate our schema and everything let's open this up here on our bottom and we can open up a new window right here and we want to cd into our server make sure you're in the right uh folder there and then we're going to run uh mpx uh prisma uh migrate and we're gonna say save because you have to save it first and then dash dash experimental and we need that flag and you want to name the migration so we're going to say add likes okay so that seems to work good and then you want to push it up so you want to do the same thing except for uh say up instead of save okay and now it looks like that worked so we exit out of this we can close this off for now and now we want to go over into our src and we're going to go in our types here and we're going to add a new type so new file and say liked tweet dot ts and we're gonna go let's just uh copy over this tweet maybe tweet.ts copy this whole thing over and then right uh paste this right in here okay so that's good and we want to change over a few things here so obviously this isn't going to be tweet so we can say liked tweet and that's all good and this will be liked tweet okay that looks great and then we're gonna have an id we're gonna have a tweet field and we're gonna be liked at field okay and then we don't have a created ad so we get rid of that now uh as you can see here this is our underlined it's because we're gonna have to restart our server in a minute but we'll do that in just a second so we also want to add it to our tweet.ts so come down here and below this we want to go t dot model dot uh likes okay and we'll call that again same same error there make sure we go ahead and save these um okay so that is good and then also we are going to want to go into our index here index.ts here and we just want to export uh our liked tweets as well okay so that's great or like tweet sorry make sure you have that spelled right okay good and then finally we also have in our user.ts we want to add this model below here so t.model dot liked tweets and we'll call that there okay so that is good so now let's move over to our mutation.ts over here i don't think we need this delete post so we can get rid of that okay and then we just want to copy this down can we use it a scaffold r like like tweed uh thing here and then we wanna add here we'll just say uh like tweet that's what we're gonna call our mutation and that's gonna be the type of liked tweets or tweet like tweet rather tight and then in our content all we're going to pass in is an id and that's going to be an int arg good we're going to come down we're going to check for authenticated still and then we're gonna go prisma dot like to tweet dot create so that's good and then down here instead of author we're gonna say just user because that's what we've attached it to and that's going to be the same we're going to connect it by uh the user id and then in this field here we also want to connect it to our tweets remember so we're going to go like this say tweet and then we can just copy uh this down here and then this is going to be the id that is our argument coming from up here make sure we uh don't forget to get do this as well so that's idea instead of content so that's going to pass in there now again we're getting these because we haven't uh we're going to restart our server and generate our schema here so come over here um i think make sure you save everything good come over here again cd into our server and we are going to write mpx prisma generate like that seems like that's good exit out of this and then come back to our server and you can see right now with our server uh it says there's been a change so we're going to restart so that's exactly what we're going to do so let's do that so ctrl c out of that and let's run npm run dev again okay so that is good for most everything i think i like tweets here that's like tweet perhaps yeah there we go so go ahead and save that okay so that is all looking good so i think if we uh go to our uh graphql here uh that's localhost 4000. so if we come over here to the graphql playground open up our docs we should now have a like tweet there we go so that is looking pretty good um so i think that's all we need to do in the back end uh we can still see we get our users attached to here now through a like tweet so that's good and i think that's all we need so let's move on to the front end okay so come into our src here into our components and we're gonna add a new file and we are gonna call it uh like tweet dot dsx and then again just rfc here we're gonna create a functional component and it's gonna be called like tweet so that's good and let's just uh begin by creating our mutation here [Music] okay so this is what our like uh tweet mutation is gonna look like here so we're gonna have the uh bring in gql here uh we're doing that up there um we're gonna be calling like tweet that's what we called it in the mutation and passing in the id and that is basically all we're going to need to that to do for that let's come down below here and we're just going to do a little interface here and we'll just call it props for this one and it's just gonna have an id of a number okay so that is good and for our like tweet here we're going to be passing in uh the id from the props because we're going to be putting this in the all tweets so we're going to get the id of the actual individual tweet and then we're going to pass that in right here so we need to pass the props in that's gonna be the typescript props that we are creating with this interface uh right there okay let's continue on here so let's go const here and we'll go like tweets and that's going to be equal to use mutation bring that in and then pass in the like underscore tweet mutation there okay and then comma and we're gonna do a refetch query here and we'll pass in here an array of the objects that are an array of objects yeah we want to refetch so that's going to be query and that's going to be the tweets uh query and we're going to bring that from all tweets this is what we're going to want to refetch there so that is great that's looking good um and we actually for this tweets query we want to go over to the all tweets queries we want to add a couple things to that so let's go into there so we're in our alltweets.tsx right here come down uh below the content right here and we're gonna go likes and pass in an id here and i think that's all that we're gonna need for that actually so that should be good all right then coming back into here let's go below this and we're gonna go const handle create like and that's going to be equal to an async function and then we're going to go wait and we're gonna say like tweet so actually calling our our like tweet function here and then we're gonna pass in here uh the variables and we're going to pass in the id which is the only variable and that's going to come from the props that we're passing in there so we're not calling it yet but this is the handle like function that we have created now we want to add something to uh actually call this here so come down below here and we're going to change this to a span and then we're going to go on click and on click we're going to call that handle uh create like that we just created there great and then we'll just add a little style here and that's going to be equal to margin right that's going to be 5 px there okay so that's looking good and then the last thing is the actual uh font awesome kind of thumbs up icon that we want to add here and i'm just gonna paste this in here but uh is the class name for it um okay and once we like we're gonna be uh it's gonna be filled in so right now this is just gonna be the outline and then once the person has liked that it will be filled in so that's how we're gonna do that so let's go ahead and save that okay now let's move on to our all tweets where we're gonna actually put this so let's come down below now like i said we're gonna fill it in once we've liked the tweet so we have to be able to detect if the person has already liked that tweet so we gotta bring in right here give ourselves a little bit of room here we're gonna bring in a different query so let's go const loading and that's gonna be called me loading so we're just uh casting this is me loading and then we're gonna say error and that's gonna be me error and then we are gonna say data and that's gonna be me data and then those are all gonna be coming from uh use query here and we are gonna pass in the me query okay and then we want to copy these down do another uh if statement here and we'll just say me loading okay and here we'll go mirror the air and then this is going to be me error dot message now we want to come into this meet query um so it's coming from where i think profile okay so go to your profile.tsx here and come up to the actual query so we want to change this around a little bit so we just want to add a couple things right so let's come in here and we'll say liked tweets and in here we're gonna get the id and then we'll get the actual tweet here and then from that we also want to get the id so you want to get the id of the liked tweet and then the id of the actual tweet that had been liked if that makes sense hopefully it does so go ahead and save that and then in our interface and our all tweets here we want to add uh one thing here so let's add a number of an id and below the created app maybe let's come here and we'll just add likes uh likes and we'll just for now just add an array an empty array and that is gonna be fine for now okay so let's come down here all right so right in here below the p tags here is where we're gonna be creating uh adding our like button and whatnot so uh i'm gonna come in and type this up and then we'll go over it [Music] okay so that looks good let's uh come over here let's actually close this up real quick give ourselves a little more room to see everything and then again we're doing a ternary here so if we have liked it we're gonna show this one which is the solid to show that we've already liked it um and we're gonna give a tweets are the length of the tweets how many times it's been liked so that will be that line there and then if the other side of the ternary there uh we're gonna show our like tweet component which is gonna be um the not solid uh thumbs up and then we're passing in the id here uh and again showing how many times this tweet has been liked with a likes dot length uh situation there okay so go ahead and save that all right so it looks like we have a little spelling error here so let's come back here come up to the top here and we're going uh me error so this shouldn't be a comma of course that should be like that all right then also uh we're going me dot data i think this is actually not shouldn't be plural so it should be like tweet instead of tweets so go ahead and save that and then also the profile here we have this as tweets but we in our back end have it as like tweet so go ahead and save both of those and then let's check it out okay so this looks like it's good this is our like uh right here uh we might add a little margin there to the left but let's go ahead and see if this works so let's click it and we have an error here okay so our error here is in our like tweet we don't want to put this we want to go dollar sign id of course go ahead and save that and let's check it out all right so let's try this again we're going to like this and we're getting one so that's working but where it doesn't look like that's switching right away now let's refresh here okay so now it goes to that so that's working well um and we're gonna want that to re-fetch so we might add that later but let's add a little padding or a little margin rather okay so we're just going to add a little styling to our all tweets so come into our styles here and we want to look at our all tweets and i'm just going to come down to the bottom here and paste in a little styling so this is going to be our uh likes div so dot likes we're going to go display grid with this grid template columns and a little bit of margin on the left and a little bit on the bottom so go ahead and save that all right so that is looking good we have the ability to uh like a post here and again if we click on this again i'm clicking on right here and nothing's happening because it's not that functionality so it's gonna see we've already liked it we can't click again okay so that's looking good uh that's gonna be it for this video uh in the next one we're gonna add the ability i think to potentially unlike i guess so delete the like that we have added um and maybe do it so it uh refreshes so it shows up automatically all right thanks for watching see you in the next one [Music] all right so welcome back here and in the last video we added the ability to like a tweet and now we are going to be adding the ability to unlike the tweet in the uh same manner so let's get right into it all right so come over to your mutation.ts in uh in the back end in your server folder and then uh we're gonna this is where we're gonna do our delete uh the tweet like so come down here and uh copy this over and just copy it down and then we'll just work off of this here so come into this field here we're gonna get rid of that and we're gonna go delete like okay and it's gonna be the same uh type here so that's gonna be like tweet also um we are gonna have an uh int here uh so that's good but we want to add one thing here which is nullable and that is going to be false so that basically means that it is required so that is good and make sure that is like this and that is in an object there okay good and then we're gonna come down here we're gonna make sure we're authenticated so that can stay the same we're gonna go ctx.prisma.like tweet that's good and then we're gonna go uh delete instead of create because we want to delete and then we can get rid of this so get rid of this here and we can actually get rid of this data too so get rid of this and then we're gonna go where and then it's gonna be the id is uh the id all right so we're gonna delete the light tweet using this and then we're gonna find which uh tweet to delete rather using the where keyword here and then we're gonna find it by the id and it's by the uh id of the like tweet and then we're passing in the id of which like tweet we want to delete so hopefully that makes sense so go ahead and save that you probably need to restart your server as well so we'll go ahead and do that come over to our server here and it's made some changes so it needs to restart so we'll do that okay so that looks good close that up and now let's move on to our front end okay so in here we want to come into our components here and add a new file and we are going to call that delete like dot uh tsx and then it's gonna be fairly similar to our like tweet here so we can copy this over and we're just gonna paste that in here get rid of that and then we can just go through and start changing things uh over a little bit all right so let's come in here and start uh changing these over so right now if this is a like tweet mutation but we want to get rid of that and we will call it uh delete underscore like underscore mutation okay and then this is going to be delete like which is what we called it in our mutation the id this can stay the same we're going to say this is required so we want to do that and then this is going to be delete like again and these can stay the same so that's good the interface this can stay the same we want to say delete like here delete like like that and then we want to bring this here copy that over and paste that here delete light mutation and then we have a refetch queries which we want to keep but we want to add one more uh thing to refetch here so give a comma here and we'll add another one which is query and that is going to be me query and we have a couple places we can bring this in but the me query that we want is from the profile i believe so go like that okay then we want to come down here and we have handle create like and we want to say handle delete like just like that and then again here delete like a little repetitive but uh this is what we are doing and then our variables here uh this is uh good and then we're gonna come down here and say handle delete like oh we missed one up here so make sure we get that that's delete like like that and that'll get rid of that error so that's looking pretty good i think uh this is f a s because it is going to be the solid um thumbs up so that'll delineate if we have already liked it or not so that's good and i think that's about it for that okay so that's looking pretty good so now we want to come over to our all tweets here and we want to add this in so come down a bit and right now this is how we're doing it is uh like this so what we want to do is get rid of uh this span here okay so you can get rid of that and in here we're gonna add our delete like bring it in okay and it says here if we uh if we hover over it here the id is missing in the type so we're passing in uh the props here of an id so we want to pass in which id it is and we haven't done that yet but we will add that in a second okay so let's pass in this id now this might get a little bit complex here so uh hopefully i can explain it um so we want to get the actual id of the liked tweet um so it's gonna be a little complex to get that because it's not the same as this tweet id that's the id of the actual tweet but we need the id of which liked tweet to delete which is a separate field so what we're gonna do is go like this we're gonna go id and that's equal to and we're gonna go me data dot me dot liked uh tweets and then we're gonna say dot filter and we're going to filter through these and we're going to go like here and we're just going to put any for now just to see if this works and we'll come back and do that in a sec and then we'll go like this an arrow function give ourselves a little room here and we're going to go like dot tweet uh dot id is equal to tweet dot id and then close this off here and we're gonna go get the first tweet which is the zeroth index and say the id of that okay so let's go through this real quick so we're going to go mee.data.lighttweet.filter so we're filting through all our like tweets and we're saying if the like tweet.id is equal to the tweet.id the first index of it and that id so if those are equal we're going to keep it um and there should just be one of these because otherwise it's going to be showing the like tweet and not the delete tweet and we can actually just change this over here so get rid of that and we can say liked tweets like that okay so that's good go ahead and save that and now we want to uh actually let's check that out okay so if we come over here um we see our different tweets couple users here and these are the ones we've already liked and this one has been like from someone else i guess so let's come over here and see if this works by clicking on this and it goes back to zero so that works perfect we click on it again it goes back to one now you see this isn't refreshing uh so this should when we click this become uh the other one so let's um i think if we refresh this actually ourselves yeah you see it becomes dark there so we want to add that to our refetch queries so come over here and that's going to be in our like tweet and our like tweet component here and if we look here we have our tweets query and the other one i don't know if you remember in the delete tweet we added another one so we're going to do the same thing here and we're just going to say query and we just want to add me underscore query again we're going to bring that in from profile here and then save that okay so now let's come back over here uh we can maybe we need to refresh this real quick all right looking good so now it's uh not not liked we're gonna like it we can unlike it good those all work good uh this one we can like as well okay so that is working uh very nicely all right so that's all we're gonna do for this video uh in the next one we might start building out this right side which is gonna be like maybe our most popular tweets so we'll do that by likes and then we need to start moving on to like comments and stuff um okay so stay tuned for those and i'll see you in the next one [Music] hi welcome back here and in the last video we went over how we can uh unlike tweets and in this one we're gonna start building out just this uh right side here so i think what we're gonna do is we're gonna put uh our most popular tweets here and that's gonna be by number of likes so we're going to sort by number of likes and then display the most popular tweets maybe the top i think we're going to do five tweets or something five or six tweets we'll see anyways let's get right into it all right so come over here and we're going to go into components here we're going to do a new file right here and we're going to call it uh popular tweets dot t s x great and then as usual we're gonna go rfc get a functional component up here scaffold a little bit there and uh yeah let's just start uh coding this up okay so let's uh write out this query here [Music] okay so this is what our query is going to look like here we're going to export it in case we want to refetch somewhere else we're going to call it popular tweets and we're going to get uh all the tweets and then we are gonna get um uh the created at the content the author the profile basically the basic stuff the number of likes for that tweet and then down here we're gonna actually sort uh by popular tweets but right now we're just gonna get all of them in here okay so that's good and then uh come down below here and we're just gonna do an interface and uh yeah a little type script [Music] okay so this is what our interface is gonna look like we're gonna call it tweet it's gonna have uh id uh created at basically all the fields that we have for up here in our popular tweets basically the same uh structure is that okay so let's come down to popular tweets here and we will uh add a few things so we gotta go const and we'll go same as always loading error error error and data like that and then we'll go equals use query like that and we will pass in rather the popular tweets just like that i gotta bring in use query use query there we go and then we want to come down here same as always okay so those are looking good and now before we get into our uh return statement here let's um sort these tweets so how we're gonna do this is we're gonna sort by the length of the like so basically how many likes they're doing so let's do that [Music] all right we're gonna call this get popular tweets here um it's gonna get all of our tweets and it's going to map over them and then we're going to use the sort function which we're going to pass in a function here that gets passes in a and b um so the first item and then the second item and then it's going to compare the two so it's going to compare them by whatever we pass in here so for us that's the likes dot length so the number of likes uh in the array it's going to compare um compare the two all right and if we're going uh b minus a that's going to sort them in descending order and if we went a minus b so if we flip these two and when a dot likes dot length minus b dot like cell length it would go in ascending order so that's kind of how we use the dot sort function um if that makes any sense okay and then one more thing we want to pass on to here is we only want to get the first few items so we're going to go dot slice which is going to get a subset of that and then we're going to pass in 0 and 6. okay so we're going to get the zeroth up to the sixth index okay so that should be good all right go ahead and save that all right that's going to reformat for us that's looking good and now we're going to come in and do a little markup here so let's uh get into that [Music] me [Music] all right so let's go through this real quick so we just have some style in here and i want to remember to let you know in our styles folder here i've added a popular tweets.css so this is here uh just a little bit of styling here so look in the github if you want to copy that over otherwise uh you might be able to copy it down there as well okay so that's looking good so back to our popular tweets here we want to remember also to uh at the top bring in this style so come in here and bring this in here and go ahead and save that so let's go through this so we have popular tweets as our class name uh wrapping everything we're going to have we're going to call it trending as our title i'm going to map through all our popular tweets here and these are the sorted ones and we are going to pass them in just in a list here and then we're getting our image of the tweet so whoever tweeted uh this their image will be the avatar um and then this is the content of the tweet and a p tag here and then we're bringing data datafns here and we're going to say when it was created at and then finally we're just going to pass in the number of lengths uh likes rather that it has okay so that is good now what do we have to do with this well we have to bring it in so come over to our home.tsx here right now we just have popular tweets right so let's get rid of this and come in here and what we're gonna do is just pass it in so it's called popular tweets so make sure we auto import that and close it off and save that and then we can come over here give this refresh and these are our trending tweets uh you can see it has a little background a little bit different color gives us our number of likes a little highlight here and that's gonna be that uh for our our side there now so that's great that looks all perfect now let's actually add it over to our profile alright so over here at our profile and we see we have nothing here but the cool thing about react and kind of component architecture there is we can just use that exact same component on our right side so let's just add that to our profile as well so come over here we're going to go to profile here wherever it is there it is and again we have the same structure here so we can just come in here remove this and come in here and say popular tweets import that close it off save it and come back here and right now it's nothing let's go ahead and refresh and look at that now we got the trend in here so that is looking good i think for the bottom here we're going to add kind of all the tweets that we've liked or tweeted ourselves eventually but uh right now we don't have that but this is looking good okay so i think in the next one we're gonna get into kind of commenting on a tweet and having that ability and then commenting on a comment kind of how twitter works in a kind of recursive fashion so stay tuned for that one and i'll see you in the next one [Music] all right so welcome back here and in the last video we added this kind of trending uh right side bar here um for our most popular tweets and in this one we are gonna be going over adding uh some kind of replies or comments or whatever you want to call them so let's uh start building this out all right so come over into your back end here into your schema.prisma and we're just going to start by uh copying over our tweet here um and then we are just going to paste that at the bottom just like this and we are going to be calling this model our comment so reply comment whatever you want to call it um and we can get rid of some of this stuff here let's just get rid of uh these things here for now so we're gonna have an idea created at uh when it's created at and then kind of the content um for our comment so that is good go ahead and save that and then also we want to add these up onto uh our user as well as to our tweet so let's come up to uh here to our tweet here and just on the bottom here we can just add this on as well and we're just going to say comments and that is going to be of the comment type and it's going to be an array so go ahead and save that and then we also want to add it to our user model here so do the same thing comments comment type and that's also going to be array of comments so go ahead and save both of those and when we do that that will automatically add these types here so it'll give us a user id and handle the relation and stuff for us all right so that's good let's open up this and we'll come over create a new window here and we will cd into our server looks like we were not in the right folder there so let's cd into server make sure you're in server and then we'll run that command mpx prisma migrate save dash dash experimental and we gotta name our make migration so we'll say comment and that looks like it worked fine and then we want to push this up by going like this and saying up instead of save and that looks like it is good okay so we don't need to be in the server for anything else for now we might come back to that but let's continue on here so uh next thing we want to do is we want to come into the types here and we need a new type so we're going to comment type so we're going to say comment.ts okay and let's just copy over we'll copy the like tweets doesn't matter just copy one of them over and we'll go into comments here paste this in okay and then we will uh add up here we'll go uh comment and then this is gonna be of type comment okay so that's looking good and then we're gonna need an id uh we need t.model.content then we need a created at just like this okay so that's looking good and i think that's all we need for that so go ahead and save that again we're gonna have to generate and restart servers and stuff so we'll have an error for a second so don't worry about those for now uh then let's come into our uh tweet here and in here we just want to copy this down and we want to say comments here okay so that's good save that we want to do the same thing in our user we want to add it here to our user so again we just want to say comments make sure you have a c okay save that uh and then we want to go into our index okay and we want to export it here so we want to make sure we have it there and we will say uh comments comment rather not comments okay that's good and then uh we'll go and create our mutation after this but let's actually make sure we don't forget to generate our schema here so again cd into server and we're gonna go mpx prisma generate all right that's looking good and if we come over here we see we might have to restart our server so in your server restart that and hopefully that takes care of all our errors let's go through okay no errors that's looking good we don't need our schema up right now okay so that is all looking great uh seems to be working fine and the last thing we want to do on our back end is actually create our mutation here so let's come over to our mutation uh in here dot ts and close this for now and down at the bottom uh let's copy over one of these that we can work with here so let's just copy over maybe the create tweet that's gonna be kind of similar so copy that and come down and see where this ends okay below this and paste that in and we're just going to start changing this over so let's go create a comment and that's going to be from the comment capital comment okay so that's looking good and then the args that we're going to pass in here one of them is going to be content and it's going to be a string arg that's good we actually want it to be nullable nullable and that is false so we want it to be a required field and then we're going to have a second argument here and that's going to be an id and that's going to be an int see if that pops up antarg yep and that 2 is going to be nullable uh false so those two are going to be required fields then we're going to come down in here and we're going to have content like that but we're also going to have an id that we're going to pass in so that's good uh same thing here and then we're going to come down to data and we're going to have content and then we're going to have this is going to be user not author for us and that's going to be connected here the same way and then finally we're going to have one more and we're going to say tweet and then connect and that is going to be connected by the id and we're going to say number same as the one above it and then the id that is passed in and then we are going to want to change this don't forget this so this is going to be not tweet but comment okay so that looks like it is working may have to restart the server there one more time okay that's all good okay so that is basically uh everything that we need for the back end so let's uh start building this on the front end all right so come into your web here come into your src and your components and we're going to create a new file here and we're just going to call it uh create comment dot tsx all right so let's actually come over to our tweet.tsx here and we're gonna copy this over because these are going to be somewhat similar so we can kind of work off uh the scaffolding here um so we'll come up to the top here this is going to be uh create a comment all right that looks good and then we are going to start with a mutation so it's going to be a create comment mutation okay and this is gonna say create comment make sure that's camel case okay that's looking good and we're gonna have content which is gonna be a string that's going to be required for us so make sure we put that and then we're also going to have a id and that is going to be an int and that is going to be required also and then we got to add that down here so our id oops our case is going to be our dollar sign id all right that looks pretty good i think uh create column mutation let's copy that over we'll paste that down here that is good instead of tweet values here we'll say comment uh props okay and that's just gonna be the content of the string uh and then we're gonna have another uh interface so come down here and we're gonna have to pass in some props so this is just gonna be the props that we're gonna pass in the typings for that so for this one we're gonna have a tweet okay we're gonna have a let's copy this down a couple times uh we're going to have a name we're going to have an avatar and then finally we'll have an id which is just going to be a number okay so these are going to be from what we're passing in from our all tweets component into this component so we know uh what user it's coming from basically all right so then let's continue down here just fixing this up a little bit so let's say create comment okay use mutation that's good create common mutation that is good uh we'll keep the meat query for now uh the modal is going to be the same actually so that's good uh our initial values are gonna come from the comment props okay and that's just going to be content the validate schema can be the same open modal this can be the same so that is looking pretty good now right here we're going to want to do this a little different so let's actually just get rid of this for now okay we're going to span like that and then we're going to throw an on click on here and that's going to be equal to open modal okay and then in the span here we just want to uh have kind of a comment icon so let me just paste that in here this is going to be from font awesome and it's just going to be the outline of the comment so that is good uh the modal that's going to be all basically the same all right then we're going to come down in here and we'll just say create comment that's good uh the variables so we're going to pass in a couple things here so we actually want to do an object here and we're going to go dot dot values so spread in our values even though it's just one for us and then second is going to be the id now this id is what we're going to be passing in from our props and that is going to be the id of the tweet that we want to connect it to so we're going to need that as well which we'll add in a sec but let's come down a little bit further here and just see what else we can change so this is gonna be a reply oh instead of what's happening here let's change this to uh tweet uh your reply okay dot dot dot there okay so that's looking good now we actually want to come over to our all tweets component here because we want to pass this stuff in so come down below here and this is where we're going to add um the icon and stuff that we want to click on to be able to open up our create comment so we're going to go like this we're going to span and then inside the spam we're going to add our create comment bring that in and then on this create comment we're going to add the things the props that we want to pass in so avatar that's equal to tweet dot author dot profile dot avatar okay close that off that's the first one let's give ourselves a little room here okay and then what else do we have we have name that's gonna be equal to tweet dot author dot name then we're gonna have tweet and that's gonna be the actual tweet content of uh we're gonna pass this along as well just to show what we're replying to basically dot content and then finally the id of the tweet that we are passing in here so tweet dot id uh we haven't add this so we're gonna layer but that's fine that will be added in a minute okay and then i'm just gonna add a little bit of styling on top of uh this so i'm just going to do it in line here so let me paste this in okay so that's looking good go ahead and save that and then finally here we want to actually show the length the comments if there is comments so how many comments there is basically so let's go tweet dot comments dot length is greater than zero so if there is a at least one comment we're gonna say tweet dot comments dot length and otherwise we're not gonna show anything okay now we're not we don't actually have this up here so let's add that so in our query here below the likes come in here and we'll say comments and we just want to get the light the length right now so we'll just get the id okay go ahead and save that and then we want to add that just like uh the likes here so say comments okay and that should take care of the error there okay so that's basically all we need to do in the all tweets i believe unless i forgot something which is very possible but let's come back over to the create comment here and let's start adding uh these props here so the things we want to bring in or we are bringing in rather are tweet avatar uh name and id okay and those are gonna become uh coming from our props just like that okay so that's good we're not using these yet but uh hopefully that makes sense and that takes care of our error in our all tweets there okay great okay so now we want to bring in our me query from uh that we have so let's go and bring this in so we don't have use query make sure we bring this in add use query that's good and then we have our me query and again our loading and our error state so make sure we add this because we'll be using it all right so let's go ahead and save this and see what we're looking at okay so if we come over here this is kind of what we got right now this is our comments uh create a comment icon here we can click on it and it says tweet your reply so that looks good uh i'm not sure if it's even working but let's actually do a little more styling too so we want to actually show the tweet in here that we're replying to just so there's no uh confusion for people so let's uh just add a little markup there for that all right so let's come down here and uh below our header right here is where we want to add this so let's give ourselves a little bit of room here and i'm just gonna paste this in real quick um just to show you so all this stuff uh the name the avatar all that was the props that we are bringing in uh from up here so that's why we need to bring in these three things because we want to show the actual tweet um so we're passing those in let's give ourselves a little room here so you can see the whole thing okay and then i've just added some styling here uh just with some uh css grid so that is what this looks like uh we're gonna have our image of the avatar of the tweet of the person rather uh who created the tweet so that's good uh we're gonna have the name of them and then here we're gonna have the actual tweet and then this just has a little bit of styling which is gonna be a line beside it that's gonna connect the two so go ahead and copy that down if you can and let's go back and save this and let's check it out all right let's refresh now let's say okay we want to uh comment on one of these we'll say this oh we have a little error there let's just fix that real quick ah we got this here let's get rid of that come back over refresh all right so let's say we want to comment uh give a reply to one of these tweets we can click on this we can see they're connected by this little line all right great so uh let's tweet something uh typical what a dumb tweet this is gonna be the reply rather so then we're gonna hit reply here and something didn't work uh one other thing we forgot here is uh we're gonna add an image component just to make it look a little better so come into our form here and just above here we just want to add this and this is going to be the same image component that we've been using for avatar and that's why you need the me query uh because we're going to go data.mee.profile.avatar okay go ahead and save that all right so we haven't switched this over so this is obviously not shouldn't be create tweet it should be create a comment okay so that looks good save that and now let's come back over and check this out all right so let's tweet something so you're a real jerk kind of a typical tweet okay so we should uh see this modal close and hopefully this works all right so that closed but again we're not showing the replies yet anywhere so we really have no idea if that works so let's check it out in our back end here all right so if we come into here this is uh my back end i'm gonna look in the comment here and i'm gonna see if it uh worked all right looks like it worked uh you're a real jerk right in there okay and again it's attached by a tweet id and also to our user by a user id and also a created ad so that looks very good perfect all right so i think that's all we're going to be doing for this video otherwise it's gonna stretch on a little bit too long but uh next i think either we'll display these comments um and we're also gonna have to add a way to do nested comments so we'll uh figure out how to comment on a comment or reply on a reply or whatever you wanna say so stay tuned for that one and i'll see you in the next one [Music] all right welcome back and in the last video we added the ability to comment or reply to a tweet so you see here we click on this and we can add our reply um okay so now we've done that but we're not actually displaying these replies anywhere so what we're going to do in this video is we're going to be able to click on a tweet here and then we'll go to a single tweet and it will have the tweet in uh in the header here um and then we will also have the replies uh below it so let's uh go ahead and add that all right so the first thing we want to do here is come into our back end actually we forgot to add one thing here so in our comments dot ts come up here and we want to come below here and we're going to add a t dot model dot user okay and go ahead and save that and that is all we're going to do for our back end today all right next we want to come into our front end into our web folder here and we want to go into our app dot uh tsx right here and we wanna uh do a actual tweet route to a single tweet so what we're gonna do is we're just gonna stay inside our uh is authenticated here so let's copy this route down and we are gonna say here we're gonna get rid of this and we're gonna go slash tweet and then we're gonna go slash id uh sorry colon id now this colon id here that you see is gonna direct to a specific tweet and we can pass that in um when we're redirecting so we're gonna do that and then down here we're gonna want to actually pass in our single tweet but we haven't actually created that yet so let's actually do that first all right so come over to our pages here and we're gonna get a new file here and we're just gonna call this single tweet dot tsx okay that's looking good and then we're going to want to copy over our home here so go and copy everything in your home uh file here because they're going to be quite similar to this and then we'll paste this in here and we want to change over this a single tweet and the same down here single tweet okay okay so you can go ahead and save that and now we can use that in here so let's actually go here and we'll import this as single uh tweet here and we can auto import that okay so that's looking good and that's all we need to do in our app.tsx all right so now we actually want to come in to our all tweets here because we want to have a link that's going to link us to the actual tweet that we want so come up above into our tweet container here right above here and we're just going to add a link here and bring that in and that's gonna be two and we're gonna go back ticks and we are gonna go say slash tweet and then we're gonna go slash dollar sign and we're gonna go say tweet dot id so we're actually gonna pass the id in here and that should be good and then we'll close this off and then we want to bring this so this wants to be able to wrap everything up until our content like this so right under our tweet.content so go ahead and save that and uh let's take a look real quick okay so we come over here we can uh so take a look actually um at our nav bar here um our address bar and when we click on a tweet like this we can see that we're getting the actual tweet and the number now right now we're just passing in the same home components uh so it won't look any different but uh we are gonna take this number and use that to fetch the individual tweet that we want so let's go ahead and start that process all right so let's start up at the top here and we are gonna start by changing this to say uh tweet underscore query okay and then this is gonna say tweet down here okay and then we want to get a specific tweet so we actually want to pass in a couple things so we want to say dollar sign id and we're going to say that is an int okay and then we want to come down below and this is also going to be tweet and then we want to pass in again the id and the dollar sign id and that's kind of like the mutations i don't think we've actually done specific query but this is uh you can pass in our variables just like that all right so i'm going to go through and add the rest of the query fields here and then we'll be right back all right so this is what our query is going to look like here a little bit longer than normal but uh basically we're going to get a tweet and then just get all these other fields from it so our profile and avatar are kind of the typical stuff and then we want to get the comments which is all the replies and then the user that sent that comment and then their profile on their avatar uh so nothing too crazy there but uh yeah that should be good all right so then we want to come down here and we want to actually add an interface here so give ourselves a little room here so we're gonna go interface and then we're gonna call this param uh type and this is gonna be um from our use history um and we're gonna be able to get the params and that's how we're gonna actually get the specific tweet from the address bar basically we're gonna pull from there um so this is just gonna be an id and it's actually a string type which we're gonna have to convert to a number after okay so that's good uh use history can stay the same and then we want to get the param type we'll do right below this so let's go const and we can pull it out now we can pull the id out here and then we're going to go equals use params and we're going to import that from react router dom there as you see and then we're just going to pass in our param type and then call it right there okay so that's looking good um let's space this out a tiny bit for you then here we want to pass in our query here so that's the tweet query like that and then we're gonna pass in our variables here so it's almost like we do in our mutations and we'll go variables okay and then we'll pass in the id now we want to uh convert our string id because it's going to be a string into an int because that's the type that we need for this so we're going to say parse int okay and then we'll pass in the id just like that okay that is looking pretty good and we come down our left side is going to be the same so we can leave this just like that our home we can our home header is going to be the same we are going to below our home header here above our title we are going to use the same kind of go back button that we do on our profile so you can copy that over from profile or i'm just gonna paste it in here so i got it there so basically this is just a back button uh using the go back method from uh history okay so that is good there uh this home we want to call that a tweet so that's good and then we can get rid of the homepage tweet and the all tweets so get rid of this here and then under here we're actually going to add something very similar to what we used in the create common in the last video so come over to the create comment and we can just copy this over so come down a little bit here and from this p tag up to this div here right below the header copy that over and i'm gonna come over and we're gonna paste this in here okay so that is looking pretty good we're going to want to change over some of these values so let's go through it and do that so here this is going to be changed to data dot tweet dot author dot profile dot avatar okay so that's good instead of name right here we're gonna have data.tweet.author.name and that should be good now okay all these styles are gonna stay the same and then this tweet down here we're gonna say data.tweet.content okay so that all looks pretty good to me okay and then i think basically the last thing we want to do is we want to map over all our comments and add them below so let's go ahead and do that and then i'll come back and talk you through it [Music] all right so basically what we're doing here is we are just gonna map through all the different comments i've added a comment type here for uh typescript and that's gonna look like this up here let me show you here so that right there and basically it's just kind of the same structure as our graphql query for our comment so add that and then we are going to add some styling and stuff here this is just our image kind of the same styling as we're using for uh all our avatars and then we're just gonna add our user name uh and then we are gonna add the content of the comment so basically whatever the comment is below so go ahead and save that and come back over to our app here and we can see we're on tweet 5 right now and this is what it looks like so this is the actual tweet and we see it's connected to this and this is the response or the reply to that and uh those would be uh kind of and those have been mapped over so there'll be a list of them below if there are more than that uh if we go back here um we can look at this one we can add a uh add a reply here okay this isn't automatic updating okay so we add a reply it's not automatically updates we might have to fix that but let's click on this and we can see the test reply shows up there all right so that's looking fine this is off a little bit but we can fix that another time uh but that is good for uh now and that works right yeah we can click back so that's looking pretty good all right so that'll be it for now uh in the next video i think we're gonna add uh replies to reply so basically nested replies um so that'll be an interesting one and then finally i think after that that's almost everything we're gonna do except for the final thing i think we'll be uh following uh different users so that's it for this one uh thanks for watching and uh stay tuned for the next one all right welcome back here in the last video we ended up here where we were uh showing our tweets off and the replies to those tweets now what we don't have right now is a way to reply to a reply so we're going to add that in this video so let's get into it all right so open up your back end into your schema.prisma right now and we are going to add one thing so come down below here and in here we are gonna add a comments and that is gonna be of type comment so we're gonna call basically recursively ourselves there and then that is gonna be an array so a comment can have many comments basically and then we're gonna go ahead and save that and uh due to the magic of prisma here it's gonna add these fields for us and handle uh the relations for us so if it doesn't do that for you make sure you add uh these two as well okay so that's looking pretty good let's uh come over to our comment.ts okay and then inside here we're going to want to add a couple more things too so we're going to go t dot model dot and we're going to say comment and call that and then we are going to say t dot model dot comment uh id now what we did not do is uh actually migrate our schema up so let's go and do that as well so come over here open up a new window let's give ourselves a little room here and cd into your server make sure you're in that folder and then we're going to go mpx prisma migrate and we are going to say save first and dash dash experimental okay and then we're gonna name our uh migration so we're gonna say comment uh what are we gonna say reply we'll call it okay so that looks like it worked good and then we're gonna do the same thing as always this should uh get pretty repetitive for you at this point we've done it quite a bit uh and we're gonna say uh migrate up all right that is looking good now we've added to the comment this uh now we're gonna want to generate our schema here so actually get back into your server folder and we're gonna go mpx uh prisma uh generate okay and then it looks like our errors are gone so that is good and we can exit out of that now we have our server running over here and if there's changes you usually have to restart so we'll do that okay and that is looking good now the final thing we want to do in our back end is in our mutation folder or a file rather so come into your types mutation and let's get rid of this real quick and we are going to want to add a create reply so it's going to be almost identical to this so come over here and we can just copy this down okay and then come down here and instead of create comment we are going to say create reply okay and it's gonna be of the comment type so that is good we're still gonna have our content uh we are still gonna have our id like this but we are also gonna add a comment id and that's going to be an int array or an arg rather okay and we can call that and for us yeah i guess that'll be nullable false as well so have a little array here and say nullable and that is going to be false actually i think it might be nullable for us so for now we'll just leave it okay so that is good make sure you have a comma after this then we're going to have our content our id and then that comment id so add that down below and we're going to go prisma dot comment create still and this can all stay the same and then here we're going to say comment because we're going to attach it to another comment and we're going to say connect and we're going to connect it by its id and again go number and then comment id okay so go ahead and save that so this is what the full thing looks like okay so we're passing in our different arguments right here and then we're creating uh and then our data is gonna be attaching all these things basically all right so it looks good let's move ahead to our front end here all right so we're in our web folder now and we want to come in and we want to go into our components and we're going to say create a file and we are going to say create reply dot tsx and then insider create reply is going to be almost identical to our create comment here so let's come into our creek comment uh highlight everything here and we are gonna copy it over and paste it in here okay so that looks good now let's just uh start changing things over a little bit here so we need to start up at the top here and instead of create comment we're going to say create a reply mutation so that changes that create reply is going to be here and here okay make sure we spell those right don't forget the e okay so that looks good this uh these are gonna be the same and then we're just gonna add on to it so let's go here and we'll say dollar sign comment id okay and then that is gonna be of type int and then down here we are going to say comment id and that is going to be dollar sign comment id okay those look great uh this can stay the same all these can stay the same uh we are not gonna have the tweet here so we can get rid of this we're gonna have name avatar id and then two more things so we're also gonna pass in a comment and that's gonna be a string and then we are gonna say uh comment id and that's gonna be a number all right those look pretty good now we're gonna this says create comment obviously we want to say create reply okay and then this is gonna be create a reply mutation paste that in and then we're going to want to pass in some different props here so we don't actually need the tweet here so we can get rid of that and we're gonna say avatar and name still we're still gonna have the id and then we're gonna also have a comment and a comment id so those are what we wanna add that'll handle our props so that looks pretty good now we're gonna have to add a refresh query and a different one here so we're gonna comma here and we are gonna go query okay and then we are our tweet query and that's gonna come from single tweet and then we're gonna go comma because we gotta pass in the actual id of the tweet that we want so we're gonna do that by going variables and we are to pass in the id which we are bringing in as props here and that will get our specific well this will be used to get our specific uh tweet query that we would like okay so looking pretty good so far all this can kind of stay the same it's basically identical or not basically it is identical and then we want to come down here and instead of tweet we want to say comment and then come down here again and we want to pass in one more thing here which is our comment id and that's what we're going to attach to other comments so go ahead and save that i think that is all we need to do for that so looking pretty good right now so let's move on over to our single tweet so bring that up single tweet.tsx right there and we are gonna bring this in below our comments dot content which is where so right below here all right so come in here and we are going to say create reply and we can auto import that and then close that off there now if we hover over here you can see that we are missing the types name avatar id so we got to bring all those things in so the first one is going to be name and that is going to be equal to comment dot user dot name second one is going to be avatar that's going to be equal to comment dot user dot profile dot avatar okay the third one is gonna be what it's gonna be id and that is gonna be equal to data dot tweet dot id so that's gonna be the actual id of the tweet and then we're to have comment which is going to be the actual comment this will say comment dot content is what that's going to be okay and then finally we are going to have the actual comment id that we're going to pass in so that's comments id and that is going to be equal to comment dot id and make sure we close that off there so go ahead and save that and uh yeah that should uh work for us so let's uh come back over and see how that works all right so as you can see uh not the best we need a little margin here maybe but uh we can add that in a minute but we are able to open this up and uh reply to this comment now let's see if this works and it does so that is looking pretty good i think uh we can reply to our replies and we have our refetch so it shows up right away all right so i think that's going to be it for uh this video you might want to go ahead and add a little margin we might do that in the spare time but uh we're getting down to it there's not a ton of more stuff we want to do but i would say we want to add the ability to add followers so follow and unfollow that sort of thing so i guess that might be one of our last videos and we'll do that in the next one [Music] all right so in the last video we had the ability to reply to comments and now in this video we're going to start wrapping things up this course has gotten up pretty long and i think we are going to wrap it up hopefully in this video so what do we need to do first of all we are going to when we go to our profile we want to come here and we want to show all i guess we're just going to do the liked tweets that we have below so that's one thing we're going to do and then also we are going to add the ability to follow a different user and i think that's going to do it for us i don't think we'll rewrite this whole thing and have it uh where we are only showing uh tweets from people that we follow so you can go ahead and do that on your own if you want but uh we'll just follow some users and then we can see who we're following and show their profiles and stuff so that's uh all we got for this video and uh hopefully it'll be our last one so we got a lot to do and let's get right into it all right so come over to your schema.prisma here and this is where we're gonna start so we're gonna do all our back end stuff and then we'll move over to the front and start showing it over there so the first thing we want to do right now is uh get a new model so let's uh copy one of them over let's just like tweets will do so copy this down here and instead of like to tweet here we're gonna say uh following okay and then we are gonna use uh some different things here so we can get rid of uh everything in here and we will just uh start over so here we're gonna go name and name is gonna be a string okay and then we're gonna have an avatar of the person we're following and that's gonna be a string and then we are going to have a follow id and that's going to be the id of the person we're following and that's going to be an int okay and then we are also going to have a user so when we bring this in uh following where's our user up here so our user is here and we want to come down below this and we are gonna say following and that's gonna be an array of users that we are following so go ahead and save that and when we save that we can come down to the following it adds the user id and the user relation for us so make sure you have those as well and that is all we need for this so now let's come in here we're going to get a new window going here make sure you're in your server folder as usual so cd into that and give ourselves maybe a little more room here and we are going to go mpx prisma migrate and that is going to be save and dash dash experimental and we're going to name this migration we're going to say following and that looks like it worked fine and then we are just going to push it up again as we have been doing with the up command all right that's looking good exit out of this uh we don't need this for now now let's go on and uh to the rest of our back end and start adding some things so we have our different types here we're gonna have a new type so come in here we're gonna go following dot ts and we can copy over one of these let's just go comment here give ourselves a little base to work from boom come in here paste it in and we're gonna start to transfer this over so we're going to say following following and then in here we're going to have some different stuff so we can get rid of i think everything in here okay so get rid of that and then uh copy this down a few times actually and we'll just change these uh fields over so instead of that we're gonna have user instead of this here we will have name and just these are just the fields that we added on the schema of course so avatar and then let's copy down one more here for the uh follow id okay we got all these red obviously we haven't generated anything or restart our server so that is fine but before we do that we want to come into our a user here and in here we just want to add one more thing so come down here and we are going to say following okay make sure we save all these now we want to export it so come into our index.ts come down here and we are gonna say uh following go ahead and save that and that is about it for that so let's open up our terminal here come over to your server it's going to say it needs to be restarted let's ctrl c and close that and we're going to go mpx prisma generate generate our schema that's looking good and then we'll say npm run dev start it up again all right perfect now we what we want to do here are going to be mutations the following we're going to have a follow and an unfollow so we can close out all these as you can see these are non uh these don't have errors anymore so those are good we can get rid of this we don't need that we don't need that all right so come over to mutation here and we just want to see where this ends and we're just going to copy this down we're going to have two mutations in here one of them is going to be for creating a following which will be the user we're following and the other one will be deleting that so come down let's uh change some of these over we're just going to call it follow and that's going to be from following as our type then we're going to have a few things in here instead of content we're gonna have name instead id we are gonna have uh follow follow id and that's gonna be an int which is good and it's gonna be nullable that's fine this can be nullable too and then finally we are going to have uh our avatar so it's going to be avatar and that's actually going to be a string a string arg all right so those are looking good now let's come down here we'll change some of these over so again name this is going to be a follow id and then this comment id we're going to change to avatar all right those are looking good now let's come down a little more and we're gonna have ctx.prisma.following okay and that's gonna be dot create and then come down into our data here and we're gonna have again same fields so name below that we are gonna have avatar uh below that we will have follow id just like that and then we wanna get rid of this but we do wanna keep the user one so we're going to attach it to ourselves so we know who we're following basically all right and do not forget your commas here so make sure we have that and then our error will go away so that is looking good you gotta maybe restart your server here so let's do that okay restart that it's working good and i think that is all we need to do on our back all right so that is looking good for our follow now we also want to have a uh delete the follow or remove the follow uh mutation so let's come up here let's just search yeah i know we got delete in here delete like let's copy this bad boy over and then just come down to the bottom here uh see where that ends and let's paste this in below and we'll just kind of transfer it over again for our purposes so come in here delete uh follow and that is going to be from the following of course and then the these args can be the same we're just going to pass in the id of the following that we want to delete so that's good the id can stay the same we still want to check if we're authenticated we do want to change this over so that'll be following and then the where can stay the same so that's all good go ahead and save that and probably uh restart your server again get a little tedious but oh well all right so go ahead do that and that should be good and that is all we need to do for our back end basically for this whole course so uh we can get rid of this and basically get rid of our uh back end for now uh unless we mess something up so let's move on to the website okay so in this uh front end we are gonna have a few different things that we gotta do to get this going so the first thing we wanna do is come into components here new file and we are gonna call this uh follow user dot tsx okay let's get rid of this real quick and let's go rfc get a functional component scaffolded here and it will just say follow user that is good now let's just come in and start doing this banging this out so let's go const we'll say follow underscore user underscore query okay and that is going to equal gql and bring that in and we will go back ticks come down here close off those back ticks and come in here and we're going to say mutation and we'll just say follow that's what we called it and then pass in the different values that we have [Music] all right so this is what our mutation is going to look like we're going to call it follow user query and then we're going to be calling the follow mutation that we set up in our mutations uh file so we have a follow id an avatar and a name and we're just returning uh the id all right so that looks good like that let's come down here and we'll go interface and we'll have a little interface for the props that we're going to be passing in here and they're going to have an id number and we will have name that's going to be a string and avatar and that's going to be a string and we are going to be passing these in uh from uh i think the what is it our profile or the single user query so we'll pass those in from there so make sure we do that here as our props so we're gonna go id name and avatar okay and then below here come in and let's do our query here so same as always const and we'll call follow and that's going to be equal to use mutation and we will pass in our follow user query like that okay and then we also want to pass in here a refetch queries and we want to pass in here an array of the objects we want to use so an array and then we have some objects here or just one for us but we say query and then we will say me underscore query that's coming from profile all right so that is good for that uh let's come down uh below here and we're just gonna have a function that says handle handle follow rather handle uh const handle follow and that's going to be async and we are going to go like this arrow function and we're going to await follow and then pass in here the different uh variables that we want to pass in so for us that's going to be follow id and that's going to be id and then we have name and uh we have avatar and those are all the different stuff that we want to pass in so those are looking good uh make sure we bring all this in so command dot we want to bring in use mutation these we haven't passed in yet that's why we're getting a red squiggly yet but we will and now let's come down here and just pass in i'm just going to paste in this button that we want to use let's go here and paste this in all right so that's the button here it's just gonna have a handle follow and then some styling with the edit button so we can go ahead and save that okay so that's good now let me show you something real quick on what we want to be doing here so we want to be able to click on this um and go not to the tweet but to the actual user that tweeted it so right now if we click on either that's going to happen but we want to click on this and go to that and that is where we're going to actually follow the user so we want that capability so what we're going to do is come into our pages here new file here and we're going to say single user.tsx okay and then let's copy over profile here because we're on the same styling and everything from that so copy that over paste that in there and uh we will adjust uh accordingly from here so let's start changing this over so first let's get rid of this a single user and make sure we come down to the bottom and export it single user as well uh user okay that's looking good and we want to use a couple things we're going to use this use history but we're also going to use the other thing from react router dom which is the use params so i think we use that in single tweets so come over to your single tweet here let's scroll up a bit and yeah so we want to copy and copy this over here so copy that come in here and we'll just paste this below uh because that's we're going to get the id from uh that and then we want to come up here let's copy this interface over as well because we'll use that same thing no use retyping it out okay paste that in there okay so that is going to get be good make sure we bring this in use params and make sure we that's closed off there okay that's looking good now what we got to do is get a different query here so let's come over here uh we can just get rid of this and actually why don't we copy that same kind of query and work off this because this will be more similar to what we need so copy this over then we're not typing it all out again uh we can just adjust so paste that in there and then let's get rid of everything other than the base query and we'll just go from there so i think we might need one more here okay that looks good so what we're going to do here is called user and then we're going to pass in the id then it's going to be the same and then down here again user id and in that'll be the same and we have id and then we're gonna have the name and profile and from the profile we want the id uh the avatar and the actually i think that's it uh website i guess we got to all right go ahead and save that and i just realized we haven't actually done uh our query to get the user so let's come over here and go back into our back end real quick and go into query and down here let's just uh copy this down okay that looks good and then we're just gonna come in here and get our actual user query i thought we had done that but uh apparently not so user we're gonna go here we're gonna go user and then uh nullable that's true that's good all right that's fine that's all fine we're gonna say user dot find one just like that and where id is the number and id that we're passing in so that can all stay the same so go ahead and save that and restart your back end again as we've been doing all right get rid of that we'll get rid of get out of there and come back in and now we should be able to do a user query like that okay so we want to change this name over to to user underscore query that's good and then copy this down and paste it into here where we're calling the query that looks good uh the other thing we want to do in here so come here and we're going to go our second argument because we want to refetch again so variables and that's going to be uh id and we're going to parse this as an inch because it's going to come in as a string remember uh from our params our param type is going to be a string so parseint and then pass in the id that we are getting from our params here our prams here actually let's bring this up get this before that there we go now it all makes sense all right so we have the query over in all tweets i think that we want so come in here until into all tweets here and come up a little bit here and we want this me query here so let's just copy this over here and we can just paste that in back in our single user so come in here and we will paste that below here okay so then we're getting all this we gotta bring this in make sure we do that that is looking pretty good all right so now let's come below here get a little room going here and we're gonna have an interface and it is gonna say what it'll say uh follower ids because we got to get all the follower ids for something so say follow id and that's going to be a number and then we are going to have id and that's going to be a number okay and then below this we're gonna have a few things uh the first thing is we are gonna try to get all the follower ids uh separate them out so then we can check if we're already following them and whatnot and the other one we're gonna pass in as well to see or to add that user's id to our following list so i'm gonna write these out and then we'll uh keep moving [Music] all right so these are the three different things we're going to use uh the id of the followers we're going to get the follows and then we are going to get uh follow ids by filtering through it i'm getting a little lazy but this is dragging on so we're just going to go any right now and then follow id if it's equal to the user id that it will return otherwise it will not so that should just be a single person all right so you'll this will be uh this will come a little more clear when we're using these uh later on but let's uh continue on down here all right so this is from our profile component remember we just copied the whole thing over so right now we have an update profile and a create profile and we are going to change this over so initially we are just going to have our follow user here follow user bring that in and then on the follow user we want to pass in these different things remember so we'll have id and that is going to be coming from data.user.id close that off and then we are going to have the name and that's going to be equal to data.user.name and then finally we are going to have avatar and then that is going to be equal to data.user.profile.avatar avatar and then close that off okay so these are the things that we need make sure you pass those in and you can go ahead and save that and then hopefully on our follow user over here uh we have done this but let's pass in this as props all right and then that takes care of the error there as these are being passed in now let's hopefully save this and go check this out okay so what we want to do is be able to click on this and then go to our particular user however we haven't added that yet so let's come in here let's go over to all tweets scroll down a little bit until where until content the author name so we want to come in here and we're just going to go below this and we are going to say uh link we're going to say link uh bring that in and then that is gonna be two and we're gonna go back ticks and we'll go slash user uh slash dollar sign and we are gonna put in tweet dot author dot id okay and that is all for that and then we wanna come down just below the name after this h4 right here and let's close that off and make sure we close this off okay all right so that's going to direct us to our particular user that we want however we actually haven't added that to our app.tsx so remember how we did this with the single tweet we're gonna do the exact same thing except for we are gonna say uh user here so get rid of that and say user and then come down here and say single user and make sure we bring that in all right so auto import that go ahead and save that okay so we ran into a little issue here however what we were doing wrong is we had not added the following query to our profile where we're bringing in the me query right so down here when we're going uh and doing this we can bring these back in it was giving us a little bit of air but that's okay because we can just add it here all right so come over to your profile here uh above your like tweets here come in here and we're gonna say following capital f there and we are gonna go id uh sorry i d id uh follow id and we're gonna go name and we are gonna go avatar not avatar you are just avatar okay so once you have that go ahead and save that and that should take care of that error for us then come back over to our single user here uh make sure we have these written down correctly and uh get rid of this console.log for now and we can save that now let's uh go over and check this out all right so we still got an error we haven't uh finished i just realized uh switching any of this stuff over so right now we have data.me.net but we actually want data.user.name all these me's are going to be basically users so we can go data.user.profile datadot here user dot profile dot avatar uh keep it going down here basically all of these me's are gonna be users so here we have all these me's you want to switch over so user uh here's user uh what else what else uh data.me user basically every place even here in the link user is that it sure i'm missing something here anyways let's check it out see if that works refresh and now we have our user so that looks good we have our follow button uh we can go ahead and do that click that and we're not doing changing anything but nothing seemed to break so that's a good sign so now let's come back and we will add an unfollow button so we got our follow user here let's copy this over command a that and then we will uh come in here into our components new file and we're just going to call it unfollow uh user dot user.tsx okay and we can paste this in here paste that in okay and then change this over to unfollow user all right in the unfollow user we're not going to need all this we're just going to need the one id so we'll pass that in we can get rid of this here that looks good we can get rid of this in this uh good change this to uh would i say delete user what do we say in our mutation let's check that out real quick uh our bottom delete follow is what that's called so delete uh follow and we want to paste that in for a few other things here so delete follow there uh this can stay this we want to go paste that in paste that in there paste that in there basically every where and then we can get rid of all these and we can get rid of all these and this will just be id all of these places okay so that looks pretty good i think delete follow we got our id we got our int it's required still that looks good and then we can just say uh delete here underscore follow user query okay and then we can copy that over boom paste it in there that's looking good and we still want to refresh refetch rather the meat query and then come down here and we'll just say handle and we'll just say handle unfollow just like that and i think other than this we want to go id and again we wanted to parse that as an int because it'll be a string otherwise all right and then handle unfollow like that and we can say here unfollow and make that a capital all right go ahead and save that the id here we're not passing it in yet and that's why uh oh actually no sorry this should be a string because it's gonna be passed in as a string so that should do that and that's why we're parsing the end okay good save that and then we're gonna come back that's all we need for that so you can get rid of that uh that all tweets you can get rid of that uh the single user is where we wanna be so we're gonna make use of some of this now so come down here right now we just have the uh follow user here but if we've already followed we want to show kind of an unfollow button instead so that's where we're going to be using the unfollow user all right so we're going to do a ternary here so let's go id of followers like that and then we're going to say dot includes we'll check if it's uh included and we will say data.user.id okay and we'll do a uh ternary here and open this up and then in here we will say uh unfollow follow user and bring that in and then we want to pass in here let's close this off first and then we want to pass in the id now this id is going to be equal to uh get follow uh id at the uh first there's only going to be one but at the zero with index and and the id of that and that is going to how you're going to be how we're going to do that there okay so go ahead and save that and then we want to come down bring this down and in here we're going to go like this and then we want to bring this down like this and save that all right so we're checking if the single user id is included in the id of followers which we did above and if it is then we will show this on follow user and if it isn't meaning we haven't followed them already we'll show this fall user so let's just check this out real quick all right so we're back here on this one and now the unfold is showing so that's good and if we click on this we're uh now unfollowed and we can follow again and unfollow so that works great that is looking very good now we have two more things we want to do here so one is in our profile here we want to show all the liked tweets that we have liked below here and then finally i think we want to show our followers in some sort of modal so let's start with the like tweets and i'm going to kind of really speed through this because um this is getting too long so let's come in here come into your components here new file and say liked tweets.tsx okay and then we can just go rfc functional component like tweets and we want to come up above here come down here i'm just going to paste in a few things because uh just of time here okay so we have our all tweets here that we're pasting in here we're gonna use that and then we are gonna come down here and we're gonna actually be passing in all our uh like tweets so we're gonna go tweets we're gonna paste in all tweets there okay um so that is good all right and then come back over into our profile first and we're going to say like tweet we have this and we're going to add a few things to this query because this is what we're going to be passing in so we got our tweet id uh we're going to go content we're gonna go uh created uh at there we're gonna go author and we're gonna go id name uh profile and then from the profile we're gonna have id and avatar and this way uh we can just pass everything on from this one query obviously this is a pretty huge query so you might not actually want to do this in real time but for our purposes uh this should be okay all right and then actually we want to pass it in down here so we actually want to come down below all right so above this here uh and our light tweets right above the right here actually so come here and we'll say uh what liked tweets like tweets bring that in and we are just gonna call it tweets and that'll be equal to data dot me and we're just gonna pass the entire thing in there okay so go ahead and save that come back over here uh we got some sort of issue here so let's actually just say any for now see if that fixes it uh we gotta close this off stop okay so this is good save that uh and then come back over to the like tweets here now i think i'm just gonna paste in the markup and we'll just go over it because yeah time all right so i just pasted this in so we're passing in all of our liked tweets here um and that's from profile that's why we went back and we uh did this here got all our like tweets so we're passing that in and we're gonna go tweets.tweet i think this is actually like uh tweet not likes right or tweets right like yeah so make sure that is uh tweet and not tweets um okay and then we have our all tweets here we're just putting any because i don't want to type that out right now and uh yeah we got our profile um all this different stuff so hopefully that's good we're gonna map over them and we're gonna put in our avatar and basically a link to the actual user so hopefully that's good we're using the format distance from data fns same thing to get when it was created at uh and that is about it and then the content of the tweet so go ahead and save that all right and then we gotta like some tweets here because we haven't actually liked anything so like a couple of these and then hopefully those will show up and if we come back to our profile now these are our liked tweets all right so that works uh great um okay so one last thing i want our following here to actually uh be to show the users that we're following so that's gonna be the last thing that we're gonna do all right so come over here and we're gonna go components new file and we'll say following uh dot tsx like this and let's get a base here so let's come over to tweet.tsx here and just copy this over because we're gonna want to use the modal for this um so that will be something somewhat similar all right so paste that in there tweet get rid of that and say following okay that looks good and then uh we just want to go through and change these up a little bit so we don't need a lot of this stuff we don't need this we don't need any initial values we use the modal stuff but we don't need any of this formic so basically get rid of all that formic there okay we can we're going to use this still for that and then instead of this button here i'm going to paste this in and we're just going to say follow and then the data which we're going to check or add in a second dot me dot following dot length so just how many people we're following there now let's add this up here so we don't need this create tweet we can get rid of that come down below and in here fix this up a little bit i'm just gonna paste this in and we're just gonna get the meat query bring in use query and uh yeah that is looking good so i think that's the same yeah we already had that query so that'll work well um okay and we don't need any of this here so get rid of that all right now for our actual uh what we want to paste in here i think we can copy that over from all tweets maybe actually because that might be a little bit similar to that so all right so we're just gonna copy over this here so come the tweet header here and we'll get the content up until this point so let's copy that then let's come over to our following here all right and then i'm gonna come in here and just paste this in speed this up a little bit and we can let's close this give ourselves some room here okay make sure we bring in links here that's looking good save that okay so what we got here is our modal and when we press on the length of the following how many people we're following it's going to open up and we are going to have a little bit of styling here and then we're going to go through all of the people that we're following and just display them basically now when we click on one of those people it's uh going to link us to uh that person by the follower id so let's uh check this out hopefully that's good we've got a little styling here light gray is a border bottom there uh what else i think that's mostly it all right so now we want to bring this in so come into our profile here scroll down to uh here followers or following and uh we want to add this as our uh following so get rid of this here and we are going to say following and bring that in and close it off and save it now let's uh come back all right so it's showing we're only following one user and when we click on this it's going to bring up that user so that works great let's come back over and we can click on another user here and we want to say follow so that'll follow them and then come over to our profile and now it says we're following two and it shows both of those users and then again we can click on that actual user and i'll bring it to uh them so i think that's working pretty good perfect all right guys i think we will uh leave it right there um there's a ton more stuff you can do obviously this is just a tiny bit of the functionality of uh real twitter but uh what can you expect we're not gonna build this in a in a few sessions so uh yeah if you like the video go and subscribe or give it a like and uh yeah until the next one thanks for watching [Music]

Channel: Darwin Tech

Views: 42,646

Keywords: full stack developer, full stack web development course, full stack web developer, reactjs tutorial, react js, graphql tutorial, graphql react, prisma, typescript tutorial, typescript react, full stack typescript, react-apollo graphql, twitter clone node js, prisma js tutorial, reactjs jsx, web development, css tutorial, react tutorial 2021, react js fullstack, front end development, backend development, fullstack web development

Id: MT5j7xroSu4

Length: 326min 0sec (19560 seconds)

Published: Thu Jan 21 2021