React Node.js MySQL Social Media App Tutorial | Full Stack Social Network App

Hello friends today we are gonna complete our full stack social media application using react not Jazz and MySQL firstly we should create a new user or login after that we are gonna see this home page and this is my timeline it shows only my posts and my friends posts and also my friends stories I can create a new post and upload an image when I click this button you will see our post here immediately I can see the comments create a new one I can like or dislike posts and delete my own post let's open up a user profile we will fetch the user information and user posts as you can see he is my friend I can follow or unfollow and if it's my profile page I will see this update button when I click here I will be able to update my user information it's a great project to understand react and not Jazz if you didn't watch the previous video you should definitely check it's important because I designed these components and I explained how to use context API and new react router Dom features and in this video you will learn how to fetch data using react query how to use mutations how to create Advanced SQL queries how to secure your application using Json web token and cookies press API Basics image uploading and more I hope you will enjoy it if you want to see more apps like this please like the video and let me know in the comments which Technologies you want to see in the next projects okay if you are ready let's get started okay let's open a new vs code folder we are gonna have two folders API which is our backend server and client and it's going to be our react application let's actually clone our react design here it's in the Lama Dev GitHub repository I will search for social as you can see we have this Branch I'm gonna install this inside client folder to do that I will copy this URL and I will clone this Branch by the way I want to create a video about GitHub how to use git what are the most common use cases shortcuts so if you want to see such a video just let me know in the comments and here I'm going to open my terminal I'm going to go to the client parts and here I will say git clone Branch name let's see what was name react social UI I'm gonna paste my URL Dot and enter and they are here let's install our libraries I'll say yarn and it's going to install all necessary libraries okay it's ready as you can see our libraries are here and let's start our application I'll say here start okay it's here before creating anything in the API I want to create my MySQL DB and necessary tables after that we will create an Express server and see how to connect to myscale and how to make crude operations this section will be a little bit faster because I've already published a video about myscale installation tables relationships how to make crude operations so if you didn't watch that video you can find it in the card on the top right if you are a complete beginner that video will help you to understand the basics of course you don't have to watch the whole video just watch the myoscale workbench parts and express server part and after that you can come here and continue so let's open up our workbench and create our DB as you can see this is our previous application I'm gonna right click and create schema and its name will be social create schema which is social I'm gonna apply and that's all and after that let's create our tables so I'm gonna click here tables and I'm going to create new table and its name will be users so let's write our columns first one will be user ID is going to be an integer I will say primary key because it's going to be the unique ID so I'll say unique and auto increment and what else we are going to have actually let's open up our home page but we don't have any user it's not going to open it's a protected route but if you remember we have a dummy functionality here of course we are not connected to DB pad if I click here we are going to have fake user inside we can see our home page right now and here I'm going to click on user and as you can see a user has a cover picture profile picture name this location let's say city or country and website of course when we register we are going to enter our username email and password also so let's create them here I will say username is going to be a string I will say not null email password I'm gonna increase these string limits that because we are going to be using a crypto method so this password will be a long hashed password so it should be a little bit longer after that I will say name of course they are not null and we are going to have color picture again it can be a little bit longer because it's going to be a URL it can be null picture and profile picture I will increase here and we are going to have a city website it can be null by the way if you want to you can store only username email and password here and you can create a new table let's say user details and you can store all those information there but we don't have many columns it's just eight columns here so it can stay like that if you want to add other details like school work I don't know relationship or other things like Facebook you should definitely create another table but in our case it's totally enough let's check again integer and others will be string and everything is okay I think I'm gonna come here and I will say apply like that it's ready let's create other tables it's going to be posts as always ID primary key and we are going to have post description let's check here as you can see we are going to have this description and we can add any image and to add this post of course we should be a user let's increase this number now you'll say image finally user ID it's going to be an integer and it's going to be our foreign key of course to do that we are going to be using this button for aim key and I'm gonna say user ID and the reference table will be our users table I'm gonna select here which column I should choose as a user ID it's going to be user ID and in the user table it's going to be exactly the same ID basically post doc user ID will be equal user.id and then we delete this parent which is user we are going to delete this post also so I'm gonna say on update and on delayed Cascade I will apply and it's ready let's see okay by the way if you forget adding something here basically you can click here and say alter table and you can add new columns you can change your foreign Keys whatever you want so I want to add here create it add date and it's going to be a date date time it can be not null but I'm Gonna Leave it empty that because we are gonna make some tests and writing this date time can be difficult for us so it can stay now for now after that we Are Gonna Change by the way this user will be not null every post has a user and I'm gonna apply okay what else we have if you remember when I click here we can see our comments and as you can see it's exactly the same description we are not going to have any image we are going to have created at and user ID create table comments creepy ID description I will say not null it's going to be created at daytime and user ID and it's going to be integer and not now and we are going to have of course post ID so we can see which post it belongs to and it's going to be integer basically we are going to have two foreign Keys user and post let's create them first one will be user ID and second one will be post ID but remember we used same name for the post so we cannot use it again I have to change this name let's say comment user ID so you cannot use the same foreign key name and the reference table will be user and this one will be post let's choose here post ID and ID of post for this one user ID will be user ID of course I'm gonna make them Cascades that because when we delete our user or when we delete this post this comment will be deleted also let's say Cascades and apply what does I can do the same thing for these stories as you can see we have user and we are going to have only image let's say stories ID yeah I'm gonna have an image in which URL and user ID it's going to be an integer not null and in which will be not now also so let's create foreign key I will say story user ID and it's going to be users user ID will be ID of user table Cascades and apply so let's create user relationships in our application we will be able to follow any user and they will be able to follow us to do that I can create another table that because going to users table and creating here follower users and follow-up users is not the efficient way to normalize our mySQL database we should create here another table and it's going to be relationships I will say ID and then we follow any user we are gonna be the full over user and this user will be let's say full of user so I'm gonna store user IDs here follow our user ID integer not null and follow up to user ID by the way those texts are really small I cannot see them properly and I cannot zoom here if I made any typo I'm gonna correct them later okay so we are gonna have two foreign keys both are will be user let's come here pull over user I'm going to choose user table here and follow our user ID will be user ID I will do the same thing for other user followed user again users but this time it's going to be followed user ID will be ID LC Cascade when we delete any user we are going to delete this relationship also and okay and one more thing we are gonna need as you can see we have a like button here we can like any post we are going to create another table and let's say likes and we are going to have user ID integer and post ID let's create our keys like user ID it's going to be users I'm going to choose user ID here and it's going to be user ID I will do the same thing for post like post ID our table will be posts post ID will be ID or post and with the latest post we are going to delete this like also I will apply and that's all let's open up our API and create here our backend server you already know how to do that from the MySQL video so let's install necessary libraries I'm going to open up new terminal I'm going to go to API and I will say you can add express our backend server MySQL and notebook of course before them I should have initialized my node application but anyway I can do this right now I will say AMPM init the hashway let's open up as you can see our libraries and package Json let's create here our main Javascript file it's going to be index.js and when we start our application I'm gonna run this index.js so let's say start to run our application I will use not mon index.js and I'm gonna write here type is going to be module in this case we will be able to import our libraries using this import key of course you can use require also but I prefer using import and that's all we are ready let's close this package Json and create our Express server let's close this sidebar I'm going to say import Express from Express let's use our Express function like that and to run our application we are going to listen any port I'll say app.pleasant we are going to listen this port number as always and then we connect to our backend server I'm going to just right here API working or whatever you see let's start I will say yarn start or npm start okay it has crashed of course it's not structured it's going to be like that and it's ready let's create a route folder I'm gonna come here and new folder is going to be routes first one will be users posts comments likes and also I'm gonna create here authentication root that because we are going to make login and register process here not in users and that's all I think let's import our Express here I will say close browser and it's going to be Express router and I should export this router so I will say export default driver in this case we can use this user rather in our index file and we can make any API request here for example let me show you an example and you are going to understand better I will say cat let's say test we are going to take a request from user and we are going to send a response that we are going to send let's say it works let's use it in the index file I will say import user routes users.js don't forget this extension otherwise you are going to have an error let's make this Capital like that and I'm gonna use it here I'll say F dot use let's give an endpoint for this API I'm gonna say API you can give here any version like that and after that users by the time the little weight here it's going to be just API and users and whenever we visit this page it's gonna automatically go to user route and we are going to have different endpoint here so basically API users test and it's going to return this answer Let's test I will say localhost our port number API users test and as you can see it works perfect this is how we are using Express server routes and one more thing I'm gonna make since this is a router file writing all these operations here is not a good idea I'm just gonna delete here and I'm gonna call different functions from our controllers let's create controllers folder and our controllers user.js post comment like an Authentication so we are going to make all our operations here for example get user we are going to take request response and we are going to make our operations here and return our response so I can call this function here of course I should export first I will say cat usage like that of course Js and that's all let me call this endpoint we are going to call this function and in this function we are going to find our user in the MySQL and we turn this user as an and switch of course not test let's say find and here I'm going to write user ID so we are going to find a specific user here using this ID okay for post is going to be I'm going to leave it empty let's actually do like that and okay I can use this for likes comments and auth or of course I should import them here post command like and Authentication okay and I'm going to do the same thing here like that okay right now we can reach our end points and we can make our API requests okay let's try to login register and log out I'm gonna come here and write my endpoints first one will be plugin we are going to call login function register and logout of course we don't have those functions yet but we are going to create let's create them here I will say export const login function request response for others and log out okay it's ready firstly actually let's take this here that's because we are going to register first I'm going to separate them and let's see what we are going to have firstly when we register we are gonna check if we have the same user in rdb or not if we already have we are going to send an error if we don't have we are going to create a new user so let's say check user if exists if not we are going to create a new usage and then we are creating this new user we are going to Hash its password but because as I said let me send any password in plain text we are gonna hash this and it's gonna be any random hash code like that and we are gonna store only this part not display text okay let's do that but before we didn't connect to our MySQL DB now let's create here connect.js I'm going to import my scale and if you remember I'll say cons DB and I'm gonna create a connection and we are going to have some configurations here first one will be host and we are using our local machine so I will say localhost and I'm going to write here my username root my myscale password is going to be La Mateo one two three of course you are going to change this part and by the way if you don't have any password just leave it empty I'll explain this in the MySQL video and database name will be social remember this is our database name okay that's all so using this connection method we can make our operations let's come here and let's write our first query here I'll say const query I will say select from users users table and I'm going to write here my condition if username equals question mark we are using question mark here instead of writing request body and username not because it provides us extra security I recommend you to use question mark for your values like that it's going to be much more secure and after that let's call rdb as you can see from connect.js of course and I will say tp.query I'm going to pass here my query and I'm gonna write my values as you can see we have only one value here and it's going to be request body and username username email password and name and we are going to take all these inputs inside request and body to do that we are going to need one more thing here let's write here our middlewares and first middleware will be Express and Json if you don't do that you will not be able to send any Json object like this by the way let's make this lowercase it just annoys me okay so we are ready right so crowded here I'm gonna close everything and open up again okay and after that after this operation it's going to return us either an error or data and we are going to check if there is any error we are gonna return response status let's say 500 it's a server error and we are gonna send this error you can write here Json or sand doesn't matter and as I said we are going to check if it exists or not if data dot blanked we turn another error it means we already have this user so we shouldn't create new one I'll say response status row 9. user already exists and if you don't have any user like that we can create new users let's hash our password to do that we are going to be using big clip.js CD API yarn at big group chess let's import this here and I'm going to Hash my password I'll say const antly we are going to create a salt B group JS and we are going to generate a salt and after that we are going to Hash our password let's say hashed password pre-crypt hash and we are going to Hash this password which is request body and password using this salt this is how we are hashing our password using decrypt.js don't worry about this line it's basically the method of hashing our password we have to generate this salt and pass it here and it's going to return us the encrypted password when we studies in our users table you are going to understand better I'm going to open users as you can see it's empty for now so let's add our user inside our DB by the way it's gonna be here that'll say it closed another query I will say insert into our users table I'm gonna write here what we are going to add we are going to add our username email password name and other things will be now for now let's say username email password and name and I should write here our values and it's going to be question mark As I said we are not writing correctly we are going to write it here I'll say DB dot query I'm gonna pass this query and our values will be here but be careful it should be in this order first one will be username request body dot username email it's going to be passwords but remember we are not going to use request body and password we are going to be using our hashed password and finally user ending actually instead of writing them like that I can create here an array let's say const values and it's going to be this array and we can use it here directly and after that error or data if there is an error that'll do the same thing here if there is no error we are going to return response status 200 which means successful and we are going to return let's say user has been created I'm going to show you here and let's try to do that you can use Postman or insomnia or any other API request software or vs code extension but I prefer using insomnia let's create I'll say request collection this could be social app I'm going to create new request I'm going to write here our application URL which is localhost port number API and remember our endpoint and finally register as you can see we have a buddy and we are going to send a Json file and inside let's say username test email password like that and finally let's say John Doe I'm gonna send oops I said get method of course it's gonna be post that because I forgot here slashes let's see again okay there's a syntax error let's check select from users of course what we are selecting I didn't write we are selecting everything and user has been created let's check here I'm gonna refresh and as you can see test our Gmail there is a long hash password Here and John Doe perfect if I try to send again as you can see user already exists it works okay we can create our users but how we are gonna log in again we are going to check our user but this time if you don't have any user we are going to send error if we have an user we are gonna check if we have the correct password or not let's say select everything from users and our condition here username question mark let's call rtb and query we are going to pass our query here and we are going to send our username which is request body and username if you want to you can login with email also but I prefer using username and after that error data I'm going to send my error if there is no error I'm going to check my data lags and if it's zero it means we don't have any user like that I'm gonna return response status will be not found 404 and we are gonna send you do not found and if there is no error we can finally check our password I will say const check password and we are going to be using decrypt compare method and we are going to send our body request and password and the user password in rdb and we are gonna compare them if they are equal it means it's a successful login let's say request body password and our user remember it returns us a data but since we said select all from users it's going to return as an array and in this array it's going to be only one user so we are going to select this like that to First user and its password and let's write here our condition if check password is not correct we are going to return another error response status 400 which means wrong inputs and I'm gonna say wrong passwords or username and finally we can return this user information but before I want to send a JWT token and it's going to make our application much more secure that because for example we may try to delete this post firstly we are going to check if this post blocks us or not to provide this security we are going to be using JWT and cookies so I'm going to open my terminal and I'm gonna add here two more libraries first one will be Json web token second one will be cookie parser actually one more thing and it's gonna be a course and it's gonna provide another security that because nobody should reach our API we are gonna allow only this URLs localhost 3000 and if any other URL try to reach our API it's gonna get an error that's why we are using course so I'm gonna import them I'm gonna come here and use my middlewares I will say course it will stay like that for now after that we are going to add our localhost 3000 and finally cookie Passage I will say course uh cookie passer okay of course it's a function so let's come here and create our JWT let's import this first JWT from Json web token and I'm going to create my token here it's going to be JWT sign and we are going to send our user ID here that because as I said to delete this post we are going to check our user ID if our user ID equals this post user ID it means we are the owner and we can delete this post so let's add our ID here remember this is our user and we are gonna send its ID and we are going to write here any secret key of course you can create here emu file and hide this key there but I'm just gonna write it directly and that's all finally we can send our user information and this JWT I'll say response I will say cookie and cooking name will be success token and we are going to set our token here and I'm gonna write HTTP only it means we are gonna send and take our cookie through websites in this case a random script cannot use our cookie finally I will say status 200 Json R user but if I do that it's going to return this password also we don't want to do that even if it's hashed I just want to return all information but this password let's distractor our user here I'll say const take the password and other properties screen data and first item is going to separate its properties password and others if I use these others it's not going to send this password Here let's see I'm gonna say others and that's all I think I hope everything is okay let's try actually let's write here another request I'll duplicate its name will be login and this name will be register okay this time it's gonna be login endpoint and we are gonna send username and password that's sent oops I will delete this comma here and as you can see it returns all these information and if I check the cookie you are gonna see that we have an access token if I assign different passwords as you can see bad request let's see wrong password or username if I make this correct and change this username as you can see using that part perfect so using this cookie everything is much more easier that's because this hash token includes our user ID we are gonna decrypt this hash token and we will be able to reach our user ID and using that ID we can do whatever you want we can delete our posts we can like posts using this ID we can follow users we can get timeline posts in this case we don't have to send our user ID inside body this cookie will do everything for us you are going to understand better soon let's write here our logout method also basically we are gonna plate our cookie I will say clear cookie and my cookie name here remember what was name access token and I'm gonna write some configuration here for security I will say secure it's gonna be true and I have to write here same site no that because our API port number is this number and a react application will be three thousand basically they are not the same in this case it's gonna automatically block our cookie requests but if I write here same site now we will be able to clear our cookie and after that I will say status 200 and we can send any messages here user has been knocked out let's see I'm gonna duplicate this it's gonna be log out if I say log out of course we don't need any Json here that because we already have our cookie I'm gonna send a user has been logged out and as you can see it's empty right now okay so we can use this software but how we are going to register and login using our react application let's open up our sidebar and close this API and open up client to make API requests we are going to need axios I will say CD client side and I'm going to say can add access so using this axios Library we are going to make our API requests let's close here and this one and I'm going to open my register page firstly we are going to need those inputs let's do that I'm going to open register page as you can see our inputs are here and right now let's create a use state I will say counts inputs set inputs you stay took we will have username at the beginning it's empty and others password finally name if you didn't watch my use State video I highly recommend you to watch it because it includes everything you need to know about usted and it's a really short video if you don't know how to set multiple inputs here that video will help you it's gonna be in the cart of course basically I'm gonna give them a name username make sure that those names are exactly the same names and on change methods and that's a handle change I'm gonna copy here paste for others it's going to be email password and make let's create this function here I'm going to close this sidebar const handle change and we are going to set our inputs I will say previous inputs and it's going to return us previous inputs but this time they are gonna change the inputs we are currently changing for example if I write here something all items will be the same here and we are going to change only this username to do that of course we are going to be using this name since they are exactly the same names with those properties it's going to update them automatically so I will say you want targets and their names it's gonna equal to and Target and their values let's see put as you can see it works perfect let me make this bigger okay so we have our inputs here right now we can send them using our register function I'm going to come here for this register button I will say on click event and it's going to be handle click so when I click on this button we are going to make a register request I'll say const handle click I will quickly write here prevent default that because I don't want to refresh my page when I click this button so let's make our request using axios but there is something important here so I will say try of course it's going to be an async function don't forget that that because we are making API request and I will say oh wait axios pulse method and I'm going to write here my URL and we are going to send our inputs and if everything is okay we are gonna go to login page if there is something wrong we are gonna catch it and we are going to set our error of course we don't have let's create another use State and it's going to be error set error at the beginning it's going to be false and if there is an error we are going to set it to true and we can show this error somewhere here before this button I will say if there is an error right here our error message actually we should check this first let's write here console log and after we are going to decide which message we are going to write of course I should import this axios from axios and let's see let's try I will say it has two gmail.com and name will be tested I will register and as you can see our item is here if I try to register again it returns this error of course we set true and false but actually it's gonna be null and when there is an error we are going to write it here let's try again as you can see inside our error there is a response and inside this response data says user already exists so we can use it error response and data so we can write it here let's try again same username I will register user already exists and this is our error so we can register but we are gonna log in I'm gonna do exactly the same thing here but there is something important if you remember the previous video we have created here authentication context that's because we are gonna use this user after this login process in our entire application here as you can see in which our name here we are going to use here and where I'm going to try to write any comment we are going to need it here basically after the login process we are going to store our user in authentication context API this is why the previous video is so important that because I'm not going to explain again and if you remember we have written here f8 data of course this time we are going to be using axios and updating our current user let's do that it's going to be async by the way and I will say const response axios post I'm gonna paste here my endpoint and we are going to send our inputs of course we are going to take both inputs from this login page so let's take this here and pass it here and I'm gonna write with credentials it's important because we are working with cookies if you don't write this you may encounter any problems and finally after that I'm gonna set my user I will say Set current user is going to be response.data remember our backend server sends us our user information and also this cookie let's take our inputs by the way let's copy this actually our inputs and handle change I'm going to import use State we are going to have username and password I'm Gonna Save here by the way and we are going to call this login function uh this time it's going to be async we are making requests and I can use here try catch methods yeah I'm going to await this function of course we are going to send our inputs and if there is something wrong we are gonna set our error remember error response and data by the way let's use this handle change method and hand the login method here okay we already have this but we don't have our input names and our function on change method and it's going to be handle change let's copy this and paste okay and if there's an error show it here let's see I'm gonna refresh I will say task 2. password I will log in to Fresh the page not because I forgot here writing parent defaults I will write it again and login and as you can see we are blocked by our API and it says you should give an access for your client site let's do that it's happening that because we are using with credentials here let's open up our index.js and here I'm gonna say app dot use so whenever we make any requests we are going to give an access response header Access Control allow credentials and it's going to be true in this case we will be able to send our cookies and after that I'm gonna say next and we are going to continue doing our operations and also I'm gonna write here my client URL I'll say origin and localhost 3000 which is our react application let's try I'm gonna refresh test two I will log in okay it's still in promise okay that because I forgot here wait let's see I hope everything is okay test two I will log in as you can see no error if I check my application here as you can see we have our user information everything we need and if I check cookies here as you can see our access token this is what we want and after this login process I want to go to the home page to do that we are going to be using use navigate hook I will say const navigate use navigate as you can see it comes from react rather Dom and using this navigate I'm gonna go to home page let's try that's two and as you can see we are here and as you realize we have here our username I mean user.name and also our image of course we don't have any image yet that because let's check as you can see it's now we are gonna upload later actually let's copy this image address and paste for this profile page for the cover I'm gonna copy this we are going to upload our own images but for now it can stay let's say Ste USA and website will be llama Dot I'm gonna update my user I think our images are too big let's come here and I'm going to increase this character it's going to be 300 for example because sometimes images URLs can be really long I'm going to update and after that I'm gonna apply again and as you can see it's successful right now and I'm gonna log in again and as you can see it's here okay perfect so what I'm gonna do is to fetch our timeline posts if you remember let's close everything here and open up our posts as you remember we are using this dummy array but this time I'm gonna delete here and we are gonna fetch our own posts to do that we can use use effect and we can use Redux when we add any new post here we can see underneath immediately but in this tutorial I want to show you something different let's not repeat ourselves and use react query it's one of my favorite react library that you can fetch your data you can cache the data basically it's much more effective than using use State and use effect you are gonna see how efficient it is I'm gonna open up here react query page I'll say get started you can read here why you should use react query what features it includes this is how we are going to use it to do that I'm gonna copy this Library and in the client side I will say yeah at react query and as you can see here it's really similar to New State and use effect combination then we fetch any data it's going to return us is loading error and data you don't have to do anything more just give here a query name for example when we fetch our posts I'm going to write here posts using axios we are going to make API requests and using this data we are going to call our post components as we did here but there is something important here and this is query client basically we are going to have a provider here and we are going to wrap our entire application with this provider that because let me explain in our example let me send any post here we are going to make a post request but in this case we are not gonna see our new post here but if you're up our application with this client provider it will be able to reach any react query here using this query name as I said when we fetch our data it's going to be posts for example but even if we are in the another component in this case we are going to be in the share component when we add this post we will be able to re-fetch those posts you are going to understand everything better right now I'm gonna copy here and open up app.js I'm not going to index.js that because we are going to use them only for this layout let's import them we are going to need this client and provider so I'm gonna delete here let's wrap our app like that and I'm going to create this query client somewhere here and as you can see we are going to pass it like that and that's all we can't trigger any hatching function in any component we are going to do that and you are gonna see better but before let's fetch our posts I'm gonna come here and I'm going to be using this use Query method let's import we are not going to need them and we are going to use it like that of course we are going to be using axios so I will delete this and my query name will be posts so let's write here axials but to not repeat ourselves I want to create here one more file and this is going to be our axios function which includes our base URL what I mean by that I will see axios.js I'm going to call axios import s from axios and after that export const let's say make request and I'm gonna call axios and I will say create basically we can create any base URL here let's say face URL is going to be our backend URL http localhost port number and API and also I'm gonna write here with credentials and it's gonna be true that because I want to send our access token to our backend server so I'm Gonna Save and we can use this function here I'll say make requests and it's going to be a cat method we already have a base URL I'm just gonna write here posts then it's gonna return us a response of course you can use async await bottle so you can use this promise version It's Gonna return response dot data let's import this request it's going to be axios and make request in this case these posts will be this data of course it's not going to work that because we don't have any AD Point yet let's create I'm going to come here routes posts as you can see it's empty I will say the main URL and then we make a request on this URL we are gonna call Cat posts let's create this function in our controller here I'll say export const cat posts we are going to take request response and let's see in our application of course we cannot see anything here but in our user timeline we are gonna see only our friends posts and our own posts it's going to be a little bit confusing if you are a beginner of myscale but don't worry I'm gonna explain and you are gonna understand firstly I'm gonna say const and let's get started firstly I will say select all from Posts if you do that it's gonna fetch all posts but also let's actually take everything back so I can show you better okay as you can see we are gonna need this post detail its description and this image but also we are gonna need this user to do that we should combine to myscale table and I'm gonna show these posts as P it's the shortcut of this posts table and I'm gonna join here our users and let's say as you right now we are fetching posts as well as users but we should write here a condition so we should select only the owner of this post to do that I will say on and user dot ID is going to be equal pause dot user ID in this case we are going to fetch only this usage right now instead of everything I can write here whatever I need firstly we are gonna need its ID description this image created at everything so I'm gonna say p dot everything but I don't need everything for this user we are gonna need only its image name and its ID because when we click here we are going to use this ID so I will say you dot ID as user ID so it's going to return us our user ID I will say name and also profile picture I didn't say here directly ID that because it's going to be a conflict our post has this ID also to prevent this conflict I just used s of course we are going to use something else here but let's see what it's gonna return I will say DB let's import this connect.js I will say query I'm gonna set my query here for now we are not going to send any value so I can directly right error and data if there's an error we are going to send it directly as we always do I just copy and paste and if there is no error response status 200 and it's gonna return this data okay let's come here and take everything back I'm gonna close here and let's see what we have I will say console log data okay it's empty that because we don't have any post yet let's create one id1 description test user ID will be one it's gonna be our post I'm going to apply and as you can see it's here I'm going to create one more copy and paste here it's going to be id2 test2 and right now we have two items perfect and let's see what it says as you can see we have our description post ID it's image but also we have username its profile picture and user ID so we can use them here I'm going to open up and as you can see they are here and I can use this if it's loading that's right here loading if it's not oops it's going to be question mark if it's not return this data and I can write another condition here and we can check our error if there is an error let's check okay it's Error like that right here something went wrong if it's not return this I will refresh and as you can see if I make my application slower and refresh as you can see looting first and after our posts it's that easy guys I will say normal speed and that's all but we didn't filter our posts yet what I mean by that let's come here and register another user it has to let's say Jane Doe I will send or the exists of course this is our user I forgot that I'm gonna create another one let's say chain door I will send okay it's created so let's create other posts for other users by the way I said it's my user but I forgot we're logged in as a test tool it's test one jungle so this second one will be our post and this one will be user three I will apply let's fetch them and let's say we are following only John not Jane in this case we are gonna see only this post and our post let's follow John first let's open up relationships follower user will be our user which is id2 and follow-up user will be job we choose one I will apply right now I want to fetch only John's posts and my posts let's come here and change our query I have to write here one more join and it's gonna be relationships table let's say Sr and I'm gonna write on and I will say p dot user ID equals r dot followed user ID and also con dot for lower ID and it's going to be our user ID so I'm gonna say question mark oops follower user ID and we are gonna send here our user ID but how we are going to reach our user ID as I said we are using cookies and in that cookie we have our Json web token and inside that token we have our user ID you for all of this I'm just gonna say const token we are gonna check request cookies and access token and if there is no token we are going to send an error that because if we are not logged in we won't be able to reach those posts I will say if there is no token return response status 401 and not logged in and if you have a token we should validate this token that because it expires so I'm going to say JWT verify and I'm going to send here my token and remember we are using a secret key our controller okay secret key and it can be an error or it can return us a data let's actually write here user info it's going to be better to understand and I will say if there's an error it means we have a token but it's not valid so I'm gonna return response 403 and Json will be token is not valid and if everything is okay it's gonna return this user info and remember we sent here our ID basically this object is this user info and if I say user info dot ID we will be able to reach this user ID so we can use it here so let's take them inside this verification function of course there is a comma here and I will say user info dot ID let's see right now and as you can see there is only John's post here that's because we said follower user ID should be our ID in this case is gonna fetch all relationships belong to us and also PE user ID will be our followed user ID in this case it's all Neutron and it selects only John's posts but I want to see my posts here also what can I do I can delete here it can be only followed user and I can write here where r dot follower user our user ID or P dot user ID is gonna be our user ID in this case we are gonna need one more user ID like that I will refresh okay it's not here that because I said join in this case it's gonna try to find a common record but if I write here left join as you can see John's post and our post perfect Let's test we are gonna follow Jane Doe also I'm gonna apply in this case Jane door is here if I delete this first relationship to lateral I will apply in this case it's going to be only our post and James post one more thing we can do we can order those posts I will come here and I'm gonna say order by post and it's created add date but I want to see the closest date like that as you can see it's exactly the same that because we don't have any date yet let's check as you can see it's null but let me add our own post here we are going to add this date and it's gonna order those posts let's do that actually and you are gonna see how to refetch those data to do that I'm gonna go to my endpoint and I will see post methods and add post right now instead of this workbench we are going to use our application let's open up post controller I'm going to copy here and paste it's going to be at posts actually add post let's see okay it's going to be singular to add any post it should be logged in first and after that I'm gonna write here my query I will say insert into posts table and I'm gonna write here what I want to add it's going to be description image created at finally user ID and of course we are gonna need our values and it's going to be question mark let's write our values here array first one will be request for the end description we can add an image we are going to have created a date to do that we are going to be using moment Library let's open up API here and I will say yarn at moment it's a great library that you can play around dates and also we can show our dates like that one minute ago one month ago so we are gonna need it here also yarn ahead and moment okay let's take this here and using this moment I'm gonna take the current moment current date and I'm gonna turn this into my scale date format which is here month and day also we should try it here our minutes and seconds let's import moment okay finally we are going to need this user ID and remember how we are taking this using this user info there is a comma here okay after that we can send those values if there is an error it's going to send us if everything is okay I'm gonna write here post has been created Let's test it here first I will say add post is going to be posts and here let's say description from insomnia our software name and I'm not going to add anything else heimra sent I folded again this comma I will send and we are not logged in of course I'm gonna log in as test3 okay right now I can add okay something is wrong here it adds those slashes to parentheses I'm gonna use backtick and here is gonna be called and I'm gonna wrap this let's end again okay post has been created let's check okay it's here and user ID is Jane door so it works we can try this here I'm going to open up share component and here we have a file we are going to upload our image and also we have this text let's write here const file set file your state hook at the beginning is going to be no and one more and it's going to be our description empty string and then we'll update this input we are going to update our description and it's going to be event Target and value I'm gonna copy this and paste for this file input we are going to set our file and it's going to be files and a single file we are going to add only one image and finally let me click on this share button handle click I'm gonna create this const and I'll click I will say prevent default and we are going to send our file and description using react query but to test it we are not going to send our file first we are going to upload our image later let's see how to use react query to do that we are going to be using we are query mutations as you can see using this use notation function we are going to make our post request and if it's successful we are going to say refetch our posts in the home page so after adding a new post it's gonna immediately refresh our fetch methods and we are gonna see our post here and we are doing this using query client because remember in our app.js we wrapped our application with this provider and thanks to this provider we can reach this query client in any component and we can re-fetch any data here in this case it's going to be posts let's copy here and I'm gonna paste we are not going to need to use Query we have already created client and provider okay let's create our mutation first let's copy this because we are going to refresh our posts like that oops it's gonna be use client of course that because we created our client in the app.js and after that we are going to create our mutation if it's new for you don't worry don't be confused you are gonna understand I'm gonna copy this mutation like that using this mutation we are gonna make our API request here let's create here a fetching function we are going to get a new post in this case it's going to be our file and description and we are going to make a request and I will say return make request remember it's our axials and post request our endpoint will be posts and we are going to send our description and image here and if it's successful we are going to refetch in this case it's gonna be posts because remember our query name is post so we can refresh so let's use this mutation here I will say mutation dot mutate function and I'm gonna pass here this new Post in this case it's gonna be our description and image of course we don't have any image Let's test this with only description I will save hey from reacts I'm gonna share okay it's not here okay we added but we cannot refresh our posts oh it's gonna be like that let's see again test from react I will share and as you can see it's immediately here this is how we are fetching data and adding data using via query of course we can do the same thing for plate and put methods for example in our profile page when we update our user we are going to use exactly the same method but this time it's going to be put and then we update our user we are going to fetch user information immediately and we are gonna see that our user is updated of course there is Advanced usage of react query but I don't want to Deep dive into its usage probably it will take hours but for now it's enough to know the basic way of fetching data and adding new data and in the future if you want to I can create a via query video or Redux toolkit query video just let me know in the comments okay to upload our file we can use any cloud service but as I see in the comments most people just want to upload their files into their servers to do that we are going to be using malter if you remember the blog application we are gonna use exactly the same methods let's search for malter in npm I'm gonna add it first let's open up terminal in API I will say yarn add multer and after that we are going to import motor and we are gonna take any destination here we can create in a folder and upload our files inside that folder and finally using this upload function we are going to create an endpoint and upload our files but there is something strange here that because when you use this destination it's not adding image extensions for example if you are uploading one dot PNG it's not adding PNG to prevent this issue we are going to be using multi disk storage in this case we can give any specific destination but also we can change our file name we are going to create here a unique name and we are going to upload this file into this destination so let's copy this I'm going to open my API and I'm gonna paste it here of course you can create any router but I'm just too lazy to do all of this thing and we have only one endpoint so we can write it here doesn't matter so let's create here a destination I want to add my folder into client folder and public and we are going to create here upload folder let's do that inside clients public and upload okay and after that we are going to create here a unique name actually let's delete this they created a really complex image name but we don't need that I will play it here basically you can use your file and its original name but if you do that then you try to upload another file with the same name it's going to be a conflict to prevent this let's transform this name into a unique name to do that I'm gonna use date dot now it's going to create a unique date and plus this file name and multi will be using this storage let's import by the way and finally let's write our endpoint I'll say post method API and upload we are going to be using this upload method and we are going to upload only single file and we are going to take request response if everything is okay status will be 200 and we are going to send our file dot file name that because we are going to store this file name into rdb by the way let's write here our file we are going to take this from user request.file okay let's try I hope everything is okay I'm gonna open share and create here and upload function post upload async function and track catch just console log this error of course you can write here error use State and after that I'll say const form data we have to create here form data that because we cannot send this file directly to our API so it's going to be form data and we are going to pass our file into this data let's say from data dot app and it's going to be file and we are going to send our file here and finally we are going to make our request let's say const response I will say make request dot post our endpoint which is upload and finally we are going to send this form data and if everything is okay it's going to return us our URL and we are going to return this URL response dot data okay let's use this function here firstly I'm going to create an image URL here it's going to be empty and I will say if there's a file just update this in material and it's going to be our upload function of course in this case it's going to be async and right now I can set this image URL here in rdb remember its name is image so I will say image is going to be this image URL so if we don't have any file it's going to be just empty string if we have we are going to upload it and return its URL and finally we are going to send to our mutation let's see description with image I'm gonna come here and choose an image let's choose this one I will share okay we cannot see this here we are going to handle it but let's check here I'm gonna refresh and as you can see this image is here and if I check my upload folder you are gonna see that our image is here but how we are going to show it let's open up post now posts post this one and as you remember we are using post and image directly but we are storing only image name in this case we should add here our destination so let's say upload folder plus this name of course one more slash here and perfect it's here one more thing we can do when we add any image we can show it somewhere here so let's open up share and here as you can see in the top section we have user profile picture and input and I want to add here something more so we are gonna see our image here to do that let's wrap this image and input data container I'll say left I will wrap this and right and it's going to include our image I'll say if there is a file show this image I will give class name is gonna be just file of course Alt and Source will be URL dot create object URL and I'm gonna pass here my file it's going to be create object URL so basically it's gonna create a fake URL that we can show our image here actually we are not uploading it anywhere it's in our local machine but we are going to create a URL to show it here let's choose for example this one I didn't save I will and as you can see it's here it's circled that because we have a style for this image but we are gonna change and by the way as you can see it's not centered anymore that's because we wrap this with another container let's open up our CSS file and inside top I will say left and it's gonna wrap this image and input and right and it's going to be our file image basically I can make here flexbox and I can separate this left and right side there was Gap here I can delete and say justify content and space between of course this image is too big let's say 100 pixels and object fit and we are not gonna have any border radius okay like that I can Center those items foreign Flags align item Center but we cannot see our name here if you remember the input width is 60 percent but we cannot see it basically we can give here any Flex is going to be three times bigger than this right side I can say flags and for this right side let's see display Flex justify content flags at like that perfect I'm gonna refresh as you can see there is nothing I'm going to choose any image here and it's here let's see I will share and it's here perfect by the way after adding new post I can delete this image and description I will say set description is going to be empty again and our file foreign but it's still here that because I should write here a value and it's going to be our description in this case it's gonna delete okay perfect and what about this date where is our post here and I'm gonna come here and say moment post dot created at and from now let's import and as you can see a mirrored Echo two minutes 10 and others it's an invalid date that because they are null as you can see but anyway it works so I can do exactly the same thing for these comments and I click we are gonna fetch our post commands and also we are going to add this like functionality let's do that so let's close everything here and open up comments okay I'm gonna delete this dummy data and we are going to fetch all commands to do that we are gonna need our post ID because we will fetch our commands according to this post ID so let's use react query and fetch our data to do that I'll just copy and paste my via query part here like that of course let's import them and its name will be comments and when we make this request we are going to call commands endpoint and as a parameter or as a query We Shall Pass our post ID let's say query post ID is going to equal our post ID okay after that we will use this data we are going to use moments here comment dot created at from now okay and we can use here is loading I'll say if it's loading right here loading if it's not show me my data okay let's create our endpoint I will come here comments and it's going to be main URL and we are going to call get commands in my controller I'll say export const cat comments request response let's actually copy from here actually I can delete here we are not going to need our user ID we will just pass here our post ID and remember it's request query and post ID because we are sending insight this endpoint we are going to take this part which is our post ID and I can delete here okay we are going to do exactly the same thing we will fetch our Command details from comments as C let me close this sidebar and we are going to join user to get its user ID name and profile picture but we are not gonna need this relationship we are gonna need our post ID so I will say C dot post ID equals question mark let's take this here okay so we are going to fetch all commands belongs this post ID by the way it's a DOT and C dot created at let's see I will say console.data okay it's looting but there is something wrong oh it says post ID equals undefined that because we didn't pass our post ID as a prop let's open up post not posts post and we have our comments here but we didn't pass our post ID let's do that post ID equals pause dot ID okay still error let's check our error is here response data and it says DB is not defined of course I didn't import this connect.js and let's check our query see our user as user ID okay by the way there is a mistake here it's going to be comments and I hope this time it works let's refresh I will click here and as you can see it works and it's empty so how we are going to add here new comment it's really easy remember our share component I'm going to open share but before let's add our endpoint and controller I will say post add comment let's open up post.js and I'm gonna copy here and paste it's gonna be add comment we are going to check our user ID if everything is okay insert into comments we are going to add description will not have any image created at user ID and we are going to have post ID description date user ID and request body and post ID of course if you want to you can take as a parameter or query as you wish and after that we will see comments has been created let's come here we are going to be using mutation of course we are going to need query client that because when we add a new comment we are going to refetch our data so I'm going to copy here comments and I will paste let's import this actually we already have I can delete this one okay it's going to be a mutation we are going to take new comments from user and our endpoint will be comment and after this process we are going to refresh our comments query we don't have an image I can delete here here we are going to send our description and post ID and it's going to be this post ID so I can delete here let's create our description use state description set description your statehook and when we change this inputs I'm going to update my state on change current Target and value and I will say value description so after that we can set to empty string back and we are going to use this and I'll click here on click method and that's all let's try by the way comments and let's check here also if everything is okay I don't want to see any error there did we import this JWT okay we didn't I will say Json map token and also I'm gonna add moment because we are using moment here and description date user info post info I will refresh and let's say first test I'm gonna send and as you can see it's here created at our name but where is our profile picture okay it's going to be profile Peak like that and perfect as you can see it's immediately here I can close here and what about this like functionality let's open up post as you remember we have two icons here if it's liked our icon will be filled with a color let's see as you can see it's a temporary logic here we are going to delete and apply our functionality part for now as you can see it's black right now let's change this color actually I'll say Style color will be red okay perfect so what I'm gonna do here basically I'm gonna create a like endpoint and we are going to fetch all likes of any post using its post ID let's open up like route here and I will say main URL and I will say cat likes let's open up controller export const cat likes request response of course I'm gonna add here DB and JWT otherwise I will forget probably let's come here copy this actually we don't need here our token we are not going to use our ID select user ID from likes pair post ID equals question mark and I'm gonna delete here and I'm gonna pass my post ID let's take as a query I'll say post ID and it's gonna return our data I'm gonna come here and I will try to fetch my data we can delete here and let's create our query I'm going to copy here and paste and we are going to make a request here like that our endpoint will be likes and of course we are going to pass here our post ID we are using query so I'm going to write question mark post ID equals post dot ID it's gonna be likes and I'm going to pass this post ID here let's see I will see console.data of course I'm gonna comment this out that because we don't have any functionality yet I'm going to open my console okay there's an error okay I said form of course it's going to be from and right now as you can see they are empty because we don't have any like so I can use this array length for this number foreign let's use this data and data Dot length likes as you can see Zero not like any post here I'm going to open up posts as you can see this is the latest post and its ID is 12. we can like it I'm gonna come here our user ID and post ID I will apply and as you can see the like is one so what I'm gonna do we have this data and it includes user IDs so I can write here a condition I will say if data includes our user ID of course we are going to be using our current user let's say const current user use context and all context let's choose this current user.id but it's still empty let's check our data here and as you can see it doesn't directly contains user IDs instead it contains an object first and it says user ID equals to so let's convert this I want this area to contain only user IDs nothing else so I'm gonna open My Controller here and I will map through this data I will take each like and I'm gonna return like dot user ID let's see right now as you can see it's red and also it contains only numbers not these objects okay perfect so how I can change this like when I click we should remove our like record here and if I click for other posts we are gonna add this post ID and user ID here let's create two endpoints I will say post and delete I'll say add like and play it black dot likes like okay let's create them I will copy this is going to be at like we are going to need our user ID here and here play it like okay after verifying our Json map token I'm gonna write here my query and it's gonna be insert into likes I'm gonna write here what I'm gonna add is gonna be user ID and post ID and values is going to be question mark we are gonna need our user ID and request body and post ID and that's all let's see post has been liked and to delete our like I'm gonna come here that'll say plate from likes and my condition user ID will be question mark and post ID will be question mark it's going to be our ID and post ID and that's a like has been deleted or post has been disliked it's not actually dislike but anyway it can stay it's not a big deal so let's try them so I'm gonna open post component here and I'm gonna write here on click events let's say handle lock I will copy this and paste for this one let's create this function I will delete here const and a like and I'm gonna use a mutation because when I like or dislike I want to see the result immediately here remember query client and mutation that's right I'm here use notation and we are going to make a request inside likes and I'm gonna pass my post ID which comes from this post but there is something important here that because we don't know if we have already liked this post or not so we are gonna need a condition here again I'm gonna use exactly the same thing data includes current user ID so I'm gonna come here and when I call my mutation here let's say rotation dot mutate and I'm gonna pass here this value it will be true or false so I can take this value here let's say liked and I'm going to write my condition if it's liked we are going to add new like into rdb if it's not we are going to make another request let's say return make request is going to be a plate method by the way did I say delete okay I set and likes and we are going to send our post ID like that and after everything it's gonna refresh our likes query here like that and we are going to see this result and as always we can use this error or is loading or both of them let's come here I'll see is looting loading if it's not show this data let's check again I will say if it's liked it means we are gonna delete a like by the way it's gonna be too late and we are gonna pass our post ID of course we can pass this as a query let's say post ID equals this ID let's see plus and when it comes to post we can send our post ID inside this object its request and body and inside this body we are sending this post let's check back here we are going to take our user ID and post ID and we are going to add these values here of course there will be no equal it's going to be like that and for the delete method I'm gonna delete this we are writing them separately so user ID will be user info dot ID and post ID will be request params post ID I hope everything is okay like that let's try I'm gonna like and as you can see we like this post and increase this number if I click again okay there is no error by the way I want to delete this data here okay something is wrong let's check and like and same method here we are sending if it's liked or not if it's we are gonna delete likes post ID I don't know let's check actually if it works or not I'm going to open my terminal I will save and let's see I'm gonna click okay it works but why it's not deleting oh I'm sorry it's gonna be query and it's gone perfect I will refresh as you can see it's zero we like this I can take back and like awesome I hope you understood guys if you are a complete beginner it can be a little bit confusing for you all those different queries but if you create couple projects using myscale or any SQL database you are going to understand everything better and for this react query I believe that you understood how to fetch data and how to add delete or update data using mutations okay what else we will have we will have our profile page let's use react query and hatch our data I will come here and copy this and open up my profile page and paste here of course we are gonna need our libraries here basically we are going to fetch this user information so it's gonna be user and our endpoint will be users and find and we are going to pass here our user ID let's delete here and how we are going to take our user ID if you watch my previous videos you already know that basically we are going to take this number from our URL to do that we are going to be using use location hook cost user ID use location hook and we are going to take its path name but if we do that it's going to return this old URL but we are going to need only this number basically we are going to use JavaScript split method and using those slashes we are going to split our URL in this case this part will be our first element profile will be second element and this will be third element so it's going to return as an array to take this last part I'm gonna say split and third element zero one and two okay right now we have our user ID we can fetch this data let's see I will say console log data it says query key needs to be an array I'm sorry because in version 3 we are able to use it like that but after version 4 we are gonna add here this array foreign so let's open up users as you can see we have find user ID parameter and inside cat User it's empty so let's fetch our data firstly I'm going to take my user id I'll say const user ID equals request params user ID cost query is going to be select from users table and my condition here user ID will be question mark basically we are going to pass this user ID that's right here DB and Json web token we are going to use them so I will say TB dot query and I'm gonna pass here my query and after that my user ID it will be error data if there's an error it's gonna return us response status 500 and this error and if everything is okay remember our login controller I will just copy paste actually we are going to take our user information and send it like that we are not going to send this password I'm going to save and as you can see our user is here and all these information so let's use them here inside profile I can use this data firstly data dot cover picture I'm gonna copy this data dot profile picture if you want to you can add those social media information but I just showed you this DN website I think you can do the rest it's our username I mean user.name not username users t oops not double and website okay perfect it's here so what I'm gonna do is to write here a condition that because this is our profile page and we are not allowed to follow our stuff so I will come here and say a condition of course to do that we are going to need our current user I'll say current user from use context and authentication context and I'm going to say if user ID equals our current user ID dot ID we are going to return another button if it's not we are going to return this button and it's going to say update as you can see it's still follow that because this user ID is a string because we are taking it like that let's see I will say type of user ID by the way there is an error to prevent this I'm going to use this mooding I will just cover everything and I'm gonna say if it's looting right here loading if it's not return these elements of course we are going to need here react fragments like that okay and as you can see it's a string but our current user ID it's a number so basically they are not equal to prevent this I will come here to cover this and I'm gonna say parse integer so it's going to be a number and they are going to be equal let's see right now and as you can see it's update perfect let's open up another user for example J indoor and I'm gonna write here the following functionality let's come here and say on click it's going to be handle follow closed handle hello so let's open up our menu and I'm gonna add here relationship.js and relationships.js let's copy this likes rather it's going to be similar we are going to get relationships too late and add new relationship of course it's going to be relationship.js and I'm gonna open like jazz copy everything and paste here it's going to be get relationships add and delete okay so I'm gonna fetch follower user ID from relationships where follow the user ID equals question mark basically this is our follow-up user ID using this ID we are gonna find its followers we are gonna pass here float ID actually a follow-up user ID and finally it's going to return us a relationship remember it's going to return us an object and we are going to transform this object into user IDs I will save and let's open up our profile again and fetch our data like that I'm going to delete them and I'm Gonna Change this data name and it's going to be relationship data relationship relationships and we are going to pass here our user ID that was the name let's check followed user ID it's going to equal this user ID okay so I can use this let's say console log okay it says not found that because in index.js we didn't import our new route let's import relationship routes and here okay it says null of course not user ID follower user ID and as you can see this is our user ID because we are following this user so I'm gonna do exactly the same condition here let's get this relationship data and I'm going to write here if it includes our user ID current user dot ID yeah I don't know right here following if it's not follow as you can see we are already following this user but if I go to John's page as you can see it says follow okay by the way it's giving this error to prevent this we can use is looting because we don't have our data yet but to use this we have to change its name let's say relationship is loading let's come here and say including if it's not show this okay it works so we are going to create here a mutation and if we are following this user we are going to delete our follow if you are not following we are gonna add new relationship it's really similar to our like functionality remember so I'm gonna copy here foreign also and right back and I'm Gonna Change here let's see following and relationship data if it includes our user ID it's going to be true in this case we are going to delete this relationship let's say relationship and we are going to pass here our user ID and it's going to be user ID but if you are not following it's gonna be post method and we are going to send here user ID is going to equal user ID so I can delete here and we are going to emulate query and it's going to be this user that because we are going to change that button and that's all let's come here and change this add method insert into relationships follower user ID and follow to user ID first one will be our ID because we have the follower and we are following request body and user ID let's write here something following now follow or whatever you say and in this case delayed for relationships where hello user ID will be our user ID and followed user ID will be request query and user ID I hope I didn't make any mistake I'm scared because I've been quoting four hours and my brain just stopped I'm making mistakes easily but you don't have that much I can hold on so let's open our console I'm gonna click here it says not found because I said relationship is going to be relationships profile relationships okay it works but it's not refreshing our user oh I'm sorry it's not going to be user of course it's gonna be this relationship we are not really fetching our user we are refetching this relationship and that's all perfect We are following let's open up relationship here it's here let's unfollow I will refresh and it's gone perfect and we need to fetch user posts here it's the James profile but there are my posts here to prevent this I can add here a prop and I'm gonna say user ID equals user ID if in the post component if we have a user ID here we are going to send it as a query let's say user ID equals our user ID and in the backend server let's open up post jazz we are going to add here a condition let's take our user ID comes to user ID is going to be request query user ID and I'm going to change my query here I will say if there's a user ID it means we are in the profile page so we are not gonna select our timeline posts we are going to select all posts belong to this user so I will see select actually it's going to be the same thing but we are not going to have this relationship I'm just gonna say where P dot user ID is gonna be question mark and here for this query I will say if there is a user ID use only user ID if it's not current user ID and we are going to write it twice actually I can create here values and write it like that but be careful we are not using like that we are going to be using without this array okay let's see and as you can see it's only Jane Dot let's check John perfect and our page which is test2 and awesome and one more thing we are gonna need and it's gonna be this update component when I click here I'm going to open a model here and we will be able to update our user I'm going to go to Source components and create new folder and it's going to be update let's say update .jsx I'm going to import here it's CSS file and let's create CSS I'm gonna give a class name remember how we are handling these comments when I click here we are opening this comment section so I'm gonna do exactly the same thing let's open up profile page actually let's close everything and open up from scratch and somewhere here I will say update let's import this okay so I'm gonna create here a use state open updates set open update and at the beginning it's going to be false and if it's true we are going to see this update model let's write here our condition open update and show this component and to close this model we are going to set our state inside this update model because I'm going to create a button and when I click on this button we are going to close you're gonna understand better right now let's open up update we already have class name here so I'm going to go to CSS so I will say position absolute and I'm gonna Center this remember from the previous lesson how we are doing this I will say 50 percent height will be 50 percent I'm gonna give a background color let's say white padding and the index will be bigger than everything so we are going to see this update model over any component here and I'm gonna take this set method here as a prop let's create here S Pen and when I click on this button or you can say button oh click and set update will be false and in this button I will say I'll click when I click on this button we are gonna open up let's see I will click as you can see it's here if I click it's gone it works like that so let's add here our inputs we are going to have color picture profile picture our name stay and this website let's say form just grab a file second file names the website if you want to you can add password username email or any other information as you wish I'm just showing you how you can do this let's give name on change remember what we are doing here I'll say handle change for others see website let's create this function but before I'm going to create my use state actually I will just paste you know how to do that we are going to have names the website and using those names we are going to update this set text so let's copy our function also I'm passing here quickly that because we have just done this in the share component and remember we have a upload function I'm going to open share here I'm going to copy this we are going to upload our cover and profile pictures but this time we are going to pass here a file that because we are going to have two more files actually let's add them also cover set cover at the beginning it's gonna be no and one more and it's gonna be profile so basically this file will be discover or profile let's import this finally we are going to have a button here and let's say update on click events and it's going to be handle subnet and remember here we have query clients and we are sending an e post but this time we are going to update our user but it's exactly the same thing let's import our via query here and instead of knee post we are gonna send our user information let's say user and it's gonna be users endpoint and the method will be put I'm not giving here any specific user ID that because we are going to use JWT so we will be able to update only our profile page if it's successful we are going to refetch this user remember we have a query here we are going to refetch like that and it was handle click or submit okay submit let's change this and when we click here this time we are going to have two images let's say cover URL at the beginning I'm not gonna leave this empty because remember we already have a cover picture here I'm not gonna delete it so I can take this cover picture and write it here so I will say user touch cover picture how we are gonna reach this user of course from profile page so not only this set open update also we are gonna pass this user actually it's data remember from this query I will save and I can use this user here okay and I'm gonna do the same thing for profile picture and let's do it here and I'm gonna say cover URL if there is a cover file remember we have a cover file and profile file so if there is a cover we are going to update it so I will say oh wait upload and we are gonna pass this cover file let's write here profile and basically if we have file we are going to update it it's going to return new URL if there is no we are going to use the previous picture we are not going to change it and finally rotate we are going to pass here our names the and website basically I can spread this text like that and also I'm going to give color picture in this case it's going to be this URL uh profile picture and it's going to be profile URL and finally after everything I'm gonna close this model using this function and it's going to be false okay let's create this endpoint it's going to be put and update usage let's call this here and create this function I'll say user let's duplicate this is going to be update user but as I said we are going to need our JWT token remember how we are using it we are taking token if there is no token we are going to send this error if it's not verified we are going to send this error and if everything is okay we can update our user so I will say const query and update users we are gonna set our name Siri website cover and profile picture and my condition where ID equals question mark let's use our DB dot query we are going to pass our query here and we are going to use our request and body and our elements and finally this ID will be our user ID which is user info dot ID and after that error data if there's an error we are going to send 500 response status 500 and we are going to assign this error and I'm gonna write here one more condition if data and affected rows bigger than zero it means we updated our user we can return our response updated if it didn't change any row it means this is not our ID I'm gonna return response status 403 you can update only your post okay let's try let's try I'm just gonna write any random inputs I will update oops 401 I did exactly the same thing here oh it's going to be like that and secret key I just copied this from somewhere else I think I'm sorry for that not striking I will click update and as you can see it's updated but where are our images I'm gonna refresh here okay we deleted by mistake let's see okay we have cover URL let's check our user if we take this properly or not okay it's here profile picture and color picture Maybe not now like that let's write here anything okay and I'm gonna try to update only these three I'm gonna refresh oh something interesting here maybe let's write it like that foreign picture cover URL okay right now it returns okay let's do it like that user dot profile picture let's delete them okay let's try to upload any image here I'm gonna come here and choose actually I'm gonna refresh first this image this image and any text here update okay it's not updating oh I forgot here updating my files so I've got to say on change and set color will be event targets files first file is going to be a single file and the second one and it's going to be set profile okay let's try again I'm gonna choose this one this one and in the text here I'm gonna update let's check and as you can see they are here okay and we cannot see them that because we are not using our upload file as you can see so I will say upload of course don't forget slashes here and let's see and as you can see it's here okay it works but I didn't like this usage I think I'm gonna update this after this tutorial and you can see in the GitHub repository and I'm gonna give style for this update component also I don't want to do this right now that because it's not the design part I forgot creating this component in the previous tutorial so I'm gonna update this and here and you will be able to find this in the GitHub repository and that's all I think by the way this is our last post I forgot writing here order by okay perfect like that we don't have this date that because remember they are now and as you can see we don't see our posts why this is happening that because it's undefined I think it still tries to fetch this data let's see I will say console log if there's a user ID right here there is if not not I'm going to open my console I'm gonna refresh and as you can see it says there is let's see our user ID here that because it's a string remember we are taking from our query so I will say if it's not undefined and I'm gonna do the same thing here let's see right now and as you can see there here okay so we can fetch our timeline posts we can like and dislike we can see its comments we can write any comments and maybe we can delete this post let's do the last thing and end this tutorial I want to delete this post I'm going to open up posts I will say delete post and I'm gonna pass here post ID let's say just ID and post controller I will duplicate this gravy great post they are gonna take our token and try to delete our post so I will say play it from posts where ID equals question mark and also user ID will be a question mark That's because it should be our post otherwise we are gonna return another error because we can delete only our post I will delete here and I'm gonna pass here post ID let's say request params dot ID and our user ID and it's going to be user info dot ID and remember what we are doing I will say if data dot affected Pro bigger than 0 it means we updated our user we can return this plate it if not it means it's not our post so we are going to return response status 403 Json you can delete only your post so you can do the same thing for update post update comment delete comment it's exactly the same thing there is nothing different you can find every example of these features for example you can create stories you can delete comments you can update posts we did all of these things if you understood this tutorial properly there is nothing you cannot do if you still have just let me know in the comments or my social media accounts we will try to help you okay let's open up post and when I click on this icon I'm just gonna open a small button here small menu and we will be able to delete our post here I'm gonna say actually let's create another use State here and it's going to be menu open and set menu open it's going to be false but when I click here I'm Gonna Change I'll click set menu open it's going to be the opposite and after that if mainly open I'm going to show here a button and let's say it late and when I click on this button we are going to create a mutation so I will say on click and don't play it let's copy this paste here and we already have a mutation here I'm going to create one more but this time it's going to be let's say delayed rotation we are going to call this here mutate and we are going to pass here our post ID and we are going to take this post ID let's delete here and we are going to return axios delayed posts and this post ID this is a parameter remember then after that it's going to affect our posts I will save and let's see I'm gonna click as you can see delete I'm going to click here okay it says 403 that means you can delete only your post there is something wrong foreign actually when I refresh the page let's see again I will delete it sends this error but if I refresh it's not here oh I said row is going to be rows I'm gonna refresh and delete and as you can see it's not here let's create new one foreign let's create another post here and I'm going to change the user ID and it will be jump okay we are not following John I think let's say profile one okay we are not following anyway we can test here if I click as you can see we cannot delete that because it doesn't belong us but also we shouldn't see this delete button so I will come here and say if menu is open but also if post.user ID equals our current user ID like that okay our current user is here and if I click as you can see it's not coming perfect of course it looks really strange here I will open up my scss file and here inside this user part after this user info I'm gonna say a button Position will be absolute and if you are using position absolute the parent should be position relative and let's give our position here I'll say top 30 right zero I'm gonna delete border it's gonna be red so I will paste this color and I'm going to give some padding finally cursor pointer and let's see color white okay perfect I can open and close I can delete my message it's that easy okay guys it's enough for today I think you can add other functionalities here and don't forget I just created this application in couple hours it means I didn't test it and some functionalities can be not the most efficient functions basically I'm not giving you a complete application it's just a tutorial I'm teaching you how to do things so if you recognize anything is missing mistaken just calm down and go to La Modelo social media accounts and write the problems we are gonna try to fix them and that's all for today by the way I can give here minimum height it was in home CSS I think okay it's here I'll say minimum height 100 VH okay as you can see it was the first mistake I just found so if you find something let me know in the comments or in the social media accounts and that's all I hope you liked it if you learned something new today please like the video you can support low model using the link in the description below or by joining to channel I hope I will see you in the next tutorial goodbye [Music]

Channel: Lama Dev

Views: 238,371

Keywords: react, react app, react tutorial, react project, react social media app, react social network app, react full stack app, mysql, react mysql, react nodejs mysql, react query, jet, cookies, Facebook clone, express api, context api, react hooks, full-stack, full stack social app, lama dev

Id: 1EuNnZEp2sQ

Length: 158min 45sec (9525 seconds)

Published: Fri Oct 28 2022