React Node.js Social Media App Tutorial - MERN Stack App Full Course w/ Hooks - Context API

hello my friends today we are gonna be building a complete social media application using react and node.js here is our homepage there are posts of our friends and i can like them dislike them here i can create a new post and upload an image to our server and when i share it it's gonna refresh and show our post and for my profile page here is my profile picture cover picture and information about me and i can create new post here also if i go to another users page i can follow or unfollow the user and i can reach all informations here and in this project if you didn't watch the first and the second part in the first part we created a rest api using node.js and mongodb and we are gonna be storing every data there and in the second video we just built this react application design and finally in this video we are gonna use both of them and create a complete social media application so i highly recommend you to watch those videos first and continue with this one and by the way we are gonna be using functional react components react hooks and context api so this application contains everything you need to know about new generation react application so i'm excited to start if you are ready let's get started ok i just moved these two folders into one folder which is my social this is our server site our express api and mongodb and here our react application which we created in the previous tutorial so i'm gonna use this folder here our end and our front head so i will come here in the terminal i will open new one this is going to be our api cd api and this is our react application client so i will run them start and for this also okay our back-end server is ready and it's connected to mongodb i'm waiting for this react application okay it's ready so right now as you can see we are seeing this profile page so how i'm gonna see these all pages here when i write here slash it should be home page when i write login it should be login page or profile so to do that i will open near terminal here and it's going to be our client again our react application and here i'm gonna add react and router and dom so i will open here documentation and here as you can see in the documentation we can switch between these components or pages so i should import them and here i'm gonna open and source my app jazz so i will paste this here we don't need think i will delete this okay and here as you can see first we are gonna use this router we will just grab them let's close this tag and after this we can switch between all these items i will use this switch and after that these roots so i will say here path and it's going to be home page so whenever i go to this address i'm going to call my home page so i will do the same thing for others login register and profile and one more thing here i'm gonna add additionally a username because we are not gonna go to profile page directly we are gonna use our username so here i will call my login page register and it's gonna be a profile let's save and see i will just move this here as you can see it refreshed and it's the home page so if i write here login it's going to be some problem as you can see it goes homepage again that because it just looks this path and decides okay i'm in this path here so i'm going to home page so to prevent this i will write here exact path so right now it's going to go to login page awesome that's right here register it's our register page if i write here profile and some username it's going to go to profile page but there is one more problem here as you can see we don't have any more this style and we can't see any images here that because we are using where was our data here we are using this path and for the home page not important it works properly because it looks into assets this file so if i go to profile it's gonna directly look at this profile and after that it's gonna look at these assets but there is no folder like that so what i'm gonna do is deleting them actually this slash also and i will save and after that i will create here emv file i hope you remember this emv because we use this in our server site here we just stored our mongodb url and here i'm gonna do the same thing i will say public folder and here i'm gonna write my address of course not profile home page it's our main url and it's gonna look at this folder if i save this like that it's not gonna work because react application requires to write here react and app you have to use this expression otherwise it's not gonna work so i will save and start again okay i will close old one and right now i can use this url i will copy this and let's open some component here for example post as you remember we use this post photo because it includes assets but right now i will come here and create my folder url const and it's gonna be public folder this shortcut and here process and emb and my url so i will use this url if i write here public folder and after plus this photo which is pause 10 for example so it's going to automatically add this local host and 3000 and assets so let's see okay it doesn't work that because our enemy is not in the client and i should restart again let's close this also okay perfect so i will do the same thing for others close friends and here i will adjust this of course i will define and process emv and let's actually copy from here okay for here so i'm gonna choose online and again pf plus awesome it works and one more thing i will copy this url and inside my public and index as you remember we point this css file and i will say this folder and after this style css and after this let's close all right now i will go to profile so right now we have to do here and these users and for profile page pages profile i will just copy this here and for the right bar okay i will use here backtick and i will cover this with curly brackets and here i can write my public folder and here also person 7 person so let's see okay we don't have to do this actually because we are gonna change but for now i just wanna see them properly so for the right part all these users i will delete these assets and this slash and here i will delete this also and backtick i will just cover this and here my public folder let's see okay i will change this like buttons also i will just choose this and this one and delete public folder and after that it's gonna be like dot png and this one heart.png i'm not gonna change this profile picture because soon we are gonna change this according to our api okay right now it looks perfect so i wanna add something more here when i click this i want to go to home page i will just close all of this and here our top bar i'm gonna use link here link from and it's gonna be our react router dom it's really similar to a tag in html so here instead of using atec and href we can't use this in react application so it's gonna be against pan and right now i'm just cover this with link and here i will say to my home page let's see okay i'm in the profile when i click this i'm gonna go to this home page but as you can see there is a style here like an icor so i will come here and style text decoration and it's gonna be no perfect so let's start fetching data right now instead of fetching from dummy data i'm gonna fetch from my api as you remember let's go to index this is our api port so i'm gonna fetch data from this port so how i'm gonna use this i will go to packet.json in the client here and after everything i will just write here proxy and it's gonna be our backend api and http localhost and our port number and it's gonna be api so for making request we can use javascript fetch but instead i'm gonna use something more useful so i will say yarn add and axios and here in our mongodb if you remember from node.js part we just created some users and we are gonna use this john and this j additionally i added these these relationships descriptions so in this posts we have from john and jane and our images let's go to node.js and remember what we have done here we have user username email password pictures and this friends and here descriptions the from and relationship and for post we have description image and likes and for the post routes we can create posts update delayed like or dislike and get one post and here we have timeline posts so we are gonna use this one we just passed our user id here and according to this id we just fetched our posts and after that we fetched our friend's posts and finally we sent this as json but i forgot here status let's say status 200 successful and one more thing here we are making get request here but here we are sending some data from body so it's not the best practice so instead of this i'm gonna pass here my user id and here i will say not buddy it's gonna be params because when you send something in body i don't recommend you to use get it should be paused or put so if you are using get if you are trying to fetch some data i recommend you to use params so it's exactly the same thing so i'm gonna use this timeline and user id this url i will save this and here you don't need top bar we already declared our proxy here and here i will go to client site and for feed component i'm gonna delete this post we are not gonna use this dummy data anymore and here let's comment this out after that i'm gonna create use statehook and i'm gonna define my posts i will say const posts and set posts and it's gonna be use statehook and initial state will be empty array so what i want to do is when i render this page this component i want to fetch these posts to do that i'm going to use use effect hook i will say use effect as you can see imported here and i will create my function i will explain this if i write here console.log feed rendered so i'm going to my application i will go to inspect okay as you can see fit rendered but right now whenever i change something inside this divs or here it's gonna render again for example let's write here text and set text it's going to be empty string and here i'm going to create an input if i say here on change and e let's change this text i will say set text i will say e and target and value or whatever doesn't matter what you are writing there so i'm starting writing something i will refresh first as you can see it rendered and here i'm writing something so as you can see here always increase which means we always render this field here so what i'm gonna do is writing here a dependency if i write here empty array it means run this use effect just once when you render this fit it's gonna be only one time let's refresh here it's rendered i will write something as you can see nothing has changed if i write here text for example it's going to be our dependency and whenever i change this text this use effect will run let's try i will refresh as you can see so this is how use effect works i will delete this and this so i will delete this and say run this use effect just once when we render this feed okay so here i'm gonna use axios it's a really strong tool to make requests so i will say here get of course i should import this import axios from axios so right now i can make this request i will just copy this i will delete this and here i'm gonna give a user id let's come here from john this is our jones id i will copy this and here i will paste and here i will say const response because after this request is gonna return as a response i will cancel log this response and of course it should be post let's try right now and we are gonna have some issue here i will refresh as you can see we don't have posts we have just promise here because it's async function in the express application if you remember we set async and await so i should do the same thing but if i do that i will write here async and here a weight as you can see we have a problem here it says you can't use this async with this function so instead i will delete this and i'm gonna create some function here const fetch posts and it's gonna be a function arrow function and after i can write here async and i will move this here and i'm going to say just return res dot data let's don't write data and we can see better let's write here just console.log this response and here what i'm gonna do is calling this function let's save right now and i will refresh here as you can see we have data our status is 200 successful and inside we have data this is first post and this is second one also so how i'm gonna use this i will just say here set posts and it's gonna be res dot data so i can use this post right now i can open this and here instead of this dummy data i will say post and save okay we have a problem here because we don't have profile picture like that let's go to post and remember that we are using here again this dummy data so i will delete this and right now i can fetch user according to this post so i will do the same thing i will copy this use effect and here i will just paste here of course i should import okay and here i will create my user i will say user and it's gonna be set user and it's gonna be empty object and here i will say fetch user and again async and here i will import this let's go to user in the our api and let's see here we have get user we can fetch this i will just delete this and backtick i will say users so i will use this post if you remember it includes our user id and i will say user id and here set user and here fetch user users is not defined because i didn't change here i will just delete this and here user dot profile picture it's gonna be an error again because we don't have any profile picture here or cover picture for john also but we will add this and here it's gonna be user dot username as you can see we have user name here but we don't have user profile picture so right now what i'm gonna do is creating a custom profile picture and cover picture and here in public folder in assets and person i created some image here no avatar and no cover it's going to be our llama here so what i'm going to do is come in here and say use this user and profile picture if there is no profile picture or use here public folder and here person no avatar let's see absolute if i write here any avatar any profile picture it's gonna use it so what can i change more here i will just look at here i can change dislike because in our database let's go to posts as you can see we have likes array here and it includes our user ids and here this like number was coming from this dummy data i will change this i will just say post likes this array and it's going to be length let's save this and right now as you can see one people and zero and when i click this apps and what can i change more here we have image but it was a dummy data and photo but here in real database is image so i will delete this it's going to be image after i can write here our date to do that i will add some other library our client here make sure it's client i will say yarn add time ago let's go to documentation now it's time ago.js we just created something else i will stop this and remove this one and here yarn add time echo and js and here as you can see there is format i'm gonna use this method and after that it's gonna be like right now in couple seconds in one minute so i will come here and import format i hope it's correct and from timeago.js let's use this i will look my database here and we are going to use this created add and i will delete this and i will say format and post dot created at let's see i'm not sure it's correct or not okay awesome it works and don't care about these errors we are going to take care of them and here it says use effect as missing dependency and post and user id let's come here this use effect it warns us because we didn't use this user id because whenever we change this user id it should be re-rendered if you are using something changeable inside use effect like some variables like user or post user id you have to write here this dependency i will save ok perfect i will refresh here and right now it says you forgot this key let's go to fit because it's our dummy data again and actual data it's id with underscore i'm refreshing last time have some we don't have any problem right now so we finished our fetching timeline but there is something missing here it's really important because we used here static user id it should look at our profile our logged-in user and decide this user id but we don't have any login or register system right now i just wanted to leave this at the ending because we are going to be using context api if i open this documentation context provides pass data to component 3 without having passed drops down manually so what it means by that i just created some shapes here it's our application we have app.js and after that it's using home page profile page it's going to be login and register pages and for home page we have top bar side by right bar feet and feet includes share and post so what this context say we can pass props only down of this tree for example if i write here some props let's say user i can pass this data to top bar but i can't pass the app.js and also i can't pass this data to pause directly i should pass first this child fit and after that in the feed component i should pass here so if i created something inside this feed let's say post i can only pass this data to post or share component because they are its children so it has some advantages because we never conflict any probes but there is some disadvantages for example when we login to this application we are gonna use current user in here this image in here decide our friends and decide online friends if we like it in this post we are gonna use it everywhere so how i'm gonna use it should i define here current user and pass here and pass from here and here final here i can't do that it's useless so that's why we are using context api or redux i will write here redux also and get started here it says state management tool it's really strong really useful so what these redux and contacts exactly does okay i will create another shape here and let's put this here and i'm gonna say this is redux or context state so it includes our current user when we log in this system let's go to users when we log in this system it's gonna store our id profile and cover pictures maybe mail address so it's gonna store this here and for example this post needs this user id it's easy i will just fetch from here and after that this sidebar needs this user profile picture for example not problem i will just send this from here and for example this top bar needs user id or username no problem i will just send this so basically we have a common state here which includes our user or post or whatever and whenever we need this user we are not gonna ask the parent anymore we are just gonna ask this context or redux we are gonna say hey give me this user hey update this post something like that well context api is not exactly a state management it's just passing our props to entire pages or components but if you are creating small applications like we do we are gonna just need this current user and it's not gonna change too often so we can use this context but if you are creating really huge application and change all states more often i recommend you to use redux but we are not gonna use this today in the next videos we are gonna create new applications and we are gonna use this redux don't worry but today we are gonna use context and using context with react hooks is really easy and allows you to create really quick applications i highly recommend you to learn this okay after this information what i was saying i forgot okay we are gonna use this user id dynamically after logging system but don't care about this right now i can do one more thing here and when i click this i want to redirect to this profile page so i can use link also here in this profile picture this one i will just use link we already did before and i will just cover this i should import okay let's import manually i will say import and link from react router. and after that i will say to again backtick and i will say go to profile page of course i should cover this with curly brackets and here user dot username as you can see bottom left is our profile android i'm clicking apps so i'm gonna arrange this page it's gonna john's color picture profile picture and name and information here and it's gonna john's posts so right now as you can see we are using this feat here and what we did inside this feed let's open we just fetched these posts but it's for timeline so how i'm gonna say here no you are not in home page you are in profile page i will say here again remember what we did for this white bar and this time i'm not gonna say profile because we need username so what i'm gonna do is write in here username let's say john so after that it's gonna take this props and it's gonna decide okay i'm not in the homepage it's profile page so i can write here some condition so i will say here if there is username do something if there is not use this one so what i'm gonna write here i will just copy this and paste and instead of fetching this timeline post i will come here timeline pause get one post okay we didn't define i think so i will copy this and paste here get users all posts so i can write here profile and here it can be username i will delete whole actually and here i will say posts and i'm gonna use my post model and i will say find and inside it's going to be our condition i will say find but i can't find this username because post doesn't include any username it includes our user id first i will say const find this user find one and it's gonna be user name equals request params and username this paragraph and after finding this user of course awaits i always forget and after finding this user i will say user id equals user's id response and status is gonna be 200 and json sent these posts so let's try i hope everything works properly in here i will say if there is username right here profile and username oops typo let's try right now as you can see perfect and here it says also you forgot this variable i will just paste here but there is one more problem here because we can see our username it's undefined also oh it's because of our url if we look at left bottom you can see its profile profile so what i'm gonna do is writing here slash okay awesome so let's arrange here and here i'm gonna do this i will go to profile i will do exactly the same thing but it's gonna be one difference but it's gonna be one difference so i will copy this and this one also let's import them and axios so what's this difference as you can see we've hatched here with user id but we don't have any user id here we can reach only this username so what i want to do is going to api let's close this it's our api and i'm finding these users and in this route here we fetched our users according to id so instead of parameter i'm gonna write here a query i will delete this and i will say here it's a new thing and it's really useful i'm gonna create query i will say const and user id and it's gonna be request and query and i will say user id and i will do the same thing for user name so what they exactly mean so imagine our localhost and 8800 and users and i was fetching data by writing here just user id it was our parameter like sofak or john but right now what i'm gonna do is writing here a query and say user id for example equals some numbers or i can write here username and equals john if i write like this i can use both of them so i will delete this and here i will write here a condition if there is user id call this function if there is username which means there is no user id i will say await and user this time find one because there is only one user in this username and here my condition equals my username here i will paste and that's all if we write here user id query it's gonna call this one if we write your username it's gonna call this one and assign to this user in any condition we are gonna use this user and same thing so i will come here and right now i will delete this and here i will say username equals john we don't need this for now so here i will write user.username and here user.description there is typo here let's delete okay perfect if i do that we can't see this username anymore because we've hatched this in other way and i will just copy this and here and query user id we are gonna fetch with this user id and equals our post and user id oops something wrong let's check here i will refresh okay there is a mistake here okay it's correct let's check our user here user id query user id find by id ok i forgot to let in these params so i will say here just this user id let's save this and again i'm gonna refresh okay perfect let's change these informations to do that i will just pass this user our user and as you remember we used here profile instead i will use user equals this user so i'm going to right bar i will just delete this profile we are not going to use this instead we are going to fetch this user so basically this is our parent let's see here this is our parent and this is child so basically we just pass these props from profile to right bar from parent to child okay and for profile right bar i will say user dot c i will just copy this here and here from and it's gonna be condition here relationship if i write like this it's going to be 1 2 or 3 and there is problem here because we are still using this profile let's change this we said if there is profile use this one if there is no use home right bar and right now i will change this also it's gonna be just user let's check right now okay new york madrid and one so what i'm gonna write here where was this relationship okay i can write your tree condition i will write here if it's one right here single if it's two right married and finally if it's none of them write let's say empty okay i have some so only thing here we didn't change these photos so for profile here i will say i will actually delete this i will say user dot cover image is it correct let's check here color picture if there is color picture write this one if there is no color picture right here public folder and person and no cover let's see you have some there is no cover picture and it's automatically adding this one and i will copy and paste here i will say profile picture and here no avatar have some here i wrote this username by manually so what can i do i can just choose this username here from url to do that i'm gonna use other hook i will say import it's gonna be use params and from react router this time it's not tom it's just react router let's create here cons params and i will say use params and i will just console.log params and let's see okay inspect right now there is object here and it says this is username here because remember this app.js we defined this as a parameter and its name is username so we can use it if i say here params.username it's gonna give us our username so i can use this i will write here username and here dot username it's the same thing and i will copy this here i will say username and here it wants us because it's a variable so we should pass here so we pass this username as john also so instead of this i will say username okay now so okay almost we finished our profile page here is not important we are gonna take care of later and for the home page okay and before making any other things i just want to make the most important part right now log in and register and we are going to be using context api login page so right now i'm gonna close everything here and this components pages and this api okay right now in this horse folder i'm gonna create a new folder context and inside i'm gonna create three files it's gonna be alt context dot js and i will copy this and reducer and actions there are main three elements of the context api when i search for context api on youtube i see all these instructors writing whole calls inside one js file they are writing here actions and then reducers then context and after that they are defining providers all these things inside one.js file and most of them don't even use these actions and it's the terrible idea to teach someone redux or these context apis so there is no good example there is no real-world project right now you're gonna learn everything about this context but before starting i wanna just arrange something inside this login page for example if i write something here i can see this password i just wanna hide this so in the login page i will open this and here i will say type it's gonna be a password okay so this is going to be email i can write here whatever i want i will say here type and email so when i click the login button it's not gonna allow me to write this normal text it should be in email format so if i click this nothing is gonna happen because it's not a form so i will change this it's going to be form and after that i will say here on submit and i will call here some function and little click you don't have any function let's create here const handle click and after that arrow function and let's say console.log if i do that when i click the button it's going to refresh this page i don't want to refresh this page so i will write here e and here e dot prevent default right now it's not going to refresh yep so so how i'm gonna send this data i'm gonna use here another hook it's gonna be use ref and i will say const for email i will close this and also it's gonna be for password you can use here use statehook also but every time you write here any character it's gonna render this component you should prevent re-rendering as much as you can so here i will say my ref here it's my email and for the password ref will be password and we write here our types but we didn't say required we can say them also required okay let's write here our for example email if i click this as you can see there is a verification here if i write here normal text it's not gonna allow me and here something dot com and i don't wanna write here less than six characters so i can write after this min length and it's gonna be six so if i send perfect so i will open my inspect console and i will refresh and my password as you can see we have our ref here so if i say email dot current and value right now i can see my email okay i can close this for now so let's get started with this context api it's really important if you want to create some real world project you have to use context api or redux or any other state management systems so i will write here first my initial state initial state and it's gonna include my user and it's gonna be now because we didn't log in and after that i will write here is fetching this is gonna decide the beginning and the ending of the process so it's gonna be false first because we are not fetching anything at the beginning and last one will be error and it's gonna be false also because at the beginning we don't have any error so after that i can create my context i will say export const and alt context and i will say create context and here i'm gonna indicate my initial state of course i should import this okay i should do this manually i'll say import and create context and it's gonna from react okay of course context so how i'm gonna use this context because here as i said it's gonna be our store here to use this store i should wrap some of these components with my provider what i mean by that if i wrap this home i can reach all of these components inside home it will share and post because it's inside this home component so if i've wrapped this feed component for example i can only reach this fit share or post only this tree so in our example i will use this current user in home top bar sidebar so i can say everywhere so i'm gonna wrap everything inside my application so let's create this wrapper i will say export and const it's going to be alt context provider whatever you say and here my function i should write here use reducer because i'm gonna use this reducer if you don't understand right now don't worry i'll explain everything const and it's gonna be reducer state updated state and dispatch and i will use this reducer use reducer from react again and i will say here off reducer and i will give here my initial state it's not important for now don't worry about this i will explain this in the reducer section and after that i will just return and i will say alt context dot provider and i will close this i will say value and double curly brackets and here i will say user it's gonna be state dot user it's coming from this reducer and is fetching again state dot is fetching and for error state.error and additionally i will share this dispatch so how i'm gonna wrap this application i will indicate here a children and i will use these children here so what's this children it's gonna be my application it can be app.js you can wrap all of this or it can be index.js you can wrap this application let's write here i will just import my provider from context and alt context and here i will say alt context provider so i'm gonna wrap this up i will close this and like that as you can see this is our children here so we are sharing all these values with this app so in this case we can reach this current user anywhere in this application because we've wrapped this application okay i can close this i think you understood here but what about this user reducer so we have a user here he's gonna enter his credentials here and after clicking this login button we are gonna go our actions we are gonna dispatch them and then it's gonna go to reducer and this reducer will decide which properties we are gonna update inside this initial state what i mean by that our initial state like this there is no user there is no fetching and error when user clicks this button login button it's gonna go to our first action which is login start and it's gonna take our credentials for example let's assume that you write there john gmail.com and password after dispatching this action it's gonna go to reducer and reducer will decide okay this is login start so i should start to fetching it's gonna be true but there is no success or failure so there is no user or there is no error and after that we are gonna try to fetch our user in the postman i'm opening this login we did all of this in the node.js tutorial let's say here john after login start action we are gonna make login request i will send and it's successful so we have here our user profile picture cover picture all followers username everything here so since we get this user it's gonna go to second action and this is possibility one because it can be error also so it's gonna dispatch this login success action and it's gonna take this response which we received here so after that it's gonna go to reducer it's gonna say okay it's login success action so i can update my user from now on user will not be know it's gonna be this user john this mail cover picture everything and it's gonna say okay if it's successful it means there is no fetching anymore it's gonna be false so if it's successful there is no error also for example i write here something wrong and say send as you can see user not found there is an error and this is our second possibility this action will be dispatched and it's gonna take this error and pass the reducer and reducer will say okay it's login failure it means fetching ended false and there is an error it's going to be true and there is no user actually it's that easy so i will close this and separate this page it's gonna be reducer and action will be here firstly let's create our actions first one will be login start i will say export const it's gonna be login start so i will take this user credentials you can write here user mail and password or you can write just user doesn't matter and after that it's gonna return our type and type name will be login and start and after starting we are not returning any payload any user any error nothing so it's gonna be two more here this is login success and login failure and i will change them also okay so if it's successful the api is gonna turn us some response let's see here this postman when i send this correct email and password it's gonna turn us this user so i'm gonna use this user i will say here payload and i'm gonna pass this user and this is gonna go to our reducer don't mix with this because it's our user credentials which we are gonna make request let's say credentials we are not gonna pass anything here okay so in case of failure if i write here something else it's going to turn us an error so it's going to take this error and pass the reducer i will say payload and error you don't have to write your payload you can write whatever you want but it's the common usage okay let's go to reducer here i will create my reducer first const auth reducer and it's gonna take this state and the action after that i'm gonna create switch case structure it's similar to if else but if you have certain results it's easier to use so i will say switch and it's going to be our action type we are gonna use login start or success or failure okay let's write our cases first case will be login and start so in this case i will return my new state here it's going to be user and null is fetching it's going to be false and for error it's gonna be false it's showing us there is no default here let's write this for default it's just gonna return our state okay so if it's not start i will just copy this and here if it's success i will take this user and say it's action dot payload is fetching will be false sorry this one will be true because it's starting point and there will be no error and the last case it can be fail so in this case there will be no user fetching will be stop and error will be action dot payload which is this error it can seem a little bit confusing but actually it makes sense if you make more practice you will understand this i'm for sure and i will just export this export default and alt reducer okay so we are ready i can import this reducer here import reducer and it's going to be from auth reducer i have a mistake here because it should be our reducer okay so how i'm gonna use this let's close this one okay you can write this inside login but i don't wanna any mess here so i will create i will close them i will create one file here and it's going to be api calls and here i will say export and const let's say login call and it's gonna be async function and it's gonna take our user credentials let's say just user and dispatch and after that i will create my function and i'm gonna dispatch first action this one to use that i will say dispatch and i will indicate my type it's going to be login start and after that i'm gonna make request i will say try catch const response and it's gonna be await and axios and i will say post request i should import this axios import axios from axios so where i'm gonna make this request it's gonna be off and login so i'm gonna pass my user credentials let's write here credentials because it can be confusing when we say just user okay and after that if it's successful i'm gonna dispatch success action i will say dispatch and type it's gonna be login success and if you remember we are taking this payload and this payload will be our response and data it should be close here okay why i set here data because this response includes our data our status our time staff bunch of things so i'm gonna just take the user okay so what if there is an error i will copy this and this time i'm gonna dispatch login fail failure and payload will be our error here so that's all we can call this right now in the login page pages and login so i can import this login call because we export here we can call it i will say import login call and it's gonna be from api calls okay and instead console.log i will just say login call and inside what it requires this user credentials and dispatch so my credentials here email and password and after that it's gonna be dispatch but how i'm gonna take this dispatch as you remember we defined this in the context api here we can use user is fetching error or dispatch i'm gonna use this one to do that i will use another hook here i will say const i can take all properties here here so i'm gonna use is fetching and any error and dispatch so which hook i'm gonna use it's gonna be use context and inside i'm gonna write my art context here here i can write this dispatch right now so i can write here user also and we can see so i will write here console.log and user so let's try i will refresh and here i will say john and gmail.com and my password i will say login okay it's null let's check that because it's not our email and password it's just the ref so i will write here email equals email dot current and value and for password it's gonna be same dot current and value so let's try again perfect they are from previous fetch let's refresh and try again john and login as you can see it's from login start and this is from login success so how i'm gonna use this fetching i will say in the login button here if it's fetching i will write here loading if it's not i will write login let's close this and here okay something is wrong okay there is typo here and here and let's check here also not this oh i have problem with writing fetching wow awesome so i'm gonna make this a little bit fancier i'm going to material ui and here components and here progress so i'm gonna use this progress to do that i will just first import and it's going to be from material it's going to be core because it's not icon i will copy this and instead of loading i will just call this material component let's see by the way it's going to be blue and i will change this color can i change this like that i hope let's say white oops i will copy this i don't want to write this all the time okay it's really big i will write your size 15 pixels okay it's really small okay it's nice so i will make this process a little bit slower i will come to network and here i will choose slow 3g i'm clicking i have so okay i can turn back and i can add for this also because i don't want to click any button here so i will say let's copy this and here let's refresh two three four five six abs so i can get rid of this outline also i didn't like it so here login button i will say for focus it's going to be outlined now okay so i can add one more thing login button and for disabled i will say cursor and not allowed so if i write here where was our button here disabled when it's going to be disabled when it's fetching so i will say it's switching let's try awesome it's really nice and by the way if you didn't understand this context reducer and actions all you need to do is making some projects if you are watching only tutorials and doing nothing it's gonna be really confusing and you are gonna forget quickly everything i know it looks really hard it's normal if you're a beginner just i recommend you to do some practice practice real world projects not those bullshits into youtube because they are always saying okay two buttons when you click it's gonna increase when you click this one it's gonna decrease okay this is our redox file this is action this is reducer don't watch this because time is really important and the best way to understand something is making real projects i'm seeing those people outside they want to learn language coding and they are not beginner they know something they know html they know what's the variable what's the if else for while they know this but only thing they can do is some useless calculator or tic-tac-toe game or something like that no one cares about these shits you have to do something real like this you have to make social media you have to make some shopping application some appointment applications tickets application and then you're gonna be confident when you apply any job or show someone your portfolio and in this channel there will be no basic things no users examples no useless projects you're gonna make everything what you need so okay i was angry a little bit and again if you didn't understand just watch couple times and try to make your own you don't have to do this login system but you can find something for you and try this context okay and here's the thing i'm clicking login and that's all nothing is happening so what i'm gonna do i will go to app.js here and i will create some other logic here firstly i'm gonna call our user because right now it's in our store we can call it anytime we want i will say const and i will call just user from this context i will say use context oops and it's going to be alt context okay so what i'm gonna do is i will come here and say if there is user we can go to home page if there is no user we shouldn't see this home page because we don't have any account we don't have friends we don't have to see anything there so i will say register semicolon okay and here if there is a user i will say red direct i can use this from this rotor dome and i will say where i want to go to home url if there is no user i can reach here and here is the same thing i will copy this and paste here and it's going to be register so what i made here i said if you want to go to home page i have to make sure you are logged in if you are you can go to home page if you are not i'm sorry you have to register and if i want to go to login page it's gonna check again if you are logged in you can't go to login page because there is already user you can't log in anymore so you are gonna go to home page and for the register it's same if there is a user you can't go to register page you have already account you have to go to home page i will delete this it's mistake okay so let's try and here i will refresh so as you can see even if it's the home url it's redirecting us to this register page so if i go to login i will write here john if i log in it's gonna show this home page now so so let's do the same thing for the register i will close them first i will come inside this register and this time i'm not gonna use any context that because i'm not gonna change this user totally depends on you if you want to after registration you can say ok user logged in also and you can change the user but i don't want to do that after registration i want user to log in also so i can make api call here so i will make the same things here let's open this login what we have done here i will just copy them and also it's gonna be username password let's import this and after that let's check and one more thing here password again again okay let's create here this handle click i will use this here ref is going to be username i will just copy this email password and it's gonna be password again okay so i can verify them required is required here and also for email type will be email and password and it's gonna be password also i will refresh this okay does it work yes works okay perfect and here one more thing mean length and it's gonna be six so here i should check one more thing let's make this first form there was this box here it's gonna be form and on submit it's gonna be handle click and i will say [Music] type submit okay so what i'm gonna check except these requireds or passwords or character limitation i will just check does this password again is the exactly same thing inside this password so how i'm gonna do that i will say if password again and current value it's not equal password and current value i will write here password and current and i can set here my own custom validation so i will say set custom validity and it's gonna be passwords match okay let's check totally different passwords i will sign up as you can see password don't match i have so you can make this password again also doesn't matter so this time it's gonna show this notification here okay so if everything is okay i will say as i can create here user and let's say username it's gonna be this username and current and value and for email and for password so i can send this i will write here async function and after this user i will say const response and await i will import this axios and post method and inside i will say alf and register and i will pass this user here okay of course it should be in trying cage it's going to be error here i will just say console lock this error we will handle later and here if everything is okay if there is response actually i don't need this response we are not going to use it so if everything is okay what i'm gonna do is redirecting user to login page i'm gonna use another hook here it's really useful i will say const history and use history okay it didn't come automatically so i will import it import i'll say use history and from react router okay what i can do with this history i can redirect user to previous page or any other pages and by the way i'm gonna make a video about all these useful hooks if you want to of course okay so i will say if it's successful i will say history and push where i'm gonna push this user to login page so let's try i will say lama test gmail.com password so if i click this as you can see we are in the login page also so if i write here again our new user lama test login of course it's email and login awesome right now i can use this current user here i can fetch data according to my user and i can change here here and it can be my friends actually we are not gonna use this online friends it's gonna be only react and not js tutorial i don't wanna socket io or websocket for this tutorial but in the future we are gonna add here our chat application and we will be able to see our online friends but it's not our concern right now and also we will send instant notifications here for friend requests or any notification here so stay tuned we will do everything in this channel so for now i can change here let's close them and for components top bar here what i'm gonna do is choosing my current user i will say const and user use context and i'm gonna use my context context why it's not coming i don't know okay import and from context here okay so i can delete this and here i will use again my public folder i will say const public folder and it's going to be process and env and what was the url i forgot let's check okay so i can use this public folder and plus i will say user profile picture and of course we don't have any picture it's gonna be a broken image here so i will say if there is user profile picture use this one if there is not use pf and it's going to be person no avatar let's try okay have some so when i click this i want to go to my profile page so i will write here link okay i will say to and it's gonna be backtick here and let's say profile and user.username of course it should be in curly brackets i will click and i will go to john let's try anything else i will refresh i will say login and lama test gmail.com and login right now i'm clicking and going to llama test perfect i can change here and here i can add my likes i can add here in the react application but it's not going our server side so we can figure this out i will just take a break a little bit and we will take care of them okay right now instead of login again and again i will come here and write user not null it's gonna be our user in the mongodb here if you remember i just copy this user and paste here right now our initial state will be jane if i don't do this whenever i refresh the page here i will come to login page and i have to log in again and again and later we are gonna be store this user after login let me show you inspect and here application and as you can see there is a local storage here after login we will take this user and we are gonna store here and after that we won't need to log in again until we click the logout button ok so i will save this and if i refresh the page we are in the home page perfect so if you remember here we are following other user here this number belongs to john here so i will go to postman and make request for this timeline this is jane's user id and after that it's gonna fetch all posts of jane and all posts of jane's friends here it's from john and john again from jane and jay there are four posts so i'm gonna fetch this i will close this here and here instead of writing manually i will write here my user id so how i'm gonna do that i will fetch current user here i will say const and i'm gonna add this structure this user from our context i will say use context and it's gonna be alt context so only thing i should do is come here and say user dot id let's see right now as you can see jane jane and john awesome and i should write here other dependency user and id and i will write here user and id okay but we can't see this image let's look at our post from client side because i didn't use this public folder and here i will change this logic because we are using public folder also so i will say if there is user profile picture use this one if there is no use this one so let's check right now as you can see for john there is no profile picture here and fourteen it's gonna be person m1 here awesome so i wanna handle this like and dislike so i will come to post and here for dislike handler i'm gonna use axios again and send my like or dislike so inside this i will say try and catch an error it's going to be here and inside this i'm gonna say axios and it's gonna be put method let's check our post router into node.js this one as you can see it's put and post id and like if the user didn't like before it's gonna like this if the user already did it's gonna dislike okay so i will write here posts and after that it's gonna be my post id pause vote id and after that i will say like and after that i should pass my user id i will say user id and it's going to be current users id but we are not using current user here let's fetch it i will say const and user from our use context and it's gonna be all context and there's a warning here because we are already using username here so i will write here use this name as current user so it's kinda nickname of this user so i can write here user id current user dot id so i will save and i will refresh here and open my console okay let's like it as you can see the post has been liked if i click again it's gonna be zero and here the post has been disliked but there's a problem here if i like this one it increases but here it says the post has been disliked that because we already like this pose inside our db so how i'm gonna decide we already like this or not so i will come here and here i'm gonna use another use effect and i will say set is liked and it's gonna be a condition here i'm gonna use this post i will say post and likes array and i will check whether this array includes our user id or not and i will say includes and inside i will say current user and id so if it includes our user id it's gonna be true if not it's gonna be false so i will write here my dependency and it's going to be current user id and pause dot likes okay let's see right now if i like this it's gonna be zero and here the post has been disliked if i click again it's gonna be one and here light okay so let's take care of this share component i will close them and here i will open share component and here i'm gonna call my current user i will say const it's gonna be user and i will say use context and inside it's going to be my auto context okay i will do this manually import outcome text and it's going to be from context and i will import it okay i can use it here again if there is user and profile picture i will say pf and my profile picture if there is no pf and person and no avatar okay i will import this i know it's the not best way to indicate our profile picture or no avatar we can do this actually inside our context api but anyway it's not a big problem so i will say cons public holder it's gonna be process cme and i will copy this it's gonna be the same because we already used this same image okay so here i can change this name i will just cover this and here plus user and username and after that i will write here question mark let's see okay perfect so right now i can use create post request but there is something more here i can add additionally an image here so how i'm gonna do that firstly i will change this deal it's gonna be not due it's gonna be form as we did before in register and login page so it's gonna be our input here it's gonna be our post description and after that i'm gonna add some image so i will write here const it's gonna be description i'm gonna use use graph and here i will say rev is going to be description so after that i'm going to create another input after this and it's going to be our input file let's create input so type will be file and i will write here id it's going to be file again and i will indicate your acceptable file extensions so i will say accept it's gonna be png or jpg okay so if you try to add another file like pdf or another extension of these images it's not gonna accept so i'm gonna write your own change and before this i'm gonna create file here and i'm gonna use use state so i will say const it's gonna be file and set file and here use state and initial state it's gonna be now so here i'm gonna say e and i'm gonna set my file it's gonna be e and target and files if i do that it's gonna take all files which we choose i don't wanna choose multiple files so i will just say take just one so right now we can upload only one file let's see right now as you can see there is another input here and it looks really strange so how i'm gonna cover this input with this container it's really easy i will come here and change this view it's not going to be due anymore i will say here label and if i write here html4 and indicate here my input id which is file here this id right now if i go to my application and when i click this it's automatically refresh this input so i don't need this anymore so i will come here and say style and i will say display and no if i do that you are not gonna see this input anymore awesome but it still works perfect so what i'm gonna do is creating submit method here where is our form here and i will say on submit it's gonna be let's say submit handler and here for this share button i will say type and submit so whenever i click this button it's gonna file this on submit event and it's gonna fire our function let's create this function const submit handler and it's gonna take e because we are gonna prevent default action so i will say e dot prevent default and after that i'm gonna create a new post new post and it's gonna include our user id first it's gonna be what was our user okay user dot id and i'm gonna add this description but as you know this is rough here i can't use this like that i should say current and value okay we created our post right now i'm gonna send it if i say here try and catch here so let's look at our structure here create post it's gonna be post and post method i will say axios and it's gonna be a post method and it's gonna be paused and i will pass my new post here i should import it okay here from axios okay of course i'm gonna add here async await so okay right now if i write here something and click this button it's gonna send this post but what about this image we cannot send any image right now when it comes to uploading image i highly recommend you to use amazon s3 or firebase or some cdn tool but i know most of you just wonder how to upload file into our server site inside this node.js so i'm gonna upload these files inside this server but i really don't recommend to do this because if you are using rest api it should be just for requests for images and for other files you should upload this any other source so it's not to any tense anymore and uploading images to server is not good idea because this is a social media application there will be multiple users imagine you have a thousand user they are gonna change their profile pictures and they're gonna share posts images videos so storing these inside your application i don't know but anyway we are gonna upload here so i'm gonna open my index.js in our server site and here i'm going to open another terminal here and i will choose my server side api okay so i'm gonna add here yarn add it's gonna be malter and one more thing path i will say okay so what's this motor exactly so melter is a nodejs middleware for handling or uploading files so you can read this documentation and i'm gonna copy and paste some of these parts because i don't know exactly what this multi does inside its methods because it includes storage management so i don't want to lie to you i have no idea how it's doing this and i don't want to deep dive into this malta it's not that important thing right now you don't have to worry about this so here i will import this motor const motor and it's going to require our motor okay so i can write this here i'm gonna write here cons upload and it's gonna be our motor and inside this i'm gonna write some options but later before i'm gonna use my application and i'm gonna create a post request here i don't want to create any routes or something it's just one page and i will say api and upload and after that i'm gonna use this upload here i will say upload and it's gonna take only one file so what should i do here i will say single and it's gonna take our file and i will create my request and response here i will write my try and catch block i can take my error and console.log and right now since we use this upload and single and indicate our file it's gonna upload our file automatically so i don't have to write anything here i will just return response it's gonna be status 200 200 and i will send a response i will say file uploaded successfully but writing this like that is not enough i should indicate my destination and file name so how i'm gonna do this i will say const storage and here it's going to be motor and disk storage and inside i'm going to indicate my options first one will be our destination and it's gonna be request and take our file and here it's gonna be some other function cb and then i will say cb null and i will write here my destination it's going to be public folder and inside this public holder is going to be image let's say images ok as i sat here i didn't deep dive into this cb or disk storage if you wonder you can check this page but actually i don't care about this okay anyway so one more thing i will write here file name it's gonna be request and file again this cb and cb is gonna be in null and here i'm gonna write my file name and it's going to be request body and name okay something okay so that means we are going to send this name inside our react application okay so i can indicate my storage inside this motor so it's ready upload file and our social application okay it's gonna be post method and here i will say upload i will choose body and right now it's not going to be json file i will choose form data and here i will say file and it's gonna be file here and i will choose some file inside my folder let's choose this one and if i say send okay we have an error here we didn't write your post okay we did oh maybe i forgot this slash let's try again okay cannot send let's check here path argument must be typos to see drink i think that because we can't send anybody name here so instead for just postman i will write here file dot original name and also i will create here my folders public and inside this public it's gonna be images let's try right now okay apps as you can see our like is here perfect so i will delete this right now it's going to be our public folder so what i'm going to do is coming this public folder these assets i will just copy all these items person posts and dislike buttons i will just i will just copy them and let's close and inside image i will paste so if i go to client and out.eme instead of this url i will change this our server and after that it's going to be images folder so how i'm going to use this images path i will come here if i go to browser 8800 and if i say public and images we can't reach there because it's a rest api it's gonna try to make get request here so to use that i'm gonna add here our path const pass and it's going to be required path and after that let's write here after connection i will say app that use right now i want to use this images pad it's going to be slash here okay and i will indicate here my folder to do that i will write here express and it's going to be static and i will say path and join i should write here two underscores and their name and i can indicate my folder public and images so what we did here i said if you use this images path don't make any request instead just go to this directory so i'm gonna save this and right now if i write here let's relate this images and let's say something inside this images file at dot png am so we can reach this right now so right now it's ready our folder is going to be our new folder we already indicated here right now we can use this path of course i should restart because we change emv file i will say yarn start again okay as you can see our all images are same nothing has changed i will close this old one okay so right now we can upload our own files let's close this and in share component what i'm gonna do i will say here if there is a file const data and it's gonna be new form data and inside this i can push my properties what i mean by that i will say data and append what i'm gonna add here first one it's gonna be file file itself and after that it's gonna be name and i can indicate here my name so i'm gonna write here i will say const file name so i don't want to upload my files like like png 1.png2.png that because other user can upload a file with same name so we don't want any conflict to prevent this i will create here date and now it's going to create some numbers according to current date and after i will say file dot name it's gonna be like some numbers and like dot png and after that if an other user adds like png also right now it's not gonna be same name it's gonna be something different and like dot png okay so i will just write here this name so i can go to index for api right now i can change here i will say request and body is gonna be name because we pass here this name we can use it right now so what i will do here more as you remember we have new post so i can add some other property for this new post i will say new post and i will add here image and it's gonna be file name because remember here if i go to posts it has here description user id and also image so for this image i'm gonna indicate my file path which is file name okay right now i can try nkg cancel log this error and here i will say wait and i'm gonna use axios and post method and i will go to upload which we created here and i will just pass my data so basically if there is a file we will create new form data we will indicate our file and name and after that we will upload this at the same time we will add our image inside this new post and then we are going to post to our api as a new post okay let's try right now i will say hey from react and here let's choose this one i'm gonna open my network and i'm gonna click this apps successful and successful here let's check our file as you can see and here are mongodb awesome so we can upload file and send some description here but there is a problem we are not refreshing this page after adding post so what i'm gonna do is after creating new post i'm gonna say window and location and if i write here reload it's gonna refresh the page after adding post let's try first i will refresh and here hello and image here and if i click share it's gonna refresh we don't see this description and photo anymore and here this is our new post but this post is not supposed to be here because it's our newest post it should be here so let's order these posts according to creation date so i will go to feed because we are fetching this data and here instead of sending this data i will just sort it i will say sort right now i should compare two posts i will say post one and pause two and after that i'm gonna return something i will say return and i should create new date because we are going to compare these dates and i will write here p2 dot created at because we are going to compare this created dates and i will say minus new date and it's going to be a 4 post one if i do that it's going to compare these two dates and it's going to return this sorted version and close this date will be first if i write here post one and here post two closest date will be last one let's try if you are confused about this sort algorithm you can check on the google it's not that complex so let's refresh this page right now as you can see it's our first image if i write here p1 and p2 it's the last element okay so i will create one more thing test and here this orange it's refreshing and here i have some okay it's not orange it's grapefruit or what's that okay anyway so perfect we can fetch our timeline posts we can like them and dislike them we can create new post and new image so i think we are done with this home page we can go to this profile pages okay right now we can take care of this profile page because some things are missing here for example something wrong with this profile image for example if i go to john i can still see this share component i shouldn't see this because it's not our page and also we can fetch these followings and here we can add some button here we can follow or unfollow other users okay let's go to our profile page and here why we can't see this let's check we didn't change this let's go to i will just close them and go to profile here we've hatched user we assigned here ah okay it's still same thing okay if there is cover picture it's gonna be public folder and this cover picture if there is no it's gonna be this image and here also if there is profile picture it's gonna be public folder and this picture if it's not it's gonna be no other okay it works perfectly here use the name description and we send this user to right bar let's go to right bar and here we are taking this user for profile right bar we are indicating our city from and relationship okay for these friends i will just take one friend here these followings this one will stay and others i'm gonna delete okay right now i'm gonna use this component you can also create new component for these users that i don't want to waste time for now i'm gonna create a new request for this api and it's gonna fetch all followings of a user let's close this and here roots and users and before follow and after get let's write here get friends so what i'm gonna do here i'm gonna give my user id and according to this user id i'm gonna fetch friends but not all data what i need here only this image and username and maybe user id there enough so let's create i will say router and it's going to be get method and i will say friends and i will give my id here i will say user id and after that it's going to be request response after that i will create my try and catch block and i will send here my status 500 and json i will say i won't say anything i will just send this error and here firstly i'm gonna fetch user which has this id i will say const and user is gonna be a wait for user model i will say find by id and this id will be request and params and user id which we indicated here so after finding this user i'm gonna take all friends of this user i will say friends right now i will say wait but this time i'm gonna use promise dot all because we are gonna be using map remember what we did here in posts when we fetch all data for timeline we fetched here user posts and here we use promise all and fetch all friend posts using arraymap here i will do the same thing so i'm gonna use this user and for followings as you remember it was array inside this user we have followers and followings and they are an array so for these followers i will say map and for each follower and by the way it's not user it just includes our user id let's look here as you can see it's just followings id not whole user so i can indicate here also let's say friend id actually you can understand better and after that i'm gonna return user dot find by id again and i'm gonna pass this friend id so right now we move all these users inside this friends array if i do like that it's gonna include all properties of a user but i don't wanna fetch all these properties so i will create here let's say friend list it's gonna be an empty array and after that i will use another map here friends and it's going to be map and for each friend right now it's not number it's not user id it's actual users and for each one i will say const and here i'm gonna destructure these files from my friend so what i need here id username and profile picture okay and i'm gonna push inside this array i will say friend list and push i'm gonna push these properties and after that i will say response status is gonna be 200 successful and after that i'm gonna return this friend list so let's check here i will say users and friends and i will write user id here let's check here for jane because we are following this user id it's gonna fetch this user which is john so i'm gonna copy this jane's user id and here it's gonna be get method let's send there is a space here let's send again as you can see we have user name profile picture and id awesome so we can use this path i will come here i don't need this anymore and for this right bar let's go to beginning and here i'm gonna use use effect let's import this okay and inside i'm gonna create my async function const it's gonna be get friends and async and function arrow function i will write here try cage i can just write this and here i will say const friend list it's gonna be weight and axios and get method and inside i'm gonna say users and friends and after that i'm gonna indicate the username it's to be user dot id we are going to take this user and use this id and fetch all friends and after that i can create friends and set friends using your state const friends and set friends and it's gonna be use state and for the initial state it's going to be empty array and after fetching i'm just going to set this friends i will use this response and of course it's the whole response i need just data i'm not explaining this because we did before and after that our dependency will be our user id and of course i should call this function i will say get friends why we are doing like that if you remember we can't use async inside use effect when we define this so instead we are creating new function which is async and after that we are calling it so okay right now i can use this friends here for this following i will say basically take these friends and say map and for each friend return some component here which is this follower right now quickly i will say if there is friend and profile picture i will copy this use public folder and this picture if there is no use public folder and personnel avatar and for here i'm gonna use username it's gonna be friend dot username oops let's see awesome it works perfectly but i can do more here i can make this clickable to do that i'm going to use link here i will say link from react router dom and i will close and move this here okay and here i'm gonna indicate my new path i will say to it's gonna be profile page let's cover this and here i'm gonna say friend dot username let's see as you can see right now i can click and drone doesn't have any friend so we can't see anything here i will go to my page again here is john here is johnny okay there's a text decoration here i don't wanna see that so i will come here and say style and text decoration it's gonna be no okay perfect i will go to john profile cover information by the way it's changing right let's check okay perfect and right now this is john's page i don't want to see this share component so i'm going to go to feed and here we have user name we have current user so what i'm gonna do is here i will create a logic here i will say if the username equals user.username i can see this share let's save right now it's disappeared let's check here okay i can see it's my page and for john nothing i can make this a little bit down but before i'm gonna add a button here we can follow or unfollow this user let's do that for right bar for the beginning here i'm gonna create same logic here i will say if user dot username but right now it's not gonna be equals it's gonna be not equals and current user what was the name user or current user ah okay we didn't fetch this let's do that const i will say user as current user and it's gonna be use context and and inside my context so i will use this if it's not current user's username i can see this button so i'm gonna create a button here i will say button class name will be let's say right bar follow button and inside this i'm gonna use material icon here import it's gonna be add from material icons let's use this and before i will say follow let's see okay i'm going to my page i don't see perfect for john's page okay let's make this beautiful i will copy this and let's go to css file and here i will write my button i'm gonna give a space first it's going to be margin top 30 and for margin bottom it's going to be 10. i have some and let's lay this border and background color it's going to be our facebook color 1872 f2 let's change text color it's going to be white and i will give border radius 5 pixels and for padding from top and bottom from left and right okay i will make them centered display flags align item center i have some i can increase this font size it's gonna be 16 and font weight will be 500 and of course cursor pointer okay nice for this outline i can delete it i will say focus and outline no no oops okay i have so let's close this right now i'm gonna create a click element here i will say on click i'm gonna call my function follow handler or handle click okay i will write here const handle click it's gonna be async function i will say try and catch console.log this error and here i shall create a logic here if we already followed this user it will be unfollow and when we click this we should make enflow request here this one users user id and unfollow and we are gonna be passing our data here our user id and if we are not following this user it should be follow and when we click this we should make requests for this follow so i'm gonna use use state here and const i will check whether we'll follow this user or not i will say fallout and set followed it's gonna be use state initial state will be false and after that i'm gonna use an another use effect i will say use effect and let's say current user dot followings so if this array includes this user's id i will say user and id i'm using this question mark in any case because if there is no user it can be an error here so i just don't want to see this so this is going to be our logic our followed will be true other case it's going to be false of course we are using here this current user and user id also okay so i can use this fallout here first i will say if followed it's gonna be unfollow if it's not it's gonna be follow for the material icons if we are following it's gonna be not add it's gonna be removed i will just include this so if you are not following it's gonna be at i can delete them let's see nothing has changed because we are not following right now and here in handle click it's gonna be await and axios it's gonna be put and users user id and plus again and follow so if it's not i will duplicate this and here it's gonna be unfollow of course i should pass my user id i will say user id it's gonna be current user's id just id i will copy this and paste here okay perfect and after all these things i will say set followed and it's gonna be opposite of the current situation followed so what i mean by that if i click this it's going to be envelope and this icon will be removed and if i click this again it's going to be follow and plus okay but there is a huge problem here let's check here as you can see we are jane and we are already following this user this job but here let's open our context as you can see we didn't write here any user id so if i click this button it's going to try to follow this user but but in actual data here we are following this user let's see i will open console and network i will click this as you can see here user has been unfollowed but here we see this as we follow this user let's click again we follow this user but here we see it as we unfollowed this user i should update this user so i'm gonna go to actions it's not about authentication so you can change these names you can say user actions user contacts and reducer but i don't want to waste time i just want to create here i will say export and const i will say follow and i'm going to pass user id and after that type will be follow and payload will be user id so when i dispatch this i'm going to take this user id and pass the reducer and as you can see i'm not using follow success or failure you can use them also it can be a challenge for you but i don't want to make this tutorial really long so i'm gonna just use this one so inside reducer i will just copy this and here i will say follow right now i will write here spread previous state which means let's consider user is null is switching is false error is false that means take all this state and paste here so it's going to be exactly the same state so instead of this you can write here of course error is switching null but i just want to show you as you wish so after that i'm gonna update my user you will understand right now why i use this one it's gonna be a useful example right now i will say take everything inside this user state dot user let's check here it's gonna check this user and it's gonna copy every property here and paste inside but i will say okay you took these properties but i wanna change something inside i will change my followings and right now i will do the same thing and here let's assume that we follow three people and user id is one two three i will say here don't delete any of them take all of these user ids i will say spreads and state user and followings so i did exactly the same thing i just copy inside this and paste here and i will say all these users i want to add one more user so which one is this i will say action dot payload if you are confused about this you can watch that part couple times and you can search on the google about spread operator i will do one more thing here i will say unfollow and i will take again this user id and it's going to be type unfollow and i will pass this user id and for the reducer i will take this here i will copy this and here it's going to be unfollow again everything will be same and for user right now again i take all properties inside this user username email cover image everything is same but one more thing i will change these followings let's assume again we are following these users i just wanna remove this user it's gonna be only one and two so how i'm gonna do this let's go to reducer i will say take these followings state dot user and followings and filter this array so right now let's write this tree again i'm gonna check i will check every following inside this array 1 2 3 and if it's 3 i will just remove this to do that i will say for each following and this following will not be action dot payload oops so what i did here is gonna look at each following each user id and if it is user id not equals action and payload which is three so it's gonna look here one okay it's not three it can't stay two okay it's not three it can stay and three i'm sorry man you should get out that's all we are gonna just filter like this okay i will save this and here inside right bar right now i'm gonna take my dispatch also so inside this handle click when i follow someone it should be unfollowed by the way and this one should be follow because if we follow this user we can only unfollow it if we are not follow we can only follow okay and for the unfollow i will say dispatch and type it's gonna be unfollow and our action payload it's gonna be user dot id and for here it's gonna be follow and payload will be the same so let's try right now i will refresh and here i will refresh okay we are jane right now we are not following anyone and for john there is no followers there is no followings okay right now i'm jane and i visit john's page i'm clicking okay there is error here i forgot this s here let's go to reducer okay it's gonna be followings okay and inside this john it's not supposed to be any followers delayed okay i hope everything will work properly okay i'm saying follow awesome we followed but we can't see any changes here is not changing so that because we are setting this followed with this user id we are checking here and after that we are changing this current user and here when we click we are changing this again but at the same time since we wrote here current user it looks inside again it changes it again so what i'm gonna do is i will take this and write as initial state so i don't have to change this and use effect okay i'm clicking unfollow and we follow this user and again apps so it works properly right now let's check whether everything is okay or not here our pictures username description follow button information he doesn't have any friend and his posts we can like and for our page we can see this share area and we can share something let's choose this photo here and share it reloads this page and adds here and you don't have any friends we are not following anyone i will write here john if i follow him and go to my page and here's my friend right now okay for the home page there is something wrong id undefined let's go to fit there is something wrong here ah it's about right bar sorry i will close others so it can't find this id and except writing here id i will just say user so if there is no user it's not even look at this id it's just gonna ignore this okay right now i can see this share component so let's fix it also what's wrong with there i'm going to fit and here we set if this username equals current user's username show this but in the home page there is no username so i will say i will cover this in parenthesis and here if there is no username or if there is username and equals current user username show this share let's see okay perfect so i wanna add one more thing here one last thing when i choose any image i wanna see this image here before uploading so how i'm gonna do that i will go to share and here in our component after hr after this line i'm gonna create an another div but it's gonna depend on our file i will say if there is a file if we click here and choose any file i will say create a div and class name will be share image container and inside i'm gonna create image and class name will be share image and for source i'm gonna use something different here will say url and create object url and i'm gonna pass my file so what this exactly does it allows us to create some pseudo url to see our file before uploading so after this image i'm gonna create one icon it's gonna be cancel icon as you can see i'm importing from material ui and i will give class name it's gonna be share cancel image and i will write here on click event and i'm gonna say when i click this set file and delete this file it's gonna be now so you're gonna understand better right now i will refresh i'm choosing this image as you can see we can see this image if i click this cancel button it's going to delete this file it looks pretty ugly i will just go to my css that's right here i will say padding for top it's going to be 0 for right 20 pixels for bottom 10 pixels and 4 left 20 pixels and position will be relative because we are going to be using absolute positioning for this cancel button and after i will say share image i will say with a hundred percent and object page will be cover and for the cancel button i will say cancel image it's going to be position absolute i will say top 0 if i say write 0 let's check i will choose image here okay it's here because of padding so i will say too many pixels okay perfect and i will say cursor pointer and i'm gonna reduce opacity a little bit 0.7 okay i'm choosing image it's still big i said source here it should be class name okay it's outside of the container i think we gave a certain number there let's check for this share container okay i will delete this perfect right now it looks pretty good if i choose here let's try again this one if i click it's gonna delete this file last example i'm gonna choose this landscape and share perfect so we are gonna finish with this last example so i'm gonna send you this beautiful heart it's for you okay it was really long i hope you enjoyed this tutorial of course it's not complete we didn't use any close friends here and we didn't use socket io for this online friends for these notifications but in the future i promise you we are gonna be adding online chat application like facebook messenger it's gonna be private messages group conversations it's gonna be really really nice and also we are gonna be adding instant notifications when we like any post or send friend requests it's gonna be here at the same time so okay that's all if you wanna see more videos like this you can subscribe the channel and if you like this video i would be appreciated and one more thing i created facebook page if you write there llama web there you can find this page if you follow this i would be appreciated i'm gonna try to share something useful for you there is nothing right now but in the future it's gonna fire and also i'm gonna create a facebook group i'm gonna just announce from this page you can attend this group also and you can share your quotes questions or whatever about web development so that's all i think i hope i will see you in the next tutorial goodbye you

Channel: Lama Dev

Views: 517,290

Keywords: react, react js, react tutorial, react project, react node, mern stack, mern, react app, node.js, mongoDB, mern app, react hooks, context api, axios, material ui, react context vs redux, social media app, useEffect, express, rest api, full tutorial, lama dev, fetch data, facebook clone, application

Id: pFHyZvVxce0

Length: 187min 27sec (11247 seconds)

Published: Wed Apr 07 2021