React Hooks - Building Real Project From Scratch | Oleksandr Kocherhin | Skillshare

React Hooks - Building Real Project From Scratch

Oleksandr Kocherhin

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
42 Lessons (7h 56m)
    • 1. Introduction

      1:26
    • 2. Why hooks?

      8:48
    • 3. Project architecture

      4:59
    • 4. Bootstrapping project

      5:56
    • 5. Prettier

      4:10
    • 6. Installing router

      10:44
    • 7. Adding top bar

      11:47
    • 8. Rendering login page

      8:19
    • 9. Use state hook

      9:19
    • 10. Using state hook for login page

      6:01
    • 11. Use ref

      4:45
    • 12. Use effect

      6:52
    • 13. Making fetch inside effect

      7:47
    • 14. Use fetch hook

      5:52
    • 15. Creating use fetch hook

      17:18
    • 16. Register page

      9:56
    • 17. Saving user token

      7:36
    • 18. Local storage custom hook

      8:53
    • 19. Exhaustive deps

      6:53
    • 20. Current user context

      11:51
    • 21. Validation errors

      10:09
    • 22. Fetching current user

      15:40
    • 23. Use callback hook

      6:14
    • 24. Improving topbar

      11:34
    • 25. Creating feed

      17:09
    • 26. Implementing pagination

      29:05
    • 27. Popular tags

      10:14
    • 28. Feed toggler

      8:53
    • 29. Implementing tag feed

      8:24
    • 30. Implementing your feed

      6:41
    • 31. Article page

      14:18
    • 32. Use reducer

      12:30
    • 33. Article form

      24:45
    • 34. Create article

      14:13
    • 35. Edit article

      16:48
    • 36. Delete article

      14:33
    • 37. Settings page

      30:58
    • 38. Add to favorites

      18:54
    • 39. User profile page

      15:38
    • 40. Implementing user articles

      18:12
    • 41. Use effect callback

      8:36
    • 42. Homework

      3:46

About This Class

In this course we will build a Medium clone using React and React hooks. This course is fully focused on fast and deep dive into creation of real application with React and hooks. We will start from scratch and step by step you will get close to finished real application. You will deeply understand how to structure your application, build reusable and understandable hooks and components and split code into smaller chunks of code. We will write code together in hooks way to make it pure and avoid data complexity. 

For each lesson you'll get source code of the lesson, so it's easy to see the progress and get a working app on any lesson you want. 

What you will learn in this course:

  • Structure and configure project

  • Write high quality code with React and hooks on real project

  • Create reusable hooks and components

  • Implementing authentication

  • Understand standard react hooks

  • Understand rerendering of components using hooks

  • Write custom hooks

  • Getting data from API with hooks

If you are feeling like you learned React but you still still missing hooks knowledge to build your own real application this course is what you need. This course is fully focused on creating the application without getting deep into basic knowledge of React!

Transcripts

1. Introduction: welcome to my course about wrecked hooks. It's so great to have you here. As you know, Rick change completely after introducing hooks, so all new applications are written completely different. But as it's quite a new way of creating applications, there are not so many properly created projects or articles where you can deacon understand how to write your own project with hooks. And this is why I created this course. We will start from the empty folder and finish with fully working application. We will go through making correct architectures, implement infection authentication right in custom hooks, sharing and decoupling our logic off our components. By the end of this course, you will have enough knowledge to confident the create projects off all sizes using hooks in Wrecked Who am I? My name is Alexander Kahin, and I'm a Web developer with more than 10 years off experience, as well as a professional instructor with various courses about Web technologies. I did my best to put all my knowledge into the scores, and they want to share it with you, and there is no way back because hooks are the future off react and you don't have other choice but along them, so welcome on board and let's get started 2. Why hooks?: in this video. I want to share my vision and experience with hooks. So the first question is border hooks. And why do we need to long them? A tall as you probably know, Wrecked was designed only to be Orender for components. It doesn't know anything about routing Vigen data or architecture off your project, but what relic team always implemented? He stayed inside component to store some date a now application. Previously, we could achieve these fruit creating class components with this state property inside, where we write some properties and direct could track them. Then we got stateless components, which were completely damp, and we could not store our state there. But stateless components are very simple to manage because you get rid off lifecycle methods and you don't have these like in classes. But you couldn't store state in them, And each time when we wanted to create straight inside our components, we would use class components with the state. That is also another approach to work with state indirect. It's not a part off react itself, but it's the most popular solution to manage data in the application in architectural weight, and this library is called predicts, and probably you hear about it if you already created some react applications. If not, it's not a big deal, and it won't prevent you to go through my cars. So basically relax is an additional state, which is completely independent off react. But through wrecked rejects, you can sing them both. And not so long ago. Wreck Tim presented your approach to develop in project. It's the opportunity to have a state in plain functions, So basically we had stateless functions from before and they were just playing function. Now, with the help of hooks, we can manage this functions and add state to them. We can use them inside, react without installing any additional libraries. And many off the hooks are not only about creating estate inside plane functions, but the core idea is to create the whole application without classes on Lewis playing functions. Now I want to share with you my approx and conserve hooks in comparison to react and read X approach. Why react and relax together? Because this is the most popular and scalable solution to create projects. So now the whole Internet goes crazy about hooks because it's new hot stuff in Wrecked, and I tried to make my comparison as logical as possible, ignoring all hype. And here is the first point. Hooks are really wearing you. This means that official documentation is quite short and, like good examples, there are thousands off hello world articles in Internet about hooks, but there are no good tested working and properly made examples with solutions. And you could not find a lot of projects, which a built with hooks. So basically, it's just not enough knowledge and experience in Internet. Yet even when you google something trivial like, for example, fetching data with hooks, you'll get quite different approaches, and most of them acquired basic. The second point is that hooks are difficult at first glance. Hooks look really easy, several lines of code and you're good to go. But when you start developing aerial application, you find lots of problems, and you must learn how hooks are working inside quite deep, to be able to fix all bugs and write code inefficient way. The next point is that there is no architecture in hooks. React is really easy to start. You just tried a bunch of friend er's and you already got something. It's not that easy. In other frameworks, that's where practice, So popular hooks are just playing functions, and you can create your new functions with them. It's really low level cold, which can be structured in any way. For example, in comparison with three decks, Redox gives you a nice and understandable way off architecture and single flow off data. That's why it's a standard library for big, scalable projects, and a lot of companies are using it. It also means that was Redox. Two different projects would be quite similar, and with hooks they could be completely different. The next point is that people don't understand hooks. As I already said, Hooks are quite difficult and new. That's why the Ryland of open issues interact in Get Hub, where hundreds of people already posted their questions that they don't know how to implement something. Greece hooks. And it's not how, which would be from my point of view when some music knowledge just comes in. So it should be enough to just dig in documentation and find out all answers, and for now it's not like this. Now let's talk about some good points. So the first point is any use tired. It's a new approach inside wrecked itself, and they really reflected a lot of Facebook components tow hooks. And that means that hooks will be there for quite a long time. For now, Greg team says that they don't plan to remove support for classes any time soon. But of course you never know. In any case, Wrecked will push people in hooks way, and people will start reflector and write new projects with hooks. The second good point is the small amount of code hooks, a quite expressive and allow you to write your cold in more declarative way. In comparison to predicts, the amount off code is much my smaller. The next point is that React was personally written. So basically indirect classes at the Russell really nasty bugs with life cycle, which are there exactly because they are classes in functional approach. They don't exist. A tall and now it's time for some questions, and the first question is easily next ed. I see lots of particles in Internet that hooks will kill. Relax, and you don't need relax anymore and so on. And I don't think that it will happen in nearest future. Yes, you can get similar behaviour in hooks like in Redux. That's true, but Rid X is a stable solution, which is there for quite a while. People know how to use it, and there are thousands examples and projects in Internet with all covered cases. But the most important point is that relax gives your architecture so it's easier to build scalable solutions and to work there as a team or on board new members. The next question is, should I ride all my projects with hooks? And the answer is off? Course not. You can simply update reactor a new version and use hooks to create new components or also some all components one by one without completely right off your application, which is really good. And the last question, which is the most important, is through they long hooks. And the answer is yes, for sure, because it's the future of react and direct Now is the most popular JavaScript framework. There is just no other way around. You can like them okay them, but you should know them. If you plan to earn money with wrecked, it's important. Understand that wrecked hooks is a completely in Europe. George Off writing code You can't just simply start with hooks and try to right the classes that you wrote previously in the same way but really need to do is to change your minds, head a little bit. Wiles region from classes and functional stateless approach tow hooks approach. And in this course we will go through all hooks while creating the rial project, which means that you will see how to make them performance and good to use and clear to understand in the rial situations. 3. Project architecture: in this video. I want to plan with you the structure off our project. It's always a good thing to do this before starting to develop any project. And it will save time you later when the structure is clear from the beginning. So let's first check what we want to implement. So here the project, which is already implemented and when we first go to the home page, we can see the global feed. This is just a list of articles and at the bottom we have pagination for them. Then we can also click in this specific article and then we will be redirected in the article itself. We can also use signing and sign up to register new account all again. But they're not that different. On all pages, we have something similar and this is our Tom bar here with the links for home page and singing and saying up. So this is something like terrible component for us. Later on the home page, we can also see popular text widget on the right and we can select some take here, for example, dragons and then were directed in this Pacific Tech. So now here in the tabs. We have dragons and we see articles for dragons. So basically our articles are just filtered by tag, and we also have a pagination here on the bottom. So basically, we can say that this page looks exactly like the home page and just the data filter it. Basically, this information is enough for us for the beginning to plan a simple structure, and we can, of course, make it more complex later. First, let's put each page in pages folder, for example, we will have Global Fit page. This will be our home page than articles page for single article and, for example, oath, Indication Page and so on. If we need other pages, we also need to create a Components folder there. We will store all components, which are really terrible and terrible means for us that we're using these components in different pages. So basically they're terrible between these pages, for example, of a tom bar or pagination Or maybe a feed will be terrible components off course. Sometimes we just want to split things on our page, and we don't want to move these components off the page to terrible ones because we're using them on the on the single page. And for these we can create additional components folder inside a page, and basically this will be components for the specific page. And exactly for this reason, I recommend to make every page a folded and nuns just a file. Then we can just put additional things in each page. We also need routes yes, where we will store all our routing and the folder for our custom hooks. This structure looks quite simple, and this is to understand for other people, but it is quite scalable, and it will suit good even for bigger projects than this. And now one more important point. We don't want to have related path in our imports related path, always look really bad, and it's difficult to manage off course. This is the point where all people start, but we can do better and not use related path at home. But the problem is that create wrecked app does not have any preferred way to solve this problem, and red if Lauren solution to avoid related path and I prefer the easiest of them. My solution works in all operational systems. Basically, we just want to put all our project files in additional node models folder, then we're peg. Well, building will correctly resolve all dependence is out of the box, and we don't need to do anything or install any additional libraries. Some people say that this is a bad approach, and you should always have on the single node models in rude Onley for your packages. And actually it's not true it. And it was never written like this anywhere. So basically lets great additional node models folded. And then we can simply write something like imprint pagination from components left pagination. Now we got rid off this strange dogs, and we simply used the folder but lies in our node models. And now we're peg while building our project will resolve all files properly. 4. Bootstrapping project: In this video, we will bootstrap our project from scratch to prepare everything for write in code. First off, all you need to install known jazz on your machine. As you can see here, I already installed, known with Russian valve which I am using and you can check with node minus passion. What known version do you have? If you have, for example, version like 10 or above? It's fine. If not, then you should go to the official website. Just Google known jazz and go to the first result Here is no just that orig and you condone Lord here Appropriate note version for your operation system, for example. For now, I recommend on Lloyd Inversion 12 for bootstrapping. Our application we will use create react up. You can see the wrapper off create wrecked up here and this is the most popular solution to start right in direct project. It gives you an empty project with all install dependencies react inside local observer and page relying on every change. So it's really convenient and we will use it for sure. As you can see in recommendation here, you need to have a least known aid or better known 10 or something later to make it working . In our case, if we don't Lord No. 12 it will be completely fired. Now there are different possibilities to install. Create wrecked app. I prefer to use yarn as a package manager for all my project. And it also allows us to install create wrecked AB through eat. As you can see, there is a command here. Young create wrecked app and then the name off this project I already have young on my machine. So a congest Ron young minds version and they get a version off the young. If you don't have it in style, you can simply google yarn go to the official website and in here when you're clicking, get started There is a section installation video clicking here You can just select your operation system And don't lord the version that you need For example they want don't Lord something from Windows and they need a stable version. And here I condone Lord and installer and install Young to check that young is working for us. You can simply Laurent in your command line, young minus version. Now we're fully ready to install our in your application. And as you can see in documentation, we can simply quoted this command young, create wrecked app and then the name off the application. I will name my application medium clone because it's exactly what we're trying to achieve. And when we're hitting, enter yard novel, install old packages which is needed through create wrecked ab. Don't Lord, if if they're not there and as you can see, we're already finished. So success with successful created Medium Clone And now there are several commands that we can use to start our development. Sarah, let's go inside our application that was created medium clone. And here we can run yarns tired and this will open our death servant that was created by react. So now when we open local host 3000 we can see that there is a new page And here is a did source FGs and say for Lord. So basically, this means that our observer was successful started and everything is working fine. Now let's get read off created stuff that we don't need. So here I opened our Project medium clone and we can see here standard create wrecked app. So we have read me young log, which was created by by young package manager and package. Jason. So the source code off her project lives in sores and we're going here. So first the full Let's look on index chance. We have a lot of stuff here, and basically this is generated stuff that we don't need. So we don't need service workers and we don't want to register eat. And we also want to remove index CSS because we will use it from another place. So for now, we only have import and our help, which is our first component. And we're randy eat in the road. This is completely fine. Now what we're having here, we have abscesses and we don't need it. We also don't need tests for now, So let's remove these. And in Dixie assess, we don't need also for also don't need logo and service working. So for now, we just have index chairs and ab Jess, we're already cleaned index chess, and now we need to clean ab Jess. So we don't need longer here, and we don't need CSS now. We don't want to return all that we have here, so basically, we can just delete all that we have. And right inside something like welcome. Here is our help. Now let's save these. Enter Lord the page. As you can see the page, what was previously there is gone. And now we have completely clean project with our message that we're all here. So we're ready to get started. 5. Prettier: in this video, we will configure. Prettier Pretty is the most popular tool in JavaScript world. To form our code in different extensions. Pretty A supports the most popular languages and for us important our HTML CSS or, for example, less javascript, typescript and so on. You can see the whole list here, and it's quite big least, and the main point is that it's unobserved, nated gold for martyr, which means that you don't need to configure almost anything. The code is just for martyred, and you can choose how it is for mounted its means that people won't have arguments between different fermentation and they're just using pre tale with minimalistic conflict. And that's it. You just press save in your editor, Andy. A code is always for mounted. It supports off course, the most popular editors. So basically, here we can jump in usage. And here there is a section which is called editors and this is what we need because we want to use a pretty inside editor and not SL I command. So here is editor integration, and you can choose your editor the most popular editors here, for example, visual studio code. You can just install pretty obvious court plugging and you're good to go the rock. Quite a few options in Pretty, and we want to configure it a little bit. So basically, these are all options that I inside and we want to configure. For example, Are we using semicolons or not? What is the land off the line that we need to support and so on? So basically, I have already conflict pretty filed, and for now we just need in our root folder to create new file. And this new file is called dot prettier Air Sea and this is our conflict file, and it lies always in the root off our project. And that means that editor can parse this file and use pretty in, and this is how my conflict is looking like. So here is tablets, which means that they want intonation off two spaces, then single quote, which means that all my strings will be for minded in single cold. My ally in wits is 80 so basically pretty terrible for March called really good and pleated to several lines. If it's longer than 80 symbols, break it space and false means that we won't have empty spaces inside, for example, objects or the structuring. So basically our imports won't look like this, but they will look like this. No space and inside and the last perimeter East semi colons, which means falls. I don't want to see any semi colons in my projects because it's just additional noise that won't help me to write better cold. Now let's check Hope Pretty is working. So basically, I am in source index file and, as you can see, when create wrecked AB generated this file, it used double quote and not single quote. And basically, when a heat now save, you can see that all my code was auto magically converted with prettier by single quotes. Off course. It's not only about single calls also politic and fix for us, for example, bed intimidation or some empty spaces that should not be there. And when we just hit safe, pretty fixes everything for us, and our code looks really nice for now. People are using pretty in almost every project, and it really helps to keep cold in the same way across all files and across different developers. I really recommend you to install pretty and configure Eat materia editor because it will simplify for you right in cold 6. Installing router: our project is already bootstrapped and we can start. According in this video, I want to cover route installation. Basically, react does not support drought in out of the box, but we have a lot of different pages and of course, we need route in. It would be nice to rent the different components in different pages and manage everything easily and indirect world. It's not a problem at all because we have a certain winner for Out in. It's a direct route library. So basically, when we Google reactor out here and we go to the first link, here is wrecked router and with installation, we can see that we can install it is wrecked, routed on baggage for Web As we're using young as a package manager, we can simply in our project in console at new package with young add wrecked routed down and then we could enter and our package will be installed. We can also see here in quick start. There is an example with basic routing, so basically, here we have a switch part in which we need to register each out. For example, we have here out slash about route users and so on. So let's get started. As I already showed you in the video about protection, we will put all our files in node Modules folder. So let's create it in here in source folder. We want to create your folder no modules and inside note models for want to create pages. Basically, pages is a falter verbal store. All our pages to check the drought in is working fine. Let's create two different pages, and here we can see our project, which we will implement. And for now we have in homepage Global Feed and this will be our first page and the second page will be our article page. As you can see here, this is the article page in the Ural. We have slash article slash slug off the article. So, basically, let's create phenomenal these two pages for these. First we want to create folder for Global Feed, and the next folder will be article and they created as a falter because then we can pack additional things in this folder and not on the component itself. So, basically, in global feed, we want to create new folder index chairs and the same we want to do in article. Also, index chess. Now let's create simple wrecked component So basically import trekked from wrecked and we want toe expert default and it will be global feed endless Create this component. So we created as a function. So this is global feed a function and we want to return dif and inside this dif will be just text global heat. Let's copy this cold because our article for now will look the same. So basically, here is our component article and now let's just change the name. And so this is the article text and we want to expert article as our component our two basic pages already and now we need to register them as wrecked route rounds and for these let's create in our route. So basically, route farce is not modules new file and we can name it routes, Jess. And this will be our component with our rounds. So here we want to expert default growls and let's create them. So basically this is routes component, and this is also a function where we want to return something we also need in this file First toe import tracked because we can't ride your six cold without wrecked. So inside our component, let's return some mark up. And here we need a switch component and this component will come out off, wrecked, routed on. So basically, here we can import switch from Jack trout and on now, inside this switch, we want to add some rounds and for now we have only two rounds for home page and for article page. So basically, here we can create child and path will be slash, which means home page and component will be our component global feed. And then we want to put exact and I will tell why we need this attribute in a second. Then let's copies. And now it will be path slash articles slash slug and component will be article and we don't need exact attribute here. We also need to import route component from direct route a dome here. As you can also see, I got automatic imports for global food and article because my editor does it for me without a complete off the files in the project. Basically, if you don't have auto complete, you can just seem to ride this to import by yourself. As you can see here we import global feed component and article component from pages slash global feed, which means we don't have related path like they normally would. Something like dot, slash and then we're going inside pages and so on. And basically we have absolute path starting from our node models. So basically out of the books, it's working in the way that everything that lies inside no old Models folder will of dramatically work as a known model. This is really convenient and easy to support because we avoid using related path. Now, as you can understand, were registered this around for home page and the next child for our article page. The only question is, why do we need a tribute exact In the first case by default wreck, Drought tries to do partial major for the route, which means that first route has just slash inside and it will simply be used for every page because you have slashed in every round. And to avoid this problem where using exact attribute. So we're just saying for wreck Trotta that please compare exactly this route with full path , so only when full path will be slash. This route will be used in other case it will check are the rounds. Now we want to render our routes in app component. So basically, here we have index jazz and we import in index years. I'll have component it is here. But as you can see, it's really, really small and they don't see any sense to create additional file for this component. So basically, we can just take everything out that we need and we need only function and put it inside index chairs. Then we don't need import off the AB because we have a pet here and now this app will be rendered. Now we can simply remove fgs file and a just a little Did this have function? So first we need to change this function app to constant. So basically Const ab equals and here is our function. Then we want to add some markup. So basically, inside declasse ab, we want toe ad H three tag where we write our text with welcome to our AB and after age three, we want to add our routes. But our rounds is a component, so basically we need to import it here. Import routes from and here with have just rounds. So as you can understand, it also goes off from no models and we don't need to add some related path. Then we need here to rub our rows with round her. And drought is a special component from direct route, which will render our rounds. So basically we have a drought inside and we just need to import shelter here on the top. So inside Rick Drought a dome, we have something like draws around her drowsy, but we don't want to use it everywhere in the file because it's quite a lot to ride. And we can just use Allah as as route from react role to don't. Now we can use everywhere breath problems, it out as a router, and here we simply rub our routes withdrawal. Let's check if it's working what we did. So when we jumped a browser, even see the message fell to compile. And here in source node models rows, we have somewhere routes, and it's not defined. So basically, let's just jump here in drawls. And as you can see, I created component route with Big Capital Letter are, and here it is small, so let's just change too big. And whenever the Lord and App you can see that global feed component is rendered in the home page, which means that everything is working fine as expected. Now, if we go toe slash articles and, for example, some slog, we can see that article component is rendered. And this means that our direct route A is working successfully. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 7. Adding top bar: in this video ruble implement of bar for our project. And here is how it will look like So this is the application. It is built with angular edges, but for us, it doesn't matter. The point is that we will get the same markup as here. So basically, for now, this is our top bar. So we want to implement lager and then on the right part, home signing and saying up we won't implement for now, law, Gideon State because we didn't implement faction off the user and storing current user data at all. The first question here is where we should put our component of bar. We have it annulled pages, so basically, I'll just put it inside Terrible components. So here in node modules that were created in source, we have now pages are all terrible components we can put in additional folder components I just created. And here we want to create Tom bar. We don't need anything additional, because here will be just small components which are terrible. So basically weaken, just create plane files and not folders. So here I want to add you file with the name toe, barn, dog es and For now, let's create a basic component first for these we need to import react as we did previously from react and we will expert this component who is default and the name will be top bar and let's created as a function. So basically we have topped bar and here we need to return some mark up. And for now, let's simply return dif with text off bar inside. So nothing really special. The next question is where we want to render it and we can go back in our index file where we have our app component. So basically here we want to rent the top bar, a bath routes and when we do it here, it will be on every page because this is basically are mainly out and the content inside droughts will be changed for every page. As you can see here, in routes we have route with additional component. So basically, instead of these routes on the home page will be rendered component. Global feud, everything that will go on top will stay on every page. So here we want to import top bar component. And as you can see, I imported it from components slash top bar, which we created. And here we will put all share a boot components. Also, we need to fix our mark up a little bit because we don't need this additional, Deve, So I will delete it and we don't need age three. So for now we have just throughout her and inside it, we have topper and drowns. And when we load the page here, you can see that we get Tobar now and then global feed. And if we jump in articles and some I d. You can see here also, Tobar and article, which means that the bar is rendered on every page. Now let's feel our Tobar component Wismar Cup that we need. So basically we go in our top bar and he ever want to return? No dif but some mark up cause the full We will have enough with class Name enough bar and number light And don't forget that in react were using class names, attributes and not classes. So we're closed now Now inside enough We will have dif with last name container And inside this dif we will have a link risk last name medium and this will be exactly our longer. So basically here, normally we will write something like art Ref and here will be slashed to go to the home page but were indirect world and we need to use not a craft, but basically something from the route in react router We have special component which is named Link. And with the help of feed, we can use push states to go from one page to another. So basically here is component link and into want to go to slash So basically home page and then we have class name now Bar brand here and we want to close Lian tank. So inside our link we will just right medium. Let's save this for now. And as you can see pretty Although differ mounted everything for us This was this part on the left with concrete logo. So for now we want to implement part on the right with home page link and then saying in and saying up So basically here after link, we want to create ul tag and with you l we want class name now. No bar enough and then pool excess. Right. So this means that this number will be on the right part. After this, we want to pick inside Lee and inside Lee will random more links. And for now, we can just cope previously. So we will have three of them because first should go to the home page and next to the signing and sign off. And here is inside Lee. We have novel ing and then I will say why we're using here not linked but novel ing in a second. So basically we have component novel ing also from wrecked rotor, and we're right in the same stuff as previously. So here is to slash and then class name will be not Link and Vision Close Novel Inc tag here. So inside novel ing we want to write home. Let's save this And now we want to have another link in two are the least So here is first novel ing and here with the second and the first mumbling will go to the Routh's slash Liggan and we will have the same class name as in home and he ever want to change text to sign in. And the next novel in will go to register page and the text here will be signed up. Let's make it both lower case here and here and our links already. And we created all markup. And now we need to import everything that we need from Reactor Alter. So basically here I'll write novel ing and we also need link from wrecked route home. Now let's check if it's working. So basically, when we're allowed the page, you can see that our markup is there. But we don't have any styles. And this is of course, logical because we did not inverted any styles inside our project. Likely this conduit example is already created with some basic see assess and beckoned for us. So we don't need the right see assess on our own and we can simply imported so here in our route in public folder with have index, its name l. And this is exactly indexes. Stay email where were then during our projects. And we simply need to add new link inside here with rail style sheets and here will be craft. And here will be all of the prepared CIA says. And we just need to write demo dot production ready dot I you won't slash main CSS and this is enough. We just need to close link And when we're allowed the page, everything is working. We can see all styles and for example, here we get really colors. But our menu here is broken and basically it happens because inlay we forgot to add class name and for now it should be Lee with class name enough item and we should do the same thing for other leas. So basically here should be enough item. And here also, as you can see, everything is working as expected and our Manu is looking the same. Now the only question is what's the difference between link and novel ing and the dignity here? Our home looks not like other tops. And this is happening because off Nav Ling, the main difference between link and novel ing is that with novel ing, you get a proper where wrecked router for us compares what is current cling now And if it is active, then here were getting special class active and we don't need to do anything about it. So basically, ive this novel ing won't exist inside direct route. We need to build our own custom component around link and compare current here l toe the link. Your l and this is of course, additional work for us. And that's why no link is there. So basically, for our medium link for the brand, we don't care if it's highlighted or not because we're on the home page and we don't get any highlight because we don't need here active class where we need active class, for example, here on the links, Then here we should use nuff link and there is one more important point. So basically, when we go here on articles and slash, as you can see here that the page with article and home is highlighted. And this is of course not correct because basically, home should be only highlighted when we jumped toe our global feed. And this happens because in novel ing here we have slash and this is exactly the same problem like and droughts. We should put here additional attributes exact, which will say that wrecked router should compare this to link with full path. So basically, here we're on home page and home is highlighted with jam back into articles and slash slog . And here nothing is highlighted because we're not on the home page. As you can see, everything is working and looking nice, and our basic top bar is already ready. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 8. Rendering login page: in thesis video we will prepare are looking page to start attaching hooks to it, as you can see in the example, but have login page and register page and they look almost the same. The only difference is that we have additional field user name in sign up process, but we don't have it in again. That's why I proposed to create authentication page, which can be used in these both routes, and we can simply distinguish them late inside. So let's create an additional page authentication inside our pages folded. So I'm going in pages and I'm creating folder authentication with Index Jess file inside and let's create a plane component like we did previously. So basically, we need to import react from react. Then we want toe expert default and the name he's else indication. And now we need to create this function. So here is self indication, which is a function, and we want to return inside Simple Deve with text authentication. Now we did our component, and we want to render it in our route. Seoul is jumping on droughts, and here we have known toe rounds and we want to add one more out and path will be lugging , so slash looking and component will be off indication now, As you can see, my component is also the imported. This is important authentication from page authentication. As you can see, we don't get any errors, which means everything is transpired successfully. And now we can jump in signing page. And here is your El Le Guin. You can see it in our link. And here our component out indication is rendered, which means everything is working fine. And now we just need to feel this component with correct markup. So now let's jump in our component back and that some additional markup. So here we want to return Deve with class name off page. And inside this Deve, we will have another defeat with our markup for the container. So it will be container and page classes. And inside our container, we want tohave dif with class name, role and in here inside role. We want tohave dif with class name. Call M D six and offset in d three and call excess 12. So, basically this gold means that when we have small screen, then this container will have the whole weights and when the screen will be a little bit bigger. Then we will get on the half off the screen. So Onley six Collins and we will position them in the center. That's why we have here, Offset. You will see it in a second. So here is our def class name with cold and inside. We have a Chuan and here will be text first of folk last name with text Excess Santa. And here will be text looking because it's a looking page and inside after each one, we want to have Pete tag with class name and here will detect excess center and inside. We want to have a link to our register page. Basically, here we can use link from wrecked router like with it previously. And here we have slash register. We don't need any classes here and we want to close link inside. We want to write, need an account. So basically here will be a link to our register page and user can click there and jump directly to create an account. And now we don't need to forget to import link from direct route a dome like we did previously. Now, after p will go our form with log in and password. So inside our form we want to use a tag, Field said. And inside, Field said, We want to create feel sad for each input. So basically here will be one more Phil said we can copied, but now it will be with class. So here will be class name for a group and inside first feel set will go our input. So basically here input with type email because we will enter email here for our authentication. And we also need class, name, form, control and form control LG. So basically it should be big and we also need at least holder with email word. Now we can close an input and prettier formatted it for us. And now we can copy this, Field said, because it will look exactly the same here we have next, Field said with Form Group, and here will be type not email but password and we also have class named control and form control. LG and placeholder will be, of course, not email, but password. So now we created two inputs and after this two inputs, we need to put a button so basically here will be our button with seinen. So inside we converted signing text and here we will have class name, button bottom, LG bottom primary and pull excess. Right. So basically this bottom should be on the right And we also need to put here type said meat because it will be button inside the form. So basically now our markup is completely ready and when we reload the page we can see that everything is rendered But we get an arrow in error. It said that class name does not exist and we need to write class name with Camel case which means here somewhere I didn't write it correctly, So here it started. And then without a complete it was not done correctly. So here, everywhere we have class name not with lower case, but with Camel case. So let's fix it now and number would load the page. You can see that almost all errors are gone. But now there is somewhere one more class name with lower case and here it is. Now I fix it it. And when word a lot The page We don't see any errors and our market is completely correct. Like in the example here. So basically the only problem is the text we wrote Liggan. But we wanted to write signing. So let's change this for now. Sign in. Basically, it looks exactly like a truth. So here we have seen in and then we have email and password and here is a sign in button. Now, as you can see, everything is correctly rendered and we can start using real hooks here. Did you have any comments or questions? Feel free to ask them in comments, and I will answer them for sure. 9. Use state hook: in this video, we will continue to develop our logon page and it's time to manage our state inside component. So basically, what we need is to set input values on each change in our inputs and get them when we need toe and when we want to sign in using. As you remember previously, all functions in wrecked are stateless, which means our first indication component is status. But now it's possible to store state inside with the help of hooks. And one of the ways to manage state with hooks is a hook you state. This hook was created for the same purpose like classes with this state inside like we used previously. So previously were old something like class authentication extends. And here is component from react and inside with all something like instructor and inside of constructor something like this state, which was an object. And we can right here something like search value is empty stream, and sometime later we're using thesis set state and inside were called an object with search value. And here is our you value, for example, food. So this is the way Howard wrote things previously. Now we don't need classes and we can do the same with our stateless functions. So let's try this out. And first off, all I want to add here somewhere on the beginning, just for test purposes a button. And inside this bottom, we will write counter, and this button will have on click event with here candle counter. And let's create here this handle counter. This is just test function to understand how you state is working. So basically here are handle counter and we can Consul Long Kendall counter to check if it's working Now we're allowed the page we can see here counter on the left part of the page and when we click a need function is called So now let's import you state from react So basically we need the structuring and here is you state Now to register this you state let's make some space And right here count coma sits count and this equals to you state with zero This is basically how we create you state hook inside our component. So here we called you state and this you state created state variable and zero as a perimeter Inside you State is an initial value off this state. And as you can see on the left, we have here a raid structuring. So that means, as a result, from your state way, get an array with two arguments and the first argument discount and the second argument is a function, said Count. Basically, we can name them as we want. For example, here we can drive fool, and here is set full. And this won't change anything because this is just first argument and second argument, and we can name them how we want. Now the question is, what is count and count is the current value off this state in this particular render. So basically here. Blitz ran console, log and count. And here, let's Consul, long count, and let's check this in browser. As you can see in council here, I have count one time and it equals zero, because zero here is our first initial state and we never change discount. Now let's try to increase our counter, you know, handle counter function. So here we simply need to increase our count. So count we have and we can simply right count plus one. And that's it. So basically, set count is a setter for our state. So this is basically the same like previously inside classes we used said State. So now let's reload the page. You can see that count is zero. And now when we click again, here is handle counter and count is always driven. So basically that means that her component was rendered. And to be sure about this, let's right here our variable count inside our markup and when would allow the page you can see that it is zero. Then we click. And with each click, this counter is increasing as you understand from our cold. Now hooks help us to store state between drug renderings and each surrender off the component we get our change state. So basically here were allowed the page and the Rizwan first Renda and here is counted zero . And here is also count is zero. Then we click once and this is the second render off our component and then second gender count is one. And here in console we can see that count was increased to one and just remind you our renderings happen in component on Lee went state or our props are changed. So basically when something like you state is used and we're doing something like that. Count all we have props in our component, for example, here we're getting food. And then this fool was changed from outside, for example. And this is one of the core points and hooks and the most popular questions in interview about hooks for now. So the question is, how does this property that we get in hooks? This count is then later in our rendering gets updated every time, and people normally who don't know hooks really well say something like, Yeah, maybe here is to wait it binding or we have some watchers and this is off course not correct. Hooks are working as a snatch with way. So that means that each surrender, we get completely new function. Our authentication function has been called again and again with change its state and change it props. And that's all. So basically, you can imagine this, like react just calls our oath indication component. And every time the arguments in this function is different. So basically, on the first trend, the count was zero. And that's why erect knows. Okay, we have stayed with zero, and we're just giving inside the self indication I was state in count, like zero and the 2nd 1 It was one and so on. So basically, our state is changing in a snapshot way, which means every time with every year end, we don't mutate our state, we get completely new state was completely new colon function off course. Our state can be in component not only number or string, but also, for example, object or Ray. It's not like in classes where we always had an object with properties inside here, we can put whatever we want. It can be number string off, for example, object or array. So let's try this out. Here we have an object and then we can name it, not count, but user and said User, we don't need Consul lock here. And for example, when we're making handle counter, we want here to run set user and inside, giving you object with name bar and for example, at the beginning we have named Empty Stream. Now with trended here. So we have a user property and here name. So basically, user is always there because it is coming from state. At the beginning, this state is object with name property, which is empty, So empty strain and we have set user so we can change it. And here we're calling set user and we're set in name tow bar. And here we simply render it like some local variable. So now when we're allowed the page, we don't see anything because our string is empty. But when we click on counter, our name is said to bar and we can see it. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 10. Using state hook for login page: in previous video, we checked how to use you state hook to store state in our functional components between renderings. Now it's time to continue developing our looking page. And here we want to store our log in and password that we have here into inputs in our state to use them later for submitting festival, we need to remove counter that we created in previous video because we don't need it anymore, and I removed here. I leave you state because we need it in a second. So we need to create state for login and password, and I recommend to create new state for each new property because we could put them all in one object. But it's more difficult to manage and Rebecca solutions when you need to do it with the big object. So let's create you state for email first. So here we can simply change our you state and it will be here, not an object. But value and initial state will be empty strain. And here are really is email. And here said email, That's it. We created our state for email. Now we need to update our input with type email. We have here all of the class and placeholder, and what we need to add is value and are well, you will be email from our state that we all really create. And you also need on change event where we get event as a perimeter. And here we want to call set email. This is function to set our state, and inside we will give event tarted value. So basically, what happened every time when we type something in the input on change event will be triggered in old change event. We have a callback function, and here we get our event. And from this event, we can read Event Arjun Value, where we have the value that were typed in our input. And then this string were given insights that email to update our email here and when our email is updated, then it will be remanded in our component. So let's check if it's still working with a lot of the page with type something and we don't get any errors for now. Let's right here our email to see that it's working. So basically, we're Lord the page with start type in something, and as you can see our state is updated and our component is rendered with every new letter . The main point is that the state is completely synchronised through hooks with react lifecycle, which means that we want to apply, for example, validation or show some messages during typing. We can do it quite easily. And for now, let's remove this email because we know that everything is working and do the same logic for the passport. So here we can just copy our you state and for password will only need initial state as empty strange. Let's name it password. And here the function will be called said Password. Now we want to do the same, like we did with our input for email. But to do it with password, I'm just call people what we already have. And there is a value and the value for password is password and then change. We're calling set password and event target value basically the same input, and we don't need to do anything else. Now we want to add on submit function to submit here our form and there we need to read our values from password and email. So basically, here in our form. We create new attribute on, said Meat and we will have function, handle, submit and let's create now this function here. So here is handle, submit function and inside it we get our event and this is the event off some meeting and here we want to call event, prevent default, prevent default to avoid default logic that will be on form. Submit. So basically in the browser, when you heat on the button inside form with types of meat, this form will be automatically submitted, which means your page will be reloaded and it will try to make a post request to our beckoned off course. We have single page application. We don't need such logic. That's why we're writing in. All are forms on submit event, prevent default. This will prevent these default behavior. And here, let's check our values. So we have here email and password. Now let's check in browser if it's working. So basically here is our form. We click submit and here we get that values are empty. Now when we type something like really menu and password. 123 as you can see where getting here values and here is value Q Q Q and Gmail com. This is our state for email, and this is our state for password. As you can see, we can read our state at any moment when we needed, and here we read our emails in passport and later we can use them to post request to our beckoned tool again, a user. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 11. Use ref: in this video. I want to show you a use ref hook record used this hook to get values from login and password, but it's more heck a solution. So basically use draft is a hook, which returns you a reference for immutable object. And let's check it on the example. So it's easier to understand. Let's create a reference for our input for email, and we could read value from it and not you stayed here. So basically, let's try. Let's create here, Const. Email. Ralf and thes equals to draft, and here the initial Valley is now. Now we want to set a reference for our input and probably you already did it when you worked with stateless component. Indirect previously. So here, let's remove value and on change and simply use here wrath email graph. So basically, this means that at the moment that were touched here wrath, this email ref will be updated and we will get access to them. Element input. So here, let's Consul on what we have to see how it's working. So here is email wrath and let's check in browser. We get a narrow use. Ref is not defined and of course it's true, because here we need to import use raff from wrecked. Now, when we reload the page, everything is working fine. And when we got to go to SEINEN Page and here we ended something in the email, nothing is changed and this is exactly the point. So we have here input and this is a plain HTML, and drag doesn't know anything about this input. Which means when we changed something inside, our component is not rendered because Rag doesn't know anything about this changes because they're changing something outside, off wrecked, and it's not anything about life cycle. So here you can see that our email raff has current property in sight, but it is now, and basically, current property is a property where we can access our reference. So basically, at the beginning, there was only one render off our component, and it is now, which is completely fine, because here we said that the default value should be now. Now what we can do here is Consul Long values, email and password. But first we can Consul log here emailed ref, And here is our email wrath. Let's remove Consul, Look here because we know on initialize It happens on Lawan time. Now we end something in email and password and we click. Say Nein! And as you can see here, our email draft is not now anymore. So here you can see current property and inside we get and don't element. So this is the reference for our input, which means, basically that this is mutable object and react stores reference for these dumb element So we can access this time element just like we're doing in plain JavaScript so we can ride simply here. Email Wrath, daughter current dot value To read the very from this input. Now let's reload the page. So here, right something now email and password and we click Sign in and, as you can see with red but the value off the input from our dom element as you can shape, we can access the input entreat value. Three. We get the same result like we did previously with state, but I recommend her avoid using the use ref when you can. Because basically, it's not good to manipulate with something outside off react because Rick doesn't know about it. And of course you need sometimes to my lip manipulate with dawn, for example, for focusing or for some things that you can access only through dumb element. But, for example, things like starting the values off the form are better to do with you state and not used ref and use. Ref is not only for storing references for the elements, but for any mutable values that you want. But of course, the most populations case used to store dumb references there. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 12. Use effect: in this video. I want to talk about use effect Hook. And the first question is, Why do we need it now? Basically, now we're at the point where we want to post our Ligon data to the server and Liggan user you they are valid. And to do this we need to do any type coal verbal, post our data and inject functional world Depay calls are always called side effects. And if you already have experience with Redox, for example, then you already know what side effects are. If you don't know, here it is side effects are all things which happen outside off react, for example, sitting at the local storage or don manipulation or, for example, a pay calls right into the logs, files or managing subscriptions or any other stuff that you can imagine that has nothing to do with React is a side effect. And in hooks world, there is a special hook toe work with side effect, and it is called Hughes Effect. Let's check how it works. So basically here somewhere, we can define use effect, and there is a call and inside would want to give anonymous function. And let's just try it. Consul log effect is triggered. That's it. Now we, of course, need to import use effect from react like we already did with you state. And now let's reload the page and check how it looks like. As you can see in browser would get consul look, Message even is triggered on initial rendering. And then when we will type something, you can see that this consulate message happen again and again each time when component is rendered. So basically use effect functions are called each time after each ra vendor off the component. It doesn't matter what caused the render like changing the state, or maybe new props inside effect will be triggered after rendering. Now let's check something more interesting that we can do in use Effect, for example, said in title of the page will be also side effect. So basically, here we can say document title equals and then, for example, our email. So basically we're type in email and each time when the vendor happens, we're updating title off the page. So basically lesser load the page, you can see that the title is local host slash log in, and now we're trying toe change the email and, as you can see, effect is triggered and our title off the page is changed. So with really nice we wrote like two lines of code. And now we're updating document titled each time when our component Easter ended. But what should we do if we don't want to do it each time? So basically, we're rendered in our components a lot. But for example, for now it's too often. For example, we don't born document title to be rear ended when we change passport. As you can see now we have Q W E. And now I'm type in the password And, like, we don't care about our password in our side effect just because we don't change anything. Actually, we want to run our effect on Lee. One email was changed. We don't care about rendering off the component at all, and it doesn't make any sense to set title again and again if, for example, password was changed because we don't use it inside. So now the question is, how can we cheer it for these? There is a second perimeter in use effect hook. So basically here as a second perimeter we can give in the ray off dependencies and inside dependencies who put our variables from our component like any variables that we want for example, state variables or local variables or props. We just put it here and they adjust the array off dependencies. Which means if the variable is inside, this array bubble triggered this effect on Lee when the value off this variable will change and not on each Rendah. So in our example with set in document title. As you can see, we're using Onley email inside so we can provide in our array and email as a dependency. So this means that our effect will be triggered Onley when our email will be changed. Let's check how it works now. So basically, when we reload the page, we see that our effect waas triggered, which is completely fine because the initial value off email was said to him to stream. Now let's try to change our password. And as you can see, we don't get any consul logs and which means our effect is not triggered. But now when we change our email, our effect is triggered. Now I stopped changing email and change password again and nothing is happening. And this, in fact is not called the tall and now one more important point. What will happen if we will provide no dependencies but an empty rate? Let's try the sold here is an empty array and let's check in browser how it works. So we see once effect is triggered. But after this, we don't see anything. Now, when we're type something, effect is three. Good is not there, which means we see it on live bonds when component is mounted. It looks exactly like the behavior off component did mount in Rex classes. But it's really a bad mental model to think like and compare direct classes with hooks, and we will discuss it deeper in the next lessons. For now, it's better to think in the way that we have a dependence is least, and this dependence, at least, will trigger effect on the change off the dependencies. And if we don't have any dependencies, it will be triggered Onley ones. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure 13. Making fetch inside effect: in this video, we will start with the most popular thing in creating an application. It's fetching data from a pie. I prefer to use excess library to provide easy to use functions to make a P. I calls. You can, of course, use fetch. But I don't like it because it doesn't return Jason directly to you. And basically we're working with Jason. It ties like 100% of the time. Fetch also doesn't handle all errors in cage. Basically, some errors goes in cage some in then and this is not convenient and fetch. Also a dozen stream defy body automatically when we're making post requests. That's why I prefer using excess for all projects and to use it. We first need to install it. So here we now project and to install accidents. We just simply right Yann, add excess and this package will be installed. Now let's check body pie. We should use to make a Lagan request and we can check it by it simply going in the example that we already checked here in the signing page, we just inspect the page and go into the network. Now the button is disabled, so we need to type something, and it would be there and some password. Now, when we click signing, you can see that password and Logan, I invalid. But here we can get a requested your l. This is what we need. And this is the public FBI that we will use in our application. So here is a post request, which is logical. And here in body, you can see that we're giving user with email and password, and we get some errors back, which is completely fine. So for now, we will use this year l to make a pie call fall again. And the first question is what will happen if we will ride excess called directly in effect . So let's try First, we need to import excess from excels. Now, in our use effect, we can write excess and we just call it. And the first argument is in your l And this is your EL that I corporate from this week, I and the second argument is our perimeters. So this is the object. And we have inside, for example, method and our method is posed because we're posting data for beckoned. Also, there was a body with user property and this user property was an object where we have any mail. For example, you q dot com and password will be 123 So of course, this is not valid credentials, but it is fine for now for testing. And I will drive this council long and the beginning. So let's check how it works. We're allowed the page and you can see that we're getting for Toto era. And this happens because on initialize, we're calling our a pinpoint. So here is Le Guin failed, of course, but we don't want this behavior because in some pages it is fine to fetch data on initialized. For example, when we're going toe our global feud here in the root, then off course, we want to fetch data on initialize. But in our looking page, this doesn't make any sense because we want to do it only when users that means the form. So how can we achieve this? Basically, we want to run our effect every time, So let's remove this array from here and then each surrender. We want to check if we're in submitting state, so we will need an additional variable which will say if we are submitting form now, so let's create it. Basically, we're doing the same like previously. Well, here is sub meeting property and here is set is sub meeting and for default value will have falls basically were not submitting anything at the beginning and then here in handle submit we want to call Set is submitting and put their truth which basically means Okay we started submitting the form now in use effect We want to call it every time but inside we can simply add an if condition and check here for it's submitting. If not, it's a meeting then we simply want to return so we don't need to do anything in our effect . Yes, we call effect every time. But we won't do our fetch inside. So basically that means that by default is submitting is false. It is only true when we call handles and meat and basically we check in effect every time. If we're in submitting or not. And if yes Then we posed our data toe the beckoned. So let's check If it's works here, we're allowed the page and we don't see any a pie calls now when we click sign in, we can see that our effect was triggered And here is our post request. Let's add now handling for success and heroin in our EP I call. So basically here is access call and we can ride, then call back. And here we're getting some result. We don't care, actually, what result? And we just tried Consul Long for results and what we want to do here is to set It's sad meeting back to false because basically, we're not in submitting state anymore. We're already get data and our eat I call is finished. Also, we want to add Cage. I will simply corporate then and Renee Minto catch. So basically, if some error happened, then we get a narrow here and we can consul log ero And here is era and we also want to set its submitting to falls because we want to show some errors. But we're not submitting anymore. Basically, now, when recovered our Easter median property, we can make it more useful and more user friendly if we will disable our button, what we're using for submit when we're submitting something. So basically we can simply right here disabled and here is submitting and this button will be disabled when we're in submitting process. And as you can see where a lot of the page I'm heating is signing and you could see that for several seconds. It waas disabled. Basically, it is good for two purposes. First, awful. It is clear for user that something is happening and it's not like Page stocked. And Second user can't click several times on this button because Button is disabled. And this means that we won't have a problem, that the first request is not finished and the 2nd 1 is already started. That's why it's said Meeting is really important tocar such cases. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 14. Use fetch hook: in this video. I want to talk about custom hooks. So basically we wrote some logic inside our effect, which is completely fine. But very often we want to share this logic between components. For example, we're using you state hook almost in every component in the same way we can create custom hooks to use them inside different components. So in the reverse lesson were made this fetch inside use effect. And it worked, of course. But what should we do in our next component, for example, as our next component, we implement this global feed and we need to fragile data there or, for example, popular tags on the right. We also need to fetch this popular text. So basically, we have lots of components where we want to work with our FBI in some way. And for this I recommend to create a custom hook which will cover our needs. So first, let's specify what we need to do in our custom component, so we know how to implement it accordingly. And I already rolled some points here, which seems important for me. So the first point is that we want to fetch data from different Urals So basically that means that we need provide and Ural as an argument for our hook. The second point is that sometimes we want to make fetch on initialize, for example, like in this global feed or in popular text and sometimes on form said meat, for example, like in our say mean or say not forms. The next point is that we want to get is Lardin ST toe know that were in process of getting data like we did here with its a meeting. So basically submitting helped us to show user that something is going on and we're doing something with our A pay, and the last point is very important. We want to get errors. If something is going wrong and a pie Cole can't be done successful, then we need to show to our user that will go some errors and what users can do to fix them . So basically, this is the core passion that they see. And of course, we can change or improve it later and make more complex if we need. So here is how I imagined the use of this hook inside the component. So basically, here is authentication and then we can comment our use effect completely because we don't need it anymore. After implement this who and with only need to corporate our your own. So now we have our use. Fetch who that we will implement later and we're implementing eat in the same way like standard hooks. Which means that as a first argument here would get in the destruction off the data and as the second argument do fetch. So this is function and here is our use Fetch who that we will implement later and inside were given the your l that we want to fetch. So what do we have inside data? Basically, data is an object with three properties is Lord in and it can be true or false which will show us if we're in the process off Lord in a pie call, then we will have response and response can be now or it can be some response from the beggin. For example, some object and also era and normally era will be now. But if something goes wrong, then we can go out some object with errors from our beckoned. So basically this is object. It's always there in the data. And that's why we can use here the structuring to get directly our properties and not data . So here will be is Lloyd in response and era and basically in the same way became used. This use fetch hook in our every component. So basically here will get three properties and this three properties we can use directly in our view toe show that something is being lauded over. Got some response and we should show this information. We're also God do fetch from Mama Custom Hook, and we can call this function on whatever we need. So basically, we can call it on initial life off the component on the ones or, for example, where well, we're making form submitting and inside the fage. So let's say that here we're making not sets of meeting. But we have here handles and meat, and we can call the fetch and inside were given the object if we need to. And here we have all prom's like we have in our excess. So basically, here in excess, we have object with prom's like Method body and so on. So basically we can copied and really use it like this So we're calling, do fetch and inside just writing all properties that our excess inside will need. So here we specify. Okay, we're making do fetch with method Post and somebody that we feel in our form. I think that the idea off what we're planning to do is quite clear and we can start implementing. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 15. Creating use fetch hook: in thes video, we will start implementing use. Fetch hook first, let's create a new folder, Hooks, Verbal, put all our custom hooks. So here I am in note modules near components and pages, and they want to great new directory hooks. And we will name our new hook use fetch. And there is a convention that we prefix all custom hooks with word use. So basically, like use, fetch or you state or use effect. So here I am, creating use. Fetch God, yes, and basically what is Hook? It's just a function, so there is no signature off it. It can be with arguments off without, and we can do inside whatever we want and return something. So as we discussed previously, our use fishhook has only single argument. And this is your EL that we wanted to fetch. So basically, here we can write expert default, and this is the Ural as a perimeter, and we just give back and empty function. Now we want to store response error and is lording inside our hook to be able to change the state easily and then provide of this values outside. So basically, first we need to import you stayed from wrecked. Now inside, we need to create several states. So it will be first is Lord in like previously was isn't meeting and here is said is Lord in and here we call you state with false value by default. So basically, we want to set it to true when we start fashion and set it back to false where when we're finished. So after these, we can copy these and here we will have not is loading but response. And here the function will be set response and whether the fold valuable have now and the 3rd 1 also will be now because here we have air. Oh, and by the fault we don't have any errors and here is said Arrow. So this is our state that we need to change inside. We're also said that we need do fetch function to use it whenever we want. Like for example, on initialize or on form, said meat. So basically, let's create function do fetch and for now it will be just empty. And now we need to return everything that we created. So basically, as we discussed previously Videoton here an array with two arguments The first argument is an object, and the second is do fetch function and basically in an object we have three properties. Is Lord in response and ever Actually, there is no specified imitation what we need to return from hook. But I recommend to stick to the one approach everywhere to improve understanding off your custom hooks. I prefer to pack all states in the first argument, basically like we did here. And in the second argument we have a function. So basically, this is a function which will update something in our hook. This is the same way like it is done in react where we get as a return the array, and have two arguments like here in your state. So our custom hook was our technologic inside is already created and we can just use it. So basically it's open. Here are pages both indication and index and import it here. So basically it's import use. Fetch Rome kooks slash and then use Fetch. Now I will close this top to make it more clear. Here we can ride const here we will have the structuring and here is use fetch and inside our fetch will provide a Ural. So basically, I will just copy this euro that we have already and booted inside our use fetch. And as a result, we get here first. An object with is lording, then herro and response. And the second perimeter is Do fetch function. Now let's consul look everything toe understand how we're doing. So here is use fetch and we want to. Consul log is Lord in error and response. Now let's check if it's working And here I get an error attempt. Import era use fetch is not exported from hooks. Use fetch. So basically here I used import with the structuring and we don't need to do this because we have expert default there. So we simply right import use fetch. So now when we're allowed the page, we see some warnings and we will talk about them later. But basically, here at the beginning, we have used fetch false now now. So basically our component was rendered to bonds. That's why our hook was also applied ones. And inside we get through three values so false. This is our Islam and in which is logical. But don't laud anything and we don't have error and response yet. So basically everything is working filed and our cook is completely blinded. The next step is to remove here. Is that meeting because we won't need it anymore. And we will get is Lord in from our hook. So here we have said, is submitting this bacon delayed. And instead we can call here. Do fetch because basically in here we want to call, do fetch and say Ok, please make hear the call to a P. I and I will give something inside. And here we will give firearms for our access Call We don't speak yet about use veg. We will copy it later. But here in the bottom of already can update our disabled state. Here toe is Lord. Now we need to quote our use effect completely toe our hook. So basically I just called Pete, handle it from here. Then we go back to our hook and here before a turn, I can simply put it inside. So here the same use fetch like we had previously in our component. But now we're moved it completely toe are hooked. We only need here to import Also use effect and not on Lee you state now We don't need this options that we're providing in anxious because we want to give it from outside. So basically here we want to delete them and then go back to our authentication and inside our to fetch object, we can throw them inside. So here is our object, and it looks like this. So basically, this is the parameters that access will need, like Method Body and so on. So basically, each time when we call this a pie, we want to specify some Peron's or maybe known, because when we need, for example, global feud, then we want just to call the fetch without any problems. Now let's update our use. The fact that recorded inside use fetch. So basically, here we have in then said he said meeting. But we don't have submitted anymore. We're here, said is Lord in here and in the second case the same because basically, we want to set This is Lord into false. When the request is finished, it doesn't matter if it was successful or not, we should set it to false the next step. We need to adjust set, arrow and said response. So basically, if we're open Here is their example Page and jump to say mean and then inspect this page with network tub opened and I write something in email and password. When we get a narrow its photo, you can see here what we get. So here is in preview tub we get at dot errors property. So basically here when we're in, catch the visit an arrow and we want to make set era with something inside. In our case, we want to put their this validation arrows So basically errors that we get from beckoned. So it will be arrow dot response and this will get access to response and then it will do data and inside data. We will have everything that we need in the same way we need to update our response. So here is set response function and inside rest don't data. We will get our data. Basically, if I will looking here with credentials that exist and we will create account in later videos. And here I click again. So there is successful again here and in preview, you can see my user and basically object off response will be inside data. So basically that's why we're using here as data. We can also remove consul logs because we don't need them anymore. And one more important question is this year Els. So basically it doesn't make any sense to provide each time for your l because we know that for this project we're using the same A pie everywhere. And basically it's enough to provide just this part like here from slash users. Log in and then we will just adjust base path everywhere. So basically, we can Corp eat from here in access and just create const inside our custom hook and name it based your l and let's just based it here. So I have this conduct production. Really, I your slash ap I And this is our base year l and then inside our hook. When we call it, we're getting your l. So basically we can conclude innate it inside here in access so it will be pays your l plus your own. And now let's check. You were given the right cold inside, so in here, as you can see in use, fetch very given for now the full year l we don't need to do it any more and we can simply give inside it. Users looking and this is quite readable. The last point that I want to touch is this is submitting if inside effect, and we used it previously. Tow. Avoid running effect too often when we don't need to fetch anywhere. And basically we can build an elegant parent here if we will just adjust is lord and property at the beginning to trigger effect. So, for example, here, in our effect we can provide an array off dependencies and say that this effect should be triggered on Lee when his Lord and property is changing. But for now, it's not changing outside off the effect, and it's only changing one time at the beginning and we're setting is Lord into false. So basically it would be nice here to check if it's if it's Lord, it is not false because we don't want to run this effect. If is Lord, it is not true. Now the best place to set is Lord and is inside the fetch. So basically here, when we called to fetch from outside, will know that programmer want to trigger fashion off excess. So basically this means that we will set here is lording toe through And this setting off the state will trigger our effect because here is Lord and will be changed toe through this If conditions won't pass because it's lording is falls and then were given here excess and base your role and your l and we're making our fetch. The only problem now is with options. So basically inside the fetch, we're getting options and basically they are not always there. That's why the default value we will set here to an object. And somehow we need to give this options from def edge inside axles. So basically, we want to access them here because sometimes for access, we want to say that our method is posed and we have some body and so on, or maybe headers late. So inside the fish, the easiest way to said these options, which I available on the locally here is through state. So basically, we're gonna copy you state once again. And here we create an empty object and this will be our options state. And here is said options. So basically, inside our option state, we will set our options for current request and then here. We can just make said Options called and boot options inside. So basically we're starting them in ST here and then access in this state down here because the state is available in whole function. Now let's check if we have any errors. So basically the first terror is that access is not defined. So when it to important here, Oxus from Axios. Now let's check. We have under warnings. We will talk about warnings later, and now I reload the page off our project and not the example ones. And we don't have any fetches by default. And here we see our Youcef edge. I will clean the consul for now. And now let's click Seinen button. And as you can see here, we get values. Then use fetch. True. Now now. And this means that we started fetching because true means that is Lord and is true. And we didn't get any responses. And now here we get posed with our your l slash ap ice less u l e kai twice. That's why this is for all four. So basically somewhere where forgetting toe clean our slash type. So inside our authentication page, we don't need to give inside a tie because it always there and we don't need to, could be based it. So now when we click, forget a post and this photo to which is what we wanted because in the network we can see that our looking was with error because we didn't provide needed data. So, as you can see here, use fetch, get through at the beginning is lording It started then we have true and errors This means that were there at the finish and we said Our errors and as you can see here, it's errors with email. Password is not valid. So this is information that we can show later to user and the next rendering Wilbur was use fetch falls. This is when we said is loading back to false and our errors are still there so we can render them one more problem that they see is that inside network in our Lagan request would don't have anybody. And I think I know what's the problem when we call this to fetch. It should be method and data and not body. So let's check if it helps. Now we're the Lord the page. I will clean network and console. And on signing here, we can see log in. And now we have request, my lord, which is correct user that were already posted. As you can see, we successfully implemented, use, fetch who can this lesson and everything is working. If you have any comments or questions, feel free to ask them and comments, and I will answer them for sure. 16. Register page: We already made some progress and lugging page violent building custom hook. But to test it properly, we need to be able to register user. That's why in this video we will implement Register Page. Likely as you can see in our example, Register page is really similar to looking pitch. That's why I proposed to use the same authentication component to build register page. First of all, we need to go to our file with routes and creating your out so basically weaken simply corporate. Our authentication drought fall again and right here register and our component will state authentication because we want to reuse it now. First of all, what we need to do in our syndication component is somehow to distinguish between login and register page, and there's were using direct route. It's really simple to do this every component which is route component. So here all components that you can see our route components because we're rendering them directly in route. And this means that we get here through wrecked route, additional grout information inside props, and we can read this information about current route and this is exactly what we need here . So I recommend you here to write props and Consul Long. What do we haven't? Props. So let's check the browser. When we jumped to signing under Lord the page, you can see here props and inside props. There are fumes like location and match. This is two most popular used feels and in our case, Mitch property has part inside and your l and for example, we can use path here to distinguish what your l is this. So, for example, we can create here. New bearable is log in, which equals probes maj both and it should be equals two slash lugging. So basically we now that when we render these authentication component on register out, the end path will be register and we get is large and false. Now let's check what is really different in these two pages. So, as you can see in the example, we have different page title different text here in the description and different link. So basically, when we are on sign up page, then heaven account will redirect us in logging page and in Logan Page, this link word will redirect us in sign up. So basically it's vice a versa, and also the dext in button here is saying up and here is singing And of course, we get one additional field for user name. Let's create parables for all this stuff. So first of all, we need page title and here we're checking. OK, if we're on looking page, then text should be a sign in. If not then texts should be signed up. The next point is description link. I know that if we are on log in page, then link should be slash register because we're going to make link for register page and in other cases slash lugging and the same one for description text. Also check Isla gin and if we are on log in page, then text will being need an account and if not, then have an account. Now we simply need to use this properties in our markup. So basically here, when we have signing inside our H one, we can deleted and right here page title variable. Also here we have linked to register and we can change it toe to and here will be description link and the text inside tag will be a description text that said now we just need in our button to change, saying in text to page title, because it the same like our page title. Now we're good to go. Let's let's reload the page and check if it's working. So we have Parson Era unexpected talking. I forget here he's logging toe add question mark. So now, as you can see, everything is working. And when we're on singing page here, we have needed account, and when we click here, we're on ST Ne Page. Here is correct. Page title Correct description. And here is correct, Tex. Everything is working, and the next step is to distinguish the FBI your l you would jump here in our example and open network. Then here it is. Sign up you around and, for example, we feel email and password, and when we click sign up, you can see that you're all here is slash AP I slash users and we hold it in you that a pie for a Guinness slash user slash lugging. It's a basic level. Want here to create new property eight Euro and it will be also different based on Islam and property and hear the Ural will be user slash Le Guin if we're on log in or slash users if we're on register page because here you can see slash a priceless users and this is our base, your mail. So basically here we're only need slash users in register process. We also need to provide the user name. So let's create Mu ST like we did for password and email and create new state for user name . So basically here we can simply copy our state. And here we have user name and said user name. Now we need to add in our mark up here the first field we can copy. Just feel sad and put it on the top. But it's not all that we need. We need to show this Field said only when we're on register page. So we need to rob this field set in the condition not is Logan and feel said, and we close here are break it and save and prettier for month is for us. So basically this part we will render on live in. We're not on looking page, as you can see in browser. We don't have any errors, and our sign up page is ready when we jump to say Nein, we see only two feels, and then sign up who have email and email because I forget off day this input. So basically here type will be text placeholder will be user name and value will be user name that we created previously from our state. And here we will do set, user name, even target value. So now when we reload the page, we can see here users name, email and password So our register page is ready and the only thing that is missing is that we need to provide different data for our FBI call. So basically here, first of all, I use veg. We need to use this a pair your well that we prepared. So let's change it toe Ural. And then here in Kendall said meat. Now we have different data for registration and fall again in. So let's create new property. For example, user and check with turn every operator if we're on log in, then we need on the email and password. And if we're not on long and then we need email, password and user name, then this user data begin. Simply assign toe our user inside method So here is the fish was Method Post, and inside our data we put the user that we prepared. So let's let alone the page and call sign in, say now Sorry, then in network began this response that off course we didn't provide correct data, but here we have slash e p I slash users, and this is correctly tie for registered new user. And here is posed method, and at the bottom you can see our request. It's a user with email, password and user name, and we can try to provide correct data. For example, we create name email that does not exist and some password. And now when we click sign up, we get 200 which means that we successfully registered the user. You can see here our email, password and user name, and we get back to our user. That was registered, and we will use this information in our next video. Well, we will implement successful redirect after our EP I call if you have any problems or questions, feel free to ask them in comments, and I will answer them for sure. 17. Saving user token: in previous video already prepared register form for us. And now we need to handle response from a P I and say user talking. So if we provide correct data in our register form, you can see in the response that we get registered user account and one of the fields is talking. So let's create new user and open network profile now where clicking said meat. And we're getting for 22 because email is already taken, let's try again. And now password is too short and try again. And for now, user is registered and you can see here that we're getting user object. And inside we have such field, which is called talkin, and this is the most important field for us. So several wars about talking North indication. If you don't know what is it about? Basically, talking authentication is a way to implemented its indication for user, and normally we're using talking authentication for single page applications. So, for example, in our project, when will log in or register survey gives us baggage and rate Talkin this talk in you can see here in the talk in property, and for us it's just a string we need to say with somewhere on front end, for example, in cookie or in local storage. And for server, it is a proof that we are who we're So basically that means that we're given this talking every time when we request your data from server and server checks. Okay, I get this talking what user it is. And is it valid user or not? And if not, then server will say us. I can't give you the necessary data because you don't have required permissions. And if everything is OK, then we will get our data back. That's why first we need to save this talking somewhere. And second, we need to add this talkin toe all our requests. Let's start with saving. Talking to local storage and saving to local storage is a side effect. That's why we should do it in effect. So basically, here we have our handle said meat and underneath we can try to use effect. And basically we want to call this use effect on Lee when our response changes. So basically, here we say that our dependency is response because we don't need to call it on every Renda and we're only interested toe have thes effect when response is not now. So basically here we can write, if not response, then return. Which means this use effect won't do anything until response is there, which is completely fine. Five. So let's check if it's working like expected. So here is Consul locked for our response now with a lot of the page and go to sign up and type something in the user and email and passport. And now check the console. As you can see here, we get response property, and here is our user with talking that we need. So basically, this is exactly the response that we were expected. Now we can simply safe talking to local storage by right in here after Consul. Aunque local storage, said Item. And here is key talking, and value is response user dot talking. Now we want to redirect user to the home page after we said he's talking and normally people that using something like history push for example, history push. And here is slash, and this is a stable fire of gold toe goto the home page, for example, with S P A with single page application, but It's not the best approach and we can do better. And indirect router. There is such component, which is called redirect. And as you can understand from the name, it will do redirect of the route that we will give inside. So basically, let's try and first awful, why this approach is better than, for example, history pulls because you will see in a second that this is more declarative and like we don't say, Please redirect us now toe the home page. We're saying something like When the status will change to successful submit, we want to make redirect. So now the question is when we want to render redirect component. I prefer to create new state here and we can name the state he's successful, said Made. And here is set is successful sub meat and this is simply you state and false by default. So basically it's a bull in state and we're setting is successful submit after we're successful ascent, local storage. So basically, in here we have local stories set item, and after these we can call said is successful, said mute room. So basically now our state is true, and here underneath we can just render component that we want. So basically here, if it's successful, submit is there. We don't want to return our markup off component, but we want to seem live in town. Direct and redirect is a component where the reason property to slash And basically we need to import this redirect here from reactor out Saddam. So basically, as you can see, it's quite the clarity here. We have simply some if condition, and we render some other component like we will do normally with some other component here but instead inside, of course, redirect. Just make history push. But of course, it's really convenient to have the clarity of code instead off imperative. Let's check if everything is working for us. So for now, let's remove local storage keys. If you have here in local storage in application tab now, we just rely on the page and feel the user name, the email and passport. So now we can clean. Everything will click sign up. As you can see here, response was there. Now in application, you can see that in local storage. We saved the talking property with the key that we needed to say from the user. And now we're on the home page because after God response, we said our you stay to the truth and then our component was rendered. And here we see okay is successful, submitted, strewn. And then we just rendered through direct component and not our authentication page. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 18. Local storage custom hook: in previous video, we set user talking toe local storage directly in effect. It's not bad, but just imagine that we need to do this each time when we need to use local storage. It would be nice to have some abstraction for using local storage to get data directly from there and said them more easy. Basically, we can create local storage hook for these. And here is my idea how we could use it. So basically would be nice. If here, after use, fetch, we could write something like this. So we have here talking and said talking. And we get this the structuring from Hughes local storage and here we're sitting, talking and for example, food. So basically, what does it do? This is our custom hook that we will create first perimeter. Here is the key off this local storage full is initial data and probably for talking about don't needed so we can remove it. But basically, when we need to set the fall data, we can do it. Also, bag would get here in the ray with two elements talking and set talking. And the first element is the data that we're getting from local storage. So basically we can use this hook exactly in the same way. Like we're using default, you state, which is really comfortable because this talkin we can render directly in our component when we want to change this talking Weaken simply calls it talking function, and it will synchronize the value off the new talking with talking in our local storage. So basically it looks quite elegant for me and let's implement it now. So first of all, I will come and this slide. For now, we need to goto our Hooks folder and create New Hook and that's let's name it. Use local storage, the jazz Every hook is just a function. So here is expert default and our function. What do you want to do inside? We get here toe arguments and the first argument is key and this is the key off our local storage and the second perimeter is initial value, which can be strained by default, and we should not provide it if we don't need to. So basically we're getting here to arguments and inside we want to create a state for our hook, so basically it will be value and said value and this is valuable store the state which will be synchronized with our local storage. So for now, we're just writing. You stayed here and there is one more thing about you state that I want to say. So normally we simply write something like false here, which basically is a value directly as the first argument. But we can also ride a function here as the first argument, and then it is called lazy initial state. And normally we will use functions inside when we have some expensive calculations for our initial state. And in our case, it's a good idea to set the fold state from local storage with the function here. So basically, you state it's a function inside. And here we want to return local storage dot get id him and the key will be our key from arguments. And if this is undefined, then we want to have the fold value and default value will be out in the cell value. So basically, now we create new state, and by default it will be our local storage item or empty string. If we didn't put anything inside and the next step is to give outside our value and say it value. So basically we're returning in array and here is value and said Value this two things come directly from our state. Now people can just use our local storage. Who with the state that we created the reason only one problem now is that when we calls it value from outside very changing state inside our hook. But we don't change local storage. That's why I wish that in effect here to track when the value is changed. Basically, we can simply right run effect and here is inside function and we want to call this effect when value is changes. Then inside here we can simply set local storage, said item. And here is key and you value. We also should not forget to import from react used to fact And you stayed so once again about this effect. This is really important way off thinking in hooks don't call here local storage said directly when we just call set value like, for example, would be imperative Quebec cold. We rode here cold in more the clarity way Our effect is called Only one value is changed, which means that outside in some component where Colin said value which changes our state inside the hook. And then we run this effect automatically because our well, iwas changed and we simply update local storage inside. Now let's import our hook and check if everything is working. So here is a limitation that were already planned. And now here we need toe import hook, slash used local storage and the name is use local storage. Now here is the usage use local storage and we have a talking here, which is our talk in that we want to write toe their local storage and basically here we don't need talking. We will only use set talking. But for the sake of testing to know that we implemented everything correctly Little concert lock talking here now in here inside use effect. We don't need local story shit ite many more, but simply said talking and we're giving here response user thought talking. Let's remove local storage and check if everything is working. So I rely on the page and here were put in some user name. Then here is email and basically, as you can see it, talking is all over to them. This happens because in my application I already registered user and we already set talking in previous video. Basically, it should not happen because when talking is not there, we will allow user to go to say not Page. And if talking is not there than not so basically for now, I simply delete the talking and reload the page. As you can see here is talking empty street. Now we start tightened and talking does not change itself. It's still the empty stream and number. Put the passport and click sign up and here is not valid email. Now we click sign up and as you can see here we get some more errors and user name is too long. Okay, something like this should work now we click, say not And as you can see, we got a response here. This is our user and after these we did said talking. So this is our talking now it was said. That's why we see it after rendering in council log and now application over talking is there in local storage, which means that it was said with our custom hook. And as you can see here, we're working with our custom hook in exactly the same way like we're working with you state, which is really efficient, and we should stick to this approach, and this is one of huge benefits. With Hook, you can move terrible logic in hook and in several lines off cold. Like here, for example, we can make our coats implode to use from outside. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 19. Exhaustive deps: as you can see now in our browser. Consul, we have quite a lot of warnings in this video. I want to fix them all and talk about rule for wrecked hooks that help us to write better cold and find mistakes. Easier as you can see, we get plain direct hooks, X course of depths errors. And this is the most on clear warning for people who start with hooks. It takes quite some time to understand how to fixed properly this errors without hex. So in Internet, the relative recommendations, for example, to disable Theis rules in years leaned to get rid of them. And of course, you should not do this because this rule is your best friend to know that you did something wrong. So what is it about? Basically, every time when we use some variable since side effect, we must add them to dependence is array, and it's not should A May, but it's must. This tells react what properties were using inside an effect, and if you don't do it and we use them inside and lie to react or meeting them independency array, then you will get hard to fix box with stale wearables and problems that you're component is not updating. So this is the most important rule to remember. Always provide property in array off dependencies if you use it inside an effect and never disabled this year's Lynn Drew because it will save your intro places where you didn't do it. So let's go back to our errors. And here, as you can see, we get the first aero. That use fact has a missin dependencies options and your l and this is happening, as you can see in the EU's fetch. So basically, let's jump in the use, fetch and check our problem. So this is our use of fact. And here we have Independence is on. Lee is large in, so this error is completely valid. Were Added on Lee is lord in as a dependency because this is the on the property which were interested in to run this effect. So basically, we're born this effect to run every time when his lord involves changed. But here we must add your l and options because as you can see, we're using your l and options inside this effect and of course, we can create you local variables inside effect. And then we won't get any wrecked hooks errors? But if we're using inside effect some variables from our hook or component, then we will get this arrow. So, basically, to fix this error, we simply need to right here your l and options. Now we need to think if what we changed won't call our effect more often after we added this to properties Ural and options Basically, as you know, we don't modify your l a tall and we seem to receive it ones where we initialize our hook inside our component. So basically it won't call our use effect more often. And options were set in Onley bonds inside to fetch function. So basically, yes, when we're Collins adoptions, this use effect will be triggered. But this condition, if is Lord in will block it and we're boned. Go inside our fetch. So this is completely fine for now. As you can see, we don't have this error in browser anymore. So this means that we fixed it fine. The next era is about excels is defined but never used. Basically, we used excess previously enough indication, but for now, we don't do it because we're moving this cold inside our hook with use fetch so he ever can simply delete input with access. And we're good to go. As you can see now, this error is come The next terror is that era property inside are in both indication is never used And actually, we need this property later. But for now, we can remove it for the sake of clean logs. So here, inside, use fetch. We're making the structure in four is Lord in error and response. Now let's simply remove era from here and live on the is logged in and response. Now, when we load the page, you can see that our error is gone The next era is more interesting. We get here again react hooks herro And here we get a narrow that we have a mission Dependency said talking. And we should included independence at least and in ragged documentation. It is written that we should write all wearables in dependencies. But normally people think Onley about riel variables and not about functions. And actually all functions are also variables and should be provided. Independence is as well. So basically here we simply need to goto our use effect inside authentication, and here we have as a dependency responds, and we're using insights that talking so basically here with simply can throw said, talking inside our array. And we're good to go when we're allowed the page. We don't get any error animal. The last error that we have is that there is a key dependency which would be used inside. Use local storage. So let's open the use local storage hook. And here we have an effect and there is a dependency value, which is logical because we want to trick it every time when we have a value change. And now we also need to add a key here because we're using key variable inside our use of fact. So we need to say erect rial dependencies off our use effect. As you can see, we provide key on his argument off our hook, and we're initializing this hook on the bonds, so basically it won't recuse effect more often. As you can see. Yes, Lind error from react can be quite helpful, and we fixed a lot of errors in our cold with this year's land hooks. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 20. Current user context: in this video, we will start to work with user data, our Logan and register requests already, and we're already saved user talking in local storage. But we didn't save user data that we got anywhere. And the question is, how can we save user data off course? We could just talk them in some component and then passed to parent to give access off this date toe another component. But it's not efficient and comfortable, and that's why we have contexts in react. If you already know how context works indirect, you're good to go. If not, here is an explanation. So what is context? It's some data which we can access from every component. Normally we can access data on with through probes, but it's not efficient to birth data through thousands of components. That's why we can create context and past data directly toe everywhere. In our case, we want to create context for current user because we want to access current user data from different components and it will be comfortable to set and read current user data from any component. So here I suggest to create a new folder, and we can name eat contexts and here we will store all our contexts for our application. Inside, let's create our first context for current user. That's why I created filed current user Don Jess. First of all, we need to great current user context here. So expert const current user context and we want to use function from wrecked which is called create context. And here I will do some magic and explain it in a second. So basically create context. We want to import from react and what we did here inside. So basically, we used function create context and inside we get initial value. And as you can see inside we put an array and here is a ray of toe elements and the first element is empty object and the second element is an empty function. And I think you got it already. It looks exactly the same as when we used hooks. So here is in the ray with value and the center and this is our initial data. The next thing that we need to do here is to create current user provider. It's a component and we will rob all our components in this component than all components inside will get access to current user state. So here is our current user provider and this is simple component and get Children as a perimeter. So basically this all components we're rendering inside and inside we want to return and here will be current user context. What we created previously dot provider and we need to close it here. So current user context dot provided. So basically it's simple tag and inside it we want to run Children. So here is our return and this current use a provider doesn't do anything. For now, it's simply empty proper where we render our Children. What we need to do here is to give a value to our provider. Basically, we can say here well, you off, for example one and were given inside current user context. Value one and Israeli will be accessible toe all components we're will inject these conduct off course. We don't want value one, and we want something more flexible. And that's why we can create a hook verbal store current user data inside these provided. So here is our use state like we're doing always. So here is state and said state onda we're using here you state and initial value will be an object. Basically what properties do we need for our current user? So we will fetch it from beckoned. So for sure we need is large and property toe know that it is fetched or not Yet we also need is logged in property Log it in and it can be now or true or false Basically, now means that we don't know yet if the user is locked in or not, this means that we didn't fetch user data yet. And of course, if it's true, that means that years is locked in and the last property that we need is current user data . And this is exactly the response that we get from beckoned. So he ever will have things like talking beer information, description off the user user name and so on. And basically now we created our you State Huq and here we can import you state. And now we need to provide this data inside a value and you can understand exactly what we need to give here. As you can see in create context, it should be an array with object and the function so basically here use our value and we want to give here in array with State and said State. So basically in the same way like we did with his hooks previously so outside we will get this value everywhere and we can read all our data, these data from state and we can change this state with said state method. Now our context is created and we can access his data everywhere. So first of all, we need to wrap in our index Js file all our components in our provider. So basically here we want to import current use a provider from context slash current Houston Now here we want to rub everything with this current user provided So I simply open and close current use of provider and then save. And here all our components are accessible with current user inside. So basically, this means that each component, for example, off rows, will also have access to our current user. So let's try. If it's working, we need toe open authentication again. And first we need to import inside our current user contexts. So basically here import current user context from contexts slash current user. Now we have access to current use a context and to get data from it, we need such hook as use context. So basically, with the help of this hook, we can use contexts inside our functions. So here we simply then can ride Const and he ever get the structuring as previously with stayed And here is current uses state coma said current user, state and thes equals to use context This is our new hook toe work with context and inside the food we need to give current user context which we created previously. So basically here what we do is we initialize use context and didn't return current user state This is what we decided to give in a value This is the object and this is the Saturn So now let's check what we got. So here is current uses state and I will just show current user state. So as you can see, we have a narrow because in the context with did not inject react But we used your six So here in current user, we need toe import react also And now when we're allowed the page, everything is fine and you can see that in console I have current uses state and this is exactly the object that we created. So here we have is Lord in is locked in now and current user Now this means the tower authentication component has successfully subscribed for our current user contacts. So now let's inside our authentication component Try to change data off current Heusen. So basically here we have used effect where we got a successful response and we said talking here and it would be nice to also said current user state here and here is interesting part off you state we can provide here not on the data for example, like stream full if we want to set data. But we can provide here a function Why do we need here function? Because with function is the first argument we can get annulled state So basically, in this case, state is an old state And here we can return you state by overriding some properties in the old state. So here was spread all state and we want a variety. For example we need Isla getting through because we know that this is success response. This means that we already got user data and this means that users should be legit in at this point. Now is Lord in is false because we're already finished, Lord in our user and the last is current user and we're right response dot user inside. So this is how we can update our state inside the context. Now let's check what we got. So here we still have our consul long. So let's reload the page and check. So here is current use estate. The data is still there. Now I clean the consul and try it'll again. So basically, I already have some credentials and now when I will submit, you can see that current user state was changed. And now here, every time when this current use of state was updated, would get at then is Lord and false. This is exactly what we said is low getting through. And here is our current heusen And here and get some information about my user. So all components, which is subscribed to our context, will better gendered every time When somebody update user data. If you have any comments or questions, feel free to ask them and I will answer them for sure 21. Validation errors: in previous video implemented story in off user data After login and register. However, we don't show errors to use it if he made mistakes and the endpoint call returned errors. But festival. I want to fix this to warnings that we have here to make our consul clean. And the first warning is about unused variable talking here in authentication index. So basically here we're doing the structuring and first were getting talking and then set talking. But actually, we don't use talking in this file and we're only you set talking to set it. And basically the figs here is just to remove first argument talking and live here comma. In this case, the first argument will be omitted and we will simply use that talking where we need when will allot the page. You can see that this error is gone and everything is still working. The next era is about missing dependencies, set current user state. So basically here, In effect, we have said current user state and this is the Ceta that we get from used context. And basically this is a function, and this is dependency that we're using inside use effect. So we should provide it here as a dependency for our effect to say, react what we're using inside now one with a lot of the page. You can see that we don't have any errors and we're good to go. So now back to our validation errors. So let's check how it is done. In our basic example. Some here we have seen not form. And when we feel it, let's say we feel it was not correct data and we just write something here and click sign up. You can see that we're getting photo toe era and this errors are showing here, So email is invalid. Passport is too short and use the name can't be blank and is too short. So basically how these messages are rendered. So here is the response for 22 and you can see that we get the errors array where we get. Actually, it's not a ray, it's an object, and we get object keys like email, password and user name, and the valley is array. So basically, when we have several errors like for user name, then this is a ray of two strings campy blanc and is two shots in now use fish hook. We can get ever property back in component and use it to render errors. So let's try this. Now Here is our response and is Lord in and we can adhere a narrow. And now let's consul log here era and see what we get. So basically, we're allowed the page here and simply click sign up. And as you can see, we get for 22 And here is an arrow. This is an object with property errors and the response is the same like an example that we see. So basically, we somehow need to group this data and render them in our component. I proposed to create an additional component here near authentication, where we will render this arrow messages. It will be simply cleaner and easier to understand because we have quite a lot of stuff here and we don't want to park more stuff inside. So basically how we will render this error messages. So here we have our form and before the form, we can simply Llorente beckoned errors on live an era is there. So when it is now, this condition won't do anything. And now we want to render back and wrong messages. And basically here we can close this component and we will give insight, beckoned errors and inside it this will be error dot errors. So basically, this is an object with our errors. Now we need to import this component on the top. So be import beckoned error messages from And now the question is where we will put it. We already discussed, Did the beginning our structure off files and basically this component were using Onley inside all syndication page, which means we will put it in components folder near this page because we not share it for now. And if we will need to do it later, we can simply put it in route components and not here. So for now it will be pages slash authentication slash components slash beckoned herro messages. Now we need to create this component. I am in pages slash holds Indication folder now, and let's create here and you fall the called components and inside we can create new file , which is named beckoned arrow messages. Dog. Yes. Now let's input here react from react as we did reverse Lee and now create back and error messages function and inside as a perimeter where getting back and errors. And this will be this object that we're getting from bacon. And here we want to return fell some mark up. So it will be, Oh, meet with class name ero messages and here we're closing our own. After this, we need toe expert default back and there are messages. So when we're allowed the page, we don't get any errors and hear our component will be rendered. But for now it is empty. Now we need to normalize this beckoned errors to human readable format. So here is what we can do. We can create here error messages and this will be simply array off strings grouped by key in the object. So what we can do here is object object keys, beckoned errors and object keys beckoned errors is our keys inside object. So basically here, when we check the object keys is email, password and user name. So basically these three things on the left. So basically we want to map it. And when we're making a map here inside, we will get a name, and basically name is, for example, email or password or user name. And inside this map, we want toe first get messages for this name. So basically messages for this name will be beckoned Earth name. And this is the key. So, for example, for user names, this will be this array and we want simply to join it in single string So we can ride here jeeyeon and, for example, empty space. After these, we want to return Khunkitti Nated String. So first will be a name. For example This is email and then this will become patinated strain off messages for the name with space between them. So at the end, which would get something like this Let's Consul look here error messages messages Because we have a lot of them and here we need also s and let's reload the page. As you can see, we don't have anything because our component is not rendered yet And now we click Sign up and we get errors and error messages look like this So the 1st 1 is email can be blank passed. What can be blank and user name can be blank and east a shot. Now we can simply render them with standard map. So here is our and inside whom we want to rent our error messages. So error messages dot man and the argument is error message. And here we want to return and it will believe item. And inside Lee we will have key because if we won't give a key, inside, react will scream that we need to give an index for hourly. So this is Kierra message because the name is unique and inside Lee Element, we want to surrender our our message. So it looks like these. Now let's reload the page and check if it works. So basically hear the clicks hang up. And as you can see here, we get our error messages in normalized state. And for now, we don't need to move this component outside. But of course, late. We can move it to share a bowl components when we have, for example, in other form, for example, for creating article where we also want to show validation from beckoned. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure 22. Fetching current user: in previous videos were already implemented. Setting user to our current user context after login and register, but started this information in context means that we store it only in JavaScript in memory , off browser. So after Page the Lord, all current user data will disappear. That's why we need to fetch user each time on every page Lord to get data off current user . And this is exactly what we will implement in this video. So we want the fetch current user on Lou Bonds every time when our application is mounted. So basically, we could ride this cold in our index chess file because this is what happens on Lee wants in our cold. But I prefer to great an additional component to implement this. Then our index GS will stay clean. So let's create a new component. And I want to call it current user checker because it will check if user is locked in or not and said some data. This component does not belong to any specific page, so we could create this component in our note modules in Components folder. So let's do it now. Let's name it current user. Check her dog jazz and here we will have current user check her. And as a perimeter, we will get here Children and by Children is because we want to wrap all our components that were enter in thes component. So for now, we need here to just return Children. We won't have any market here because we only want to implement JavaScript logic here. So here we export default current, use a chicken. Now in our index chess we want to rub everything that we have except of current user provider in this component. So let's run here. Import current user checker from components slash current user check. Now we can take this component and run it here. So here is currently the checker and after our route her we close it. Now the question is, why don't we put this current Use the checker outside like the first component that we render here And this is because we want to access our current user data inside our provider . And we can do it only when we put this component inside. If you put with outside, then our context won't be available for us. So now let's jump back in our current use a checker. And the question is, whether want to do here? So we want in this component this component on the renders one. And we want here to fetch our current user on initial lies off this component. So for these, we can use our use. Fetch hook. So here is used. Fetch from hooks, slash use fetch. No. Here we can say that we need at least some response because response will be the date off the user and go fetch to make a fetch. And now we have here. Use fetch, and I'll get your l will be slash user so we don't need to provide anything. Apples. This is our your l and this is get by default. Now the question is how we want toe. Call it on initialize. So basically, for this, we can use use effect result any dependencies. So here is our use effect. And here we give an empty array it right here. Now, Consul log make Onley ones. And then with a lot of the page we see, of course error that Hughes effect is not there leads right here import use effect from direct. And now when we reload the page. We don't see any errors and another console. As you can see, we have make on the ones which means that this code will happen on the ones so basically inside here with simply want to call, do fetch. We don't need to give any arguments here because our method is get by default. We don't have any body and we won't do anything else. Now when we're allowed the page, you can see that we're getting some request and this is 401 So basically white happens because here we're trying to fetch current user and we don't give any headers without talking that will fetch from user. That's why it will always be 401 when we are on unauthorized or our talking is not valid. So just to remind you, we saved in our local storage a talking value after will again or after we registered, but we don't use it so far. We need to put it in our headers off which request and then we won't get 401 but current user. So for these, we need to modify our juice fetch hook. For now, we don't use any else indication talking here and just pass simple options. So now we need to update this cold to pass also our talking and we can make here import off our use local storage hook because we want to access local storage here. And this is our simplistic and elegant way. So this is hooks use local storage. And now somewhere here we can say, OK, we want to get our talking from local storage and this is used local storage was property talking. So talking is available for now for us, and now we simply need to update our options. So, as you can see here in the fetch, we're making said options and this is changing these options and then in effect, we're using this options inside. What we need to do is to merge this talking in our headers with options. So basically, here inside you, the fact we can do it. So basically we want to create new property and let's name it request options and inside we want to merge our options. So this is spread off options with new object and we will also spread it. So here is our object and the property will be headers This is what we want to attached for excess. And inside the headers we have property out and elsewhere ization. And this is property which will store our talking. So basically, if talking is valid, then we need to put here a string like talking space and then our talking, for example, food. And if we don't have any talkin, we should not include this header at all or it should be empty stream. So basically, we can check if we have here talking or not. And if we have here, then we need stream talking. And here I escaped talking value or in other case, it will be empty stream. So basically, once again, what we're doing here, we have options from the user, for example, Method body or something else and reborn for each our options. When we do a request put inside headers and this headers property else authorization. This is what we need for authorization off current user. So basically, this will safer server. What? Our talking ease. If it's not there, then it's empty stream. If it is, there were provided and survey can validate you. This talking is valid. Now we need to use inside our request. Request options and not options. Because only here we're except our heather. Now let's reload the page and check what we have. As you can see, we don't get any errors. And the network there is a property user. This is our endpoint that we call for current user and we get 200. So here, in preview, you can see my user. So this is the same data like we get from Le Guin or sailing in, for example, and the same data we get for current user and why it is working now. Because here inside headers you confined the property authorization. So here is request headers and there is authorization Header that we're old inside our use effect. And here restrain talking and then the strain of the talkin. So basically, now we don't need to do anything at all. We continue using, use fetch as previously, for example, here we're just right and use. Fetch. We don't think about authorization at all. And our use fetch who will attach authorization header from local storage Every time when we're locked in now we can work with our current user checker. So our request happened and we got some response. Let's check if we get this response and how does it look like? So here is a consulate response. Now, let's jump to console and you load the page, As you can see in the beginning responses. Now and then we get response with our user property and inside user, we have user data. Now, we can use this data to update current user state. So what do we want to do here? First of all we're doing here, Do fetch, which means we started the request. So here we can use set current user state from context, and we will inject it in the second. And here we're doing the same. Like previously stole state is an Allstate, and here we want to merge it without a new state. So here we want property is lined in. And this means that when our request is happening before it started, we want to set property Is Lydon, then all our other components that are using current user context can understand that were large in current user, and they should wait until they can get data from context. So the next point is that we want an effect for our response. So we did this already previously. So here is new effect and we want to subscribe to response. So basically, if we don't have any response So this is now we don't need to do anything at all, But when we get the response, we want again to set current user state. So here is state and we want to merge it with our data that we get from the state. So here state is la guillotine will be true because for sure one request happened successfully. This is true and is Lord and will be false because request ended. And here we want to update current user and put inside response dot user. Now we need to import our set current uses state like we did previously. So here we have import and here we need current user context. So it will be current user context from contexts Car vent user. Now inside we can dried const And here we're getting stayed and said current use of state and this will be used context on current user context and I think we get a narrow that use context is not defined. So basically, now we need to import it from wrecked. So use context here and we don't get any errors. Now we set our current user here after we get response. So in use effect here happened current user and let's check if it's draw, not we can champ directly to our syndication component that we did previously. And Consul log here, our current Hughes a state because this is just a page and we want to fetch our data off current user in this current user checker. And this is one of the components that is subscribed already for current user state solar jumping, jumping, staining and reload the page and this you can see here. First of all, we get current user state. This is from authentication component and current user. Now is Lord in false and Isla gettin now. So this is our initial state Then their requests started and we have here now is lording is true And this shows us that were fetching from our currently the Checker our current user request And then at the end we get here response and this is our user. And then here is our current user state. This is their authentication component also and is Lord in false Isla getting true and current user east data that we need now. The only problem is that we trigger fetch request even if we don't need toe. So basically, when I jumped a local storage and remove this key off the talking and reload the page, this request will happen. And this is because we don't check if we need to do it or not. So basically, we don't need to do this. Do fetch request when we don't have a talking because it's useless without talking. We already know that the user is not authorized. So here we can import local storage and check talking tow. Avoid this. Fetch in. So here is import use local storage from hooks, use local storage and here will be our talking And this is used local storage with property talkin and inside our use effect, we can ride. If we don't have talking, then we directly can return because we don't want this fetch to happen. And before this, we can set current user state toe honest rised. So basically, this is the Allstate, and the new state will be just marriage with state and these lug it in false because we directly now that the user is not locked in. Now when we're allowed the page, as you can see, the request is not happening. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 23. Use callback hook: in this video. I want to continue with fixing our Linton roles. As you can see here we get a narrow that in use effect because the Miss Independence is Do fetch and said current user, state and talkin And this happens in our current user checker, Let's jump them current user checker and let's try in our use effect to provide Do fetch First, I saved the file under Load the page, and as you can see, bam, everything is broken and, as you can see where getting error, that maximum update that exceeded. And this can happen when component calls had stayed inside. Use effect. But use effect doesn't have a dependency array or one off the dependency change on every render. And actually, this error is region quite good, and it's really clear what's happening here. As you can see, we get this warning again and again because of the component renders indefinitely. And here are two cases, so basically, either we don't provide dependency array, which is not true because we provided it here and this happened after we added do fetch. So basically, this is the second case one off the dependencies changes on every render, and here is one important point to remember. React creates custom functions that were rolled inside wrecked components or hooks on every render. And this means, for example, that in army use veg, we have a doof edge, and this is our custom function. And every time, when wrecked, renders a component and renders the Who This to fetch is created indefinitely again and again, and this is not a problem. But at the point when we give it inside the dependency array wrecked condo anything because we resent a component based off the function, which changes every time, which means we get indefinite Rendah. And in this point, you may ask, What about setters for you? State hooks, for example, In North Indication, we give inside use effect here. Setters, for example, said talking or said current use estate and everything worked fine and you're totally right . But React handles own hooks correctly, and this is both hooks with you state. This means that way will they will work inside use effect without any problems. Now the question is, how can we fix doof edge inside dependencies array without removing it from these dependencies and basically off course we should not remove the Lynton rule or we shouldn't remove the fetch from this array. And exactly for this purpose in react exists use called a cook. Let's try it out first and afterwards I will tell you what is it about? So basically, let's jump and use Fage. And here is our defense. And first, what we need to do is import from react, used callback hook, and we need to wrap our function in this hook. So we're right in use cold back here, then opened the bracket and our function goes inside is the first part. Amita as a second perimeter will provide an empty rate. And just to remind you and a lot of people do this mistake if you don't provide dependency array here, your use Kohlberg won't do anything here at all. So it's just here for nothing, so at least you should provide here. Dependencies array, which is empty. Now let's check if it helped. So let's reload the page. And as you can see, the error is gone and everything is working as before. So what does use call big do it returned demised function That will only change when independence is change and a second car perimeter were given here. Array off dependencies and memorized means that this function will be cashed and won't be changed until sometime. And when we give here dependencies array, which is empty. This means that we care this function forever and wrecked will always call the same instance of this function. So basically it won't create it again and again. So, basically, always when we have custom functions and we provide them in the dependencies array, so basically they can trigger river and the rain. We need to wrap them in your skull back function. In other cases, they would call infinite rendering. In 99% of your time, you will use them with empty rate. And of course, if you have some dependencies and you want to rein initialize dysfunctions, you can do it. But it's not this popular now. When we're allowed the page, everything is working, but we should fix it to the end. So here we have in current use the chicken missing dependencies, said current user, state and talking. So basically, let's jump in our check your bag and here I have do fetch inside use effect and they also need to provide, said current user stayed and talking with Reload the page. And as you can see, one error is gone and we see on the error about mission, said current User State in Second Effect. So basically here is second defend we have here on the response as a dependency and we need to right here. Also said Current uses state as a dependency and now when we're load, the page of a console is clean. If you have any problems or questions, feel free to ask them in comments and I will answer them for sure. 24. Improving topbar: in previous videos, we prepared our current user context. Now it's time to adjust our components to eat, and the first thing that they want to improve is our Tom Bar. So basically, for now, we only have unauthorized state in tow bar and we ceasing in and saying up links and obviously for lug it in user, we should not show the slings batch oh, other links which a useful for log it in user. So for now, let's open our top bar eating our components top bar. And here we need current user context to be able to check if user is locked in. So, basically, let's import current user context from contexts slash current heusen. Now inside our top bar component, we can simply get current user state from use context and here will be currently the context. And for this, we need to import use context from wrecked. So let's do it here. Use context and we're good to go. Now let's check. What we get here is current user state and when with a lot of the page you can see in console that I get to current use the state and the 1st 1 is initial state is lord and false. Now, now and then is Lalit false is lug it in false and current user. Now this happens, obviously because they don't have a talking inside local storage. And that's why our application understands that we're not like it in Let's Liggan for now because it will be more comfortable to the bug, our tow bar. So here I am locked in. I am on the home page and they're loaded the page and here, you can see is Lord in True because fetch requests started and then is Lord and false and forget our current user. So basically, we should handle that is LA Guillotine by default is now, and we need only to check when it's true or false, because we should wait until our current user request is finished. So now we'll get in and we don't want to show this sign in and sign our planes because we show them on live in user is not like it in. So basically, here we have our links. Homelink, we want to show always and then we have a link for signing and link for saying up, and basically we want to rob them in our condition. So here will be current use. The state is luggage in and we know that we want to compare. It was false because by default it is now. So basically it won't be true. And then where When we really know that user is already there, we check that it is false, which means we're not Log it in and then we have here and operator and there's, you know, indirect weaken right here on the one element. So basically, we can't right here, Deve and then one more dif like several elements because we need to rob several elements in one like this dif and then dried these two inside and then it will work like this, but basically we have two links on the same level and we don't want to rub them because they inside Oh, and inside react. We have such thing as a fragment. So basically, when we need to do this like, for example here and we want to grab several elements without creating additional parent, we can use fragment. So basically it's just wraps our elements for react, but it won't appear in our dog. So what we need to do here is import fragment from react And now we can use it here So it will be fragment and the clothes fragment here and inside it will place hourly. So basically will just caught the stool lease and put inside our fragment. So here is our condition. If current uses state is la guillotine is false then were rendered Thies to lease So let's reload the page And as you can see, our tool ings disappeared And now we have on the homelink which will be always there which means our condition is correct and we don't render anything until we get our current user and then we check okay is like getting is false off course For now it is not false. That's why we don't see the links. Now let's had some mark up for low getting user So basically here we can do the same like we did previously for not le getting user but in our case it will be eased. Log it in and we should not right here equals true because obviously it's the same, like equal, strong And here we also want fragment and we want to close fragment and inside fragment we will have our least and I will copy one Li to avoid typing. And here is firstly so it has class now I'd him and here is not link and it will go toe slash articles slash new So basically it's a link to create in your article and here is now willing and inside it we won't have signing but basically will have e with class name I own compose and here we're close e Then we have a space basically, to do this we need to write nbsp and then you posed As you can see in browser, we have new post now here but check again When we reload the page you can see home for a second and then we don't seem you posed And after a second, until we get our response back for current user will render new post The next thing that we want to render is a link for our settings. So, basically, let's just corporately and paste it here and here will believe with no item where your l goes toe slash settings and nothing is the same. And then here we have not I've gone composed but I own gear slash a and then here will be just in this piece and settings. Now let's reload the page and check if it's working. Now we have correctly for our settings your own. In the last link that we want to render here, he's dealing for our profile. So here is our Lee, and here will be slash profiles slash and this will be a name off the user. So basically, we have user name property inside our current user, and in this case, we just need to rub this in brackets and then here escape. So we have here slash profile slash And here goes current users ST dot current user because this is property where we store our lord, that user dot user name and let's save this. Now we have novel ing with correct two and class name and inside. We don't want to have here I and we want to have here image. So basically our image will have class, name, user big and source will be user name and we don't have user user image. Sorry, and we don't have used image for now, but we will create it in a second and out will be empty because if we won't provide out, then Lyndon for react will say that we need to provide it. That's why I wrote it here directly. Now, after image, we want to render our user name. So here we also have India's P and then our user name. So it will be current use of ST dot current user dot user name. And that too. Now we'll need to create our user image. Basically, here at the beginning, we can make new property user image basically what we want to check here. So if current user is logged it in and we have the image of current user, then we will use this image and if not, will we will use default image. So basically how it will look like. So here is the condition. If current use, the state is low, getting is there and our current user state current user dot image is there. Then we're using this image. So basically this conditional return of the second part of it. So basically, if this is true, then we will get image back. If that is not true, then we will get what we have here in or so here. We want to have aesthetic your L for the fault image and it's older. They're weaken, just based it. So here is image smile lists Ciro's from aesthetic production. Ready? Yo, And let's remove all Consul long and check what we get. So basically, user image will be selected from current users. State can't use the image when will or did it. And if this image property is empty, then we will use default once. As you can see, here is my user name and the image. And as you can understand, this is not the default image. When we inspected, this is the damning image that calm. So basically, this is the image lauded by user because they already lauded an image in my account. So if we don't have this image, then we will use standard one. But here in network, in our user request, we're getting inside. User this image and this is just http link which we pasted inside image source. Now let's try to look out to check if everything is working. So we can basically just delete our local storage talking and the Lord the page and as you can see now I am not like getting. That's why I see home saying in and say not so everything is working as expected. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 25. Creating feed: In this video, we will start implementing global feed. But first it's a good idea to plan what we need to implement. This will save us some time in future. So here, in the example, you can see that we have global feed. This is our home page, and here we have a list of articles also weaken. Jump here in popular tax to specific tag, for example, dragons. And then we have all articles which are related to this tank, and they look exactly the same. So would be nice to use the same component for it. And after that we have your feet on Li Fala. Get in, user. And here we render the feed off the current users and ex looks exactly the same. Like these two feet. This means that would be nice to create one component feed, which is stateless and where we just throw the list of articles and we can use them this component in all three pages. Let's do it now. So basically it's a terrible component between pages because we used this feat component in three different pages. That's why I recommend to create in our route components the new component and we can call it feed the Yes, And here we import, react as always from react and create const feed. And here as a perimeter in props were getting articles. And this is there a off articles which will will render and inside let's just return playing dif with feed So here we don't see anything because we don't use this component anywhere. But basically, in our pages we have already global feed. And this is our component which were Randa in our slash page. So our home page so basic Look here we can import feed from components slash feed and just trended here. So basically glove off heat and here will be feed. We don't provide any articles for now, so it will be broken. So basically we can at least write articles and here were given empty array inside. So number the Lord, the page and we get an error that components she does not contain default export. So let's jump back. Yes, of course, it's true. We need to right here. Explored the fold feed. Now when we're allowed page we see here global feel This is our page and feed use from our component So now we can add markup for our feed component. So here inside we want to wrap our Deve with brackets. And then here we have Deve And inside our dif, we will have map in for our articles. So articles that map and here will be article and index. And we want to return Markham for one article. So here will be dif last name, article, preview, and then key index. This we need because we have a loop in wrecked and inside this dif we want to render a Attica matter. So it will be deep class name, article meat, huh? And let's close this dif and inside this dif will be a link toe the image off the user. So let's leave it empty for now. And here we close our link. And inside our link, we will have image with sores and here will be article or from and then image. So basically, this is an image off the user who lives this article, and we also need to provide out here. But we don't care about it. That's why this is empty. And this out is needed because off years, land errors indirect. So now about link. This link should go to the profile off the user. So basically, here we can change it to have escaping stream. And here is profile slash. And here is article or throw dot user name. So this is the link off the user name inside with image. And after these want to create you Deve class name and here will be in front. So here will go user in front. And inside this Dave, we will also have linked. Actually, we can compete because it will be also linked to the profile page. Because inside, with this link, we want class name. All thorn and inside were boned have image, but we will have article dot or so dot user name. So basically, here we're rendering the user name off the person who lives this article. And after these, we needs pen with class name, date, and let's close our pen and inside it will render article dot created at So basically, this is time when we created this article. Now, after two disclosed here, we want to have link to and here we go article slug because here is the link for the article itself. So articles And here is article dots, Lung. Now let's close this link. And inside this link, we want to put the content off our preview. So basically, first here, first of all, I forget here, class name and here should be class named Review link. And inside we want toe have h one tag. And inside each one, it will be article tight hook, and after each one, it should be p. And inside it will be article description. And after these, we will have spanned with text read more. And after this span, we will have our tags, which remarked inside our article. So basically, it's will be a lot. And inside all we will have a last name tag least. And here inside, we want to render our article dot tank least dot map. So, basically, inside article, we have property tag list and this is a ray off strings, so we can just go three. This is the tag, and we render for each tag inside Lee Whiskey tank because this is the unique name. Like, for example, dragon a coffee over terror. And here is class name, tag, default, tag, peel and tag outline. And let's close hourly and inside Lee, we can put here the value off our tank, so it will be simply tent. So our markup is ready and hopefully we didn't do any errors. But here we can see in browser that it has failed to compile because link is not defined. So here we need to import link from wrecked rotor. Don't now, as you can see when we're allowed the page but don't get any errors. But for now, off course, our very is empty because we didn't give any data inside. That's why we don't see our component. So we need to change this. Let's jump back in our global feed and fish some data. So basically here for now, let's implement a pal Ural. And you can, of course, check it here in our example project. And when we check, inspect and in network will go with Global feel page, we can see here we have the your l slash e p I slash articles with limit 10 end of said zero. And of course, these data means that we have pegged imagination here and we will implement it in the next lessons. For now. Let's just use this year on directly here. So basically, I will write that we have slash articles, slash and question mark limit and limited. Stan and offset is zero. So this is our year around, from which we're going to fetch data. Next, we need our cool custom hook use feed Youcef Edge. Sorry. And we imported from hooks slash use French. And now after our ika euro, we can get here. Use fetch and we just throw inside your own because it's a get request and we don't need anything else. So as a result, we get here response than a rock and it's lording and also as a second permit to defense. Now we need to call these Do fetch on initialize because we want when we initialized this page toe, fetch this data. So for this we can use use defect who and inside we have a function and we have dependency here and inside will be just do fetch without any arguments because we don't need to provide anything. And as you remember, when we use a function inside, we must provide it in our dependence is array So it would look like this Now the next step is to reload the page and see that he was effect is not defined. So here we need to import use effect from wrecked. Now, when we're along the page, you can see that we get errors like response. Error is longing is not used. And let's check how it looked like. So here is press and for examples, responds arrow and he's launching. And when we're allowed the page, it looks exactly like we wanted. So it's now mouth falls at the beginning, which is obvious responses. Now era now is Lord in his faults. Then we start loading. Then we get our articles and is lording is true And the dance is Lord in is false. So basically here this is the list off our articles and exactly this data and we want to provide inside our field. So, basically, let's change our markup and simply throw inside articles, Response Daut articles. But of course, this code will break because for now, at the beginning, in response, we have only now and here we will get the era now off. Undefined. Actually, we can check how it will look like and it will look like Kenneth rate property articles off now. So basically, let's add some mark up here and also understand that first, we need to check that we have responds inside. So here is Deve Class name, and here will be home page. And after these, we can render Deve class name Bonner. And this is this green bonnet that you can see in the example. Actually, when we're locked in, we can see, so we need to look out. And now here you can see this convoluted Bonner so we can do the same. And here, inside Bonner was clothed is deep and friend each one. And let's name our project Medium clone. And also, we need a description. So p here and a place toe share knowledge. Now, let's save these. When we're looking browser. We still get this error because after our Bonner, we need our container. And this is class name, container and class name page. Now let's close this, Steve. And inside it dif Wisc lust name old. And then we have this is bootstrap. So basically inside with heavy deal with class name. Call M d nine. And this is our main content. And we also can copied and have here called MD three and here inside we will have popular tanks and we will render them later. Now inside calling denying We want to render our content. So first of all we have here is lying And basically, if we have lied in, we just want to show dif with content lording after this let's check for error So basically we have error. Then we want to rent a dif with content. Some ero happened and now after these if we don't have any errors, we want here to render our content. So if we're not in law in is Lord in state and we have response because basically sometimes we can have response And this Lord in state is not changed yet and here and goals are content And here we will have fragment as previously and inside this pregnant we want to render our feet and I rolled here fragment because next step will be to have pagination inside and then we can't have two elements inside one condition So for now it will be our feed actually can copied from here because we don't need it here anymore. So here is fragment feed articles and here is response thought articles. So basically we render these part on Liwen is Lord in his false and response is that that's why we won't get any errors off now and fragment is not defined. So we need to import it here from react. Now, as we laud the page, you can see that we get this bonnet medium clone and then our feed component is rendered. So here you can see popular tag. This is right part that we will dough as next step And here is our content. So let's check what we did inside. He'd So this is our map. And here we have article preview and this is met information about user. So this is the link for user. As you can see, it's correct slash profile slash waas Then we have here not for martyred created ad. We can format it later and here is the image of the user. So it's article also image here and actually, if it's empty, then we get this default image from the back. And that's why all images are the same. And after this, we have here a link. Actually, this is all the link for the article and This is the title description and read more, and these are tags off this article. So basically, when was crawl a little bit? Here we have some other tanks. As you can see, our food component works and we're already rendered eat in other global feed. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 26. Implementing pagination: in previous video, we've ended our global feed, but we used a static Ural here ended slash article slash limit 10 and off said zero. So basically it won't work if we have a pagination on the bottom. And as you can see in the example here, his global, he'd ended the bottom. We have a pagination and here we can see all pages for our global feed and exactly the same we have for our tags. So basically, I'm in the tag dragons and here at the bottom have pagination for these tag. So basically, here I can jump to page tomb and I will hear Lord data with offset 10 and also I can jump in my feet and here I also have imagination. So would be nice to build it as a share a bill component and use it in all our feeds. And as you can see here, pagination is basically just a list of pages here and we're also headlight our active page and we can jump to any page and this will Lord other data, for example, for another page. So let's start implemented our component as they said it will be our terrible component, so it should go in our little components. So let's name it pagination and let's talk about pagination jazz and let's talk about how it should look like so Basically, we want to have origination and what we need to give inside. So first of all, it's total, for example, 20 or 200. This is the total amount off articles that we want to Brenda, and we need this information inside because we want to know how many pages do we need to Rendah and we can simply calculated by total and limit and basically limits says that we render on Lee, for example, 10 articles in one page. So basically, with these conditions with simply can guess that we will need to render 20 pages now we also need your Al and this will be, for example, for us slash tags slash tech, for example, Dragon And now it will be our base, your l and inside our component, we will adhere some query perimeters like page equals two, for example, and offset equal something else. So basically, this will be our base your own, and we also need to give current page inside and current page will be, for example, to because we are on page two and we need to highlight Onley these page as active. So let's create our component. So here we have import react from react and we want to create new component which is called imagination. And what do we have here? As we said, we have total limit your l and current page and then inside would want to return some mark up. So basically it will be cool with class name pagination and this is our container. And inside all we will render our pages. So basically here we need to prepare first pages and render them inside. So first of all, let's get here. How many pages do we have? So here's pages count and this is my math sale and here is total slash limit. So basically total is, for example, 200. This is amount of articles and limited stand and per page and we use here must sail. Which means that for example, if we have 201 then we won't get 20 pages. But we will get went Yvonne page because this last article will need to go on 21st page so here is Page count. This is fine. And now we need to have the array off pages so we can get go through them and simply call map. So basically what is pages? For example? If our pages count is 20 then pages will be just simple array from 1 to 20. So 1234 and so on until 20. So basically, this array we need to generate and in javascript the reason it's such function that we can use. So basically, let's write it on our own. In libraries like Lodish, there is a function which is called range and it looks like this. For example, we want to generate this array and here is range and we say, Okay, we want to generate arrange off numbers from zero toe 20 for example. Then, as a result, we will get here array 012 and so on until 20. So this function we will create now and here in our route. In known models, we can simply create new file which is called hotels. So here we will have our utilities and one of them will be range. So let's expert const here range, and this is our function. We give inside start and and And here we want to return. And inside we will have spread array and dot keys. And here is map. Oh, help lose Turned. So basically what we're doing here we have a ray and and array, and if we check it in browser here. So, for example, our start is one, and our end is 20. So when we right around Mireille and 20 we get array off 20 elements which are empty, and then we make dot keys. And when we're doing like these keys then and recall this keys would get in a ray a traitor . So basically, now we can call our spread and this will look like this. We just grab this in spread and this looks exactly like the range what we need. But as you can see here, the strange goes from 0 to 19. And normally we need to goto the number that we said here. That's why we have here inside plus one. So basically, we're just making through all our elements and we increase each of them plus one. So basically, here is map and in a map, have element and here is Element plus one. And now we get what we get from one until 20. This is how it works. So this is our custom function range, so we can avoid using some utilities from Lodish or other libraries. Now, let's use this function to generate our array of pages. So here is pages is the range from one because we always start from the first page until pages count and we need to import range from you tills because it goes in our route node models. So we don't need to do anything now inside boom! We have our array off numbers, so we can simply right here wrong briquettes and inside all it will be pages map. And here is Paige and we bond for each page call. And here we will create additional function which will be pagination item. So basically, I want to keep this function quite easy to read. That's why I will create additional function which will ran the existing element for pagination item. So here we have page and then we also have key, which is also page. Then we have current page. This is information that we get from props and your l This is all things that we need inside pagination item to rand a single item. And now let's create this here on the top. We won't created in additional file because we're using it only here, and it doesn't make any sense. And here is our imagination item and we get here all that we passed. So page current page and your URL And here we want inside to return. And here will be Lee because we're map in through our pages And of course, we're getting inside least inside UL. So here is class name with some classes. For now, it will be empty and inside. Want to render link so it will believe toe And here will be You're Al and this is our base your l off current path. So basically, if we're on slash tag slash dragon, then it will be these and then we want to attach here page equals page. So basically pages our page here. This is a ray of numbers. We go through array of numbers bus here, the number and Randy eat here, so basically each element will have its specific number. So after these would want to attach also class name, page link and we close here are linked and inside link we want to simply show page so pages just the number and it will be shown in our imagination, like here on the bottom. So let's try to use this pagination, and we will attach some classes from active style here later. So basically, let's jump bacon on global feud. Now we can import here our imagination from components slash pagination and here at the bottom, we have feed. And under he'd we can use our imagination. So basically, the question is, what do we need to put inside? Basically a lot of stuff that we created. I can open it here on the ride, So we need total limit. Your l and current page I told for now it will be 200 limit 10 current page will be just slash bank, for example. And then it waas what was the last one? It waas current page So current page should be tag and you're l know you're else would be tag and current page would be, for example, one. And now let's check if it's our imagination is working. So when we're on Global feed its failed to compile attempt import components pagination. But we forget again. Default expert. So here is our imagination and we want toe export default. And here s pagination. Let's save this under Lord Page And here is link is not defined. So we used here Link, but we didn't imprinted so important. Link Rome React route and on Now let's save under Lord, here we have a narrow array. Keys is not a terrible and this happens. I think I know here we have dot keys and I forget to have here the Colin off the function. So let's reload the page again and we don't have any errors. So let's make it smaller. And now when we scroll to the bottom, we can see that our imagination is rendered here and it looks almost fine. But of course, because we didn't add this class fully, it's not in one line, but it is in common. But actually all our items are there. We have items from 1 to 20 and when I over as you can see, I have tag and then page and this is specific page that we need. So basically everything is fine. We just need to fix our classes. So let's jump back, you know it imagination. And here we need to attach the class. So basically, what's the problem? We want to attach to classes. Basically, the first class that we need inlay is page item, and this class should be only always and the second class is active and it should not be there. Also, it should be their only when current page equals our page that we passed here. So, basically off course, we can do some terrorist operator here or some strange condition, but we can use additional library for these, and then you can make conditions inside classes quite easily. So basically jump back here in our console and right young add glass names. So class names is the library. It's quite small, which helps us to generate our classes. So let's imported here import class names from Klaus names and here let's use it. So what does it mean? We wanted generate classes for Lee. So let's say Lee classes and recall here class names and inside were given an object, and the key here means our class, so basically want to attach class full, and then here we give the value. So basically when really it's true, this class will be generated here inside the stream. If, for example, we have class bar and here is false. Then this class won't be that Basically, this is an easy approach and here we can write some logic. For example, if current page equals page, then these bar class will be attached. So let's change it to the classes that we need. So basically, we want to attach always the class for page item and we want to touch on Lee when current page equals page class active. So now inside class, name weaken Just right here, Lee classes. And when we're allowed the page here and scroll to the bottom, you can see that our pagination is looking as expected. So now when we expect here our element, we can see that we generated page item for every item. So because we put here true and activity on on the 1st 1 because this condition waas true and they know cases, it is false. Now our pigeon Arte is already working and everything is looking correct and we only need to provide real data. So here in global feed. For now, we just provided some Mark Tate. But of course, we need to take them seriously from our component. So what we can do here is try to get what we have in location and match. So basically, these two things are common from our props. And let's console log them here so global he'd home a location and comma Mitch. So let's reload the page. As you can see here we were getting to things. So first of Feliz location And here is path name, search, hash. And then we have match, which is path Ural and is exact and promised basically some stuff we can get from location and some from Mitch. So what do we need here? First? Awful. We need to get limit and offset and inside location, we have searched property, as you can see. Now let's try to write in our your l. For example, Page equals two. As you can see now, inside our location in search property, we have string with very paradigms where page equals tomb so we can read this information Don't know in what page Where currently are to parse query per meters from the string toe the object. People are normally using library, which is called query String. So basically, here it is in and PM and we have a bunch of methods here which are quite useful. So basically, here we can use pars toe parse our string like query string toe an object as you can see here and then do the same back. So we're using string if I hear to convert an object back toe string. So let's install it for now. Young add query stream So it's inside. And now in our component, what we need to get first is off sad and current page. So basically, we have here location, search and from location search we can generate off said and current page. But as we will get this information every time in every feed, we need to make it more useful so we could use additional function to get this information and not copy paste it every time. So, basically what do I want to do here? Let's write consul log and here we will generate function, get originate her, and this will return us our originated information and inside we want to give location dot search, which is our query string. Now let's generate thes You get originator function and it will come from our you tails. So basically get originator from you tills Now let's jump to you teals and create dysfunction So get pigeon NATO will get a surge stream and bag We want to get here current page and off sent Why? It should be like this Because current page we need to know at what page? Well, end off said we need for a P I toe understand at what page we need Lord Data, for example, If we are on the first page, then offset will be zero. If we're on the second page and we have only 10 items on the page, then offset will be 10 and so on. So basically here First we need toe parse our search strength so parsed surge will be a call off pars And this comes from this question library and here research. So let's import here bars from wearing stream. So basically, at this point, we're getting an object. So, for example, object If we have here Page equals two will be page equals tone and with this object is much easier toe work as with strength. So basically, first of all, we want to know the current page and current, which can be inside this object or it can be not there. When, for example, we're just on home page like this without query parameters. Then we would get an empty object here so he ever want to check if we have page property and if it's there. And it is, of course, always stream because we're Parson String. So we want to convert it to number. And this is Parsons search dot page. And if it's not there, this is just one. So this means that current page is one. The second thing to calculate is offset, and we can co create of said when we multiply current page on limit and then minus limit. So basically, what does it mean? For example, current pages two. And our limit is 10. So basically this means that we render 10 items per page, and then we're making meat minus 10 which doesn't mean we have 20 my understand and then our offset is 10 which is completely, completely true, because for the second page will help offset 10 for first page. We have said zero and for third page of said 20. So this is our formula to calculate Off said for specific page. So here is current page multiply limit minus limit, but we don't have here limit. And actually we have in the whole application limit per page 10 items, which will be nice to have it here in the u tills because it will be then always the same. And we can use it in one place and differently to change it through the whole application with. We can change it on Lee here. So let's write Simply, Limit equals 10. Now let's check if it's working, let's jump bag and here'll on the page. Let's right here that this is get originator so we can distinguish between other consul longs. And now when I reload the page, you can see here get pagination current Page one end of said zero. Now, when we have here, for example, page nine, then we get here current Page nine, End of said 80. So this is enough information for us to make any coal, and the question is how we can make it. First of all, we want to assign this information that began in two variables. So here we get an object and weaken destruction it directly toe off sad coma Current page. Now we need to generate very perimeters for our AP your l So first of bullets create new by ramble strain G fired perimeters and here will be our per meters with limit End off said that we need to provide here in a car your l and here we can use to identify your l from this query string library So strange gif I and we're calling it on the object and the object is limit comma offset So he has strong defied Para Rahm's is better and then we need toe Apply the stratified prom's let's consul log if it's working so string If I strong defied Brahms and we need to import these string If I from query wearing stream Now let's reload The page limit is not defined. This is happening in global feet in line 10. So here is our limit And as you remember, we have now limit in our you tills. So basically we can simply import here not only get originated from materials but also limit and this is exactly the case, so limit is the same through the whole application. So now let's reload the page. And as you can see here, we have streamed. If I limit 10 end offset 80. So basically our query Peron's are ready to be passed in our A power euro. So here we can simply make concatenation and this will be articles and inside will be articles. Then string defied Haram's. So basically, let's check here we can remove everything. And now the long page. As you can see network we're getting here, our ape. I call with slash a pi slash articles with limited an end offset 80. And then we jump, for example in page two and reload the page. And here is our request and here is offset by 10 because we're on the second page. So basically our get originated works fine with strong defy. Prom's here were touched. This for Peron's in our paper, your l, and provide it inside. Now we need to fix our imagination, so basically here total will be from response response And here in network, you can check that this is articles count property. So basically responds dot articles count limit will be limit. And here we have your l And the question is, what is you around? And basically we can create new variable. And this is current, Ural, and we can read it from match dot your l So that's fine for us. And here we're passing mural Current u u R l and then current page will be current page variable. So now let's reload the page and check. What do we have? And as you can see, here is our imagination. And now a second pages highlighted. So basically, because we're on the page to and we can try to jump to page six, and as you can see, the Ural is correct. So we jump here in page six and here our page changes. So we jumped to five and did is also changes. The on the problem is that the pages not rendering So basically we would like when we jumped to the other page to render the whole page. And this is not happening because we already mounted this component and this is exactly the same component for every page and react doesn't know that we want to revenge everything. That's why we can simply Fetchit with just one variable. So basically here we have used effect and we just re get eat on initial lives. But now we don't only want to trick it on initial ways, but also when current page property changes. So current Page is just a number and went, for example, would change it from 1 to 5 and so on. We want to render everything. So now we're on page nine with jump to page six and as you can see, everything started from scratch. So we had Lord in here and now we have items for page six. Then we jump to page for and we have Lord and again and so on. As you can see, just one variable here and everything is working. If you have any comments or questions, feel free to ask them in comments, and I will answer them for sure. 27. Popular tags: as you remember in our right side, bar off the global feed lists in all three pages. We have popular text here on the right and hear how it looks like this is just a bunch of tags which were rendering from a pie. So would be nice to great, separate, terrible component, which we can use in all three pages to render the list of Tex. And they suggest to make this component completely independent. So this component will fetch data that it needs on its own and render them so let's try this out. Let's create in our share a bowl components, new component, popular tags Don't, Jess. Then we're doing the same stuff as always. So import react, then Const Popular eggs. And this is a function and we want to return inside text with dif and here inside popular tags. And we want expert default popular tanks. Now we want to use it inside our global feed. So here we can import popular tax component from components slash popular tanks. Now, here on the bottom, you can see that we have called MD three and inside eat. We have popular text text for now, we can just render here for popular tags component. Now let's reload the page. And this popular text taxed now is coming from the component. So basically, when we change the text, for example, let's at exclamation mark here Under Lord the page, you can see that this is component. Our basic component is ready and now it's time to fetch some data Off course. We will use our use. Fetch cook for this so important. Use fetch from hooks slash use fetch. And here let's create what we need from tissues. Fetch. We will give here inside the Ural and we want inside to have a row response and dislodging . So, basically, as always, the structuring for response is Lord in and error. And it comes from Youcef Age and the Ural to fetch popular tags. Youth slash tanks. That's it. Now, as a second perimeter here we have our do fetch function. So let's get it here and we want to use it inside use effect. So for this we need to import use the fact from wrecked. Now let's adhere Youcef edge with the function inside and let's just right here. Do fetch! And as we were using defection side. We need to put it in the dependence here. Now let's reload the page and check if it's working. So here, as you can see in network, I have tags and point and we're calling it inside this component and this is the result. So here is tax property and inside we have all our tax. Now we just need to render them So what's the problem that I see now? So here we want to handle both is logged in and is era. And as you can remember, here in global feed, we already have the logic off is Lord in and error. So at least would be nice to have the same components for Lord in and error because we will use it in every page where we have errors. I proposed to create two additional components for error and dislodging. So basically, here it is terrible. Let's create first is lording or at least lording dot chance. So this will be our component for Leyden and basically want to copy a little bit from popular tags because we should have here also import react. We don't need to have used effect here, and here is const. and I want to cope It also So here will be const logged in and we don't need anything here and we want here tohave, text lauding and three dots And here we want to export Lord in component. Now we can update in on a global feed this cold where we have dif lording and changing directly to Lord in component. Now we only need to import this Lord in component here on the top import void in from components slash lawdy Now we can use this component in popular tax also and I want to do the same with arrow message. So let's create new component error message and let's name it here Arrow message. So I imported directly and it will be exactly the same. So when we have error, we want here to render arrow message and that's it. Now let's copy lording component and create error message component and just based inside and change Lord in tow Text arrow message. So here will be something bad happened and here will be Aargh message So arm error messages ready and we're already used it into places inside global feed. So we have here lording when we're allowed the page. You can see that we have lording and three dots. This is from the slide in component and we also have arrow message. So now we can use them both inside popular tax. So let's jump back in popular tags. And here we need to import error message from components, slash error message and also import Lloyd ing from components slash lining one. Who do we need to do now? We have is lord in end era and we should handle them. So here we can simply right ive is logged in and no response. Then we want to return flaunted also, if we have an era, we want to return here our component aero message. And now that then we will have popular tanks. So basically, whenever Lord the page now you can see that we get first lord in ports on the right and then popular tax. So basically, when our a pickle is resolved, forget here popular tanks. Now we're ready to render our popular texts so it will be returned. And here we need round brackets and inside it will be dif for the side bomb and dif will be with class name class name sidebar and then popular tags inside we can delete. And inside this dif we will have p with text, popular tags and then after p it will be deep with class name tag list and we're closed here and now inside this dif, we will go through response the tags. As you remember, all our tags are strings and they were in response in tax property. So here is a map for tag. Actually, we don't need additional brackets here. Tag. And here inside, we want to have a link to and here will be a your l for the tax. So it will be slashed tags slash And here is our tags, which is strength. And here we closed the link inside Link. Actually, we also need falling toe, have class name, and it will be tag default, tank pill and inside our link, we want just to have text tag and we also need a key here. And let's check. I think we will get a narrow from react. So festival getting error that we need to import limb. So we are importing link from direct Route dome and now we should get the warning off react . Yes, this is it. I think that each child of the least should have a unique key property. So basically, here at the bottom, we should get a tag and use it as a key because our tags are unique. No one will allowed the page. We don't get a narrow. And as you can see, our popular tax a rendered and each tech has a your L inside, so basically weaken jumped two dragons. But this page is not implemented yet. Our popular Texas ready. If you have any comments or questions, feel free to ask them and comments, and I will answer them for sure. 28. Feed toggler: In previous video, we created popular tags in right side. Over. In this video, we will create few toddler. So basically this part on the top, where we can change feed and there are three states of feet, like when global food is active or your feet is active over in popular tag. So here on the right, we have hash and the tag name. And basically this is their your l, which we will use to render articles for specific tag. Soul, it's implemented, is in this lesson as we will use it in all three pages. I recommend to create new component in our terrible components. And let's name it feed toddler, don't Yes, and here is import direct from react. And then this is a kid toddler and we want to render inside some dif with feed Tegler and expert default. If you talk now, now, within the imported in our glove off feed. So on the top we can copy, error message and name it feed toddler and components he'd Tegler. Now we need to render eat on the top and let's check the markup. So here we have toddler and items and this is Fito go directly inside call m D nine. So basically here should go first fit, toddler. And after this photographer where rendering is Lord in state or error and so on. If we have this So let's reload the page here we can see fit, toggle a component, and then our main component. So now the question is, what do we want to pick inside? So, basically, we're interested in knowing what your URL is now active and basically other in tech or not , because, as you can see, here were rendered this tag part Onley. When we're in some tag and when we're in your feet or global feed, we have only two links here. So for me, the easiest way to implement this as this is all specific component, like one component for your feet we have already component for global feed, and then we later have component for tag feed. We can simply intact feel least give inside this feat, Tobler, The argument tag, which will mean that were inside the tag. And if we don't give it inside, then we are not. So let's try here. We can given props, tag, name and then we give inside markup and we check the last link. And if tech name is there, then we will Vandy. So let's do it now. So here we have returned with the class name feed taco and the clothes on a dif Then inside the we have all plus named love enough pills Oh, line active Now inside you l we have three lease and firstly will be enough Itim And let's close our league and inside leave We will have enough link and my novel in can not link you already remember the difference Novel Inc will highlight the active link and this is exactly what we want. So basically, if we check this element here, you can see novel ing and active So basically out of the box, we will get this nice highlight him so not linked to and the first link will be slashed feed So this is our feed off the current heusen and we also need to have class name here and it will be enough link and let's close it. So here is now blink and inside it we want to rent a word your feed. So let's check how it looks like And of course First of all, we need toe m important love link from react route down. So now let's the Lord project. And as you can see here we have your feet and this is the first item that we have here. Now we need to implement global feet that we already have. So let's corporately because it will be exactly the same. Also not item and here not link will be slash and he ever want to put a tribute exact for the same purposes like and route him. So basically, because we have slashed here this year, l will be always highlighted. For example, when we're on the feet and of course we don't want this. That's why we're saying Please direct route check that this year. Old fool image and not Onley Partial image. How were you around? So here we will have global feed and let's reload the page. As you can see, global feed is already highlighted because we're on the home page and now the last link will be with tag name checking. So basically would want to Brenda this part on Liwen Tag name is there. So basically we can rise tech name and and here will be our technique. And here also will be enough item but not link will be different. So basically here will be link toe slash tags slash and here will be tech names and class will be the same. And inside we will drive I with class name I young pound and then we close our I tank and then it will be technique. So of course, when we're allowed it now it is empty. But let's try toe simulate it so we can simply give inside fit Togo tag name and it will be string dragon Then when we're allowed the page As you can see, Dragon is not highlighted because we're not on this route, so it will be highlighted later automatically. But it is there now. The only problem that I can see is that hash This icon from iPhone is not there. And actually now and also see that in our logo. The fund is not like here in the example, and basically this happens because of two things. First of all, we didn't Lord the fund for this lager. And second, we didn't Lord the CSS Aikens, So basically we can do it now So let's jump directly in index chairs, which is in public folder. So public flash, index jest and inside we can simply paste the link and there ling for the icons. So basically, 1st 1 is formed from Google R p with T Loom Web 700. And basically this is the front of which we're using here, as you can see here, enough brand with have fun family t t loom web. So basically, this is this fund and the next link that I lauded here is ironic icons and basically the icon that we used here. This I own pound is from the psionic Aiken. So now when we're allowed the page, you can see the tower logger looks different and we have had here. Basically, this means that this hash is lauded from our funds. So as you can see here inside E, we have before and this is the condom off the fund. So basically, this hash comes through fund. So at this point, our fit Tobler is already ready, and we can simply use it in all pages. Now let's jump back in global feed and just remove tag name from here because in this particular page. We don't need to say that we're inside the tag. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure. 29. Implementing tag feed: in previous video with finished implement our feet toggling In this video, we will implement a tag with the least off articles and basically it looks exactly like our global feed. You can see it here. So here is our global feed and when we jump to tag, it looks exactly the same. We also have here this fit Tobler the least pagination and popular tags on the right. The only difference is in a pie and point. So when we hear Lord the page and opened the network tub, you can see here. So when we jumped dragons, for example, our your l is different. So here, on normal global feed will ask for slash a pi slash articles with limit end offset. But you know, a tag will also add query permitted tag equal dragons. So basically, this is all that we need to do. That's fine. I recommend to call the whole global feed everything that we have toe our new component which will render for the tag. It will be tag feed and then we just adjust it a little bit. So first of all, let's copy everything. And now in our pages, we create new page and let's name it tag feed. Because basically, this is the feed for the tank and inside with heavy index jazz and let's based everything inside. Now we need to endure around. So basically here is slash global feed and we can add new page and here will be tag heat and the your l will be slash tanks and here will be slug. So basically, for example, dragons will be the slog off the tags. Now let's Imbert our new page and here will be import tag feed from pages slash tag heat. Now we're almost ready and let's roll on the page. So here, when we jumped dragons and reload the page bam, you can see that everything is working and there are a small adjustment that we need to do . First of all, we don't see our active tag here because we didn't give it inside in our feet taller and the next. This in point is not about dragons. It's articles from our global feed, so we need to adhere permitted for the tank. So first of all, let's check How can we know in what tag? Where currently are so basically with specified the tag in our routes. So this part tags slash dragons we can read inside our component. So for these, we can simply say, Okay, here we have tag name and we can really from match dot Haram's dot slog and let's console log it here to check if it's working. So here is Tech name coma. Tag me and Norman with a lot of that page. Let's open our inspector. And here you can see in browser that they have tech named dragons, which means that this is fine and we can use this tech name in this page. Now let's champ a little bit to our fit, Tobler. And here is it feed toddler and we don't give anything that side. That's why we don't run the attack here. But we can give here Tech name. And here is our tech name, and this is enough information for the few toddler to render our tag. So let's reload. The page is he can see now we get here dragons as our tag and the discolored highlighted like active. And then we come back to the global feed and tags no gendered anymore. Now we jump, for example, in training and here is training tank. The next point is to adjust our sky. So basically, here we have strength five with limit end off said. And did you can see network? This is our query parameters for a bear in point. Here is articles with limit end offset. In our case, we want to add new perimeter which is called tag and it is a close toe tag name. Now, whenever the Lord the page, you can see that we get new query with limit offset and tag training. That's why now we see not everything from our global feed but articles which are related toe training. Now, when we jumped, for example in dragons and the Lord the page, Now we get everything which is really Lord Toe Dragons. So here is in any chi endpoint, you can see that we have articles and tag his dragons. Now we also need to rename this component from global food toe tag He'd and expert eat not with global food, but tank it and you can say like what's the point off? Just could be paste in the component by country involves Raul. Sorry, just render our normal global feed in here in Texas and then add some if condition for tanks, and we could use thes. But it does not make any sense because in the moment when you need to adjust something in tech page, but not in global feed, you just lose the time and you need to write inside, like 10 or 20 ive conditions to check. Okay, If we're in Tech page and we have tech name, then we do anything like this. In these, I prefer to split pages and use, like one component per page and then try toe reuse what I have in the page. So for now we're reusing fit, Tegler Lord in a row message and feed completely with Spurgeon ation and also popular texts . So it's not a lot of stuff here that we have, and basically it's more about basic markup. What we can reuse from here is Bonner. As you can see here, this Bonner we can reuse as an additional component because it the same in both pages, or maybe even in three pages, and it doesn't make any sense to copy. That's why let's create new component in our components. It is terrible and name it bon indulge as and night Now I will just quote paste what we have here and change it toe Bonner. Now let's jump back. And here, as always, import tracked from wrecked and then comes to Vonna. And here is a function and we want to return and round briquettes and inside our Bonner. And now we need to export default Bunin, that's it. Now we can use this bonnet in two pages in global feed and in tech feet, we only need toe imported from our components. So here is Bonner and the component is named Bonner. And whenever the Lord the page now you can see that everything is working and our bonnet is total fan. What we can do now is jump to global feed and import ban it also here, Barna and our complainant is bonnet. And now we can remove this code about Bonner and just simply import our bond a component. As you can see, sometimes boilerplate is not bad and could be pasting is not bad. Always we are reusing a lot of component, but sometimes it doesn't make sense to try and achieve everything was one component. If you have any comments or questions, feel free to ask them in comments and I will answer them for sure 30. Implementing your feed: in this video, we will implement your few tub. Basically, if you look in the example, there is your feed. And here I have some items and when we reload the page, we can check in network. What in point is it? And here you can see that we have endpoint slash ap i slash article slash feed And this is exactly current user feet and we also use here limit end of said as always and we have the same response as always, with articles and articles count. The only point is that maybe for your user, when you are looked in, your feet will be empty. You can simply jump here in this Ural and Goto global feet and then follow certain people. So basically, if you will like here Oh, maybe click on the user and then follow and then you will jump to your feet. You will for sure get some you post, for example, I followed net ICS and here get new post from him. So how we will implement your feet. Basically, it's exactly the same. Like re implemented tech feet, we can completely Korpi this global feed and just implement it with you you around. So first Awful. Let's copy everything from on global feed. Now let's create new page and name in your feet, and we want to separate it from the global feed in case if we need new fish is that we will pack Onley in your feet. Now let's create new file as index jazz and based everything inside. Now we both jump in our routes, and here we need you. You are L for our your feet. So let's name it field. And here we will render component not global feed, but your feed. Now let's copy our global field import and rename it to your feet, and the same is here. Pages slash your feud so we're successful, added our route and let's jump bag in your feet just before we need to rename global feed into your feet. No, here, let's rename it also from global toe your feed. And now the whole code is the same like previously. And the only difference is it your l. So here we have articles and query parameters, but in our your feet, a pie will have slash feed. And this is the on the difference in this page everything else stays exactly the same. Now let's check how it looks like. And when I reload the page, you can see in console that I get for 01 era, which is completely logical because I'm not like it in here and I'm on your feet, which basically means this is not correct behavior because we can't get your feet if we are not locked in. The easiest case to solve this problem is to simply hide this link. If we are not locked in because it does not make any sense for user to show elements with which user content direct To avoid this behavior, we just need to add current user check in our feet. Tobler. So festival. Let's corporate from somewhere our check for current Heusen And here in North Indication we have this current user state. Actually, it's not used here, and we're using on the set current user so we can remove it here safely. And now we want to corporate. It's cold and injected in our feed toddler in our world components. So here I paste our use context, and now I need to import everything. Trust will be used context and then second will be import current user context and this would be restructuring from and here is context slash current heusen. So now we get current using context and actually, in our case, we need current user, state and said current user state, we don't need. So let's remove it and Consul Log here, current user state. Now let's load the page. And as you can see here in our fit Tegla, we get access toe current user state. And basically, if the user is not like a teen is legit in should be false. So not now, but false. So we can simply grab this firstly in new condition so eaten break it's and we can start here with current user ST DOT is logged in you growth true and actually close to We don't need to write, so it will be just is La guillotine and then break. It's for our markup. So let's save these and it should look like this. Here we have current user is locked in. When we're locked in, we're showing the link to your feet. Now we can remove consul log because we don't need it. 100 Lord, our page as you can see, we still get the error because we're on the page where were not allowed to be. But actually, it's not a problem when we jump on the home page and reload the page. If User doesn't know about Feed Page, he can't access it off course. It would be also nice to redirect users from feed toe another page when he tries to access this page. And he's not like a team. But actually, for now, as you can see, we don't have your feed your l here, which means user won't accidentally click on it. But now, if I look in as you can see here, we have also your feet and global feed, and now I jump in your feet, and here you can see users and their posts the time following. If you have any problems or questions, feel free to ask me in comments, and I will answer them for sure. 31. Article page: in this video, Google implement single article page. So basically, in the example, one would jump inside article with these such page. For now, we've owned implement follow buttons and favorite article as well as comments. So basically it will be only information about current article and the user. So basically, we can say that we will create your out with slash article slash Slog as here. This is slug of this article. Verbal, fetch this one current article and render data from this fetch. One important point to say is that sometimes for article you can see here, Tex, for example, here we have four tanks. And when I jumped to this article, you can see here is the description of the article, the title user information and here at the bottom tax and what is interesting. This is the same tax and their looks exactly exactly the same like in our global feed. So it doesn't make any sense to copy paste this cold. So here, if I will open global feud at the bottom, we can see our tags here for each article inside the feed. So it's not global feed, but feed the jazz. And here at the bottom. We have article dot tag list and we're making here map to render these pills basically would be nice to move this cold inside terrible component like tag list, for example, so we can use it also inside our single article page. So let's get started. We want to jump in on insurable components and create you component. For example, tag list are Jess, and it's always win put here, react from react and create the plane component. And it will be tag laced and we will give tags inside. Basically, tax is the array off strings, and this is exactly how we render them in that map. And here I want to return and here will go my markup. Now let's check what we have here in feed. As you can see here, it's do with map inside, so I will just copy it and come back in tech list component and paste it here. So basically we're returning this market with checklist and then said off article dot ug list will go map through our tanks and the code inside will be exactly the same. Now, expert default our take least and we're good to go. Now let's use this tick least inside our feud instead. So basically here we just simply right tag laced and inside. We need to give tags. And in our case, it's article God tag list. Now let's close this checklist and remove our will completely and you can see here at the top. I also the imported take a list from components that list. So now when we jump in our have Angela the page, you can see in global feed that our tags are still there. But now they're rendered from additional component, which is completely what we wanted. Now we can use this terrible component inside our article page. Now, let's start with creating article. As you can see here when I click in the link, because we already prepared the link, I get article slash and a slog as the same here in the example So articles and then slunk. So now we need in this page as this page is already prepared, you can see we have article. So here in our routes, we have article slog and here inside pages would have article were already created. It reverse Lee. So this is just a plain article component which is empty. We need here to read this slog, then fetch article by the slog and render the data in the page. So basically, the first question is, how can we read this luck? And as you already know, we have everything in our props that we pass inside auto magically from reactor alter. So in our case, long will be props, message forums and slunk. And let's check if it's correctly. So here is slog icon selected. I relied the page and this you can see in browser in console We have this slug that we will fetch. So our slug is there and we need to create DPR You're out which we will fetch So here will be slash articles slash lung So this is the euro off a tie that we want to fetch. The next thing is to import our use Fetch who from hooks slash use fetch And now here we can write that we get response and era and is lording and also do fetch function And this from use fetch were inside were given our a pair your l that we're prepared now We need to do this Fetch on initialize like we did previously. So here is use effect and now effect. We want simply to tree get this on initialize. So here will be empty array as a dependency. So this means it will betray get on the ones And here we called the Fage. We don't need to give anything inside. And as we're using the fetch in our use effect, we can add it in our dependence is list. Now, when we're allowed the page, we can see that use effect is not imported. So let's imported here is used in fact and we're allowed the page and we can see in network that we have this call here slash ip I slash articles and then our slunk and in preview, the reason article. So here is information that we need also tag list and here is also so basically all information that we need to Orender. Now let's said a markup. So basically here we want to return not just article, but a lot of markup for this page. So first we have Deve, I will remove cold inside and this deal will have class, name, article, dash, page and inside first. If we will have dif Bonner. And what is Bonner? This is this part with their title and user. And basically, it doesn't make any sense to render this part if we don't have an article because we simply don't have enough information inside to render something. That's why Let's create here. Dif class name Barna. And inside the thief, we want to add condition that we ran the code inside on live in our responses. That so basically here, if we're not in, is Lord in state and our response is already there, Then we want to render something. And what we will render here is the last name container. And then we closed the Deve and inside it, we will have each one. And this is the title off our page. So this is response. Don't article the title. Then after each one, we want to have a beef with class name, article, mater, and this is meant information involved article. So inside this deep article, meta we will have link to and here will be your l off the awesome. So we will create it in a second. So let's close here our link and inside our link we will have image. So this is the image off the author. So it will be response that article dot author dog image And we also need to add I'll text just to stop screaming from years Lind now here is linked to And it will be the link for user Ural So here will be profiles and I need toe rabbit in string. So slash profiles and here will be slog off the author So response that article dot author oh therm dot user name. So our link is ready and we need to import it now. So here is impart link Wrong direct route and on now here is the link for the author and after this we want to have dif class name inform and here will be information about the author. So inside this they will be also Link Whisk Last name actually weaken copied because it'd the same completely Because we also have a link for profiles here But inside we want to show something different. So here inside we want to show the user name off the author so response article well through and user name. And now after this link, we will have spent with the date when this article was created. So they suspend with class, name, date and inside eat. It will be article first response Don't article dot Created at That's it. Our bonnet is ready. So let's reload the page and check if we have any errors. And yes, we have here is candidate property. User name off undefined. And let's check why it is happening. So here I rode also not correctly, but it was mistake. And when were the Lord Page? Now you can see that we don't have any errors. And as you can see, our Bonner is empty by default. And then when we have data, will feel all this data with title And here is the icon off the user. And this is the link for profile of this user. Here is created date and the user name off This user Now we need to render article information. So here, after using Bonner, will be dif class named Container and Page. And we closed the tag and after dif inside, we first want toe Lord the article. So we want to show here our lord in state. So if we have is Lord and then we want to show Lord in component and here I close it and let's check on the top. This component is automatically imported here. So now we shall hear Lord in when it is there. Also, we want here to check for the era. So if we have era, then we want to render Aurora message component And let's Claude's these tank and after these upon to render our article if it's not Islam and in and if we have our response already so then we're ended thes part and inside it will be dif class name Joe and article content. Now let's close this, Steve. And inside we will have dif and inside Second, if we will have to be and inside this be it will be response article body. So it will be main part of our article where all text is written and after these dif we want underneath the vendor our least off tanks. So we're although the created checklist component so we can simply use it here and we need to give inside tags and it will be response article and tag list. Now let's close this tech least and here everything is fine also after the's condition with response with one toe render age are tag. Now let's jump and check if all imports are there. So teg list error message lording, which would be fine with it. So let's reload the page. As you can see, no errors now were rendered our body. This is this part and here is our tanks. So basically this tag list is older, the here, and everything is working fine. As you can see, it was usage off our created hooks and terrible components. It's really easy and fast to create new pages. We just had some mark up some if conditions for is logged in and error and some components like tag list, which help us toe right less cold. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 32. Use reducer: in this video, I want to show you another hook which is named use reducer. If you already have experience with the Redox, it will be a piece of cake for you. If not, I will go step by step now. So let's look first in our current user context. So here I opened contact slash current user and we used here You stayed with an object inside. So why It's not good enough for us. So first of all, we basically need to know all properties from outside. What does it mean? We're here in authentication, for example. And we're calling here said current user state basically in here, we need to know to update is La Guillotine and is Lardin. But basically, when we're working with some classes or services, normally we don't know what what it is about from outside. So we just call some function and it would magically update what is needed inside in this case is locked in. And is Lord in probably we could update inside and just give response user inside because we know when we give inside response user, it means that the user is lock it in, and this Lord and is not needed anymore. We can right now our context to use reducer approach to make it more flexible and easier to understand. So first of all, for these we need to create initial state. And basically initial state is obviously the default state that we have exactly what we gave here inside. We can just copy Pasted and Putin now in your object. Now we need to write a reducing and reduce. It is a partner from relax where reduce city just mutable function, which updates state by specific action. So let's check here. So we created reduce it and it's a function would where we give inside state and action. Basically, state is the state of our component. In our case, it is lording is locked in and current user and action is some object with type, for example, set authorized, which gives us information about how we need to update our state. So in this case, we can simply right here switch for action dot type and type is some stream inside, so basically working, we will create an action. It will be some object with style, for example, said authorized and some another data for example, Pay Lord. And here we can given object off current user. So basically, in this case, we can handled the set off thrice enormous switch and update our state with our A lot. So in this case, we have switched for action type and inside the first case will belied in. So basically, let's check what we need to do in our application. So first of fall, at some point, we want to make logged in. So when we laud the user on initialized off, our application will want update this state and exactly these were doing in our current user checker. So when we jump here, we have here stayed and is lording. Basically, this code will change in our action is lying After this. We also need a case for set authorized and said unauthorized. And for now, this is it. So here is case for Lord in Stream and when our action type is law and we want to do exactly the same what we did outside. So we want to set his Lord in tow through the next case will be for us, said authorized. And here we want to return. And here we have spread off our state and we want to merge it with is locked in, which will be true and is Lord in which will be false. And as the last property here will be current user and it will go from action dot Peillon. So basically, this means that our action in this case should have property P Lord inside. And in this play Lord, we will have current user response. The next point is case that unauthorized. So here is it and what we want to do. We want to update our state and said here is luggage in false This is it. And we also need toe adhere default and our default case will be returned state So basically, in this case, we don't do anything. Now our reduce it is ready and we can start using our use Reduce a hook. So festival here we need to import use reducer and then we can create it inside our current user provider. So let's come in this code and instead write value equals and here use reducing and in use reduce as the first perimeter were given Our producer that we created and there's a second perimeter initial state. So basically the first permitted uses this function and second perimeter is initial state and we don't use you state anymore. So let's remove it for now. Now here we have create context. We don't need to give anything inside, and we can simply remove everything that it and it can be empty. Now this value we can simply give insight without state and said state So basically value equals value. So we already are affected our current user provider and we can make these changes outside toe handle our actions and the first place to do it is out syndication manual. So in this component were using current user context. And in here after we get response, we're making said current use estate end up dating here current user. So basically we can comment out this cold because we won't use it anymore and removed from here, said current use of state. Now the question is what we have here from use context. Now, basically, we have here current user state and this is exactly the same object that was there previously. This is just a non object with his Lord in current user and is locked in and the second perimeter is also set Her but not said current user state. But dispatch and basically now we named this said always dispatch because we will dispatch an action to update our reducing. So in this case, we don't need current uses state here because we don't use it, but a road here it for understanding. So basically now, from use context, we always get current uses state and dispatch. So let's remove first problem meter and use dispassion, Al. So instead of this said, current user state would want to ride this page and inside we will write an object with two properties. Those property will be type said authorized. And this is exactly the action name that we created. And the next will be Peillon which will be response dot user. So basically responds. That user is that we give here inside current Heusen. So it should be enough information to do the section So basically in here we're calling dispatch and we also need to right here dispatch in dependencies and now we jump back to our user context and this dispatch with action goes here with state in action and we're coming here in set authorized and said Isla getting toe through is Lord in tow, False and in current user was said what we passed here in action Pilat. In our case, payload is response that user. So as you can see, we removed a lot off cold from outside and made it more visible. What we're going to do so basically here is not clear what happened. But here we know. Okay, we're setting current user as authorized. So now we can remove this part and update the next place in the next place where we're using current user context is current user checker. So here we also have used context and we also don't need state and we simply can use this space here. So we're getting this page here. We don't change anything in imports. And now let's crawl a little bit. We have a lot off calls for the said current use the state, actually, for them or even five for anything. So here, first we want to call this patch and this is is log it in false. Basically, we're sitting here that uses is not authorized so inside we just given object with type said unauthorized and this coat. We can remove the next part after do fetch would want to say that current user is Lydon now , so we can simply dispatch new action with type lied in. We don't need anything else. And here also, we don't need current user state anymore, but dispatch as a dependency list. So here is first effect. And second effect is where we're surgeon current user. So here we have dispatched also and we don't need this code. And instead we will just dispatch type, set authorized and pay Lord will be response dot Husing. As you can see, the amount off cold is much smaller now and it's understandable what we're doing here. So here we're setting user as not Look at him here. We have lording here we have set authorized. Now let's check if everything is working. So we're lording page and everything seems to work. As you can see here we're getting my user and when they check in console in network, you can see that here is request for current user And this is exactly my user. Long beep. A user is there and state was updated because here we see the information about current heusen. And when we look, look out. Now, for example, I'm going toe local storage and remove our talking and then drill on the page and this you can see everything is working, and we have links for unauthorized user. So basically, we change our approach from set stato use reducer, and it doesn't look that bad because it's easier to understand our initial state and what actions do we have and how the world date our state. And the question now is what approach to use. And I would say that both approaches are valid and with the question is why we have to off them use reducer and your state. Basically you stayed is easier to use when you have, for example, one value and use reduce. It is easier to use when you have a complex object, for example, at least like three or four or five properties. In this case, it's easier to use reducer because you can simply understand better. How do you update your state? And of course, if you have some complex logic here, like you're calculating some things and so on, then off course it would be better to use use reducing and not you state. But as they said perversely, both approaches are valid. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 33. Article form: in thes media. I want to start with creating you post form. So basically here, in our example, when we're legit in we have a link, your article. And when we click here, we're in Editor. So basically in you article page, where we can provide title description and some body and also tax for this article. Basically, after this, we can go in some article and edited, and it looks exactly the same. For example, let's try full Barbas and Tag V, and then we click publish. And here is our article. So here is title here is body and we can edit article and when we click on edit button, you can see that we get in exactly the same form. So this is what we will create in this video. But as you understand, it would be really nice to make the shareable component between added and new, because it looks exactly the same and then doesn't make any sense to copy it. So let's get started. First, we need to create your route, So let's jump in our routes and here, for example, record p slash route and we want to create route for new article so basically it will be slash article slash new because it looks logical for me and component will be created Article Now we need to create here and you Page and import create article from pages slash Create article. Now let's create new page Feliz So it will be create article and this is the page off our article. I also would like later to create a form that we will inject in this great article in the same way, like in added article. But we want to separate how we fetch data. That's why we create two different pages. For now. Let's simple trick from react. And here is create article which doesn't have anything in just return text create article. So let's reload the page. We have a narrow pages last create article should have export default here and we export create article component. And now when we jump in, you posed and reload the page. You can see that create article component is being rendered so basically non create article . We want to fetch some data. If we need toe, provide them inside our form and our phone will be shamble and we want, then the it inside here, let's name it Article form. So exactly, it will be just new component article form, which will be terrible. And as we share it between pages, it will go in Rhode Component. So here, let's import article form from components slash article form. Now let's copy everything from here just to avoid typing again. And now we're going in our components. And here we will have article formed or Jess. So this is our share a bowl form which will be a dumb component. So we will just get some props and make changes outside. So here we don't need import and we can ride here article form, and let's remove this import and rename create article in article form. Now let's rely on the page and as you can see here inside our create article page were rendered in now article form. Now the question is what exactly perimeters doing need in the form. So I think it would look like this so basically would have article form and we have initial values and initial values is just adjust values like an object. So basically, if we have the form, for example, with title body and description it can be here is an object with title full, then body bar and so on and all other properties that are later used inside inputs. Also, we need errors and it will be array off errors from the back end. Which means that here we can render errors for our inputs if we have any errors. So basically it will be like object ways. For example, title. He's I think it would be array and here is ease toe short and so on and after errors we need on said meat. So basically answered me. It will be a function and here will be, for example, on Submit. And this is the function which where we will give data on the parent from our submitting form. So basically it's completely dump component will provide inside initial values errors if we have them from back and, for example and on submit function, which we will call you always said mean this form inside. So let's get started. As I already said, Here are props and we get here on submit than errors and initial values. Now we need to create containers like state for each property and this you can check Here we have title body description and tag list. So basically four fields are enough for us. So for these from react, we can import, use state and here create You stayed for every property so here will be titled And basically as estate would get here our title and said Title as a raid And this is you State and default where you will be empty string the same people have with description and set description. And here is you stayed empty string and we can copied because we will have exactly the same for body and said body and also empty streams as a default value. And we also have a tag list and said tag list and here will be you state also empty string . So our states are already there and now we need to provide market for these states. So let's right here are markup. So we want first read this in brackets and then in here we will have our market and first it will be dif risk. Last name editor page then article form. We can lead because we don't need it inside. First, if we will have dif class name container and page inside. Second do we will have a role. So dif class name patrol and then inside our role, we will have column So dif class name called MD 10 and also off said to be centered. So EMD yvonne and call excess 12 which means on the small screens it will get the whole space. Now inside our Kahlan, we want to rent it back and error messages and for now it is just text and later we will just trend. Here are component for beckoned error messages for now who believe it is just a strain toe , not forget about it later. So after this we will have formed and let's clothes this form. And actually we will submitted this form with answered meat and what we're given drops here . This on submit function will want to call here. So basically this component does not know what we do with this data and inputs later. We just simply give all values from all inputs outside and that's it. So here is submit on Syd Mead and now inside our form we will have Field said and close Field said. And in this feel said inside we will create in other fields, said with Class name, form, group and close filled set. Now inside this, Phil said, we will have our input so it will be input with type text and with class name formed control and form control LG And it will also have a placeholder and it will be article title and let's close input here and saved. Now let's reload the page and check how it looked like. So basically here will go later Our beckoned error messages And here is article title. So basically, if we will remove in our example the text, it look exactly the same and markup is completely fine for now, we also can buy the set title toe our input for these we can simply provide here value and our value will be title and also unchanged function on inside you'd it will be event and here is set title and inside were given you and courage it value exactly like thes were already did in our authentication form. So this is nothing new now in here we can Consul log our title to check that it is changing so title title And now let's try to change it And here, As you can see in console, our value in state also changes. Now we need to add other inputs to make our form ready. So the next input will be description. So basically I will copy the whole field set because it is exactly the same. And here is formed group then input type text, also with form control. But inside it will have placeholder, not article title. But what is this article about? And also the value here should be description and we need to call here self description with even target value. Let's reload the page. You can see that we have a description now we need to copy Feel sad once again But in this case it won't be input but text error because in this case, we want to have our body. So here will be text and we need to close text area here and inside. We don't need type text because it's text area. But what we need form control is fine from cultural LG we don't need but we need here to say rows equals eight, so visit the height off our text form. Now inside placeholder, we can ride your tico in mark down. So this is our place holder for our Nextera and the value here will be body and said body and it also goes from even target value. Let's reload the page. You can see here our text area and the last thing is tags. So here we can copy, feel sad and it will also be in the input. So here is input type text was form console and from control LG with the text inside and tags. And here this tag least and said tag list and inside even target value. So now here we can just check if we have all feels so here it will be fills title, body description and a tag list. But through Lord the page and check if it works. So here is title and as you can see, the title is there and all other fields are empty now. Description and description is also there, then Body board east there and some tag tags are also them. So our state is being updated and now a form is completely ready. Now the next question is about back and error messages. As you remember, when we charm toe authentication for all of the rendered here, back in error messages for our oath, Indication form. And we already create this component inside out syndication. It looks now that we need this component not only in page out indication, but also in create and edit forms. That's why we can simply corporate this component in our world component. So I will move it from here. You know, old models components and paste it here because now it will do terrible between pages. But we should not forget to change a little bit our authentication because the import won't be correct now. So here was import from Page South indication, and now it will be simply components slash back and there are messages. And let's quote exactly the line that we use to render them because we need this line in our article form. So here is our article form, and I'm pasting here back and error messages so it will look exactly the same. We get error from back end inside aero dot errors. We have our back and errors. And here is this component. We just need to import it. So import back and error messages from and here will be components slash beckoned error messages. Now let's rely on the page and you can see the arrow that we don't have era defined. And this happens because here we don't have era, but we get directly errors, which is completely fine for us. This means that when errors are there, we want to render this component. So let's check it like this. So here are errors. We get errors as props directly. So if this is empty or now all the terror, we won't render this. If we have something, we give errors inside back and errors. Now let's rely on the page and this. You can see we don't have any errors. As you can see, I forget to add published article button. So let's render it at the end. After all our field sets at the bottom, we will have one more, Field said. And here let's close, Field said. And inside this field set, I will ran the button so it will be, Phil said, also class name, form group and inside, I will have a button with type submit and with class name, but the button group, So re button button LG and then it would be on the right side so it will be pull excess, tried and but in primary and let's close button here and inside button, I will have text published article. So let's say it. As you can see here, I realized the page and they have published article. So our form is most ready. And now the only question how we can put initial values in our farm. So basically here we have initial values, but we didn't use them yet. Basically, it's quite simple. We need here, use the fact and does you remember use The fact will be called on the dependency list So we can right here use effect and say that we want to use dysfunction for our dependency list where inside bubble pride in the cell values. Which means every time when initial values would be said, this effect will be called and inside we want to update all for properties so title will equal initial values thought title and the same for other fields. So description will be initial values don't description, and for the equals initial values dot body and then take least equals initial well used dot tank list. So all our values will be propagated from outside. So let's check if it's working. So we need to jump in our create article. And here is our article form. So first of all, let's create here new on submit method, and it will be just a function where we're consul log data and this is what we get back. We don't know what we're getting here, so it's just data and inside here we will use on said meat function. So we're passing it inside our articles. Phone will also have initial values here, and let's just create them as playing object. So initial values. And here is titled, for example, food than description bar, then body buzz and tank. Least So, for example, pvv. Then we need to give this initial values inside. Now the only thing that we need to give inside these errors and let's create for now Arabs as empty objects and here give and errors inside. So errors equal errors and let's save this form. So we provided all data that we need in our article form. Let's reload the page, and as you can see here, we get a narrow assignment or constant variable, which is nice to know, because here in our article form, I rode everything with Assignment Toe constant. And basically, when we're working with you, state worse need to use set and not directly assign a value. So here it should be set title and inside a gyu initial values thought title and the same for all forms. So here will be said description and initial values thought description And then it will be sad body initial values dog body and the last one will be that tag list and initial values dot tag list. Now we can remove our assignment, which was not correct. Now then we're allowed the page. You can see that our form is proof ILD from initial values from outside the last point that when it implement is submitted off this article form Now when we click, as you can see, the page was real. I did because this is the default behavior off forms in Prowse and we need fails to add even prevented fold here. When we click, submit button and also we need toe provide the data here outside because, as you can see, here we have our handle submit on outside on submit. But we didn't get any information because actually, our form was not submitted correctly. So let's hear. Name our method, not form on submit, but handle, submit. And this is our method here. And let's create it. For example, after all our corns and here is handle, submit would get here an event. And this is event from submitting the form so we can right here, even prevented fold. And after this, we want to provide the article bag toe our user. So here is const article. And let's write, for example, here, food, equal bar. So for now, we want here toe Kendall on submit and give inside article. So this is just a damp object with known data. But we want to test if this on submit will provide this article outside. So let's rely on the page and click publish article. As you can see here, the page was not real. I did, and we get in data for bar, which means everything is working and we simply need here to provide all data for outside so it won't be full bar, but first, it will be titled description, body and tag list, but with checklist we have a problem for us. It was an input, so it's just a stream. But outside we need to give it as a ray off strings, because basically, teg list is the list of tech like full bar bus. But basically later we will use them as Fruit Street, different tax. So here we can write big list equals, and here is our take least, and we want to split it with space. In this case, we will give outside array. So this is it. Our article is prepared. We gave it outside and let's check if it's working. So here is our title and then description and then body. And here is tax kuku E and 10. Now when in click published article, As you can see, we get an object outside with correct body description text list as an array and title, which means we successfully created our stateless form using hooks, which was quite simple with use effect, and Kendall said, meat and we can use this article form everywhere, for example, in create article or edit article and also then the errors. If we have any. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 34. Create article: in this video. Google, finish creating article page. Our article form is already ready so we can jump back in our create article. And here we already have on submit. But we don't do anything here and initial values. So basically, let's update our code. So our create article will be fully functional. So first off, all we want here toe change all our initial values in empty values because this is create and in create form, we don't have any values by default, so they should all be empty. The next point is the EPA your l to create an article. So basically on submit, we want to call, do fetch and posed in our beckoned The data that we get in answered meat here in data property. So follies will first need to import use fetch from hooks, use fetch. And now here let's make an intonation. And here will be our pay your l to make post. And for us it will be just slash articles. So basically it will be opposed request for articles with somebody. And here we need at least response and doof edge here and here we will use eat I fetch with our euro. Now, when we submit our form in on submit, we can make do fetch call here toe pulls data for beckoned. So here is Do fetch and inside were given an object and the first property will be method and we want posed because we create an article and of course, in edit article bubble use pulled. And also we need to provide data which in our case, will be object with property article. And basically this is article is the article from our article form. So let's name it here. Not data, but article and also remove our council log because we don't need it anymore. Let's check if this code is working. So let's reload the page. We don't see anything here. Now we feel all data and go to the network top. And when we click publish article, you can see that we have a request. And this is the request a pi slash articles and disposed with 200. And inside here we give our article with correct fields and that's why it was created successfully. And they said the response. So, in response, we get our article with author. This is my current user name also boarded tank list and so on. Basically, our article is being successfully created where zip I call now. We want to do exactly the same logic like we did in our indication and just remind you here with her. The property, which were named, said Iscar is successful submitted and it was false by default. And when we got a response from our ape Aiko with said Is successful, submit toe room and then checked in this condition here if we have a successful submitted, which means we got a response after our success off epic Oh, very direct user toe slash. Basically, we simply want implement the same to make this form closed and redirect users in home page . So let's jump back here and create you. You state so here we need to import you stayed and use it here, for example. Let's name it also is successful submitted to have it in the same logic across our application. So here is a successful submit and said it's successful, said meat, and it comes from you state and fold value is false. Now we need an effect to listen it in here, for example, I prefer always to do my effects at the end. So first I have properties and states. Then they have functions. And after functions I have effects. So here issues effect and we want to subscribe here for response. So basically, when we get response from our post, we want to check if we have response or not, because here it will be now by default. And if we have it now, we don't do anything in Gesture Town. And if it's not now, then we want to call a successful submit. True. So this property is set to true. And after this we want to redirect user toe home page. So for this, we need to import redirect from wreck travel to don't now in here before our main part where we're in the form we can ride Eve. He's successful sub meat. Then we're born to render redirect so it will be returned. And here redirect component toe slash. That's it. So in this case, we're going here and fell strict will check if it's successful, submit true, and if it's true, we will redirect users. Let's check if it works. Use effect is not defined, so we need to import here. Use effect on the top. No one was allowed the page. Put something inside and click publish article. You can see that we were successfully directed in our home page. And this is exactly the behavior that we needed. The next point, our errors. So here we have constant errors and this is empty object off course. This is not what we needed. So we can remove thes. And now the question is from where we give thes errors. So basically, here we have our use veg, and we can get ero inside here. And as you already know, when we give some not correct data to the beckoned, then we have all errors from beckoned in a row dot errors. So here we can give error that errors. But the point is that we're going here, inside and at the beginning, Arrow will be now. So basically here would be nice to check if error is that. And if error is there were giving here, Earl, and if not, then we want to give here empty arrayed because all our errors are the rate. So it will look like this, for example. So here we give inside errors if we have them. If not, we give inside Empty array. Basically would be nice to not check for error. But we can do it because then we will get a row off. Undefined. So now let's reload the page and jum back, toe neck, New post and click publish Article. As you can see here we get some error messages here, and they were rendered inside our article form. So basically, here we get era and here Which check? Okay, we have era and you can see in network that response look exactly the same. So here is errors, property with three items. But as you can see, errors is an object and not array. So it was my bad. And we need to right here empty object and not empty arrange, but actually doesn't matter because of the check inside for map and it will work in any case. So here is everything empty. We don't render any errors and now we click publish article We get a narrow from beckoned and we render them here. And just to remind you, here is our article form And here we have beckoned error messages and reuse them here. So basically this errors that we gave from the top are going here as props and we render them inside our back and error messages. And here is beckoned error messages where we have just object keys and we met through them . Basically, this errors are the same in the responses, all through application. That's why we created component of end of them. Now let's jump bag our errors. I finished. And this is one small staff toe adjust. What happens if we go to this page when we're not locked in? So I jumped here and I remove my talking. And then I realized the page. As you can see, I can create article. But the problem is that beckoned will say 401 because we're not onthe rised and we don't give talking toe the beckoned. Basically, it's a little bit stupid, and we need to say to user that he does not. He can't accept this page so would denies toe at least redirect user directly to home page and not show this page if he doesn't have access to it. And we can do it really easy, because here what we want to do is we want toe redirect home page if the user is not locked in. So basically here would be nice to add one condition that we check for current user from our context. So what we can do here? You create current user stayed and we get current use a state from other context So it will be used context and inside current user context. So here is I have import from contexts and I need here toe also right use context. So here is current use estate Let's check what we have and as you can see in brows ever never Lord, you can see that this is our current user state and it is by default is leg it in now and then it is Isla getting false. Basically we want to redirect user if is like a tin is false But the problem is that become just simply right here something like this. For example, here we can write Eve, not current user ST dot is La Guillotine. And then this rejected already make here because in this case we will redirect user even at the beginning because here is La Guillotine is now If we will right here. If is lucky team equals false. It is also not correct because then we will try to render something here until we get current user. So basically the right approach here is toe first not redirect anything and not render anything until we get current Use a state fully so for these we can check. We have here current user and we can check if current user is La guillotine is not equal now and until it is equal now we want to not render anything So let's come in this out And here, right If current user state is luggage in equals Now I don't want a vendor anything so just returned Now this cold won't render anything here on this page until we get current Heusen So basically here it's difficult to see it because it just happens too fast. But when we try to look in it shouldn't be that fast. Do not see the difference. So here I am looked in I am a new post and I reload the page and as you can see, there was a small blinking where the page was empty and this is exactly this return now, so we're not rendering anything in this page until we know if we need to redirect user or show the content. And now we can simply add here, so we'll redirect to slash if it's successful, said me it happened or current uses ST dot is la guillotine equals false. So basically, this means that if it's successful, submit happened or user is not like it in. We want to redirect toe home page. So let's try now. Now, as you can see, everything is working and we see this page and actual Let's from of Consul Log here who don't need it anymore. And now Consul is clean or mostly clean, and now I remove this talking and reload the page. And as you can see, we're jumped directly in home page, which means that if I will try here, divide articles and then slash new and click enter, I go directly in home page, which means it's effectively for user to not see the page if he doesn't have access to it. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 35. Edit article: In this video, we will create a did article page and it looks exactly the same, like our create page. But for added so, our slug will be articles and here will be some slog. And basically, this is the slog off the article that we will end it and then we will create the same form . So basically, we could copy the whole cold and adjust it a little bit. But first of all, we need to create your out. So here we have articles New Let's Corp it. And here we will have article slash slog slash edit. So basically, this log will be the main important point for us from which we will know what we're editing now. So let's name it not create article, but edit particle. And now let's quote, create article and at ended article import from pages added article. Now I want to jump in pages and scorpion, create article and then paste it here with the other name. So it will be not create article but ended article. So I have a folder edit article in districts. Yes, inside and here we have not create article, but added article and expert default is also edit article. Now let's try to reload the page. And first we need to create some article and this is the form that we used previously. And here the most important part for us is network. And here we can check what we have imposed and this is our post. And here is the slog. So basically, this is our unique other than the fire for our article. So here we have slash articles than they d off the article. This is the slog and then ended. And as you can see where here now in edit page basically recorded the content fully. That's why we see exactly the same, like in create. But here is how when you're out. So the question now what do we need to adjust in our component? So basically, the only difference is that we want to fetch here this article by this slug and after refresh it. We want to prefer feel this initial values other cold, like said meat will be almost the same but here will be put and not posed. And here will be some small adjustments. So the main point is that we want one more use veg. This use fetch now is for post and we want to change it to put. But we also have a fetch off the article, which means we will have one fetch for fetch in article and one fetch to making put request . That's why I want to rename this response. Ero do fetch a little bit so we can distinguish easier between them. So, in our case response, I want in this case to the name toe update, article response and ero toe update particle everyone and also do fetch will be then do. Actually, we don't need toe have here other assignment, but just do update article. And here we saved these. And now we have local variables Update, article, response, update, article era and do, um, date article. So now we need to change everything. So here is answered meat and we have Method post, so it is not tried. And here we want first to have method poot and we also given article inside. This is completely file, but here is not do fetch now, but do update article. And in this case it is more clear what we're doing. Because we also have do fetch late to fetch article initial values doesn't matter for now. And what we changed Where? Update, article response and update Article arrow. So basically in here we have a response from food and we have errors. So basically, instead of era, we want to have update article era, and here, then update article era dot errors. We also have here effect with response, and we need to change this effect. So here should be not, if not response, but update, article response Also, we need to change this independency. So it is update, article, response. Now we say this and it looks like we change everything. Now let's reload the page and this you can see we don't have any arrow. Now, when we ride something inside and click on publish, let's check the network. And as you can see here, we have our syndication error because food does not exist on this year round. So here is your ole pie articles, but it should be a guy article slash, but almost all working because we change here to put and we're making food in now, as you can see and we also give article which is completely fine and we don't have any errors. Which means what we changed Toe update article is fine. Now we just need to change. Appear your l And what the school is that we have the same paper your L for fetch in the article by slog and for updating it. So basically here will be slash articles slash slug. And the question is how we can read the slug from here from your own and we're already dated in previous videos. So here inside props, we have a match property. So here we can get slog from major dot Haram's dog slunk. Now let's reload the page and try to feel all feels again Now, champ in network and click publish. And as you can see here we have a request, a pie articles, and it was put and we updated our article and jump toe home page. So basically, like almost everything is working out of the box because we co opted the whole logic and just changed a guy called Now, what else do we need to do? So we want to jump back, you know, article. And here is our article and then I D and added and this is exactly our article that we were changing. And now we need to fetch article here by the slug. We didn't do it yet. So here we want to help one more use fetch for fetch in the article. How we will call it. I prefer to do the same. Not response here, but fetch article response. And we also need here at least do fetch. So it will be Do fetch article and he ever have used fetch for a euro. And as you can see, here we have the same maker your l in update and in fetch. And it's really good because we don't need to create additional variable. Now, on the beginning, we want to do, do, fetch, article, and then save it in initial values. So basically here we have used effect for date and we want to have one more use of fact. And in this case, it will be to fetch article, so we will tricky it at the beginning. So here is Do fetch article. We don't need to give anything excited because this is simple. Get by Euro. And here in the dependency list we have do fetch article basically now when we're alone the page you can see network that were fetching something. And here is our request. And as you can see, a articles with God and in preview would get current article, which means we already got our data. So let's check here if the data is correct. So, Consul, aunque fetch article response, fetch article response. And when we re lauded at the beginning, we have now and then after successful fetch would get the article as an object inside and we can read some properties from here. Now, the question is, how can we update initial values? So for now here, our in the shell values are empty, which is not good for us. We want there to give values, but only one would get response. Which means this cold we don't need here anymore. But we need one more use fetch which will be tree get when we have initial values. Basically, this means that we want to have used a fact for fetch article response. So here inside we have a function and independency will have fetch article response. And here we check ive not veg particle response. Then we don't do anything because we can't. And now we concocted these initial values and put it inside here. But basically this is just constant and it doesn't work like this. And we need toe have here some state locally so we can put the state later inside initial values. So, basically, for now, we have them in const. But we need to create them state. So we can simply here create new state and name it initial values and set initial values. And here will be you state. And by default, it will be empty Object. If we will do here now, it will break somewhere inside when we try to get properties from now, if we have empty object and we'll try to get properties from it, it won't break the cold. So here now we need to call said initial values exactly here when we have our fetch article response. So here is fetch initial values and we want to get him to give inside title, which is fetch article response dot article dot title, then description and description will be fair tactical response dot article description. Also, we want to pass body inside, so it will be body Fitch article response article body and the last one will be tagged list and it will be fetch article, response article, dog tag Least So basically, this said initial values will happen on Lee after we get fetch from me and when we get fetch from, maybe I was said initial values. Then this state will be updated from empty object to our object with initial values, and we give it inside our article form. So let's check if it's working now. As you can see here, we get a narrow. That component is changing in a control, it input to be un control it and basically it's quite difficult to the bark. But I already know where is the issue. So in article form here, when the consul long initial values and then initial values, you can understand that we get an empty object. So when we're allowed, the page here in national values is empty object and all our feels are undefined. So we're setting them toe undefined. And this triggers this error. Basically, we don't want to set anything if initial values are not there. And for this case, our empty object is not the best solution. It will be much easier If here we will say that initial value is now and then at the beginning. You know that until we get initial values, it is now. Then we get them and this is object with properties. So now here we can simply right, if not initial values, then returned, so we don't do anything. If initial values are not there, no one will allowed the page. You can see that error is gone because we trigger tissues effect and do something online when we have initial values. And here, let's check if our update works. So here we get some properties. But let's right here like title, and this is description and this is body and then technique. East Q. W. Then published, and here we were redirected. Let's gym back in our articles, then edit. And as you can see our article, war saved and we get exactly properties that we need when we jump to this page. The only problem that I don't like is that after we submit this form were being redirected in home page, it doesn't make any sense. And normally for user, he wants to see the article that he created and non jumped a home page. So this is this cold here in edit article where we redirect to slash if current user is not La Guillotine or it was successful, submit and actually weaken just played this in two. And first we can have here that we detect user to home page if he's not locked in and second will be, even have a successful submit. So basically, if successful submit happened, we want to redirect user, but not in our home page, but to and here will be slash articles slash and here will be slung. So basically it will be the same article but the page and not the edit page. And as you can see here after we load the page, we get the era. That vaguely split is not a function here in articles form. And basically the problem is that, as you can see here, we created to tax and this comma between them, which basically means when we check the response that would get technologies as an array. But our article form want to have our tag list as a string for the input. That means that here, when we do initial values, we need to convert this array to string. So basically it's just enoughto have joined. And here is empty stream. And now when we're allowed the page, you can see that here don't have comma and wreck doesn't try toe just put in Andre inside input. But here we convert our array inside strength. Now, when we click publish, it should work. And, as you can see with jump directly in our article page and we have here title using information body and some tanks, which means we successfully implemented editing off the article. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 36. Delete article: in this video, I want implement links for editing and deleting. And if we check an example here when we jumped toe article, we have a user name date and then edit article and delete article buttons. Basically, when we click on edit article, then we jump in edit form and when we click on delete article, then it will be just deleted and we will be rejected in our home page. Basically, this had two buttons that who will implement now. So let's jump inside our article and check what we have. So this is pages article and here were and are article so we can adhere additional markup when we're logged in and current Heusen basically, because these two buttons edit and delete article, we want to show Onley ive. This article belongs to current users when we're locked in. If not, we don't want to show them because it doesn't make any sense. So basically here, First of all, we need to know if User is an author off current article and here we don't have access to our context off current user and this is the first thing that we need here. So we want here to get access to current users state from our use context and here will be current user context. And we need to import here not only use effect but also use context. And now we can use this current use of state toe understand if we're locked in or not. So let's create new function, which is called is Author. And he, uh we want to check if user is looked in. So basically, we need here information from article and from current user. So basically, here we have response. And in our case, this response is the response off current article. So first of all, we need here to return falls when we don't have current using information. Basically, it's logical if we didn't Lord current user, but don't want to show these two buttons. So basically, ive current uses state is luggage in equals. No, we want to just return false. Now, if we have current user will also need to check if we have fetched response. So basically, return falls here. Also, if h articles response is not there so or and here will be not fetch article response. In this case, we returned falls in both cases when we don't have enough information. Now we need to check if current user ST dot current user dot user name equals and here is fetch article response than article author. And here's the name and they want to say that this is not the best practice to compare by user name, because user name in some services can be not unique. But in our case, we don't get any ideas off current user or I d off the user user off our article. That's why we need to compare it by user name, which in this case, is not that bad. So, basically, is also function returns us through false dependent off if we're current user or not. So let's check if it's working. So Consul Long is author and here is is author, and we call it Now We jump in our project and we get fetch. Article response is not defined, which is completely correct, because here is just response, and here is also just response. Now reload the page and something that happened, and actually this is exactly our Arab that would get from the beckoned and basically we see this error message because we get for all four because we're trying toe Xs our article, but we deleted. That's why it is not there. In any case, as you can see is also is false, which is completely correct. Now, let's just jump in one article here that exist And here, as you can see, is author is true because we are the current author. And what is important at the beginning when we don't have enough data is also is false. So now when we create this is author function, we can render some additional markup with this condition. So here is our article matter, and we ended with stayed and inside you'd after article matter And here is the last dif we want to create new markup. So here we want to check for is author and here end and here will be our Markham. So let's check it. It will be span and then inside span it will be a link with two. And here we will have linked toe our edit page. So in this case, it will be slash articles slash and here will be response dot article dots lung and slash ended. So we closed this link here and we also need here Class, name and class name will be button, button, outline secondary and button small. So button ascend. We also want render inside this link I come and it will be e with class name I young edit And after this e v Bonn text headed article. So let's check how it looked like and with a lot of the page you can see here we have added article, but it not on correct intonation here in line. But on the next line, which means we did some mark up, not correctly. And the arrow here is that this block should not go after the but should go inside info. So basically, we just missed one deep and it goes exactly after info. And when were the Lord page? Now you can see that we have added article here on the right and we can click and we go directly in edit page. So this button is already implemented and now we need to add one more button so we can simply copied it and actually record because this is a link and we want a button now. So let's create button and it will be with class name button, but in our Klein danger and button small. And we also want here on click event and on Click on this button. We want to call function delete article. We don't have dysfunction for now, but we will create it in a minute. So inside this button will also want Aiken with class name. I own trash A and we close our I and then delete article. Now let's create delete article function or we will have a narrow. So here is the lead article and let's just create an empty function. When were the Lord the page? You can see the delete article button is there, and we can add some logic raid. Basically. Now we have the same problem as before. So we have here use veg, and we're using this fetch to fetch the article. But we also want to create, use, fetch for deleting, and we want to distinguish somehow between response for fashion and for deleting. That's why Let's rename all properties toe fetch article response than arrow would be veg Article a rock and is Lord and will be fetch. Article is lying Now We need to change these three properties everywhere. So basically here we have not response. But fetch article response. And here also it will be fetch article response. And here in Marca we check not is Lord in but fetch article is lining and fetch article response. And here, everywhere we have fetch article response again again, it will be just easier to understand where belongs this cold. So here, everywhere we have not response but fetch article response. So this is the end. And here at the end we also have fetch article Islam and in and here is fetch article era and here is again fetch article He's lined in and fetch article response And inside also Fitch Article response and the last time here hopes Now let's save this and check if we change everything correctly. As you can see, it looks exactly like previously So everything is working Now we can create one more useful edge And don't think about name in collisions. So here we want to create use fetch for the lead. That's why let's name everything with the lead article So here will response and this is delete article response And for now we only need response. And here we have not do fetch but do delete article and we want to create your stretch with the euro. And this is exactly the same year l But now we need to call it with delete. So first off, all is the easiest would have here Delete article function and inside with simply want to call do delete article and methods should be delayed here. We don't need to provide any additional information. We just say OK, please delete this article. We don't care the other thing that we want to Easter redirect users to home page after successful delete. And for these we want here toe add fun and it's no use effect. So in this use effect, we want to have a drag in our dependencies for the lead article response. And basically, if we don't have it, which means we don't need to know anything, So we just return. And when we have the response, which means the deal, it was successful, we want to set additional state and let's name it ease successful, but not submit. But the lead and we want to set it true. And now we need to create it inside here somewhere. so we want to have here is successful, do lead And here is satis successful delete and it will be you state And by default it will be false. And here we need also to import you stayed and now effect here he's tow sets is successful delete toe True, which means here we want to check if it's successful delete is true and when it is true, we want to redirect user toe home pitch So here is just redirect two and here re slash basically the same cold like we did previously here. We need to write three turn off course and now pretty understands the cold. So here we don't have also reduced act, so we need to import it from reactor halted on. Now let's rely on the page as you can see no arrows. Let's open the network and clean console and click on delete article. As you can see, we're on home page, which means that the lead was successfully triggered and here you can see that there is now our request. It I articles with slog and method is the lead. And it was success So 200 and after it was success we don't get any response. So basically it was the empty object. But the idea is that here is I would do delete article buster, get. And then here we checked. If delete article response was successful, then we send it said is successful delete to Trump. And when we said this property to true were a direct user toe home page. As you can see, everything is working and we're ready. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 37. Settings page: in this video. Google great settings page off our user as you can see when we're locked in here we have a certain slink, and when we click here with Jump to Ural Settings and here we have your settings form. And basically all this information comes from our and point about current user. So here is user name biography, email, you password and button update settings. Also at the bottom there is a button click log out and exactly this form we will implement in this video. So let's start with Ed in your router. So here is our routes and weaken simply corpus slash and make it slash satins and component here will be settings component. Now let's copy, import and name it settings from pages settings. Now we need to create this page so it will be settings. And inside we will create indexed on Jess Cuban, interact from wrecked and we're end here. Export default settings and here is called Settings equals empty function and will return here some deep, with exceptions to check that everything is working. Now, whenever a lot of the page and jumping in our settings link as you can see where on slash statins. And here is rendered our component settings. Everything is fine and we can start implementing our sentence page. So basically, do we need to make here if I call? Actually not because when we open network console here and reload the page well, did they have a call for current user? Because we're doing this request on every page. So as you can see here, we have slushy, priceless user and we get this information. This is enough information here to render all fields like, for example, image off the user, then email. Um, here is also user name, biography and new password. So all these we can get exactly from our current user context state, but we still need to implement toe fetches. One will be for put to update our form to update current user data, and the other one will be too long out, user. But let's start with our form. As you can see here we have several fuels. Basically, it's name, image, beer, biography, email and password. So let's create state for all thes properties. So here is used state and let's simply right as always here. So the 1st 1 will be named and set name, and this is you state and default really is empty stream. Then we will have here image and images Justin and put So it will be also said image with your state empty, strange. And also we have biography so bio and said via and this is you stayed off empty string and we also have email and said email And here is your state off him too strange and the last one would get passport. And here is said passport. And it will be also an empty street, as you can see super easy, but already did it previously, and we created our state. Now we need to add some mark up. So basically here let's say return and let's remove this. And here we return, do you and close the dif, and it will be class name settings. Page then inside first, if we have dif with class name, container and page and then inside with him, do you last name row And inside this role we will have column, and in this case it will be called Mt. Six and offset will be in D three or call excess 12 exactly this cold with head on previous pages where we just have a form and we want to show it on the middle. Now inside we have a Chuan tag and here we have class name, text, excess center, so on small screens it will be centered and here will be text your settings. Now, after each one, we want to render errors. So basically here, when we don't feel some information and we get errors, we want to render our back and error messages. So let's just tried here back and error messages toe not forget about them. Then we have here form like I already did in our article form, and here will be on submit and we need to create a function called handle, submit and in sizes form we have filled sad and inside, First Field said we have another fields that and inside this Hill said we will have our input and here will be, Phil said was cost name, form, group and then inside here we have input with tide text and class name form control and we also have here placeholder, which will be your l off profile picture. And here we close our input and save these Now our input is very and we need to buy indeed to our state. So basically, as you remember, we just simply need to provide value. And in this case, it will be what we created. Here it waas image. So here is value image and also we need on change you end and here will be a function. And here we get event and after this we want to call set image with even target value. So our image is ready and we can drill on the page and check if it's there. So Kendall submit is not defined. This is logical because we didn't create this function. So let's create handle said meat and this is just an empty function for us now. As you can see, we have here back in Dera messages this wiggle implement later and this is our first input . Ural, off profile picture Now we need to implement All are the inputs. The second input will be name. So here is a scorpion field said, and just based in it Here underneath, it's also class name from control. But here is placeholder, not your l, but it will be user name and the value will be just name and unchanged with Will you said name here. So second input is there and then winning the 1st 3rd input. So here we will have a field set for our biography. So it should be placed holding short biography and value will be bio and then said Bio, let's save this And the last one will be email And also we should not forget about password . So let's copy this. And here is in protect text and placeholder is email off? Yeah, this looks good and barely is email. And here is said email and the last one will be passport and we should not forget toe not put here type text, but type password. So here is type password and here is formed control and just new password text and verily, his password and said password. So basically as always, we just safe state in all our properties. After all, field sets at the bottom here will need to add new button, so here will be bottom and it should be with class name, but But l G button primary and pull excess right. And here will be update set in text and now also want here in button to have type submit. So we saved this of a button should be there and after our form, we want to have each are tag and then after one more buttered fall a gout So he have open and close button And here is class name, button button applying danger And here we will have on click and it will be low ground. So we need to create lookout function here also and here will be all click year toe log out text Let's say this and we need to create log out function here. I will just copy handle for meat and name it long out. Now let's rely on the page is against here we have all feels Ural of profile picture user name, short bio email in new password. So it looks exactly like these Almost correct. The main problems are that inputs are too small. So here, everywhere we forget to put LG so it would be input from control and form control LG Now let's save this. And now paste it here and then in all our in boots. So I have dated all our inputs and now it looked much better. As you can see, everything is big now, like here. And the only difference is that biographies, Trouba, text error and not the input. So let's go toe biography and here is text and we close it after. Let's rely on the page. As you can see now, Short biography was changed to text area. But to make it better, let's at Rose here, and Rose should be hate. Then it will be bigger so we can feel our biography here. As you can see, it looks exactly as an example. Now we need to implement a little bit off logic. So first, awful. Let's talk about handle in food. So here we're getting event inside, and we want to prefer to prepare our user here. So basically, first of all, we need to do event prevent default, that's for sure. And now here. Let's Consul Long, Kendall said, Meat. If we have all properties that we need, so it will be image name be on email and password. Now let's reload the page and boots something in each property. So now update Satan's. And as you can see, everything is there. But it is the same value basically because I wrote here the same value. So 111222333444555 As you can see now, the state is exactly correct, which means we have access to all states and we can put this information in our beckoned. Now let's said here our current user context so we can read values from there we needed for several reasons. So here is import and we need first off course use context here. And we also want to import current user context from contexts and current husing. So now let's hear get current uses state and this is the whole state and dispatch and as you remember here but don't hook have said current use estate anymore, but we use use reduce him. That's why we can dispatch actions and change current use of state. So here we will have used context current user context. Now we have access for current use of state and let's Consul log it here so we know what we're talking about. So as you can see here, we're allowed the page and at some point we're getting current Heusen so Basically, we need to update this data here and put it to the beckoned and basically to make it here, we need inside to make our food call, like using the use fetch and so on. And here the data will look like this. So we have data, and inside it will be user. And here is the object off our user with updated properties. So basically, this is thes object, but with updated properties from this form. So let's try to do this now. Here we need our use effect. Of course, because we're working busy guy. So here is used veg from hooks use fetch. And now, inside this use fetch. We want to give our your and basically here it your all. He's quite simple. It is slash user and we want to do put request for the euro. So now here. Let's get some things from our use fetch with a euro basically here we want to call our doof edge. So the second perimeter will be do fetch and we also will get something as a response. So it should be response and maybe also a narrow. And if we get a narrow, then we will render our back and errors. So now we can use these Do fetch in our handle Submit So here but we want to do is do Fage And we want to say here that method is put basically because we're using food when we want to update some data in our bacon. Now, I also need to provide data and this I already said it should be using here and at this point, we need to give inside all user data. So basically, if we would like to just give current user data, we would use here current use of ST dot current Houston. So basically it will look like this, but our problem is that we want to merge this current user state that we have with all properties from our states here from our input. So basically, for these, we can use here spread and just right like this. So this is $3 for spread here. And we also want to add, for example, image, biography, user name, and actually user name is name because of the name, the name and email and passport. So for us, it will look like this. So we're using here user and user is an object where with a spreading current user and then merging eat with everything that we have informed. Now let's check if it's working. So here, let's provide everything that we have. Likewise, 111333 email and you possible want. And now let's check what we get. We click update settings and as you can see here, we're making our request. So we have put a power user is correct. And here, as you can see, we're giving inside user and we provide all things that we have in our current user, and we override things from the form in the subjects of Basically, biography is from form email also user name, password and talking. And here in the preview, you can see that we get some errors like email is not valid possible. This too short and user name is already being taken, so basically this is a nice point to render our back and errors here. I think you already remember how we ran the back and errors in all our pages. So basically it looks like thes and here let's paste it correctly and we can remove our label and here we have conditioned if we get a narrow. We ran the beckoned error messages and were given inside air adult errors. So here we have a rock property, you know, use fage, which is fine. And now we need to import back and error messages from components slash bacon. There are messages. Now let's save thes Enderle on the page. And now let's provide some fields and click update settings. And as you can see here, we get errors from beckoned and render them on top and look and they look exactly the same like in all other places. Now would be nice to prefer few our form with data from Current Heusen. And basically we already have access here for current use of state. So let's create new effect which will do exactly this. So here is used effect and inside were passing the function. So what would want to do here? First of all, we need the dependence, at least, and here is a dependence. You will get current users state dog current husing and actually, when this current user is changing, we want to trigger this effect and for us we want to do this on Lee. If we have current Heusen, it doesn't make any sense to try to update our form if it didn't fetch current user yet. So here we will have current use of ST dot current user and be warned to check if it's there. So basically, if not current user, we want to simply return. And if we have it, we want update all our fields. So basically here will be set name and inside will be current uses ST dot current user dot user name And here we can compute, please and it will be said image and it will be current user dot image And as you can see, this is a lot off cold with can't use state current user, we could create new variable for this like current user equals current state the current heusen It saves us a little bit off cold but actually not much So here is current user state current user image also by your Griffey so current user biography and we also want to prettify in our email so said email is current user dot email and of course we don't want to pray. Define our passport. First of all because we don't get it from beckoned and second, because it's not secure. So here it is said that we need to use effect. We need to import it from red. So here is used effect and let's reload the page. As you can see here, all our fields are pretty find like damning image, my user name, biography, email and no, you password. So here you would just re Lord Network, so clean it and click update settings. As you can see, we're getting for Toto error and we're getting it because past what can't be blunk which means basically that we need to provide the password here. Always top date our settings, which is logical. So now we click updates headings and I get 200 as a response, which means everything. Waas updated. The next point is we want to update current user data after successful poot. So basically, for now, we don't care that we get some properties back and actually our current user is not updated , which states in our context, and it is still old. But after the make food want to refresh it. So basically it doesn't make any sense to call a tie for this because we already have all our data and we can simply update disinformation so we could go here now they use effect and here inside will be function. And we want to listen here for the response and basically inside, we want to check if response is now we don't do anything, So then just return. And after this, if we want here to dispatch and this you remember, we're using this dispatch to provide some actions inside our context. So in our case, it will be tight set off authorized. So we're saying, OK, we're authorized again. And here is our pay Long and payload is response. Don't use them. So basically, we're already cold. These dispatch after Le Guin in the user and we're using it for the same purpose with just override their state off current user with the data that we get from the beckoned. In this case, our current user will be up to date after making this put request. And also, if we're using dispatch here, we need to write it in dependencies. So now, after we feel that password and click update settings here are current users will be updated after successful put request and you can check here If you for example, will Consul lock here, Let's say by your Griffin. So here is our current uses state and let's check biography inside. So here you can see that we have in current use a property biography, biography and now we want updated. So this is 1234 And now we're making put request. And of course, we get in a row because they need to right here. Password. And here now we click update settings and our settings were updated. And now, as you can see in our current user, would get updated biography. And this happens exactly because off our effect here because we're dispatches that authorized again. If we don't do it, then this state will be old because we just made a put request. But we didn't update current user context. Now they last point is to implement Logan and we can start with using here event because we're clicking on the bottom and here we want to do even prevent default after the's would want to look out how you use it, and this means that we want to simply remove this talking from our local storage, and this is exactly what they did in previous lessons when I cleaned the talking and we were like it out. But we also need here to remove this current user information from our current user context because if we won't do this, application doesn't know that were logged out. So let's do this two things here. First of all, it's said talking and does use them as you remember, with all the decaf, local storage Huq and here we can use it to manage our talking. So here it's enough to just import on the top local storage use local storage Rome kooks slash use local storage And now here we want to have you array and we need here only said talking. And this, you remember in use local storage. We just give talking inside. This is our key in local storage, and when we will call this talking, we can update local storage. So here it's enough to just call said talking and leave here empty string. So basically these will just remove talking from local storage, and this is this easy. The other point is to clean information from the context So for these we can use this page that already used here. And as you remember, in our current user context, we have said unauthorized action index alert. This is an action to set. A user has not looked in and this is exactly what we need. So here we can just dishpan dispatch a type unset unauthorized. And this is it, As you see here, we don't need to provide anything inside, but here we're setting on Lee is log it into false. And in our case, we also need to say current user toe now because in this case, our current user will be deleted. This is fine for now, and we can leave it as it is. Also, we need to set successful, log out and re Lord the user from this page, it doesn't make any sense. Toe stay on this page after we clicked longer. So basically as we did previously, we need new state for no wind that we want redirect users. So basically here we can simply create, for example, let's name it successful, log out So it will be a success. Look out! And here is said, successful long gold. And here will be you stayed with false basically, by default It's false and then we want toe log out. User, it would be true. So we will set it toe thrown. So here is set successful log out and after we dispatch said unauthorized we want here to call said his successful log out toe thrown and after this is true, we want here somewhere on the bottom to render redirect to our home page, for example here we can simply right if is successful logo then we want to render reject component So here is ready Direct two And here is slash and we don't have redirect here So we need toe came party direct from react results Don't that's it. As you can see, our lookout is ready and actually we don't need successful boggled Actually we need but why it is written Not correctly. So here we have successful local Sorry and not said because it is a function so successful Law gold here and now it is used as you can see. So now let's roll on the page And here we click on long gold as you can see where jumping on home page and here in our application. Our local storage talking is empty, and as you can see here on the top, we're not logged in animal, which means our log out methods successfully worked. And we just rolled like three lines of cold, and our lookout is implemented. As you can see, we're already created settings page for the user and created update and log out. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 38. Add to favorites: in this video. I want to implement favorited off the article. So basically, as you can see here, in our example, we have our feet and on the right. We have like, button. So basically, when we click on it, it can be decreased or increased depending Who liked it before? So basically here, nobody liked this post and then we click on it and we liked it once. So it's one. But basically, this is because off our current user, now when we click once again, it is zero because we dislike it. When we click, for example, on some other post here, it will be increased or decreased toe to back when we like or dislike it. Basically, this bubble implement in this lesson. So this is the part off the feed. So let's jump toe our feed. So this is feed its and components slash feed. Now the question is, how do we get this information about how many people like this post and is it like, a toll or not? So, basically, here we can check out of network and we get the least off our articles, and here it ease and in Previ can see that each article has property favorite ID, which is true or false and favorite. It means if we like this article or not. So basically, by default, all articles for our current user will be disliked. So favorited false. And then when we click on some of them, it will become true favourites. Count is this counter that you can see inside this button and the chose how many people like this article. So basically now we need to implement it somewhere here after our in Fort and I would recommend to create additional component for it. We will have quite a lot of logic here, so you can understand we need to do some ape I call when we like or dislike. It will also need to highlight it properly and show counter. So it's not like three lines of code. So let's create an additional component freed and inside this component, let's name it ed toe favorites, and we just close it and the question is what we need to pass inside for sure. We need to pass these two properties favorited and favourites count because this is what we're rendering inside. It should be white or green This is Favorited and it should have account inside. So let's pass. Here first is favorite ID and this comes from article Dog Favorited and the other perimeter will be favourites Count. And this is the counter that also get from article daughter favourites count. Now let's save it. And now what else do we need? So basically here you can check in the example If we inspect the network and click on the link here, you can see that we're making request here and the requested state I articles then slog and slash favorite and this is posed which means that we need the slog off article toe make this request and here you can see that payload is empty because basically beckoned knows if we favorited or not. So we click once again and here we're making also favorite request. But of course you were just trolling it and here you can see that we have delete and not post. So basically, when we favorited like like then we're make imposed when we're unfavorable did where Macon delayed. So exactly for this we need toe put inside our component a slog so we can make this request using this lung. So basically the third perimeter will be slog and let's name it article slug. So it won't be that generic and it will be article dots lung. So basically, I think this is enough data in our component to create it. So let's imported here it's import and at the favorites and as our sheet in global components, we also need to put at two favourites to level components because we don't have other place to put it inside. So here is at your favorites, and here we need to create this new component. So add toe favorites dot yes. Now here, let's is always important, wrecked from rig and export before expert default at toe favorites. And here is our component at favorites, which is a function, and we return and two favorites now once. One thing that I forget here we have two favorites, but we need to wrap it in additional container because we want to position it on the right . So for this one, indeed with class name pull excess right, and now let's clothes the's dif and put our head to favorite inside the deep. Now let's Law on the page here and check if it's working, as you can see here, we're in global feed and we're getting some air. Oh, so functions are not a very only wreck child. So let's jump back in at two favorites and hear res two favorites, which is just a name off the function. And because this is not correct and it should be a markup. So here is Steve at the favorites, and now, which would work and Dizzy consumed the right. This is at two favors component. So basically it is rendered and we just need to implement it. So first, let's write props that we're getting here, as we're already past is Favorited is there then favourites count and article slug. So basically, this has three properties and let's console log them to know what is it about? So here is all three properties and let's reload the page and open console. And here, as you can see for each post here, we're having falls, which means we didn't like it and the 1st 1 is like then we get a count. This is the count how many people liked it and then a slog off the article. So this will really use for our eight i co. So all information is there and we need to add some mark up. So here we will have returned and inside it will be a button. And let's close this button and inside will be class name and here will be some classes and inside also will have on click. And here we will have handle like function, which sounds logical because of a click, and we like or dislike it. Now inside the button we want I come with class name, I own hard and we close here I now after I have spent and we closed here spent and we want the space here so it would be an DSP. And after these we will have the count. And let's say that this is five. So for now or actually we can rand eight from Favorites count because we already passed it . So, as you can see here, we don't have a function can't alike. So let's created here can like and let's just name it like empty function, so it doesn't do anything now. We're a lot of the page. We don't have any errors. As you can see, we don't have any styles and this is just a button with heart and counter here. So basically, counter is also defended and this is correct. And this is from the data that we passed And of course, we can click. But nothing happens. The next point is styling. So as you can see in the example, we have a border off this bottom when this Parton is just not like and we have greenish background when it is like so basically here we have some conditions in CSS in our classes for button, and I like always to solve it with class names, library. And we already talked about it in previous videos. So basically, it helps us to generate a string off classes based with some logic. So basically, here we can say that we have button classes and here we're calling class names. And here is the object and weaken right here, food through and then just used these buttons class names here as a variable and check. What do we have? So here I inspect this button, and as you can see here, we can button class food. So basically, here now we can, in just some styles with logic. So first of all we need here a class button and it will be always true. Then we have class button small and it will be also true. So basically, this means that this two classes we will apply to our button always. Now we have two more classes, one with background and one with border. So basically here is button primary, and this means the bank round. And we want to show and background when our button is favorited and we want to show button outline, primary and this is bordered when it is not favorited. So now let's check how it looks like. So we're along the page and this you can see it look exactly like it should be. So basically, the first article waas is favorited true. That's why it was background. And here it's with border. So basically it looks exactly like it should. Now let's implement our handle like function. So here we get an event as an argument and we want to make event prevented, fouled to prevent default behavior. Now we want to do a request for our beckoned. So is always all requests were doing with use. Fetch who and we need to import it from books slash Years fetch. Now we want to create our use Fetch hook. But first of all, we need any your own. So basically, as you already saw, we have your l slash articles. And here is article slog and then it is favorite. So this is our a pie. You're al and we need to create Do fetch. So here is a ray in the first argument Will the response and second used do fetch and then we're using use fetch with a euro When we did already this everything previously so it's just the same cold in every component. Now when we're making handle like we want to make do French inside So basically this is do fetch and we need to provide what method do we want to use? Basically, when we want to like something, we need to make a post request and we want to dislike with delete So basically here will be method and this method is based on property is favorited And basically, if article is already liked, then were born to make the lead call. If it's not like then we want to make a Post called This is it. Now let's check also the response here because we need it later. So here is our response. And let's open Consul and check how it works. So here is our response now, which is obvious because we didn't make any request. Now we click here and it was already liked. So it means is Favorited waas true? And here we open our network and we made a delete request which is completely logical Were made here logic that deal it request will be there if article is already favorited So basically this request is correct And did you can see here in the response we're getting back an article and inside this article we get favorited false because we disliked it and favourites count already changed. So basically we don't show these changes here And this means that we need to adjust our code So we will show here our changes from the beckoned so basically would be nice to update Our is ferreted and favorites count somehow with this response So basically what do we know here? We know that we create this component with some is favorited and favourites count So this is like initial value farce. And then we can make some request for favorite for like or dislike, And then we get response. And as you can see here in council, this is our response. So basically we can read it, Which means when this response is, there were already did at least one like or dislike. Which means for us important is not is favorited property, but is favorited, which is by default there. Blast response is favorited, which means here, for example, but where chicken is favorited and notice favorited and basically we show different classes based on is favorited. We need also to check the response. So let's until this. Now let's create new variable and it will be favorited with response. So basically, we need toe mix inside before value and response, and this is easy to do. We just check. Do we have response there? And if we have response, then with take is favorited from response article favorited and if it's not there, then we simply take is favorited basically, which means this variable after we're getting response will be what we get in this response . And this means we can just change this variable is favorited with response and here is not favored to his response. And here also, you've favorited with response. So basically everywhere using this very um Now let's reload the page. As you can see now it is bordered because we didn't like it and we have counter one. Now we click a need. And as you can see, our response is there and border was changed like it was first white and now it is green. But the counter was not increasing, which is completely fine. And when we click again, it should be white. Which means it's Favorited with response is working for us. But we didn't change our counter. So here we have favorites with Count and we didn't update it with response also. But as you can see, his favorited with response is correctly working. We click and then we liked it. We're click once again and we disliked it. This part is working and we need a new property and let's name is favorites. Count with response and we're doing the same thing here. We're checking. Do we have response? If Yes, Then we read Response That article dot favourites count. And if we don't have it then just favourites count and then here we just need to change. Favourites count two favorites count with response So this is just a new property with check response were rendered This response with the Lord the page Here we have one. We didn't like this article. Now the click on it, we have to and the article is liked. Now we click again and article he's disliked and the county is one. Basically, this means the tower component is fully implemented And as you can see, it's quite a lot of cold. It is good structured but it was a good idea to create additional component for two fair favorites because just imagine all this logic inside the feed. It doesn't make any sense and this much easier to read. If you have any comments or questions, feel free to ask them and I will answer them for sure 39. User profile page: in this video, we will start to create the last part off our project and it is user profile. So basically here in the example As you can see, we have a link to use a profile and basically we can click on it and we jumped toe profile . So here is profile and slash slog. And this is the profile of some user biography off this user. And here you have my post. This is post of the user and favorited posts. This is posed to that user favorited. So basically, exactly this page we will implement. So let's plan first what we want to do here. So basically, as you can see, we have slashed profile slash slog and this is my posts. So the post of the user and then we click on favorited posts and here the Ural is profile slog and then favorite And then we render active tab favourites and we surrender our favors . It pose. So let's create toe droughts for this bond for profile and second for favorited articles in this profile. Then I would like to split these two parts into different components. So basically this part on the top is the part about user profile and we will fetch our user profile here. So basically, we can pack now you the profile, this part and tabs here. And after this we have user articles. So basically recruit park this part in additional component, Let's say, for example, user articles and then virender inside feed our feed component, which we already have and also pagination. And we need inside to distinguish on what page where, like on favorites on not on favorites don't know from where to fetch data. This means that this part on the top is completely undependable off the part on the bottom . But basically we need to pass some data on this part on the bottom. So let's start implemented first ofall. Let's create new rounds. So let's jump in routes and here could be pay some route and our round will be slash profiles and here will be slog and were ended component user profile and it will be not exact because this is unique enough. Now we can copy this once again, and here we have profiled slog and then slash favorites. So basically, we have tuned you rounds and the same component user profile because basically, we can distinguish inside what we want. Aranda. And it looks quite similar. So here is import user profile from pages slash user profile. Now let's create this page. So user profile inside our pages use, uh, and inside we create you indexed on jazz and inside. As always, we import, tricked and create the damn component. So here is user profile and this is the empty function and return here Deve with text user profile. And now we need to export default This user profile. Let's save thes Andrew Lord, our project. So basically now, as you can see, we have global feed and weaken Jump here, for example, in adore name and we have here profile slash Edward and user profile component is rendered . So first off, all with Bondo, fetch a profile off this user by slack here. So first we need this long. So here we can get match from props and get a slug from it. So basically it will be inside Major Peron's dot slunk. And let's consul luck. If we have this, so slug and we're allowed the page and open console and you can see slug here. So basically slug is there and we can fetch profile. So for fetching, we need to import use fetch from who looks slash Use fetch. And here we have our you ate I your own. So let's have it here. Detail your l and it will be slashed Profile slash lock. So nothing different from before. Now we need here, toe. Make use, fetch. So we're getting something and we're using use fetch with your URL. So from here we will get response. And this response we will Randall eight. So we can Consul on this response the check if we get something. Now, let's reload the page. And as you can see here in council response is now because we didn't three get any fetch here in use. Fetch as a second perimeter, we need do fetch, and then we need to have you effect where we will treat your something. So here we need to add use effect and then on initialize. So here is empty array. We want to trigger something, and we need to import use effect here. And then inside, we can make do fetch. We don't need any perimeters because it's simply get request. So we're allowed the page and Disick unseen console. Where? Making this request. Here. This is this request. A pad profiles Eduard. And here is our response would have property profile with biography following falls and following means that we doesn't follow this user than image and user name. So this is some data and it's not for us to render user profile here. So as this page is all about profile with, there is no sense to try to render something like Mark up at all if we don't have profiled . So for this we can simply right here. If we don't have response, then we turn. Now. In this case, we won't render anything at all until component is there. And as you can see, we have no blinking because we're rendering Onley after we're getting response, which is completely fine for us because now here we can use directly hours points and don't think about off. We heaven properties inside or it is still now and so on. So now it's time to add some market. So here will be dif with class name, profile page, then inside First Chief, we need de with class, name, user in far and inside second dif It will be indeed with plus name container and then inside Deve with cluster named role and inside Google Brenda. Sorry, Deve with class name. And here will be called Excess 12. So delicious, Full wits. Then call em de 10 and off said MD one, So it will be centered. And now let's close this column And inside this dif we want to have an image. So this is image off current profile. So this is image, class, name and user image class and then we have out. So we don't have roast from Yes, Lind, And then we have source. And in this source, we need to provide profile. Actually, this is common from response. So responds thought profile dot image This is it. And we just need to close image tank. So after these, after this image lates have age four and inside we will render user name, so it will be response thought profile dot user name. And after this, we will have p tank with some biography inside. So it will be responds dot profile dot biography and this is not correct. It should be response. And now let's reload the page and as you can see here, we have some content. So this is the default image. And here is the name and we don't have any biography because is not filled. Actually, we could get to use that where biography is Field over. Have an image, at least, So let's try to find such user here. All the users are green, which is not cool. So let's jump to my user. Basically, here we can simply right profiles and then my user. And actually, as you can see here we have a name, some biography. This is exactly what we feel before, and this is the image. And actually, as you can see, it's not default image, but some image that I applauded here. So our Markham for user info is ready. And basically we can start second part here. And this will be mark up for our Togo buttons here that you can see in the example my post and favorite posts. And then later we will randy here user articles. So, basically, for now, it will be dif class name container after user info blawg and we closed this container and then inside with heavy defeat. Last name so and inside role, it will be dif last name Cole Excess 12 Then call MT 10 and off said in the one so basically the same. But we have on the top because it should be also centered. And inside this column we will have our Tobler. So basically it will be class named articles Togo and the clothes these dif and inside articles. Ta go! We want to render you l least where we will have toe items. So this is UL with class name love enough pills and our Klein active. And let's close our UL and inside will have toe items. So basically this is Lee with class name enough item and inside it we will have nav link And as you remember, we used love link because it will inject inside active class, which means then it will be greenish when it is active. So inside Lee, we create enough link and here is too and the left link should goto my posts, which means this is exactly the your l where we're now. So we have here profiles and here will be a slog. So basically we can use user name from our response or, for example, slug. It doesn't make any difference. So let's right here, responds profile, user name and after these will also need class name, Love link and let's say you it and will, of course, need to import enough link. So he on the top important off link from direct route to dump. Let's reload the page and we have some errors and, as you can see, invalid property class. Did you miss class name so somewhere I wrote class and not class name And as you can see here we have class container and now here wreath our link and this is quite small. So let's check. Ah ha Actually will forget to add any content Enough link. That's why we have this problem. So here should be my post text And now when we laud the page, you can see that it looks much better. So basically, this is our toddler and this you can see active classes already applied because we are on this page so the next one will be favourites. So let's quickly hourly completely and then the difference will be that your l will be slash favorites, Favell reads. And now the text inside will be not my post but favorites post. And now let's load the page. And as you can see, we have my post and favorite post. So basically we can jump here. And as you can see, we have now the problem that they are both highlighted and this happens because wrecked route the checks for contains and off course profile slash log we have in both your else. So basically, to fix it, we need to apply here in the first link check. Exact and this attribute will help to distinguish if it exact match or not. So basically on my post to dis highlight it and we jumped the favourites posed and it's already highlighted. So after our two links here at the end would have full and then dif and here we want to render user articles and the as welded the discussed. We want to put this in additional component sold it. It will be much easier to understand because we already have here quite a lot of mark up and a little bit off content. So in next video, we will create user articles. If you have any comments or questions, feel free to ask them and dive Alonso them for sure. 40. Implementing user articles: in this video, we will implement user articles four user profile page, But first awful. The reason there. Oh, that we have, Miss Independency. We also don't know how to fix it. So basically, we just need toe end, do fetch, toe our rate off dependencies. Now, we don't have any errors and we can continue. So basically, the question is how our user articles will look like And what do we need inside? So let's check the example and plan our component. So first off, all for sure, we need a user name because we need to make a request here inside this component, which means the request will be the same. It will be slash article. So basically, this request profile slog, and then it will be slashed favorites, which means we can simply use this log inside to generate our ape euro. So, basically, let's say that here we will render user articles and inside your articles, we will for sure give slog all. Let's say that we give user name and user name is response Thought profile dot user name. Basically, this is hours long. The next part that we want to give inside is location and this you remember location is basically the property from our proverbs. So here we can get location like match and then we can read some information from location . And basically, in this case, we needed to read query perimeters. So, as you remember in our okay, I can't open global feed now. But in here, for example, when we open global feed here we have pagination and when we click on each other page with change pagination inside Basically, this pagination is search stream in our euro. And this means that we need toe check this search stream inside our component. So inside component. Then we can check this search string from location and then understand what Paramus do we have our on page one on page 10 and so on. Also, we need location to know if we're on favorites or not. So basically, when we're on favorites, we need to distinguish this path. So basically, if our your l contains favorites, this means that we are on favorites. So we need this insight for sure in the last part is what is the current? You're out and we needed to build correct pagination. So your elbow beam aged out here. L And actually, it looks like this is all that we need. And we can start to implement this user article. And as we needed Onley in user profile, let's just create components here and put it inside. So it will be user articles and the GS and let's input here, react from wrecked and create component user articles. And here is a function, and we get as perimeters, user name, location and euro. Now we want here to simply return Deve, please text user articles inside. And after this export default, use the articles. Now, let's save this. And what we didn't do in our page is we didn't import you the articles. So here is import user articles from and here is pages user profile slash components slash user articles. Now we can reload our page. We don't get any errors and hear this text user articles comes from our component. So let's hope in our component and start implementing it. So first awful. We need to know if we have favorites page now or not. So basically, we can check here location and as you can see in console, it's an object and we have inside path name, and we can check our path name if it includes favorites or not. And if it includes favorites, this means that we're on favorite page. So let's create here. Nearby Rebel is favorites and then we make location dot path name simply includes and with includes with check If stream is inside path name and here will be favourite. So let's check if it works. So this is consul on his favorites. And now let's reload the page. And as you can see, it is strong now with jump in my posts and it is false. The next thing is to get off set and current page for our imagination. So basically, just to remind you, we have such thin as utilities and in utilities, we have get. But you're not home, and we have here search stream as a very perimeter and we get Theun back current page end offset. And this is exactly what we need here we can import, then get what you not all from utilities. And now here we can get back offset and current page by using here, get originated function and person inside location dot search. So let's check what we have offset comma current page and with a lot of the page. And as you can see, Offset is zero because we're on the first page and page is one. Now we can simply right here. Page equals five. And now the pages five end of said is 40 which means our begin auto works correctly. Now we need to prepare our article your around, and basically is you remember with string. If I Some perimeters like, for example, off said and limit inside to make a pie. Your l and he have also need condition if it's favorited or not. So, basically, maybe it makes sense to create the function additionally, to make our code more clean. So here is a power your own, and I want here to make a function. Get a pie, your l and we need inside at least user name and off said, and his favorites. So basically user name we need to create a year l offset when you discover a perimeter and his favorite will also need to create your own. So let's pass inside user name offset and favorites. Sorry, ease favorites and let's create this function just outside and this function will chin the raid for us what we need. So here is user name Offset and his favorites. I just make simple destruct, Cherie. And here first we need to get Peron's and just to remind you were using string if I so import string. If I from Quick Restrain, where every strained and this trend, if I converts our object to strong defied permit er's so basically here first we want to get Haram's as an object and then strong if I them. So basically, what is programs we want to check if we're on his favorite page or not. So, basically, even on favorites, we need some Peron's like, for example, Limit Off said. And Favorited and Favorited is the special perimeter, which says, What user is favorited? And then here we just simply have limit. Then Off said, and awful. And also perimeter will be user name, so it will look like this and we get a ramps. So let's just simply Consul Oak Paramus here to check if it's working. So here is Par rounds Coma, Haram's and now let's call here. We're calling here already. Getting your AL and limit is not defined and just remind your limit would have aesthetic variable inside utilities so we can simply import limit from utilities overload the page. And as you can see here, Paramus is limit offset and author, which means we're in the second case because we are not on his favorite page. So inside here, we need to pass in our A pie. Ural Limit offset and author. So let's check how it will look like. So here we want to have slash articles, slash and actually articles and then question mark. And then we have our strength defied perimeters. So here is string. If I and recall it was our Paramus and let's check how our your look like So here is your AL and let's check in council. So as you can see here, we have slash articles and then quit perimeter or thought where we have our slog. And then we have limited one and offset 40 because we're on page five. Let's check how it will look like when we jumped two favorite. And actually, as you can see, we don't have any query parameters. So basically here, articles and then favorite ID equals my slug and then limit. End offset. So basically, as you can see, the difference is this perimeter Aurthur or favorited. And then they pay your l is different And does he can see because of this additional function, our cold looks much better. Because in other case, we just need to write everything here and it doesn't look that good. So our EPA, Ural, is ready for both pages, and now we just need to fetch something. So here is using off use. Fetch who off course. And here inside, we will have a pair of your own. And this is the response we need here. Responds is Lord in and era. And as the second perimeter do fetch now here, let's check. We have import off use, fetch, which is fine. And now we need to make to fetch. So to make it, we need here toe make use effect and make this fetch on initialize. So basically, we will have empty array here and then simply Ryan defense. Because this is a get request. Of course, we need to import here. Also use veg. Sorry, use effect and from react. And then we reload the page. And as you can see now in network. We have this it I called for articles also and then limit end offset Because we're on page five. And as you can see, we don't have any articles because basically, this is page five and we don't have enough content to show. So basically, let's try to jump in the first page. And as you can see here we have nine articles and here are they so responses exactly the same as in global feed, which means we can now render the content. So here we have responds and let's simply return something here. And this will get Deve And inside this dif we want to run. The first is Lardin If property is lined in So as you remember, we have special component Leiden and we can randy it, man, we have lied in. We also have special component for error message and we simply need to import it and with under than error message when we have errors. And if we don't have is Lord in and we have responds, we want to render our content with the least. Basically, we need here toe have feed and pagination. That's why I want to rob them in fragment. And does you remember fragment is this invisible container in drag to make things working. So inside we have first component feed. And just to remind you, we created feed like stateless component for global feed and now we can use it everywhere. So basically feed and we pass inside articles from response thought articles that said just magically was one line All our feet is there and the next point s pagination So pagination is our component which will end for feed and inside We need to give first total and total have in response towards articles count and we also need to pass here are limit and limited although the having this file and you're around and we already have it in this file and current page also So let's save this. And as you can see here we have also your l from props. Then we have current page from get pignata and limit So basically all things are prepared and let's check if we have correct imports. So here is Lord in error message feed and imagination. So everything is there but we get a narrow That fragment is not imported. So here with the structuring weaken input fragment from direct a little on the page and does he can see out of the blue. We have all posts here, and we also have pagination because I don't have that much post with he on the first page. As you can see all our post look good because we make the same component in all pages and whenever the law, the page you can see, like for the half of the second worlds Leyden, which means that our component with lower than is working and after that we see our components with feed and imagination. Let's check now if favorites is working, so let's check the network and click here and bam, you don't see anything and we didn't refresh in it him and you already know. I think, why it is happening. So basically we have the same component and we don't destroy it with un mount. That's why, even if we change the route, Wreg doesn't do anything because component is already mounted. So basically, we need to say forcibly that we want to make do fetch again and start from scratch. So basically here it's enough to just say to fetch because we need toe. And now we can pass simply this favorites property And basically this property changes every time. When location past name is changes, which means it is changing from Trudeau falls. And then we're making to fish again and we're starting from scratch. So let's check where on favourites post. Now we click my post and everything is rendered again. Now we click again and here is everything working, so we're triggering riff edge every time when his favorite changes. Also, we need to do the same thing for current page because basically one was crawled here. We don't have enough content, I think. But you can imagine when we click on page two, nothing will happen because here is favorites doesn't change and go fetch. Of course also So here we can just provide current page and then it will work because every time when we change a page it will be enough and we can actually try it. For example, we have page five. We don't have anything to vendor, but now we have one page which is not active. And when we click here, you can see that we triggered new eight. I call because of these current page. So we're already implemented our user articles with both pages at once. Everything is a profession. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 41. Use effect callback: we're already finished, implement in user profile and does. You can see here we can jump inside and have my posts and favorites. But we have one problem, and this problem is both here and, for example, in your feet and global field. So basically a click on your feet. Everything is working. I click on global feed. Everything is also working. But now let's try to click much, much faster. For example, I click back and forth, and as you can see, our consul is full off warnings. And here, as you can see reactive saying US cannot perform Iraq State update on amounted component it in the case a memory leak in your application. And to fix it, we need to cancel all subscriptions and the synchronised tasks in a use effect cleanup function. So basically, this warning is really difficult to the bargain fix and would be really nice from reactive to see it exactly the line where it happens, for example, and of course, we does not have it will simply have some code and react. And of course, we know that this is in popular tags, but actually it's not. That's why it's difficult to the bag. So basically from thesis warning, we have no clue way it happens. And of course, we can open, for example, of popular tags where it says but basically here we can't understand. What is it about? But what I can say you This is the problem in use effect, cleanup function, and basically here we have only one use effect and inside were doing to fetch. So basically, we can assume that the problem is somewhere in use. Fetch. So let's open use, fetch and check, but the problem so as you may be, all of the understood we have here excess inside and this is in a synchronous call. And basically it says that all a synchronised tasks should be cleaned up. And a synchronised tasks is, for example, fetching or some operations which last long, which means in here were mounting and a mounting components much faster than this. A Cygnus tasks are finished, which means we're on your feet. Everything is fine. Then we jump in global feed and maybe our your feet fetch was not finished and then we're in global feet already ended that moment. Excess finishes and here we're making some said States like said era or set response. But our component here feed is older the destroyed because we jumped in global feed and this is exactly the case. So basically, when everything is synchronously, then we destroy component and all states are also destroyed. And this is not the case with a synchronous code like set time out, for example, or some fetches, for example with access. And then we have this problem. Basically, it says that we need to unsubscribe from a sanction ist tasks when my way on Mount component. So basically this distinction is called that we're making does not make anything bad for us . It just happens in your feet, for example. Then we go in other component and it is mounted and fetched like we don't care that this fetch that was here is now not finished. That's why we could just wrapped the code with them. So basically the setters off state in some of condition, So we won't do them if component is not there. So let's just great here a variable where we will store if our component was mounted or dismounted. So here is not constant but lead because we want to understand this variable and it will be s keep get responds off to destroy. So by default it will be false. And after we destroyed our component, we will change it to trump. Now the question is how in this use effect, we can know that our component was destroyed. And basically for these, as you can see, we never return anything in our use effect. And actually, in his effect you can return something and this should be always a function so basically anonymous function here and weaken do Consul long and here is destroy. And now let's rely on the page. And as you can see, destroy was called three times and you can ask now, while do we have destroyed here when we just initialize the page and we didn't destroy anything yet And as you remember, react components of working in the way that reactor vendors component again and again, which means with each Aranda, the old component was destroyed and every time when component is destroyed, even with previous rendering, our effect are also cleaned up. So this function will be called every time after every Landrin, if we want to do some clean up in our effects. So basically, in this case, it will be destroyed quite a lot of times. So then we jump toe second page and we already have five that we jumped once again and we have seven and so on. And this is exactly fine farce. And now we know when we can handle these destroyed. So we have no this where rebels keep get response after destroy. So basically, we want to speaks, keep setting response, or is lording or whatever in the state. So basically, what we can do is just rub this two things in if condition so if not keep get response, then we're doing this. Which means if this variable is false, then we're doing sets, which means if this component was not destroyed, then we're doing sets in our state and the same in catch. So if nots keep get response after destroyed, then we want to, said the state. Now the question is when we said this variable and they think now it's others in our return function, we can assign it true. Now let's check if it changes something. So we're on our feud and I will make it smaller And now I will click really fast between these two pages. And as you can see for sure, our responses are not finished yet. But we've read them in the set in this condition. That's why we won't round sets for our components that were already destroyed and we don't get any errors. And basically, we don't care that the ransom requests for a tie that are not finished and because we just mounted you component and we fetched new data. Basically, this trick is really nice when you need to clean up something after we made our effect. For example, when you have a set time out with for some time er, Oakland interval or, for example, doing some things with Don and not with direct, and you need to clean something after it. The most important point. Normally you don't need to return anything from use effect like 90% of the time. But sometimes you want to clean something, and for these, you simply return an empty function and do whatever you want to clean Here. In our case, just one line off changes and now all our use effect everywhere will be cleaned out of magically and we don't need to think about it anymore. If you have any comments or questions, feel free to ask them, and I will answer them for sure. 42. Homework: we finished implement in our medium clone project. So we created the whole project and a lot of pages and components from scratch and, as you saw with, tried to re use as many components and hooks as it was possible to simplify future developing. And we learned together hooks not only in theory but in real project. So after creating the whole application with me, you can for sure implement new functionality tothis project or create your own projects off any complexity. And they suggest you do not stop here and to try and prove this project or create your own project, because on the one you will implement something on your own, you can master eat, so if you want to implement your own project. But you like ideas, here are several for you. For example, you can implement something like three. Long and thrill aboard is basically the boards where you can add some cards and move them between groups. So basically here is like in books and then in progress and don and you can move this car's between. So this is how it looks like something like this will be a nice project also, maybe an online music or video player or, for example, a clone off Netflix or maybe book platform. So where you can read books or, for example, just talk books and people can buy them, for example, some manager off your expenses and incomes. But the main point is that you should like the project that you develop, so just choose wisely and do only what he want. So if you want to continue improving our project that we did together here several ideas for homework So basically here in the example that we look, we didn't implement several features, and you can do them. For example, here we can jump in some profile and you can see here the bottom on followed or follow, and basically, when they click it, it's a follow. So basically, it's following and following profiles. So this is the first feature that you can go also when we jump in some post here, for example, in test post, you can see the direct comments here inside post, and we can simply create new comment and posted. And then we show this new comment and the user and where it was posted. Additionally to this you also need to implement removing off your comments. But of course, it would be possible toe only. Remove your own comments and not the comments off are the people also on the top. There is some additional information off this user with follow bottle and favorite articles . So basically, here you can click and add this Article two favorite. You can also think about garden roads a little bit more So basically here we have slash feed and for example, when I look out from my user account, I can just directly jump in feed. But it won't work, so it will won't redirect me somewhere in Logan or Seinen Page. But instead I just see global feed word and not in more so, basically would be nice when using champs in routes where he cannot go at least really direct him somewhere on home page or maybe on London page. So this is it. I hope that you like my course and learned a lot about wrecked hooks, and I see you in my next courses