Setting Colors with CSS Variables

================================

CSS variables, also known as custom properties, are a powerful feature that allows us to define colors and other styles once and use them throughout our application. In this article, we'll explore how to set colors for our chat room using CSS variables.

Defining the Scope of Variables

-------------------------------

To start, we need to define the scope of our variables. We select the root tag, which in our case is the HTML element itself, because these variables will apply to our entire application. The syntax for defining a variable is `--variable-name: variable-value`. Let's take a look at an example:

```css

:root {

--main-color: #333;

--secondary-color: #666;

--main-text-color: #fff;

--secondary-text-color: #999;

--send-message-form: #ccc;

}

```

These variables can be used throughout our application to set colors for different elements.

Using Variables in the DOM

-------------------------

Now that we've defined our variables, let's see how we can use them in the DOM. For example, we can use `var(--main-color)` as the background color for our room list:

```html

• 

  Room 1

```

And similarly, we can use `var(--main-text-color)` as the text color for our chat messages:

```html

Hello from room 1!

```

What's Cool About Variables

---------------------------

One of the coolest things about CSS variables is that they're reusable. We don't have to define these variables every time we want to use them. We can simply reference them throughout our application.

Let's take a look at some variable names:

```css

--main-color: #333;

--secondary-color: #666;

--main-text-color: #fff;

--secondary-text-color: #999;

--send-message-form: #ccc;

```

These variables are used multiple times in our application, and we can change their values easily. For example, if we want to switch from a dark theme to a light theme, we can simply update the `--main-color` variable.

Overriding Variables

------------------

We can also override variables by adding them again with a different value. Let's take a look at an example:

```css

:root {

--main-color: #333;

--secondary-color: #666;

--main-text-color: #fff;

--secondary-text-color: #999;

--send-message-form: #ccc;

/* override main color */

--main-color: #f00;

}

```

Now, all instances of `var(--main-color)` will use the new value.

Creating a Unique Chat App

-------------------------

To demonstrate how powerful CSS variables can be, let's create a unique chat app that uses our variable colors. Here's an example:

```html

```

We can use our variable colors to style this chat app:

```css

.chat-app {

--main-color: #f00;

}

.room-list {

background-color: var(--main-color);

}

.message-form {

background-color: var(--send-message-form);

color: var(--main-text-color);

}

.user-list {

list-style: none;

padding: 0;

margin: 0;

}

.user-list li {

border-bottom: 1px solid var(--secondary-text-color);

}

```

This is just a simple example, but you can see how easily we can change the color scheme of our chat app by updating our variable values.

Conclusion

----------

In this article, we've explored how to set colors for our chat room using CSS variables. We defined the scope of our variables and used them in the DOM to style different elements. We also discussed what's cool about variables, including reusability and overriding. Finally, we created a unique chat app that uses our variable colors. With CSS variables, you can create a consistent look and feel across your application by defining colors once and using them throughout.

Challenges and Stretch Goals

-----------------------------

Now that we've finished this article, it's time to put your skills to the test. Here are some challenges and stretch goals for you to try:

* Create an online user component that displays which users are online in a room at any given time.

* Add typing indicators to show when someone else is typing in a chat message.

By completing these challenges, you'll demonstrate your understanding of CSS variables and how they can be used to create a consistent look and feel across your application. Good luck!

"WEBVTTKind: captionsLanguage: enhey and welcome to this course where i'm going to teach you how to build a chat application using react js and the chat kit api i'll teach you this through 17 interactive screen and by interactive i mean that you as the viewer at any given time can pause the screencast jump into the code and change it you can then see how your changes affects the output so i'll encourage you to do that whenever you're confused so that you make sure that you understand the relation between the code and what's being displayed on the page and i'm also going to give you five challenges throughout the course where you'll for example be asked to finish up my code in order to reach a certain goal however if you don't manage to solve the challenge don't worry i'm going to show you the solution as well so by the end of this course you'll be comfortable using react.js you'll understand how to handle data how to structure projects event handlers hooking up with apis and a lot more secondly you'll also get to know chat kit which is a super nice api for creating chat applications it's basically an api which gives you the power to build whatever kind of chat app you want without having to set up all the infrastructure and hassle that's involved with real-time chat applications so by the end of this course you'll actually have built this chat application here it's a chat app with multiple rooms which you can switch through this menu on the left hand side here you can also create rooms and thanks to chat kit it's as fast as any other chat application out there and towards the end of the course when you've understood how the entire repository works you're going to get your own copy of this chat room through cloning the repository and save it to your profile and as a bonus i want you to have your own personalized chat application not necessarily just the same as this one so we're going to go through how to use css variables and css grid to personalize the application through easily changing the theme of the app and also to shuffle around on the different components and both of these things are super simple to do using css variables and css grid and there are also two hot new technologies of modern browsers that needs to be in the tool belt of a front-end developer in 2018 and once you've personalized your chat app i'm also going to point you to further resources where you can expand upon and build more complex features into the app finally who am i my name is peer i'm a front-end developer online instructor and also one of the co-founders of scrimba which is the interactive coding screencast tool you're looking at right now but without further ado let's get started on the first lecture of the course hey in this lecture we're going to have a look at the component architecture of our app because in react everything is based around components and before you start coding your app you should break the ui into components and it's a good idea to actually do it visually like i've done here using paint or preview or something like that to just draw colored rectangles around your components and the way you break your ui into this is by starting at the top so here the parent component the common ancestor for all other components is the one in red hair that's normally called app or main or something like that and it basically contains our entire application and then you ask yourself which direct children does this component have in our case it makes sense to have four direct children so there's the list of rooms on the left hand side here there's the chat area itself there's the form where you enter chat messages and there's also the form where you create new rooms so the app component has four direct children the green blue brown and orange one and then you want to ask yourself again which children does these components have and this is just a form doesn't really have any children same with this one however the message list component the blue one has a list of messages inside of it and it's totally reasonable to turn them into their own components so each of the messages is a component itself and you could actually also make the case that this room list component should have children as well because it has a list of rooms here and you can even extract this title here in a component it's basically not written in stone and the reason i've turned each of the messages into components though not turned each of these into components is basically just to show you that it's up to you and both things work though in general the more complex your app becomes the more you should split it up and a good rule of thumb is the principle of single responsibility you want your component to do one thing and one thing only so if you have huge components which does a lot of things you should consider breaking them up into multiple components so in the next lecture we'll look at how these components turn into actual code as we'll walk through the repository so i'll see you there hey in this lecture we're going to have a look at the code base architecture so you can build a mental model of how this repository works before we start coding we have the fully functional app here right now so don't worry if a lot of this looks scary to you because at the end of the course it won't let's start like we did when we looked at the component on a conceptual level which was at the root level meaning the red rectangle here the component which is the ancestor of all the other components and that is the app component as you can see it lies in the root directory app.js and this is also our biggest component this is where all the magic happens in these various methods here which will later on go through step by step for now though i want to have a look at the render method because here you can see that this component renders out four other components and they just happen to be the components which were direct children of the red one so the green blue orange and brown which was the room list message list new room form and send message form the reason we have access to these here is because we have imported them up here as you can see they have been imported from a component folder that is one you can see right here if we open it up we'll see five components here's the message component for example that is the one which is not a direct child of the app component but a direct child of the message list component the blue one here so let's have a look at the message list go down to the render method and it is indeed returning the message component meaning that the message component is a child of the message list component so hopefully now you're starting to build an understanding of how this architecture here translates into react code we can also have a look at the new room form and the room list and the send message form and as you might notice all of these components are much smaller than the app component and that is a very conscious choice because we want the app component to be a so-called smart component meaning it handles all the logic it takes care of talking with the chat kit api as you can see we've imported the chat kit sdk up here and it also takes care of handling all the data that's done in the state here which you'll learn a lot about in a few lectures so this is the brains of our application whereas the child components like this message here is in contrast actually pretty stupid they only take whatever data they get from their parent and render it out some of them also have some event handlers for handling input from the users for example the send message form this one down here but of course needs to accept user input however it doesn't do any logic of the data it just takes the data and sends it off and of course doesn't take care of talking with the api nope all of that is done in the app component and this separation is a best practice if you want as many of your components to be as stupid as possible while gathering the brains at one place higher up in the hierarchy as it's much harder to maintain an app if the logic is spread across tons of components so as much as you can try to have one or few smart components and the rest of the components as stupid as possible so let's have a look at the other files let's start with the index.html for example it is ridiculously simple it has a link to the css it also has a div with an id of root more on that in a minute plus it's also linking to the bundle of all of our javascript which is index.pack.js and this pack here is because scrimba is using webpack under the hood so it needs to refer to index.pac.js instead of index.js which is the one you can see here and this is where we're connecting our react app with the index.html file because as you can see we're importing the app app.js just the root component we're saying react dom dot render this app in the element with the id of root so we're taking our entire application which exists in app as that's the common ancestor for all of our components and shoving it into the dom which is exactly here then we have the styles and style.css and we're not going to go through the basic css in this course as i'm assuming that you know basic css however we're going to look at both css variables and css grid as that is two super cool new modules in the css spec which will allow you to build your own version of this chat app which is customized exactly how you want it now you can say goodbye to all of this beautiful code and the next time you see it you'll actually understand it as you will have coded it yourself or at least together with me and in the next screencast we'll actually start doing that so stay tuned and i'll see you there hey and welcome to the first lecture where we'll actually jump into the code and start building so now i'm in the app.js file and as you can see the app component is significantly simpler than it used to be i've removed all the logic so all that we're left with is the render method which here returns the four children of the app component that results in a significantly simpler ui each of the components are simply rendering out its respective name now we're going to start by building out this message list component here and it can be found down here so what we want to do of course is render out a list of messages down here so we need to remove this help text and write some jsx but first we need data and we're not going to hook up with the chat kit api just yet so i'm going to paste in some dummy data basically an array contains three objects and each of the objects contains a sender id property and a text property and this is a simplified version of the data we'll get from chat kit later on now in order to render this stuff out on the page you have to first escape out of the jsx syntax because we can't just write javascript inside of jsx we have to use curly brackets in order to embed javascript expressions inside of jsx so inside of here we can do dummydata.map we're going to fetch out the object itself which we're calling message and we also need the index using a fat arrow function and for each of the items we're going to return a div tag now we're in jsx land again so we need to move over to javascript lan so we'll do curly brackets again and let's just start by rendering out message dot text we run this as you can see we're rendering out the messages brilliant so now i want to give you your very first challenge i want you to render out the sender id in addition to the text so pause this screencast right now jump into the code and change it so that it renders out the sender id as well and if you don't manage to do it then just resume back to this screencast and i'll show you how to do it okay so go ahead and do that right now okay so i hope you managed to solve this task let's see how it's done so i'm suspecting that some of you might have been tempted to simply add another div tag here do message dot sender id and if you try to do that you see now if we run the code we're getting an error react is basically saying that adjacent jsx elements must be wrapped in an enclosing tag which means you can't simply render out two jsx elements besides each other like this you have to wrap them in an enclosing tag and you can actually do it if you use an array so that's a feature react added in version 16 but we're going to use the enclosing tag so what we want to do is wrap both of these in another div like that you run it it works beautiful now i want to add all the classes in order to apply some styling let's run it again oh it looks beautiful however we're getting another message in the console and it's saying that each child in an array or iterator should have a unique key prop so what we need to do is give this item here key prop like this and this is why i wanted to fetch out the index as well because we can use the index as the key if we run this again it works and we're not getting the warning now it's actually not recommended to use the index as the key it's rather recommended to use a unique id and using the index is kind of seen as a last resort solution because the reason we're doing this is so that react properly can identify these dynamically created children from each other so that if you start adding removing replacing and shuffling around these items react knows 100 how to separate the items from each other based upon their id but since we're not going to change the order of our items right now we can use the index for this dummy example however in the next screencast we're actually going to fetch real data from the chat kit api and swap this index out with a more stable solution so we're actually progressing pretty quickly now so stay tuned for the next lecture as it'll be packed with interesting learnings hey let's have a look at how we can get started with the chat kit api so chat kit is built by pusher which you can find on pusher.com they have a really nice collection of several dpis which help you create collaboration and communication features in your apps the one we're going to use is called chat kit and it's probably the easiest way to implement chat in your app it's in public beta and it's free while it's in public beta and they'll always have a generous free plan so you don't have to worry about suddenly having to pay now in order to get started you need to sign in or create an account and then you'll take into the dashboard we can see an overview over the instances you have for their various apis and if you click this instances here under chat kit you'll see your instances the one we're going to use for this course is called scrimba chat kit course when you head into that one you'll get to an overview page where you have all the keys tokens and stuff like that which you need in order to connect with chat kit and you can also create users and rooms here manually for when you're playing around with it and experimenting in the next screencast we're going to connect our app with my chat kit instance and i'm also going to challenge you to connect our app to your chat kit instance as you should have your own instance and i should have mine so i'm looking forward to see you there hey in this lecture we're finally going to connect with the chat kit api so that we can fetch out the messages from a given room now the first thing we need in order to do that is the chat kit sdk as you can see under dependencies here i've installed the sdk i've done that using npm but i could easily also have simply linked to the source from the html because they have cdns in which you can just point a script tag to and then easily fetch out the sdk that way as well however we're going to use npm and the way we get a hold of the sdk is by doing import chat kit from virtual trackit then there's a question how do we hook up a react component with an api and the way you want to do that is through using a life cycle method called component bid mount and it's triggered directly after the render method has been invoked so here we'll create a chat manager and we'll use the chat kit dot chat manager to create that and inside of here you to specify a few parameters first we need our instance locator to tell trackit which instance we want to connect with and that is the one we created here it's called scrimba chat kit course and here you can see that we're getting an instance locator now i've copied this one to the config.js file here it is and i'm exporting this one along with another one which we'll look at in a minute so i'll simply do import i'll just copy these two from config like that now i can do instance locator instance locator like that and actually as the key and the variable which is holding the value meaning the instance locator string is called the same i can actually omit this one here and use do like this and we also need to specify a user id because chat kit needs to know which user we're connecting with this instance and as you can see down here in the dashboard i've created a user manually here so we're going to use that one user id or bargain finally there's the token provider which we'll create using new chat kit token provider like that and here we need to pass in a url and that url is the one we're getting if we scroll down to test token provider here you can see your test token provider endpoint and this is only for testing purposes what you'd rather have in production here is an endpoint which you have created for example using node and there you would authenticate the user which you could do using the trapkit server sdk you also might want to do some other stuff perhaps talk with your own database and however for testing purposes we're just going to use this test token provider here in order to authenticate ourselves so i've copied it again in the config file and exported it as the token url so i'm just going to paste in the token url like this and now we have a chat manager properly set up meaning we can use it to do chat manager.connect that'll return a promise and when that promise is resolved we get access to the current user and the current user object contains a bunch of methods for interacting with the api so the current user is our interface for talking with the chat kit api we can start off by doing current user dot subscribe to room like that in this object we need to specify of course which room we want to subscribe to using the room id and as you can see in the interface here if we scroll a bit up i've created a room called random here and i can interact with this room programmatically using this identifier here so i'll copy that one and paste it in here then we need to provide it with at least one hook we have a hooks property here and the most important hook which basically is an event listener is called on new message that listens for new messages and when we're building a cat room we want to be notified every time a new message has been emitted in the chat room so here message i'm using a fat arrow function and i'm just going to console log out the message dot text now let's run this code and as you can see in the console we're logging out three messages hey how's it going great how about you good to hear i'm great as well and that is indeed the messages i've already pre-created in this room now if this room contained tons of messages we could have considered adding a message limit for example 10 messages that means the chat kit would only fetch out the 10 latest messages and you could set that to up to 100. however by default it's 20 and i think that's a suitable number which means we can actually omit this so i'm going to remove it but i want you to be aware that you can control that one thing you might be a little bit confused over now is that chatkit gave us the same data as we had in our dummy data however now we are actually indeed fetching it from chat kit and in order for you to really internalize this what i want you to do now is actually to fetch messages from your own instance and your own chat room and these keys that you obtain here will be the basis for the chat application you'll create later on so i basically want you to swap out the following values the room id the user id also the token url and instance locator however they're located in the config.js file so i'll add comment here and here swap out this one and this one and the way you do that is by first heading over to pusher.com chat kit and either scroll down to the signup area or click the sign up button here and you can actually click this slide to get to pusher.com chat kit once you've created an account you're taken to the dashboard and there you're going to click the create button and i'll create your very own chat kit instance which you'll give a name and once you've done that you're taken to the overview over your instance and the first key you're going to copy is this instance locator so click the copy icon right here and then head to config.js and swap it out right here then you want to scroll a bit down to the test token provider and here you need to check this box in order to enable the test token provider endpoint and you won't actually see it at all until you've checked this box so do that and then hit the copy icon go back to the code and swap it out here then scroll a bit up again enter username here hit create and then head over to app.js paste in your username here once you've created a user you'll be able to create a room give it a name and hit create and then this little alert box will pop up with the room identifier which you'll copy and paste in right here and then finally i want you to enter a message into this field here and hit send because that'll send the message manually to your chat room and it's important to understand that you won't be able to do this on my instance because only i have access to my instance dashboard and if you are to create a chat application you need your own instance you can't continue using my instance locator as it's through the instance you create rooms and i reckon you want your own rooms in your chat by the end of this and not share rooms with mine so go ahead and do all this now and when you run this code you should see the message you have entered in here appear in the console and then note down these which are fetching as we're going to use them later on as the basis of your very own chat app so good luck with this and i'll see you in the next screencast hey there now we've managed to fetch data from the chat kit api and log it out so that's good however what we want to do is actually take this data the messages store it in our component and then pass it down to the message list which is the component that's going to render this data out so we need to do something else than simply logging it out and specifically we need to add a state to this app component and state is one of two main ways of handling data and react the other one is called props and you'll be introduced that in a minute and throughout these introductions you might feel a bit confused at times in terms of what the difference is between state and props i at least was in the beginning and i found that the only way to really internalize this is to just see a lot of examples and write code yourself so i think as we move along it'll be clearer and clearer for you when it's suitable to use state and when it's suitable to use props but in short state is private for a component so our state which we're going to create now will only be state for the app component here and it's also possible to change the state from the component itself however props is not private it's shared between components and the component to have props can't change them directly themselves has to go through some kind of state change higher up in the hierarchy now this probably sounds very theoretical so let's actually just get started so you'll see it in action first thing we need to create is a constructor method the constructor is the very first method that is called in the life cycle of react components and it's actually a special method of es6 classes and it allows you to interact with the this keyword which points to the instance of this class however before we interact with this we have to call super and what super does is call the constructor function of the class which this class has been extended upon so that is the react dot component class so when we're calling super we're calling the constructor function in the react.component class and that sets stuff up for us so that we can start interacting with the state so we'll do this dot state and set that as an object what we're going to do here is we're going to store the messages in the state and we'll initialize it as an empty array what we now can do is for every new message we get from chat kit we'll do this dot set state and inside of this object we're describing how we want our new state to look like so we want the messages to change and what we want to do is actually add this latest message to the end of the this start state dot messages array so we'll use es6 and do this dot state dot mess address and then add the latest message at the end of this new array and you might be a little confused what these three dots here are that's called the spread operator that allows you to expand this.messages array to rather fit into the array we're creating here so you can look at it as if we're taking the this.messages which is encapsulated in two square brackets like here so if we didn't have the these three dots it would be like this they would just take up one item in this new ray but now with the three dots we're rather expanding it so that they forget about their old square brackets and just fit into this new array instead so this array is expanded to fill the brackets of this array definition rather than its old definition and this here basically creates a whole new array which contains no reference to the previous objects here as this is a new copy of this dot state dot messages with the latest message concatenated at the end and you might now ask so why didn't we just do like this list.messages.push message and that's because this push method would actually modify the original array so we'd modify the state using dot push you should never do that the only way you should modify the state is through this dot set state meaning that we need to copy this.state.messages and expand it into our new array while adding the latest message at the end so now that we have messages in our state and it's being updated as new messages comes along let's try and render out this. messages we run the code and there we can see that this.messages is being filled up with objects as they're added to the state in this on new message book let's remove this one here and this one here now what we want to do is pass this data down to message list and we're going to do that through props and the way you give a component props is through giving it what looks like an html attribute let's do messages equals then we have to escape out of the jsx again because there we're going to add a javascript array and it's of course this dot state dot messages now we can head over to the message list and let's try to swap the dummy data out with this dot crops dot mess address and run this code and as you can see we're getting the exact same data that we had and this does not come from the dummy data actually we can remove this one we can render it again and we're now fetching real data from the chat kit api and displaying it in our app the way it happens just to go through that quickly is whenever chat kit registers a new message in this chat room this event handler is triggered we're doing this dot set state taking the previous list.messages and concatenating it with the latest message so that this array here is updated and then when we render the message list component we pass along the messages by giving it a prop called messages giving it the value of this.messages the way react works is that every time this data here changes it'll trigger a re-render and the data will be passed down to the message list that'll trigger a re-render of message list and here we're simply mapping through that data this dot props dot messages remember now it's props it's not state because the state is private and can only live up in the app component and when you pass it down to components like this it is turned into props so we do this.props up messages map through it and just render it out as we did with the dummy data so we're moving along really fast here we already have an app which talks to the chat kit api that's pretty cool now in the next lecture we're going to turn this here into its own component namely the message component hey in this lecture we're going to finish up the message component here because as you remember when we broke down our ui into components we wanted each of the messages to be their own component as well and here i have the setup for that component however it just contains an empty div so what we need to do is move some of the content from here and into the message.js file or actually let's start by importing the message component into the message list file like that now actually render it out through doing a message like that so we're gonna replace this here with this component here and then fix up this component so that it renders out the stuff we want so the first thing we need is to move this key here over to the message and we also need to pass down some data we basically want the sender id and the text and now i'm actually going to call the sender id here for user name because i think it makes more sense to call a username message.sender id because a message component in itself should take a username prop and a text prop and it shouldn't care that here in the underlying data that's powering the message that it's called a sender id i think semantically it makes sense to call it a username whereas the text drop can easily be called text which is what it's also called in the data so this is the new stuff this is the old stuff let's now copy these two divs here and delete the whole thing and then go into message.js like that however now we're referring to message here and that center id that's wrong here we need to refer to this.crops.username and this.props.txt so let's run the code and as you can see it still works so now we've actually passed data down two steps starting from the app component where the data lived as state passed it down to the message list component as a messages prop in the message list we got access to the messages through this dot props dot messages we looped through it and then we passed some of that data namely the sender id and the text down to the message component as two different props username and text so in the message component we're doing this.props.username and this.props.txt now this is a really nice little component it's very stupid the only thing it knows is that it's supposed to render out a username and some text but it doesn't do anything else which is great according to the principle of single responsibility so what i want you to do now actually is to turn this into a so-called functional component because when a component doesn't have state or any life cycle methods or any other methods you can actually make it even simpler than a class can turn it into a function and given that functional components have so many constraints they're less prone to bugs and a lot of people prefer them over class components so go ahead and check out the documentation right here this link where functional components are described and try to change this to a functional component and once you've done it or given up resume back to the screencast then i'll show you how to do it as well so go ahead and do that right now okay hopefully you managed the task let's now see how we can turn this into a functional component gonna remove the class keyword and we're not gonna extend upon the react.component class we're just going to do good old function syntax and this is a function it can't have a render method so we're going to remove the render method as well and basically just return the jsx directly and the final thing we just need is the props which is the argument of the function that means that we don't refer to this.props.username we have to do props.username and props.txt there's actually no this inside of this function this is undefined so let's run this and boom it works so now you're really starting to get a lot of tools in your react.js toolbelt and in the next lecture you're going to learn about event handlers so stay tuned and i'll see you there hey in this lecture we're going to build out this send message form component that is the one which you can see down here so that's where you can write your messages as you can see we have the basic setup here already it's just a form with a class name and an input field which has a placeholder and it's of type text of course let's change this placeholder to something like enter like that it's a bit more descriptive okay so the thing with form elements is that they kind of keep their own internal state based upon the user input because when i type something in here the element needs to keep track of what i've typed in however as you know from learning about state in react we usually want to keep the internal state in well this dot state and if we rather control the content of an element like this in the components state we get a single source of truth and our application becomes less prone to bugs so let's take whatever the user inputs into this input field and shove it into the state of the send message form component what we'll then do is that we'll use the on change event handler this one basically says that whenever this input field changes whenever the value of it changes fire off whatever function we specify inside of these curly brackets let's do this dot handle change in here so this one is listening for changes in the input field and it's invoking this method whenever a change is fired however handle change hasn't been defined yet so we'll need to define it like this here we get access to the event and let's just log out e dot target dot value like that run the code as you can see it's now logging out whatever we type into the input field so now we only need to take this value here and add it to the component state and as you hopefully remember we need to create a constructor method in order to initialize the state like that and we need to call super then we can do this.state equals an object and it'll have one key called message like that and we'll initialize it as an empty string to begin with now let's see if we can update the state in this handle change method move this dot set state message and we'll set that to the e dot target dot value we run the code try to input something we're getting an error cannot set property set state of undefined and that is because the this keyword is undefined inside of this method it's not bound to the component instance which is up here in the constructor and that ties back to how javascript itself works and the way to solve this is through in the constructor do this dot handle change equals this dots handle change and then bind this which we do have access to in the constructor to this dot handle change method so now if we run the code try to input stuff hello we're not getting an error we can actually instead of controlling out that one here let's rather do this.message down here run the code and write that yo and we can see that we now in the render method have access to the state so what we'll do now might seem a bit weird but we'll actually set the value of the input field to this start state dot message now what this does is that we are controlling the value in the input field programmatically so that it can only be whatever we have in the state at any given time so if we run it now it works well however what's happening here is that when the on change event listener is triggered we invoke the handle change method it updates the state and then react triggers a re-render in which the value which is passed in to the input field here has been changed and thus it's updated in the ui so it's going through the state before your keystroke turns into a change in the user interface like that so now we have what's called a controlled component we're controlling how it works we don't have any duplicate state and where the input field keeps track of its state and the component keeps track of its state and we don't have to hope for the two states to match we know that they will always match so the next thing we need to do is hook an unsubmit event listener onto the form so that when they hit enter we'll take the message and send it off or we'll at least in this lecture prepare the sending off and then in the next lecture we'll see how we can send it off to chat kit the way we'll do this is very similar to what we did previously we'll do on submit as that's the event listener for forms and we'll do this dot handle submit then handle submit create that one here here we first want to prevent default and then we want to send off message somehow and we of course need to bind this method to this as well like that so that we in this handle submit event handler get access to this.message as that's the message we're gonna send off so let's remove this one run the code hello submit and there we logged out from this place right here now finally i want to point out that the on submit and on change are event listeners provided by react and they are wrappers on top of the native event listeners which you write without the capital c and s however this dot handle change and let's not handle submit could have been called whatever we want could have done for example handle form handle form run the code oops then i also have to fix this one like that run the code and submit and it works so these names are created by me which on submit and unchange needs to be called exactly that let's go back to handle submit i like to have the event listeners and event handlers resemble each other though only with swapping out on with handle as i think that's a good practice which makes the code readable and understandable so in the next lecture we're going to learn how to take our messages send them off to the chat kit servers so that the message is broadcasted to everybody who is a part of this chat room so i'm looking forward to see you there hey let's now learn how we can take our messages and send them off to track it we have set up the send message form so that we're ready to do that down here but we gotta change the app.js a little bit as well because as you might remember the interaction with the chat kit api happens through this current user object and that's one which we got access to in the component and mount method as we get access to it after we get connected with the chat manager however it's only available inside of this scope right here and that's not good we want it to be available to the entire component instance because we're going to do currentuser.sendmessage in order to send messages so in order to do that we have to do a couple of things first we gotta do this dot current user equals to current user so we're taking the current user and simply hooking it on to the component itself and by doing that we can for example create a new method send message we'll simply do this not current user dot send message like that that's of course only possible since we did this here and actually for the sake of consistency let's also do this.currentuser.subscribedroom here however you probably know what we need to do in order to enable the send message method to have access to this keyword we of course have to bind it so now we have access to this inside of send message that enables us to get the current user object and call the send message method and inside of that we're going to specify two things that is the text we want to send like this and we'll get that as an argument of the send message function and we're also going to specify the room id and for now i'm just going to hard code that in and as you probably remember es6 allows us to omit this one here when the key and the variable that holds the value are identical so you can do like this and now comes a concept which i struggled understanding and i know that a lot of people find it hard to wrap their heads around because as you've experienced here when we've sent the messages down as a prop to message list data flows in one direction in react from parent that's the app.js to child which are these here however now we're in a position where we somehow need to get the data from down in the message form that being the data we're storing in the state here and we need to send that up to the app.js component because that's the one that will send this data off to chat kit so this is called the inverse data flow in react and there's a couple of ways of looking at this conceptually either that we're sending a method down or that we're reaching up from child to parent in order to trigger a method so what we'll do is we'll take this send message and send it down message as a prop is not send message like that now send message form will get access to this method which again has access to this dot current user.send message in the send message form down here we'll do this dot ops dot send message passing in this dot state dot message because remember restoring the message in the state so you can either look at it as if we're down here in the send message form or kind of reaching our hand up to this method here or you can look at it on a conceptual level that app.js is passing down this method so that send message form can borrow it but either way the data kind of flows the wrong way from child to parent so that's why they call it inverse data flow okay let's try it out are you watching the game tonight enter oops room id also type oops spelling mistake i've written rude id room id let's try it again run the code again and hit enter boom that worked we now send the message off to chat kit via this dot current user not send message and then since we are listening for new messages here and setting the state adding the latest message to the state here that state got updated which again triggered a re-render so that this message list also got re-rendered and it results in four messages being displayed in the chat instead of adjusting three a final thing i want to do in the send message form is that once we've sent it we want to clean up the input field so we'll do this dot set state message and turn that into an empty string again now if we run it i hope so like that the input field is automatically blanked out after the message has been sent so we're starting to get a really cool chat application here the next step now is to start creating the room list and also enable you to create new rooms so i'll see you in the next lecture in this lecture we're going to fetch out all the rooms in our chat kit instance and then display them in this room list component here which you can see the skeleton for right here so as you know all communication with the api happens in the app component or only smart component and it happens through the this dot current user object so what we'll do is this dot current user dot get drainable rooms like that that returns a promise and when that promise has been resolved we get access to the drainable rooms like that what we then want to do is add these drainable rooms to the state we'll do this dot set state joinable rooms like that however drainable rooms aren't the only rooms in this chat kit instance they are just the rooms that we haven't joined yet that this user here hasn't joined yet though in our instance there might be other rooms as well namely rooms that this user has joined and they are available in this dot current user.rooms so let's add them to the state as well we'll call it join rooms and we'll find them in this dot current user dot rooms and now that we're setting these in state you also have to initialize them joinable rooms joined rooms like that now i also want to add a couple of cache statements here that and down here on connecting we now have multiple promises in this method and if any of them fail we're going to get a hint of what's going on and this componented mount is starting to get pretty massive so we're going to refactor it a little bit later on if you find it to be a bit confusing a bit bit too massive don't worry we'll clean it up afterwards for now though let's see if we're able to send these rooms down to the room list component so what we'll do is we'll give the room list component a prop called rooms in it we'll use the spread operator to combine the two arrays of this dot state that joinable rooms with this.join rooms like that now in the room list we can log out this stop scrops dot rooms run the code and see that we're indeed logging out after a few renders an array filled with objects which probably is our rooms so now we need to render the rooms right here and to do that we're going to do the exact same thing we did with the messages this dot props dot rooms dot math we get access to the room in the callback function where we're going to return list item just wrapping around an anchor tag which goes to nowhere but which contains room dot name and as we're using list items here we need to add an unordered list just wrapping these and i also want to have an h3 which says your rooms we also need to give this list item a key as you know we use room dot id and for styling purposes we'll give it a class name of room like that so let's try to run the code beautiful we're now rendering out a list of all the rooms we have in our chat kit instance this is both the ones i have joined and the ones i can join and it looks really nice actually so in the next lecture we'll look at how to join a specific room display the messages from that room and also send messages to that room so you can jump in between rooms and chat as much as you'd like so we're actually starting to approach a fully functional chat app hey in this lecture we're going to learn how to subscribe to specific rooms so that we can click on them and start chatting in them and to do that we need to work a little bit with all the code we've added to mount because now we're just automatically subscribing to this specific room when the component mounts that's why we get these messages here by default but what we want to do is that when you enter into the app you shouldn't automatically subscribe to a room you should make a conscious choice of clicking on the room you want to subscribe to so the first thing we need to do is remove this subscribe to room method this piece of code here and create a subscribe to room method paste that in there now let's just call this from here to see that it works and of course as always we need to remember to bind this like that like that let's run the code as you can see we're automatically subscribing to that room so our method works now what i also want to do is pull out this one here and turn that into its own method as well call it get rooms and then also replace this code with this subject that and of course bind it so now we have a much more manageable component and mount method and what we want to do is enable the user to click a room and thus subscribe to it so we need to pass down the subscribe to room method down to the room list so subscribe to room equals this dot subscribe to room now let's make this a bit more readable like that and inside the room list when you click on this anchor tag here on click this stop props not subscribe to room and then pass in the room dot id so here we're using an anonymous function to wrap this function call here because if we were to do like this this here would be called immediately when this component renders so we only want to call it on the click event so on a quick event this anonymous function gets invoked which again invokes this one and we actually don't need those two curly brackets there so let's also readable i like to add them to multiple lines if i have more than one attribute or prop on these jsx elements and we can do like that now this.props.subscribe to room we'll call subscribe to room up here then we also need to pass in the room id as we pass that along and just replace this one with the room id and now we should be able to subscribe to rooms through clicking on these items here meaning we'll actually remove this first subscribe to room from the componented mount we now want to enable the user to do that instead of doing it automatically so we'll run the code and click on nfl and as you can see we got messages from that chat room beautiful now if we head into welcome as well we'll see that we have a buggy so the welcome messages was placed after the nfl messages that's not good that's because when we subscribe to a room and we get our own new message event listener we're simply just continuing to append new messages to the state so what we need to do before we subscribe to room is clean up the state set the messages to an empty array again now if we run it into nfl oops this.messages is not a function of course i have to do this.setstate like that well welcome yes now it works what we now need to do is to make sure that we keep the joinable rooms and joined rooms properly updated because the list you can see here contains both the rooms you have joined and the rooms you can join and they look for this app completely similar regardless of whether or not you have joined it and the thing is when you subscribe to a room that means when you're listening for messages and displaying them here you're automatically joining it as well so if there's a room that i haven't joined yet let's say for example this nba room and i joined that then these two joinable rooms and joined rooms should change one room from the joinable rooms should be extracted and put into the joined rooms array so after i've subscribed to a room we actually need to call this get drainable rooms again and update the state in case one of the rooms are due switch array so here this subscribe to room returns a promise then then we get access to the room and there we'll simply do this dot get rooms like that let's also add a catch here like that and now we should be keeping track of the rooms correctly what we then need to do is to make sure that we can send messages to the correct room because right now when we're triggering the send message we're just hard coding in that we're sending a message to this specific room and that of course doesn't work and the answer to that is also to be found in this callback function here because what we then can do is we can do this dot set state and we can keep track of which room we're currently at by doing room id and setting it to the room dot ib now we need to add this to the state when we're initializing it as well room id let's just initialize it as null and when we send a message just this dot state dot room id so let's try this oh i haven't joined any rooms yet because we haven't called subscribe to room if i click nfl for example oh reference error error isn't defined let's see oh i had three r's here we run it again i click nfl there is not defined yet again oops i did a weird mistake here i didn't wrap this in the console log now let's try it nfl and i'm getting the messages yes and yes i'm able to chat in that room as well let's try the premier league one totally it works brilliant so now i can change jump around to any room i want and chat with the people in the room championship random nba general so this is really cool however there are two more things we need to fix in order to make our room list component complete namely making sure that these rooms are always displayed in the order we want them to be displayed in and that we're highlighting which room you're currently at so in the next screencast we'll fix both those things hey in this lecture we're gonna fix a couple of things in our room list component and the first one being that if i now paste in a new username here which hasn't joined any rooms yet however it has been created on this instance in the chat kit web interface so it is a part of this instance though it hasn't joined any rooms what will happen is that when i run the code and i try to join any rooms you can see that the rooms seem to shuffle around that's not a good user experience and it's because rooms jump from being joinable rooms to being joined rooms and namely happens in this dot set state here when we have fetched out the joinable rooms after the user has joined the room and this.currentuser.rooms is by the way updated automatically but the point being that an object has jumped from here to here and thus the order of this dot props dot rooms down in room list which we are mapping through here has changed so the order in the user interface will change and the way to solve this is to create an ordered array up here called order rules equals this dot props dot rules and we'll use a spread operator since we're now going to sort this array and we're going to pass it a compare function which takes two arguments and here we're allowed to tell this algorithm how we wanted to sort our new array we're going to sort it by id the way it works is that if this returns a negative number then a will be seen as less than b according to our sort function or if we return a positive number then a will be seen on as greater than b and it'll sort it accordingly so now it should sort our rooms in ascending order based upon their ids and we need to create a new array as sort would indeed modify the original array and you should never modify props so then we'll take the ordered rooms and swap this out here we'll run the code now let's try joining seems to be working really good they don't jump around cool so now you only have one more thing left and that is to highlight which room you're currently at because right now we don't really know which room we're at let's click welcome and what we want to happen is for this item here to glow up a little or to change color the way we do that is we're going to give this list item class of active if this item which is rendered also is the same as the room id meaning that it's the one we're chatting in at that point of time what we'll do is we need to pass down room id from this.room id then we'll go back to room list and here const active and if this that crops that room id equals to room dot id then we're going to return active otherwise return an empty string and we'll now do here just very easily concatenate those two strings together so if it's looping through the current active room then it'll give an active class to this list item here let's run the code we hit the welcome room and boom it's now white as we have styled it in the css so that the list item should be white if it has the class of active so that was it i hope you learned something and i'll see you in the next lecture hey in this lecture i'm going to show you a trick for automatically scrolling down to the bottom when new messages appear like for example this um right my name is pear hitting enter nothing apparently happened however if i scroll down oh there was the message and i sent it as jane smith so rather my no my name is jane send it again didn't seem to appear but it actually has appeared so we need to automatically jump down let's go in here actually and move this back to her morgan that's me and the way we solve this is through adding the component did update method now this is yet another of the life cycle methods in react and it's called directly after a component has been updated so this is a nice time for scrolling down if you want to do that and first we need to grab hold of the message list component itself dom node basically so do const node and we'll use method of the react dom library dom and we need to import that react dom from react um like that find dom node and pass in this and what we're then going to do is set the node dot scroll top equal to node dot scroll height so the scroll prop is how far we've scrolled down and the scroll height is how long our entire scrollable element is so when we're setting the scroll top to equal the scroll height we're actually scrolling as far down as possible as we can and the scroll height is actually measured from the top so it can't actually be as far from the top as the entire height but that doesn't matter this will basically scroll the window all the way to the bottom so let's run the code join the room now we are scrolling to the bottom if we try to write my name is pair we'll scroll down however there are certain situations where we don't want this action to trigger for example let's say i'm reading through all the messages up here and then suddenly a new message appears at the bottom now what i'm going to do now i'm actually going to head into another window which you can't see here at scrimba and then i'm going to write a message from that client so i've connected from that client as well so just sit tight i'm going to write another message and send it and boom suddenly this was sent from another client another browser basically which i couldn't show you via scrimba but it was a little bit annoying that when i was reading messages up here suddenly i got pulled down to the bottom so what we want to do is check if i'm also somewhere near the bottom and in such case we'll jump down if i'm far up here we'll just keep appending messages down below and i'll actually have to scroll down to see them and perfect place for doing this is component will update and that is triggered right before the component has been updated and here we can check where i am in the scroll position so first we need to grab hold of the node here as well and we'll do this that should scroll to bottom and if our node scroll top that's how far we've scrolled down and our node.client height that's the height of our window here so now if we scroll down 20 pixels or something now our scroll top is 20 and our client height is this entire window and it's maybe 350 pixels so let's say that this in total is 370 pixels if that is greater than or equal to the no dot scroll height is the entire element meaning that we are actually at the bottom since how far we have scrolled down plus the height of this window here equals the entire box or more than or equal that's just in case we by some reason managed to scroll further down then we should scroll to bottom so we'll do here if this dot scroll to bottom then we're going to do this now let's run the code now we're in the welcome room hey boom we're scroll down but if we now scroll a bit up and we write yo ah it actually worked we didn't auto scroll and finally i want to give a little buffer so in case we're down here we're almost at the bottom we still want it to jump down so we'll do that by adding plus 100 here and now therefore almost at the bottom at the bottom it worked as well really nice so now we're starting to get a chat application which actually has a good user experience so then the final feature is to make this new room form work and after we've done that we're done with all the javascript and i'm going to show you how to modify this chat room so that you can create your very own chat room both in terms of layout and theme so you basically can start chatting with your friends with your homemade chat application so it seems i'll be holding my promise i gave you in the beginning that you will end up with your very own custom personal chat application at the end of this course so i'm looking forward to see you in the next screencast i'll see you there hey in this lecture we're going to build out the new room form component which basically allows you to type in the name for a room and then it'll pop up here and you can start chatting in that room and people who are part of this chat kit instance can also join that room and chat with you and they can of course also create rooms so this will be very similar to how we did the send message form so i'm going to go quickly through how we'll build out the new room form as you remember we prefer to create controlled components so we're going to give this one an on change handler and i'm going to trigger this dot handle change which is a method we'll write here in it we'll do this dot set state and set the room name to e dot target dot value now we cannot work with state without doing super in the contractor like that super and also initialize the state to room name we call an empty string next up we need an on submit event listener on the form we'll do this dot handle submit and there we'll simply first prevent default and then we'll tell the app component that we want to create a new room and the way to do that as you remember is to pass down a method from the app component down to the child component so create room like that not write any code here yet let's just pass this down create room so that we have the architecture and also we need to remember to bind this that and that now in this room form we'll do this dot props dot create room passing in the name which we have in this state dot room name so now let's in the app component room name do a logging of the room name just to see if we can make it work i think oops cannot read properly set state of undefined what have i done it has to be down in the new room form this dot of course i forgot to bind this in our two event handlers that's how it is to code sometimes a lot of things to remember and we'll copy this and handle submit like that we'll run it again and my new room like that hit enter and boom room name my new room so we are able to connect the two components and pass down the method for creating new rooms so now the final thing to do is to just create a new room do that through yet again use this dot current user and it has a method called create group in it we'll pass in the name of the room room name what we actually can do now we can rather call this for name and omit this one here and it returns a promise and when that promise resolves we get access to the room and what we're going to do here is subscribe to that room because i think that's a good user experience when you create a room we instantly jump into it and luckily as we have extracted the subscribe to room functionality in a method of itself we'll just do this dot subscribe to room passing in the room dot id and let's also add a cache here if we get an error we're going to console log out or with create room log out the error now let's run the code and let's say that i'm a huge fan of the world cup let's like that and there we have a whole new room called world cup who'll win i'll ask and i can chat in that room and now i'm actually going to go to another tab you won't be able to see that but i'll log in as another user in this chat room and then i'll send a message brazil that's what i sent and that popped up here immediately so this chat works however finally we need to empty this input field once we've submitted it and we know of course how to do that it's super simple this dot start set state room name like that all right champions league and it didn't get oh so i noticed that i in my rush had made a mistake because i've actually forgotten to set the value here explicitly meaning but i haven't done like this this.room name this wasn't a fully controlled component as we only sent the state from this input field to the component state we didn't go full circle and set the value based upon the state as well so that was an error on my side and it can serve you as an example of when you're trying to do something quickly when you think you know easily how it's done because you've done it before because i had done it in the send message form before then i was in such a hurry that i forgot this and there's a lot of things to remember when you're coding and it's not a good idea to think that you have everything under control you've got to pay attention to the details and double check so that you can find those small little things you've forgotten to do but which opens up the app for bugs so let's try it out we'll write gold for example submit it and boom as you can see there it is while the new room form has been cleared out now finally i want to change this to create a room like that so now we're almost finished with all the javascript of this course just think there's one last thing we should do and that is before you have joined the room it should say join a room here and if we try to input something and try to send a message to the chat kit api we'll get an error because we haven't defined which room we're sending that message to so to fix this we'll first head over to the message list and here in the render method we want to check if we actually have chosen the room so then we need to pass down the room id like this and if this dot props that room id here i'm checking if this.props.room id is a full c value so not a truthy value then render this stuff out here or return this stuff here return and this is just the div wrapper and i've created another div which has a left arrow and the text join the room in it and then we'll just close this off so like that let's try and run it nice you get this join the room when you join room it disappears and then in order to disable the input field before we have joined the room i'm going to have to head down to send message form and the way we disable an input field is by giving it an attribute called disabled and if it's true it'll be disabled so what we'll send down here from app is actually a prop called disabled and we'll give it the opposite value of this dot state dot room id because if the room id is null then this will evaluate to true meaning this disabled will be true and this that drops without disabled will be true so let's try this now just join the room and i can't enter anything into this input field if i join championship for example i can brilliant so that was actually the last piece of javascript we needed to add to our app in the next lecture we're going to start modifying the chat room using css variables in css grid so that you can create your very own personalized chat application which is just the way you like it hey as we now have built out all the features of our chat app it's time for you to get your own copy of the code so that in the next couple of screencasts when i'll show you how to customize the layout of the app you'll be able to do that on your very own copy and not using my code and i'm going to explain you this through using slides so the first thing you want to do is click the settings icon here at the top of the left sidebar that'll open up this menu and click on the clone workspace that'll open up a modal i want you to select a playground and then give it a title and hit the confirm button and then you'll be taken to your very own scrimba playground and you might have to sign in if you haven't done already as this will be saved to your profile you'll see your avatar here in the top right corner and you can also find this playground from your own profile and then the next step is to connect this playground to your own chat kit instance and if you followed along in screencast number six where you obtained your own instance locator key test token provider and username you can just paste those in to the project right now however if you didn't do that i'm going to revisit how to do exactly that so first head over to chat kit you can click this slide to get to the page sign up and then you're taken to the chat kit dashboard here you want to click the create button which then opens up this modal where you'll give your instance a name hit the create button and then you're taken to the overview of your chat kit instance and when you create an app you always want your own instance you don't want to share instances with anybody else as it's in the instances that you create rooms and you want full control over your own rooms so copy this instance locator here you can click the copy icon and then paste it into the second line in the config.js so swap it out here and then you scroll a bit down you see test token provider there you must check this enabled box in order to see your test token provider endpoint so this box will be unchecked and you need to check it and then click this icon to copy your test token provider endpoint and then paste it in right here we've done that scroll a bit up to the instance inspector and then create your own user hit create and also create a room and hit the create button you'll see this room input field once you create a user as you need to create a user first in order to create a room then paste your username right in here and with those few easy steps you have the setup you need in order to customize your very own chat app via css grid and css variables throughout the next two lectures so i'll see you there hey in this lecture i'm going to teach you about css grid and how we're using css grid to lay out the different components and how you very easily can swap around on these and turn this chat application into exactly the type of application you want layout wise so here is our code for creating the grid refers to display grid we're setting the height to 100 and we're then defining some columns and some rows and then template areas before we jump into exactly what these mean let's see what it does actually because what then happens is that css splits the entire div which is the app div here which wraps our entire application it splits it into columns and rows and basically turns it into a grid as you can see we have six columns and six rows and the reason we have that is because here we've said in grid template columns that we want to repeat six times one fraction unit and fraction unit basically means that we want each of the columns to be equally wide i'm explaining fraction units more in detail in my css grid course here on scrimba which you also can check out but for now just look at this as it's giving each of the columns one unit each unless though one of the columns require more space which this one here does because the content of it forces it to be wider than the sixth of the width so then it captures a little bit more space and the remaining columns take up one fraction unit each and now there's only five fraction units left so they take up a fifth of the remaining space and i'm doing almost the same with rows though here i'm not using the repeat function where i'm saying six times one fraction unit i'm doing it manually i'm saying one two three four five fraction units and then the last row should be 60 pixels tall so why is that well that's because i want this input row here to be 60 pixels tall regardless of the height of the chat app itself because if it was only a 6 of the width then when i did like this wouldn't be enough room to enter text be tiny so i want to have a fixed height so we've defined that we want six columns and six rows then we end up with this huge grid here and what we then can do is use grid template areas what we're doing here is we're creating six strings each representing a row and each character separated by a space in these strings represents a cell so when you see them like this these cells here represent a column so this is basically a visual representation of this grid here and now comes the interesting part the characters here are representations of the components because we have given for example the new room form component the grid area property of n meaning that it will fill up the n area in this visual representation meaning it'll take the spot down in the lower left corner and indeed that is where our new room form is located and of course this new room form if we head into new room form js it is the class name we have given it and room list is the r and we have said that we want it to occupy everything above the new room form which as you can see in the example is exactly why this is doing and here is the message list component and here is the form component itself i just call that an f i probably should call that an s since that starts an s to be consistent but anyway we can actually change that right now and rather do s like that so now here's the brilliant thing let's say that i want the send message form component to take up this space here as well then i'll just paste it in and boom as you could see now the send message form became much taller it doesn't look very well though so i'll revert it what is cool is for example let's say we perhaps want this entire column here to be on the right hand side instead i'm going to take this here i'm going to cut it out and move over here and paste it in and now suddenly we have a ui which yeah works and perhaps i want to have the new room form top instead of at the bottom then i'll just do like this instead now i can create rooms up here and here's my rooms and here is the chatting area so as you can see it's really easy to basically play around and create the layout you want so now i want you in your fork which you've already created from the instructions of the previous cast create your own layout which is not like this one or try to experiment with the layout and find one you like just shuffle around on the items until you're pleased with your layout and then in the next lecture we're going to change the theme as well meaning the colors of the application so i'll see you there hey in this lecture we're going to have a look at css variables which i'm using to set the colors for the chat room and if you haven't seen css variables before they work like this so first you need to define the scope of your variables here we're selecting the root tag which selects the root element and in our case that is the html element itself so that means that these apply for our entire application the syntax for them is dash dash variable name and then variable value now what you then can do is use this main color inside of the root element in the dom so let's scroll a bit down and here you can see that i'm using for the rooms list the main color as the background color and the syntax is var then the parentheses and then the variables name and you have to use the var and you have to use two dashes and as you can see in the app i'm using this color not only as the background here in the room list but also in the background the messages themselves so what's so cool is that i now can change this to for example red and boom it changed in both places and just have a look at my variable names here we have main color secondary color main text color secondary text color send message form so this is actually super powerful because now you can change the entire theme for the app just by changing these values here as most of these are used multiple places throughout the app so what i'm going to do now actually is paste in another dollar let i found online like that now i'm just overriding this one i should probably be explicit about that and take it completely away but now my app is really really nice and pink that's just through adding these five variables and since they are used all over the place here and here and here and here it completely changes the feeling of the app so what i want you to do now is go online and find color palette you like try and swap out these here so that you get a chat app which really matters you as a person however don't do it in this i think you should do it in the fork where you've also perhaps changed around on the layout a little bit what you then will end up with is something truly unique for example let's say that you also i've done this and what you have here is a clap which is really different than the one we've been coding on throughout this course at least it looks really different even though the underlying architecture is similar let's go ahead and do that and i'll see you in the final lecture of this course where i'm going to talk about how you can even further expand upon your chat app so you have finished the course so give yourself a pat on the back because most people who start online courses never finish them so this is a really good job of you you've taken time to invest in your skills in a way that most certainly is going to pay off and now you can jump on to other challenges or if you want to you can also further expand upon your chat app and here i have a couple of closing challenges or stretch goals or call them whatever you want it's voluntarily something you should do if you want to continue diving into how to create awesome chat applications because what would really enhance the user experience of this app is if you added an online user's component meaning displaying which users are online in a room at any given time and also typing indicators to see if someone else are typing in that room and i'm going to point you towards how to solve these they'll not give you the entire solution for the online users you'll find the information you need in the this dot current user so let's log out desktop current user dot rooms let's pick a room for example the one at index three then do user ids we run this as you can see that logged out a long list of usernames james black james white jane doe jane red as you can understand i'm not that creative and coming up with new names however you could take this and display it for example creating a component above the chat room here or maybe you want to merge it together with this stuff here and somehow show user avatars below the room if you want to do that there's a really nice service called ui avatars which allows you to generate avatars from initials and then there's the typing indicators and you can check out the docs on room subscription hooks just click this image and you'll be navigated to it in another tab and the ones that are relevant here are the on user started typing and on user stop typing and they are to be added as hooks here so you'll do on user started typing then you'll get access to the user and here you can render out users and as you know should probably create a new component for this but i'll stop giving hints here because now it's your turn so if you want to try to solve these challenges and no matter what you do i wish you good luck with your further coding thank youhey and welcome to this course where i'm going to teach you how to build a chat application using react js and the chat kit api i'll teach you this through 17 interactive screen and by interactive i mean that you as the viewer at any given time can pause the screencast jump into the code and change it you can then see how your changes affects the output so i'll encourage you to do that whenever you're confused so that you make sure that you understand the relation between the code and what's being displayed on the page and i'm also going to give you five challenges throughout the course where you'll for example be asked to finish up my code in order to reach a certain goal however if you don't manage to solve the challenge don't worry i'm going to show you the solution as well so by the end of this course you'll be comfortable using react.js you'll understand how to handle data how to structure projects event handlers hooking up with apis and a lot more secondly you'll also get to know chat kit which is a super nice api for creating chat applications it's basically an api which gives you the power to build whatever kind of chat app you want without having to set up all the infrastructure and hassle that's involved with real-time chat applications so by the end of this course you'll actually have built this chat application here it's a chat app with multiple rooms which you can switch through this menu on the left hand side here you can also create rooms and thanks to chat kit it's as fast as any other chat application out there and towards the end of the course when you've understood how the entire repository works you're going to get your own copy of this chat room through cloning the repository and save it to your profile and as a bonus i want you to have your own personalized chat application not necessarily just the same as this one so we're going to go through how to use css variables and css grid to personalize the application through easily changing the theme of the app and also to shuffle around on the different components and both of these things are super simple to do using css variables and css grid and there are also two hot new technologies of modern browsers that needs to be in the tool belt of a front-end developer in 2018 and once you've personalized your chat app i'm also going to point you to further resources where you can expand upon and build more complex features into the app finally who am i my name is peer i'm a front-end developer online instructor and also one of the co-founders of scrimba which is the interactive coding screencast tool you're looking at right now but without further ado let's get started on the first lecture of the course hey in this lecture we're going to have a look at the component architecture of our app because in react everything is based around components and before you start coding your app you should break the ui into components and it's a good idea to actually do it visually like i've done here using paint or preview or something like that to just draw colored rectangles around your components and the way you break your ui into this is by starting at the top so here the parent component the common ancestor for all other components is the one in red hair that's normally called app or main or something like that and it basically contains our entire application and then you ask yourself which direct children does this component have in our case it makes sense to have four direct children so there's the list of rooms on the left hand side here there's the chat area itself there's the form where you enter chat messages and there's also the form where you create new rooms so the app component has four direct children the green blue brown and orange one and then you want to ask yourself again which children does these components have and this is just a form doesn't really have any children same with this one however the message list component the blue one has a list of messages inside of it and it's totally reasonable to turn them into their own components so each of the messages is a component itself and you could actually also make the case that this room list component should have children as well because it has a list of rooms here and you can even extract this title here in a component it's basically not written in stone and the reason i've turned each of the messages into components though not turned each of these into components is basically just to show you that it's up to you and both things work though in general the more complex your app becomes the more you should split it up and a good rule of thumb is the principle of single responsibility you want your component to do one thing and one thing only so if you have huge components which does a lot of things you should consider breaking them up into multiple components so in the next lecture we'll look at how these components turn into actual code as we'll walk through the repository so i'll see you there hey in this lecture we're going to have a look at the code base architecture so you can build a mental model of how this repository works before we start coding we have the fully functional app here right now so don't worry if a lot of this looks scary to you because at the end of the course it won't let's start like we did when we looked at the component on a conceptual level which was at the root level meaning the red rectangle here the component which is the ancestor of all the other components and that is the app component as you can see it lies in the root directory app.js and this is also our biggest component this is where all the magic happens in these various methods here which will later on go through step by step for now though i want to have a look at the render method because here you can see that this component renders out four other components and they just happen to be the components which were direct children of the red one so the green blue orange and brown which was the room list message list new room form and send message form the reason we have access to these here is because we have imported them up here as you can see they have been imported from a component folder that is one you can see right here if we open it up we'll see five components here's the message component for example that is the one which is not a direct child of the app component but a direct child of the message list component the blue one here so let's have a look at the message list go down to the render method and it is indeed returning the message component meaning that the message component is a child of the message list component so hopefully now you're starting to build an understanding of how this architecture here translates into react code we can also have a look at the new room form and the room list and the send message form and as you might notice all of these components are much smaller than the app component and that is a very conscious choice because we want the app component to be a so-called smart component meaning it handles all the logic it takes care of talking with the chat kit api as you can see we've imported the chat kit sdk up here and it also takes care of handling all the data that's done in the state here which you'll learn a lot about in a few lectures so this is the brains of our application whereas the child components like this message here is in contrast actually pretty stupid they only take whatever data they get from their parent and render it out some of them also have some event handlers for handling input from the users for example the send message form this one down here but of course needs to accept user input however it doesn't do any logic of the data it just takes the data and sends it off and of course doesn't take care of talking with the api nope all of that is done in the app component and this separation is a best practice if you want as many of your components to be as stupid as possible while gathering the brains at one place higher up in the hierarchy as it's much harder to maintain an app if the logic is spread across tons of components so as much as you can try to have one or few smart components and the rest of the components as stupid as possible so let's have a look at the other files let's start with the index.html for example it is ridiculously simple it has a link to the css it also has a div with an id of root more on that in a minute plus it's also linking to the bundle of all of our javascript which is index.pack.js and this pack here is because scrimba is using webpack under the hood so it needs to refer to index.pac.js instead of index.js which is the one you can see here and this is where we're connecting our react app with the index.html file because as you can see we're importing the app app.js just the root component we're saying react dom dot render this app in the element with the id of root so we're taking our entire application which exists in app as that's the common ancestor for all of our components and shoving it into the dom which is exactly here then we have the styles and style.css and we're not going to go through the basic css in this course as i'm assuming that you know basic css however we're going to look at both css variables and css grid as that is two super cool new modules in the css spec which will allow you to build your own version of this chat app which is customized exactly how you want it now you can say goodbye to all of this beautiful code and the next time you see it you'll actually understand it as you will have coded it yourself or at least together with me and in the next screencast we'll actually start doing that so stay tuned and i'll see you there hey and welcome to the first lecture where we'll actually jump into the code and start building so now i'm in the app.js file and as you can see the app component is significantly simpler than it used to be i've removed all the logic so all that we're left with is the render method which here returns the four children of the app component that results in a significantly simpler ui each of the components are simply rendering out its respective name now we're going to start by building out this message list component here and it can be found down here so what we want to do of course is render out a list of messages down here so we need to remove this help text and write some jsx but first we need data and we're not going to hook up with the chat kit api just yet so i'm going to paste in some dummy data basically an array contains three objects and each of the objects contains a sender id property and a text property and this is a simplified version of the data we'll get from chat kit later on now in order to render this stuff out on the page you have to first escape out of the jsx syntax because we can't just write javascript inside of jsx we have to use curly brackets in order to embed javascript expressions inside of jsx so inside of here we can do dummydata.map we're going to fetch out the object itself which we're calling message and we also need the index using a fat arrow function and for each of the items we're going to return a div tag now we're in jsx land again so we need to move over to javascript lan so we'll do curly brackets again and let's just start by rendering out message dot text we run this as you can see we're rendering out the messages brilliant so now i want to give you your very first challenge i want you to render out the sender id in addition to the text so pause this screencast right now jump into the code and change it so that it renders out the sender id as well and if you don't manage to do it then just resume back to this screencast and i'll show you how to do it okay so go ahead and do that right now okay so i hope you managed to solve this task let's see how it's done so i'm suspecting that some of you might have been tempted to simply add another div tag here do message dot sender id and if you try to do that you see now if we run the code we're getting an error react is basically saying that adjacent jsx elements must be wrapped in an enclosing tag which means you can't simply render out two jsx elements besides each other like this you have to wrap them in an enclosing tag and you can actually do it if you use an array so that's a feature react added in version 16 but we're going to use the enclosing tag so what we want to do is wrap both of these in another div like that you run it it works beautiful now i want to add all the classes in order to apply some styling let's run it again oh it looks beautiful however we're getting another message in the console and it's saying that each child in an array or iterator should have a unique key prop so what we need to do is give this item here key prop like this and this is why i wanted to fetch out the index as well because we can use the index as the key if we run this again it works and we're not getting the warning now it's actually not recommended to use the index as the key it's rather recommended to use a unique id and using the index is kind of seen as a last resort solution because the reason we're doing this is so that react properly can identify these dynamically created children from each other so that if you start adding removing replacing and shuffling around these items react knows 100 how to separate the items from each other based upon their id but since we're not going to change the order of our items right now we can use the index for this dummy example however in the next screencast we're actually going to fetch real data from the chat kit api and swap this index out with a more stable solution so we're actually progressing pretty quickly now so stay tuned for the next lecture as it'll be packed with interesting learnings hey let's have a look at how we can get started with the chat kit api so chat kit is built by pusher which you can find on pusher.com they have a really nice collection of several dpis which help you create collaboration and communication features in your apps the one we're going to use is called chat kit and it's probably the easiest way to implement chat in your app it's in public beta and it's free while it's in public beta and they'll always have a generous free plan so you don't have to worry about suddenly having to pay now in order to get started you need to sign in or create an account and then you'll take into the dashboard we can see an overview over the instances you have for their various apis and if you click this instances here under chat kit you'll see your instances the one we're going to use for this course is called scrimba chat kit course when you head into that one you'll get to an overview page where you have all the keys tokens and stuff like that which you need in order to connect with chat kit and you can also create users and rooms here manually for when you're playing around with it and experimenting in the next screencast we're going to connect our app with my chat kit instance and i'm also going to challenge you to connect our app to your chat kit instance as you should have your own instance and i should have mine so i'm looking forward to see you there hey in this lecture we're finally going to connect with the chat kit api so that we can fetch out the messages from a given room now the first thing we need in order to do that is the chat kit sdk as you can see under dependencies here i've installed the sdk i've done that using npm but i could easily also have simply linked to the source from the html because they have cdns in which you can just point a script tag to and then easily fetch out the sdk that way as well however we're going to use npm and the way we get a hold of the sdk is by doing import chat kit from virtual trackit then there's a question how do we hook up a react component with an api and the way you want to do that is through using a life cycle method called component bid mount and it's triggered directly after the render method has been invoked so here we'll create a chat manager and we'll use the chat kit dot chat manager to create that and inside of here you to specify a few parameters first we need our instance locator to tell trackit which instance we want to connect with and that is the one we created here it's called scrimba chat kit course and here you can see that we're getting an instance locator now i've copied this one to the config.js file here it is and i'm exporting this one along with another one which we'll look at in a minute so i'll simply do import i'll just copy these two from config like that now i can do instance locator instance locator like that and actually as the key and the variable which is holding the value meaning the instance locator string is called the same i can actually omit this one here and use do like this and we also need to specify a user id because chat kit needs to know which user we're connecting with this instance and as you can see down here in the dashboard i've created a user manually here so we're going to use that one user id or bargain finally there's the token provider which we'll create using new chat kit token provider like that and here we need to pass in a url and that url is the one we're getting if we scroll down to test token provider here you can see your test token provider endpoint and this is only for testing purposes what you'd rather have in production here is an endpoint which you have created for example using node and there you would authenticate the user which you could do using the trapkit server sdk you also might want to do some other stuff perhaps talk with your own database and however for testing purposes we're just going to use this test token provider here in order to authenticate ourselves so i've copied it again in the config file and exported it as the token url so i'm just going to paste in the token url like this and now we have a chat manager properly set up meaning we can use it to do chat manager.connect that'll return a promise and when that promise is resolved we get access to the current user and the current user object contains a bunch of methods for interacting with the api so the current user is our interface for talking with the chat kit api we can start off by doing current user dot subscribe to room like that in this object we need to specify of course which room we want to subscribe to using the room id and as you can see in the interface here if we scroll a bit up i've created a room called random here and i can interact with this room programmatically using this identifier here so i'll copy that one and paste it in here then we need to provide it with at least one hook we have a hooks property here and the most important hook which basically is an event listener is called on new message that listens for new messages and when we're building a cat room we want to be notified every time a new message has been emitted in the chat room so here message i'm using a fat arrow function and i'm just going to console log out the message dot text now let's run this code and as you can see in the console we're logging out three messages hey how's it going great how about you good to hear i'm great as well and that is indeed the messages i've already pre-created in this room now if this room contained tons of messages we could have considered adding a message limit for example 10 messages that means the chat kit would only fetch out the 10 latest messages and you could set that to up to 100. however by default it's 20 and i think that's a suitable number which means we can actually omit this so i'm going to remove it but i want you to be aware that you can control that one thing you might be a little bit confused over now is that chatkit gave us the same data as we had in our dummy data however now we are actually indeed fetching it from chat kit and in order for you to really internalize this what i want you to do now is actually to fetch messages from your own instance and your own chat room and these keys that you obtain here will be the basis for the chat application you'll create later on so i basically want you to swap out the following values the room id the user id also the token url and instance locator however they're located in the config.js file so i'll add comment here and here swap out this one and this one and the way you do that is by first heading over to pusher.com chat kit and either scroll down to the signup area or click the sign up button here and you can actually click this slide to get to pusher.com chat kit once you've created an account you're taken to the dashboard and there you're going to click the create button and i'll create your very own chat kit instance which you'll give a name and once you've done that you're taken to the overview over your instance and the first key you're going to copy is this instance locator so click the copy icon right here and then head to config.js and swap it out right here then you want to scroll a bit down to the test token provider and here you need to check this box in order to enable the test token provider endpoint and you won't actually see it at all until you've checked this box so do that and then hit the copy icon go back to the code and swap it out here then scroll a bit up again enter username here hit create and then head over to app.js paste in your username here once you've created a user you'll be able to create a room give it a name and hit create and then this little alert box will pop up with the room identifier which you'll copy and paste in right here and then finally i want you to enter a message into this field here and hit send because that'll send the message manually to your chat room and it's important to understand that you won't be able to do this on my instance because only i have access to my instance dashboard and if you are to create a chat application you need your own instance you can't continue using my instance locator as it's through the instance you create rooms and i reckon you want your own rooms in your chat by the end of this and not share rooms with mine so go ahead and do all this now and when you run this code you should see the message you have entered in here appear in the console and then note down these which are fetching as we're going to use them later on as the basis of your very own chat app so good luck with this and i'll see you in the next screencast hey there now we've managed to fetch data from the chat kit api and log it out so that's good however what we want to do is actually take this data the messages store it in our component and then pass it down to the message list which is the component that's going to render this data out so we need to do something else than simply logging it out and specifically we need to add a state to this app component and state is one of two main ways of handling data and react the other one is called props and you'll be introduced that in a minute and throughout these introductions you might feel a bit confused at times in terms of what the difference is between state and props i at least was in the beginning and i found that the only way to really internalize this is to just see a lot of examples and write code yourself so i think as we move along it'll be clearer and clearer for you when it's suitable to use state and when it's suitable to use props but in short state is private for a component so our state which we're going to create now will only be state for the app component here and it's also possible to change the state from the component itself however props is not private it's shared between components and the component to have props can't change them directly themselves has to go through some kind of state change higher up in the hierarchy now this probably sounds very theoretical so let's actually just get started so you'll see it in action first thing we need to create is a constructor method the constructor is the very first method that is called in the life cycle of react components and it's actually a special method of es6 classes and it allows you to interact with the this keyword which points to the instance of this class however before we interact with this we have to call super and what super does is call the constructor function of the class which this class has been extended upon so that is the react dot component class so when we're calling super we're calling the constructor function in the react.component class and that sets stuff up for us so that we can start interacting with the state so we'll do this dot state and set that as an object what we're going to do here is we're going to store the messages in the state and we'll initialize it as an empty array what we now can do is for every new message we get from chat kit we'll do this dot set state and inside of this object we're describing how we want our new state to look like so we want the messages to change and what we want to do is actually add this latest message to the end of the this start state dot messages array so we'll use es6 and do this dot state dot mess address and then add the latest message at the end of this new array and you might be a little confused what these three dots here are that's called the spread operator that allows you to expand this.messages array to rather fit into the array we're creating here so you can look at it as if we're taking the this.messages which is encapsulated in two square brackets like here so if we didn't have the these three dots it would be like this they would just take up one item in this new ray but now with the three dots we're rather expanding it so that they forget about their old square brackets and just fit into this new array instead so this array is expanded to fill the brackets of this array definition rather than its old definition and this here basically creates a whole new array which contains no reference to the previous objects here as this is a new copy of this dot state dot messages with the latest message concatenated at the end and you might now ask so why didn't we just do like this list.messages.push message and that's because this push method would actually modify the original array so we'd modify the state using dot push you should never do that the only way you should modify the state is through this dot set state meaning that we need to copy this.state.messages and expand it into our new array while adding the latest message at the end so now that we have messages in our state and it's being updated as new messages comes along let's try and render out this. messages we run the code and there we can see that this.messages is being filled up with objects as they're added to the state in this on new message book let's remove this one here and this one here now what we want to do is pass this data down to message list and we're going to do that through props and the way you give a component props is through giving it what looks like an html attribute let's do messages equals then we have to escape out of the jsx again because there we're going to add a javascript array and it's of course this dot state dot messages now we can head over to the message list and let's try to swap the dummy data out with this dot crops dot mess address and run this code and as you can see we're getting the exact same data that we had and this does not come from the dummy data actually we can remove this one we can render it again and we're now fetching real data from the chat kit api and displaying it in our app the way it happens just to go through that quickly is whenever chat kit registers a new message in this chat room this event handler is triggered we're doing this dot set state taking the previous list.messages and concatenating it with the latest message so that this array here is updated and then when we render the message list component we pass along the messages by giving it a prop called messages giving it the value of this.messages the way react works is that every time this data here changes it'll trigger a re-render and the data will be passed down to the message list that'll trigger a re-render of message list and here we're simply mapping through that data this dot props dot messages remember now it's props it's not state because the state is private and can only live up in the app component and when you pass it down to components like this it is turned into props so we do this.props up messages map through it and just render it out as we did with the dummy data so we're moving along really fast here we already have an app which talks to the chat kit api that's pretty cool now in the next lecture we're going to turn this here into its own component namely the message component hey in this lecture we're going to finish up the message component here because as you remember when we broke down our ui into components we wanted each of the messages to be their own component as well and here i have the setup for that component however it just contains an empty div so what we need to do is move some of the content from here and into the message.js file or actually let's start by importing the message component into the message list file like that now actually render it out through doing a message like that so we're gonna replace this here with this component here and then fix up this component so that it renders out the stuff we want so the first thing we need is to move this key here over to the message and we also need to pass down some data we basically want the sender id and the text and now i'm actually going to call the sender id here for user name because i think it makes more sense to call a username message.sender id because a message component in itself should take a username prop and a text prop and it shouldn't care that here in the underlying data that's powering the message that it's called a sender id i think semantically it makes sense to call it a username whereas the text drop can easily be called text which is what it's also called in the data so this is the new stuff this is the old stuff let's now copy these two divs here and delete the whole thing and then go into message.js like that however now we're referring to message here and that center id that's wrong here we need to refer to this.crops.username and this.props.txt so let's run the code and as you can see it still works so now we've actually passed data down two steps starting from the app component where the data lived as state passed it down to the message list component as a messages prop in the message list we got access to the messages through this dot props dot messages we looped through it and then we passed some of that data namely the sender id and the text down to the message component as two different props username and text so in the message component we're doing this.props.username and this.props.txt now this is a really nice little component it's very stupid the only thing it knows is that it's supposed to render out a username and some text but it doesn't do anything else which is great according to the principle of single responsibility so what i want you to do now actually is to turn this into a so-called functional component because when a component doesn't have state or any life cycle methods or any other methods you can actually make it even simpler than a class can turn it into a function and given that functional components have so many constraints they're less prone to bugs and a lot of people prefer them over class components so go ahead and check out the documentation right here this link where functional components are described and try to change this to a functional component and once you've done it or given up resume back to the screencast then i'll show you how to do it as well so go ahead and do that right now okay hopefully you managed the task let's now see how we can turn this into a functional component gonna remove the class keyword and we're not gonna extend upon the react.component class we're just going to do good old function syntax and this is a function it can't have a render method so we're going to remove the render method as well and basically just return the jsx directly and the final thing we just need is the props which is the argument of the function that means that we don't refer to this.props.username we have to do props.username and props.txt there's actually no this inside of this function this is undefined so let's run this and boom it works so now you're really starting to get a lot of tools in your react.js toolbelt and in the next lecture you're going to learn about event handlers so stay tuned and i'll see you there hey in this lecture we're going to build out this send message form component that is the one which you can see down here so that's where you can write your messages as you can see we have the basic setup here already it's just a form with a class name and an input field which has a placeholder and it's of type text of course let's change this placeholder to something like enter like that it's a bit more descriptive okay so the thing with form elements is that they kind of keep their own internal state based upon the user input because when i type something in here the element needs to keep track of what i've typed in however as you know from learning about state in react we usually want to keep the internal state in well this dot state and if we rather control the content of an element like this in the components state we get a single source of truth and our application becomes less prone to bugs so let's take whatever the user inputs into this input field and shove it into the state of the send message form component what we'll then do is that we'll use the on change event handler this one basically says that whenever this input field changes whenever the value of it changes fire off whatever function we specify inside of these curly brackets let's do this dot handle change in here so this one is listening for changes in the input field and it's invoking this method whenever a change is fired however handle change hasn't been defined yet so we'll need to define it like this here we get access to the event and let's just log out e dot target dot value like that run the code as you can see it's now logging out whatever we type into the input field so now we only need to take this value here and add it to the component state and as you hopefully remember we need to create a constructor method in order to initialize the state like that and we need to call super then we can do this.state equals an object and it'll have one key called message like that and we'll initialize it as an empty string to begin with now let's see if we can update the state in this handle change method move this dot set state message and we'll set that to the e dot target dot value we run the code try to input something we're getting an error cannot set property set state of undefined and that is because the this keyword is undefined inside of this method it's not bound to the component instance which is up here in the constructor and that ties back to how javascript itself works and the way to solve this is through in the constructor do this dot handle change equals this dots handle change and then bind this which we do have access to in the constructor to this dot handle change method so now if we run the code try to input stuff hello we're not getting an error we can actually instead of controlling out that one here let's rather do this.message down here run the code and write that yo and we can see that we now in the render method have access to the state so what we'll do now might seem a bit weird but we'll actually set the value of the input field to this start state dot message now what this does is that we are controlling the value in the input field programmatically so that it can only be whatever we have in the state at any given time so if we run it now it works well however what's happening here is that when the on change event listener is triggered we invoke the handle change method it updates the state and then react triggers a re-render in which the value which is passed in to the input field here has been changed and thus it's updated in the ui so it's going through the state before your keystroke turns into a change in the user interface like that so now we have what's called a controlled component we're controlling how it works we don't have any duplicate state and where the input field keeps track of its state and the component keeps track of its state and we don't have to hope for the two states to match we know that they will always match so the next thing we need to do is hook an unsubmit event listener onto the form so that when they hit enter we'll take the message and send it off or we'll at least in this lecture prepare the sending off and then in the next lecture we'll see how we can send it off to chat kit the way we'll do this is very similar to what we did previously we'll do on submit as that's the event listener for forms and we'll do this dot handle submit then handle submit create that one here here we first want to prevent default and then we want to send off message somehow and we of course need to bind this method to this as well like that so that we in this handle submit event handler get access to this.message as that's the message we're gonna send off so let's remove this one run the code hello submit and there we logged out from this place right here now finally i want to point out that the on submit and on change are event listeners provided by react and they are wrappers on top of the native event listeners which you write without the capital c and s however this dot handle change and let's not handle submit could have been called whatever we want could have done for example handle form handle form run the code oops then i also have to fix this one like that run the code and submit and it works so these names are created by me which on submit and unchange needs to be called exactly that let's go back to handle submit i like to have the event listeners and event handlers resemble each other though only with swapping out on with handle as i think that's a good practice which makes the code readable and understandable so in the next lecture we're going to learn how to take our messages send them off to the chat kit servers so that the message is broadcasted to everybody who is a part of this chat room so i'm looking forward to see you there hey let's now learn how we can take our messages and send them off to track it we have set up the send message form so that we're ready to do that down here but we gotta change the app.js a little bit as well because as you might remember the interaction with the chat kit api happens through this current user object and that's one which we got access to in the component and mount method as we get access to it after we get connected with the chat manager however it's only available inside of this scope right here and that's not good we want it to be available to the entire component instance because we're going to do currentuser.sendmessage in order to send messages so in order to do that we have to do a couple of things first we gotta do this dot current user equals to current user so we're taking the current user and simply hooking it on to the component itself and by doing that we can for example create a new method send message we'll simply do this not current user dot send message like that that's of course only possible since we did this here and actually for the sake of consistency let's also do this.currentuser.subscribedroom here however you probably know what we need to do in order to enable the send message method to have access to this keyword we of course have to bind it so now we have access to this inside of send message that enables us to get the current user object and call the send message method and inside of that we're going to specify two things that is the text we want to send like this and we'll get that as an argument of the send message function and we're also going to specify the room id and for now i'm just going to hard code that in and as you probably remember es6 allows us to omit this one here when the key and the variable that holds the value are identical so you can do like this and now comes a concept which i struggled understanding and i know that a lot of people find it hard to wrap their heads around because as you've experienced here when we've sent the messages down as a prop to message list data flows in one direction in react from parent that's the app.js to child which are these here however now we're in a position where we somehow need to get the data from down in the message form that being the data we're storing in the state here and we need to send that up to the app.js component because that's the one that will send this data off to chat kit so this is called the inverse data flow in react and there's a couple of ways of looking at this conceptually either that we're sending a method down or that we're reaching up from child to parent in order to trigger a method so what we'll do is we'll take this send message and send it down message as a prop is not send message like that now send message form will get access to this method which again has access to this dot current user.send message in the send message form down here we'll do this dot ops dot send message passing in this dot state dot message because remember restoring the message in the state so you can either look at it as if we're down here in the send message form or kind of reaching our hand up to this method here or you can look at it on a conceptual level that app.js is passing down this method so that send message form can borrow it but either way the data kind of flows the wrong way from child to parent so that's why they call it inverse data flow okay let's try it out are you watching the game tonight enter oops room id also type oops spelling mistake i've written rude id room id let's try it again run the code again and hit enter boom that worked we now send the message off to chat kit via this dot current user not send message and then since we are listening for new messages here and setting the state adding the latest message to the state here that state got updated which again triggered a re-render so that this message list also got re-rendered and it results in four messages being displayed in the chat instead of adjusting three a final thing i want to do in the send message form is that once we've sent it we want to clean up the input field so we'll do this dot set state message and turn that into an empty string again now if we run it i hope so like that the input field is automatically blanked out after the message has been sent so we're starting to get a really cool chat application here the next step now is to start creating the room list and also enable you to create new rooms so i'll see you in the next lecture in this lecture we're going to fetch out all the rooms in our chat kit instance and then display them in this room list component here which you can see the skeleton for right here so as you know all communication with the api happens in the app component or only smart component and it happens through the this dot current user object so what we'll do is this dot current user dot get drainable rooms like that that returns a promise and when that promise has been resolved we get access to the drainable rooms like that what we then want to do is add these drainable rooms to the state we'll do this dot set state joinable rooms like that however drainable rooms aren't the only rooms in this chat kit instance they are just the rooms that we haven't joined yet that this user here hasn't joined yet though in our instance there might be other rooms as well namely rooms that this user has joined and they are available in this dot current user.rooms so let's add them to the state as well we'll call it join rooms and we'll find them in this dot current user dot rooms and now that we're setting these in state you also have to initialize them joinable rooms joined rooms like that now i also want to add a couple of cache statements here that and down here on connecting we now have multiple promises in this method and if any of them fail we're going to get a hint of what's going on and this componented mount is starting to get pretty massive so we're going to refactor it a little bit later on if you find it to be a bit confusing a bit bit too massive don't worry we'll clean it up afterwards for now though let's see if we're able to send these rooms down to the room list component so what we'll do is we'll give the room list component a prop called rooms in it we'll use the spread operator to combine the two arrays of this dot state that joinable rooms with this.join rooms like that now in the room list we can log out this stop scrops dot rooms run the code and see that we're indeed logging out after a few renders an array filled with objects which probably is our rooms so now we need to render the rooms right here and to do that we're going to do the exact same thing we did with the messages this dot props dot rooms dot math we get access to the room in the callback function where we're going to return list item just wrapping around an anchor tag which goes to nowhere but which contains room dot name and as we're using list items here we need to add an unordered list just wrapping these and i also want to have an h3 which says your rooms we also need to give this list item a key as you know we use room dot id and for styling purposes we'll give it a class name of room like that so let's try to run the code beautiful we're now rendering out a list of all the rooms we have in our chat kit instance this is both the ones i have joined and the ones i can join and it looks really nice actually so in the next lecture we'll look at how to join a specific room display the messages from that room and also send messages to that room so you can jump in between rooms and chat as much as you'd like so we're actually starting to approach a fully functional chat app hey in this lecture we're going to learn how to subscribe to specific rooms so that we can click on them and start chatting in them and to do that we need to work a little bit with all the code we've added to mount because now we're just automatically subscribing to this specific room when the component mounts that's why we get these messages here by default but what we want to do is that when you enter into the app you shouldn't automatically subscribe to a room you should make a conscious choice of clicking on the room you want to subscribe to so the first thing we need to do is remove this subscribe to room method this piece of code here and create a subscribe to room method paste that in there now let's just call this from here to see that it works and of course as always we need to remember to bind this like that like that let's run the code as you can see we're automatically subscribing to that room so our method works now what i also want to do is pull out this one here and turn that into its own method as well call it get rooms and then also replace this code with this subject that and of course bind it so now we have a much more manageable component and mount method and what we want to do is enable the user to click a room and thus subscribe to it so we need to pass down the subscribe to room method down to the room list so subscribe to room equals this dot subscribe to room now let's make this a bit more readable like that and inside the room list when you click on this anchor tag here on click this stop props not subscribe to room and then pass in the room dot id so here we're using an anonymous function to wrap this function call here because if we were to do like this this here would be called immediately when this component renders so we only want to call it on the click event so on a quick event this anonymous function gets invoked which again invokes this one and we actually don't need those two curly brackets there so let's also readable i like to add them to multiple lines if i have more than one attribute or prop on these jsx elements and we can do like that now this.props.subscribe to room we'll call subscribe to room up here then we also need to pass in the room id as we pass that along and just replace this one with the room id and now we should be able to subscribe to rooms through clicking on these items here meaning we'll actually remove this first subscribe to room from the componented mount we now want to enable the user to do that instead of doing it automatically so we'll run the code and click on nfl and as you can see we got messages from that chat room beautiful now if we head into welcome as well we'll see that we have a buggy so the welcome messages was placed after the nfl messages that's not good that's because when we subscribe to a room and we get our own new message event listener we're simply just continuing to append new messages to the state so what we need to do before we subscribe to room is clean up the state set the messages to an empty array again now if we run it into nfl oops this.messages is not a function of course i have to do this.setstate like that well welcome yes now it works what we now need to do is to make sure that we keep the joinable rooms and joined rooms properly updated because the list you can see here contains both the rooms you have joined and the rooms you can join and they look for this app completely similar regardless of whether or not you have joined it and the thing is when you subscribe to a room that means when you're listening for messages and displaying them here you're automatically joining it as well so if there's a room that i haven't joined yet let's say for example this nba room and i joined that then these two joinable rooms and joined rooms should change one room from the joinable rooms should be extracted and put into the joined rooms array so after i've subscribed to a room we actually need to call this get drainable rooms again and update the state in case one of the rooms are due switch array so here this subscribe to room returns a promise then then we get access to the room and there we'll simply do this dot get rooms like that let's also add a catch here like that and now we should be keeping track of the rooms correctly what we then need to do is to make sure that we can send messages to the correct room because right now when we're triggering the send message we're just hard coding in that we're sending a message to this specific room and that of course doesn't work and the answer to that is also to be found in this callback function here because what we then can do is we can do this dot set state and we can keep track of which room we're currently at by doing room id and setting it to the room dot ib now we need to add this to the state when we're initializing it as well room id let's just initialize it as null and when we send a message just this dot state dot room id so let's try this oh i haven't joined any rooms yet because we haven't called subscribe to room if i click nfl for example oh reference error error isn't defined let's see oh i had three r's here we run it again i click nfl there is not defined yet again oops i did a weird mistake here i didn't wrap this in the console log now let's try it nfl and i'm getting the messages yes and yes i'm able to chat in that room as well let's try the premier league one totally it works brilliant so now i can change jump around to any room i want and chat with the people in the room championship random nba general so this is really cool however there are two more things we need to fix in order to make our room list component complete namely making sure that these rooms are always displayed in the order we want them to be displayed in and that we're highlighting which room you're currently at so in the next screencast we'll fix both those things hey in this lecture we're gonna fix a couple of things in our room list component and the first one being that if i now paste in a new username here which hasn't joined any rooms yet however it has been created on this instance in the chat kit web interface so it is a part of this instance though it hasn't joined any rooms what will happen is that when i run the code and i try to join any rooms you can see that the rooms seem to shuffle around that's not a good user experience and it's because rooms jump from being joinable rooms to being joined rooms and namely happens in this dot set state here when we have fetched out the joinable rooms after the user has joined the room and this.currentuser.rooms is by the way updated automatically but the point being that an object has jumped from here to here and thus the order of this dot props dot rooms down in room list which we are mapping through here has changed so the order in the user interface will change and the way to solve this is to create an ordered array up here called order rules equals this dot props dot rules and we'll use a spread operator since we're now going to sort this array and we're going to pass it a compare function which takes two arguments and here we're allowed to tell this algorithm how we wanted to sort our new array we're going to sort it by id the way it works is that if this returns a negative number then a will be seen as less than b according to our sort function or if we return a positive number then a will be seen on as greater than b and it'll sort it accordingly so now it should sort our rooms in ascending order based upon their ids and we need to create a new array as sort would indeed modify the original array and you should never modify props so then we'll take the ordered rooms and swap this out here we'll run the code now let's try joining seems to be working really good they don't jump around cool so now you only have one more thing left and that is to highlight which room you're currently at because right now we don't really know which room we're at let's click welcome and what we want to happen is for this item here to glow up a little or to change color the way we do that is we're going to give this list item class of active if this item which is rendered also is the same as the room id meaning that it's the one we're chatting in at that point of time what we'll do is we need to pass down room id from this.room id then we'll go back to room list and here const active and if this that crops that room id equals to room dot id then we're going to return active otherwise return an empty string and we'll now do here just very easily concatenate those two strings together so if it's looping through the current active room then it'll give an active class to this list item here let's run the code we hit the welcome room and boom it's now white as we have styled it in the css so that the list item should be white if it has the class of active so that was it i hope you learned something and i'll see you in the next lecture hey in this lecture i'm going to show you a trick for automatically scrolling down to the bottom when new messages appear like for example this um right my name is pear hitting enter nothing apparently happened however if i scroll down oh there was the message and i sent it as jane smith so rather my no my name is jane send it again didn't seem to appear but it actually has appeared so we need to automatically jump down let's go in here actually and move this back to her morgan that's me and the way we solve this is through adding the component did update method now this is yet another of the life cycle methods in react and it's called directly after a component has been updated so this is a nice time for scrolling down if you want to do that and first we need to grab hold of the message list component itself dom node basically so do const node and we'll use method of the react dom library dom and we need to import that react dom from react um like that find dom node and pass in this and what we're then going to do is set the node dot scroll top equal to node dot scroll height so the scroll prop is how far we've scrolled down and the scroll height is how long our entire scrollable element is so when we're setting the scroll top to equal the scroll height we're actually scrolling as far down as possible as we can and the scroll height is actually measured from the top so it can't actually be as far from the top as the entire height but that doesn't matter this will basically scroll the window all the way to the bottom so let's run the code join the room now we are scrolling to the bottom if we try to write my name is pair we'll scroll down however there are certain situations where we don't want this action to trigger for example let's say i'm reading through all the messages up here and then suddenly a new message appears at the bottom now what i'm going to do now i'm actually going to head into another window which you can't see here at scrimba and then i'm going to write a message from that client so i've connected from that client as well so just sit tight i'm going to write another message and send it and boom suddenly this was sent from another client another browser basically which i couldn't show you via scrimba but it was a little bit annoying that when i was reading messages up here suddenly i got pulled down to the bottom so what we want to do is check if i'm also somewhere near the bottom and in such case we'll jump down if i'm far up here we'll just keep appending messages down below and i'll actually have to scroll down to see them and perfect place for doing this is component will update and that is triggered right before the component has been updated and here we can check where i am in the scroll position so first we need to grab hold of the node here as well and we'll do this that should scroll to bottom and if our node scroll top that's how far we've scrolled down and our node.client height that's the height of our window here so now if we scroll down 20 pixels or something now our scroll top is 20 and our client height is this entire window and it's maybe 350 pixels so let's say that this in total is 370 pixels if that is greater than or equal to the no dot scroll height is the entire element meaning that we are actually at the bottom since how far we have scrolled down plus the height of this window here equals the entire box or more than or equal that's just in case we by some reason managed to scroll further down then we should scroll to bottom so we'll do here if this dot scroll to bottom then we're going to do this now let's run the code now we're in the welcome room hey boom we're scroll down but if we now scroll a bit up and we write yo ah it actually worked we didn't auto scroll and finally i want to give a little buffer so in case we're down here we're almost at the bottom we still want it to jump down so we'll do that by adding plus 100 here and now therefore almost at the bottom at the bottom it worked as well really nice so now we're starting to get a chat application which actually has a good user experience so then the final feature is to make this new room form work and after we've done that we're done with all the javascript and i'm going to show you how to modify this chat room so that you can create your very own chat room both in terms of layout and theme so you basically can start chatting with your friends with your homemade chat application so it seems i'll be holding my promise i gave you in the beginning that you will end up with your very own custom personal chat application at the end of this course so i'm looking forward to see you in the next screencast i'll see you there hey in this lecture we're going to build out the new room form component which basically allows you to type in the name for a room and then it'll pop up here and you can start chatting in that room and people who are part of this chat kit instance can also join that room and chat with you and they can of course also create rooms so this will be very similar to how we did the send message form so i'm going to go quickly through how we'll build out the new room form as you remember we prefer to create controlled components so we're going to give this one an on change handler and i'm going to trigger this dot handle change which is a method we'll write here in it we'll do this dot set state and set the room name to e dot target dot value now we cannot work with state without doing super in the contractor like that super and also initialize the state to room name we call an empty string next up we need an on submit event listener on the form we'll do this dot handle submit and there we'll simply first prevent default and then we'll tell the app component that we want to create a new room and the way to do that as you remember is to pass down a method from the app component down to the child component so create room like that not write any code here yet let's just pass this down create room so that we have the architecture and also we need to remember to bind this that and that now in this room form we'll do this dot props dot create room passing in the name which we have in this state dot room name so now let's in the app component room name do a logging of the room name just to see if we can make it work i think oops cannot read properly set state of undefined what have i done it has to be down in the new room form this dot of course i forgot to bind this in our two event handlers that's how it is to code sometimes a lot of things to remember and we'll copy this and handle submit like that we'll run it again and my new room like that hit enter and boom room name my new room so we are able to connect the two components and pass down the method for creating new rooms so now the final thing to do is to just create a new room do that through yet again use this dot current user and it has a method called create group in it we'll pass in the name of the room room name what we actually can do now we can rather call this for name and omit this one here and it returns a promise and when that promise resolves we get access to the room and what we're going to do here is subscribe to that room because i think that's a good user experience when you create a room we instantly jump into it and luckily as we have extracted the subscribe to room functionality in a method of itself we'll just do this dot subscribe to room passing in the room dot id and let's also add a cache here if we get an error we're going to console log out or with create room log out the error now let's run the code and let's say that i'm a huge fan of the world cup let's like that and there we have a whole new room called world cup who'll win i'll ask and i can chat in that room and now i'm actually going to go to another tab you won't be able to see that but i'll log in as another user in this chat room and then i'll send a message brazil that's what i sent and that popped up here immediately so this chat works however finally we need to empty this input field once we've submitted it and we know of course how to do that it's super simple this dot start set state room name like that all right champions league and it didn't get oh so i noticed that i in my rush had made a mistake because i've actually forgotten to set the value here explicitly meaning but i haven't done like this this.room name this wasn't a fully controlled component as we only sent the state from this input field to the component state we didn't go full circle and set the value based upon the state as well so that was an error on my side and it can serve you as an example of when you're trying to do something quickly when you think you know easily how it's done because you've done it before because i had done it in the send message form before then i was in such a hurry that i forgot this and there's a lot of things to remember when you're coding and it's not a good idea to think that you have everything under control you've got to pay attention to the details and double check so that you can find those small little things you've forgotten to do but which opens up the app for bugs so let's try it out we'll write gold for example submit it and boom as you can see there it is while the new room form has been cleared out now finally i want to change this to create a room like that so now we're almost finished with all the javascript of this course just think there's one last thing we should do and that is before you have joined the room it should say join a room here and if we try to input something and try to send a message to the chat kit api we'll get an error because we haven't defined which room we're sending that message to so to fix this we'll first head over to the message list and here in the render method we want to check if we actually have chosen the room so then we need to pass down the room id like this and if this dot props that room id here i'm checking if this.props.room id is a full c value so not a truthy value then render this stuff out here or return this stuff here return and this is just the div wrapper and i've created another div which has a left arrow and the text join the room in it and then we'll just close this off so like that let's try and run it nice you get this join the room when you join room it disappears and then in order to disable the input field before we have joined the room i'm going to have to head down to send message form and the way we disable an input field is by giving it an attribute called disabled and if it's true it'll be disabled so what we'll send down here from app is actually a prop called disabled and we'll give it the opposite value of this dot state dot room id because if the room id is null then this will evaluate to true meaning this disabled will be true and this that drops without disabled will be true so let's try this now just join the room and i can't enter anything into this input field if i join championship for example i can brilliant so that was actually the last piece of javascript we needed to add to our app in the next lecture we're going to start modifying the chat room using css variables in css grid so that you can create your very own personalized chat application which is just the way you like it hey as we now have built out all the features of our chat app it's time for you to get your own copy of the code so that in the next couple of screencasts when i'll show you how to customize the layout of the app you'll be able to do that on your very own copy and not using my code and i'm going to explain you this through using slides so the first thing you want to do is click the settings icon here at the top of the left sidebar that'll open up this menu and click on the clone workspace that'll open up a modal i want you to select a playground and then give it a title and hit the confirm button and then you'll be taken to your very own scrimba playground and you might have to sign in if you haven't done already as this will be saved to your profile you'll see your avatar here in the top right corner and you can also find this playground from your own profile and then the next step is to connect this playground to your own chat kit instance and if you followed along in screencast number six where you obtained your own instance locator key test token provider and username you can just paste those in to the project right now however if you didn't do that i'm going to revisit how to do exactly that so first head over to chat kit you can click this slide to get to the page sign up and then you're taken to the chat kit dashboard here you want to click the create button which then opens up this modal where you'll give your instance a name hit the create button and then you're taken to the overview of your chat kit instance and when you create an app you always want your own instance you don't want to share instances with anybody else as it's in the instances that you create rooms and you want full control over your own rooms so copy this instance locator here you can click the copy icon and then paste it into the second line in the config.js so swap it out here and then you scroll a bit down you see test token provider there you must check this enabled box in order to see your test token provider endpoint so this box will be unchecked and you need to check it and then click this icon to copy your test token provider endpoint and then paste it in right here we've done that scroll a bit up to the instance inspector and then create your own user hit create and also create a room and hit the create button you'll see this room input field once you create a user as you need to create a user first in order to create a room then paste your username right in here and with those few easy steps you have the setup you need in order to customize your very own chat app via css grid and css variables throughout the next two lectures so i'll see you there hey in this lecture i'm going to teach you about css grid and how we're using css grid to lay out the different components and how you very easily can swap around on these and turn this chat application into exactly the type of application you want layout wise so here is our code for creating the grid refers to display grid we're setting the height to 100 and we're then defining some columns and some rows and then template areas before we jump into exactly what these mean let's see what it does actually because what then happens is that css splits the entire div which is the app div here which wraps our entire application it splits it into columns and rows and basically turns it into a grid as you can see we have six columns and six rows and the reason we have that is because here we've said in grid template columns that we want to repeat six times one fraction unit and fraction unit basically means that we want each of the columns to be equally wide i'm explaining fraction units more in detail in my css grid course here on scrimba which you also can check out but for now just look at this as it's giving each of the columns one unit each unless though one of the columns require more space which this one here does because the content of it forces it to be wider than the sixth of the width so then it captures a little bit more space and the remaining columns take up one fraction unit each and now there's only five fraction units left so they take up a fifth of the remaining space and i'm doing almost the same with rows though here i'm not using the repeat function where i'm saying six times one fraction unit i'm doing it manually i'm saying one two three four five fraction units and then the last row should be 60 pixels tall so why is that well that's because i want this input row here to be 60 pixels tall regardless of the height of the chat app itself because if it was only a 6 of the width then when i did like this wouldn't be enough room to enter text be tiny so i want to have a fixed height so we've defined that we want six columns and six rows then we end up with this huge grid here and what we then can do is use grid template areas what we're doing here is we're creating six strings each representing a row and each character separated by a space in these strings represents a cell so when you see them like this these cells here represent a column so this is basically a visual representation of this grid here and now comes the interesting part the characters here are representations of the components because we have given for example the new room form component the grid area property of n meaning that it will fill up the n area in this visual representation meaning it'll take the spot down in the lower left corner and indeed that is where our new room form is located and of course this new room form if we head into new room form js it is the class name we have given it and room list is the r and we have said that we want it to occupy everything above the new room form which as you can see in the example is exactly why this is doing and here is the message list component and here is the form component itself i just call that an f i probably should call that an s since that starts an s to be consistent but anyway we can actually change that right now and rather do s like that so now here's the brilliant thing let's say that i want the send message form component to take up this space here as well then i'll just paste it in and boom as you could see now the send message form became much taller it doesn't look very well though so i'll revert it what is cool is for example let's say we perhaps want this entire column here to be on the right hand side instead i'm going to take this here i'm going to cut it out and move over here and paste it in and now suddenly we have a ui which yeah works and perhaps i want to have the new room form top instead of at the bottom then i'll just do like this instead now i can create rooms up here and here's my rooms and here is the chatting area so as you can see it's really easy to basically play around and create the layout you want so now i want you in your fork which you've already created from the instructions of the previous cast create your own layout which is not like this one or try to experiment with the layout and find one you like just shuffle around on the items until you're pleased with your layout and then in the next lecture we're going to change the theme as well meaning the colors of the application so i'll see you there hey in this lecture we're going to have a look at css variables which i'm using to set the colors for the chat room and if you haven't seen css variables before they work like this so first you need to define the scope of your variables here we're selecting the root tag which selects the root element and in our case that is the html element itself so that means that these apply for our entire application the syntax for them is dash dash variable name and then variable value now what you then can do is use this main color inside of the root element in the dom so let's scroll a bit down and here you can see that i'm using for the rooms list the main color as the background color and the syntax is var then the parentheses and then the variables name and you have to use the var and you have to use two dashes and as you can see in the app i'm using this color not only as the background here in the room list but also in the background the messages themselves so what's so cool is that i now can change this to for example red and boom it changed in both places and just have a look at my variable names here we have main color secondary color main text color secondary text color send message form so this is actually super powerful because now you can change the entire theme for the app just by changing these values here as most of these are used multiple places throughout the app so what i'm going to do now actually is paste in another dollar let i found online like that now i'm just overriding this one i should probably be explicit about that and take it completely away but now my app is really really nice and pink that's just through adding these five variables and since they are used all over the place here and here and here and here it completely changes the feeling of the app so what i want you to do now is go online and find color palette you like try and swap out these here so that you get a chat app which really matters you as a person however don't do it in this i think you should do it in the fork where you've also perhaps changed around on the layout a little bit what you then will end up with is something truly unique for example let's say that you also i've done this and what you have here is a clap which is really different than the one we've been coding on throughout this course at least it looks really different even though the underlying architecture is similar let's go ahead and do that and i'll see you in the final lecture of this course where i'm going to talk about how you can even further expand upon your chat app so you have finished the course so give yourself a pat on the back because most people who start online courses never finish them so this is a really good job of you you've taken time to invest in your skills in a way that most certainly is going to pay off and now you can jump on to other challenges or if you want to you can also further expand upon your chat app and here i have a couple of closing challenges or stretch goals or call them whatever you want it's voluntarily something you should do if you want to continue diving into how to create awesome chat applications because what would really enhance the user experience of this app is if you added an online user's component meaning displaying which users are online in a room at any given time and also typing indicators to see if someone else are typing in that room and i'm going to point you towards how to solve these they'll not give you the entire solution for the online users you'll find the information you need in the this dot current user so let's log out desktop current user dot rooms let's pick a room for example the one at index three then do user ids we run this as you can see that logged out a long list of usernames james black james white jane doe jane red as you can understand i'm not that creative and coming up with new names however you could take this and display it for example creating a component above the chat room here or maybe you want to merge it together with this stuff here and somehow show user avatars below the room if you want to do that there's a really nice service called ui avatars which allows you to generate avatars from initials and then there's the typing indicators and you can check out the docs on room subscription hooks just click this image and you'll be navigated to it in another tab and the ones that are relevant here are the on user started typing and on user stop typing and they are to be added as hooks here so you'll do on user started typing then you'll get access to the user and here you can render out users and as you know should probably create a new component for this but i'll stop giving hints here because now it's your turn so if you want to try to solve these challenges and no matter what you do i wish you good luck with your further coding thank you\n"