Using Components to Dynamically Generate the Channel's Messages

Sam Selikoff: [0:00] The time has come to replace our dummy messages with the message component that we wrote at the very beginning of this course. I'm going to come over here to our clone where we're iterating over these 40 messages right here.

[0:15] I'm just going to replace it with just a slightly modified version of what we started out with, just a few tweaks with the colors, but mostly exactly what we had at the beginning. There we see it being rendered. We see we have some extra padding here on this wrapping div.

[0:33] We also had space Y, which was putting space in between each div here. Let's just remove that so we can fill up the entire width just like we do on Discord. For the most part, where we started out with looks really good. I just want to highlight one thing.

[0:50] You'll see the line height is pretty tight here on Discord. By default, Tailwind applies different line heights to different font sizes. Again, we can just see it's a little bit tighter over here on Discord.

[1:02] The way we can change this is with the leading utilities. Again, for typography best practice reasons, there's a pretty tight relationship between what the line height should be based on the text size.

[1:16] The defaults do follow best practices. In our case, we want to tighten them up a little bit. Discord actually uses a line height here of 22 pixels. We'll see that's in between leading-5 and leading-6. Again, we'll just use the just-in-time compiler and throw leading-22 pixels on this div.

[1:35] We can see that tightens it up a little bit. Let's also do it to these second two messages right here and right here, leading-22 pixels. This is looking a lot more like what we see over here on Discord. I think we have a little bit more padding on Discord as well in the right direction.

[1:55] Let's change these px-4's to add some padding left, of four, and some padding right say, of six. Or maybe even 16. That helps us see that we're matching up almost exactly with the typography here for the messages. Now let's actually make these dynamic.

[2:20] If we look in our data file, we'll see that each channel has a messages property with a randomly generated message. The data looks like this. It has an ID, user Avatar ID, date, and text. All we need to do is come up here to where we're creating this random array of 40 elements.

[2:40] Instead, we should be able to access the current channels.messages, call.map to loop over them. For each message, we can now return this div. We'll key the div by message ID. Now we see our messages rendering again.

[3:02] In this treatment, we have this div that includes the author and the date. Then these two divs right here and right here, they contain text if the author of this message is the same as the previous one. For now, let's just comment these out and start replacing this with the dynamic data from our data.js file.

[3:25] The image source here will be message.avatar URL. The username will be message.user. The date will be message.date. The text here will be message.text. This is looking pretty great.

[3:48] How about we see we don't have the treatment where the author is the same, then we drop the name and the other information from subsequent messages. To take care of that, let's first create a new component just so this doesn't get too messy here. I'm going to copy all of this HTML.

[4:07] We'll come down to make a MessageWithUser component that returns that. We want to pass in the message here as a prop. Then right here, we can render the message with user component passing in the message.

[4:27] Let's come down here, create a second component just called message, which will also take in a message as a prop. This will return just the HTML we need right here, which should only render the message text. Now we have both treatments right here.

[4:53] We can do a little bit of logic using the message as well as the index from our loop. If we're the very first message, we definitely want to show the user, but also if this message has a different user than the previous one, we want to render the message with the user as well.

[5:09] We should be able to say, if the index is zero, it means we're the first message or the current message.user is not equal to the previous one. We can get that by channel.messages and then pulling the index out just from one before the current index, so i - 1. Then grab the user off of that.

[5:32] In either of these cases, we want to render the message with the user. Otherwise, we want to render just the message. Whoops! That should say, channel.messages. Check this out. Now we've got the first user always rendering.

[5:54] Also, if any of the messages follow the same user, we don't have the first treatment, we have the second one. This is looking really cool. Let's make this a little bit bigger. Get out of the responsive mode here and just take a little look. This is Discord and then here's our clone.

[6:17] Typography really matches just perfectly here. We've got the fonts. We've got a line height, and we have different messages here for each channel so it's fun to play around. We can hit the forward and back button here. We can zoom out a little bit just to see all of our layouts.

[6:35] All of our scroll containers are working. We can scroll this pane independently. If we zoom in, we can scroll this pane independently. Move this all around. We still have our collapsing categories here.

[6:54] We've really filled out a good amount of the Discord interface here just using Tailwind. This is a pretty awesome result.