0:00 All right, let's go ahead and improve our UI a little bit, 0:03 especially 0:03 around the chats functionality. 0:06 So firstly, I want to go in... [clears throat] So to start off, 0:10 I want to make sure in our ChatListAdd component... 0:15 So we'll go into the ChatList folder and the ChatListAdd component. 0:19 So in the button, when we actually create the chat, 0:22 immediately 0:23 afterwards, I want to make sure we actually navigate 0:26 to the chat that 0:27 we just created. So in order to do this, I'll simply go 0:30 ahead and firstly get access to the 0:34 createChatResponse by setting a new variable called 0:38 chat and set it equal to await createChat. 0:41 And now after onClose, when we close the modal, I want to 0:45 call router, and this is our router component that we're 0:49 calling here, since the ChatListAdd component is outside 0:53 of the router. So we'll need to use this navigate 0:56 function. Now we'll pass in /chats, and 1:00 then we pass in the 1:02 chat.data.createChat.id. 1:07 And so this is going to make sure we actually navigate to the chat with the ID 1:11 that was just created from our createChat mutation. 1:14 So back in the UI, try to create a new chat, 1:18 and as soon as we save this, you can see we've automatically been 1:22 navigated 1:23 to that chat thanks to our updated code. 1:26 So now the next thing I want to do is I want to actually reverse the order of 1:30 the 1:30 chats that we are getting back from our chats query right now, so that 1:33 the newest chat is going to appear up top. 1:37 Now, eventually, we're going to implement pagination on 1:39 this chats list. 1:40 But for now, to make it more user-friendly, 1:43 I want to essentially just 1:44 reverse the list of chats we're getting back from the database, which are 1:48 going to be returned by default in the order that they were created.
The rest of the transcript is for members.
Sign in 