Create and Display Messages using Fauna within a Room in Next.js
Now it's time to actually create messages and display them in rooms within our application.
We'll start by creating a MessageForm component that will send a Message.create query to Fauna on form submission.
Next, we'll display these messages by updating our room query to also get all the messages for that room. You'll see that we can still just perform one query because we pass in the room id and call Message.where(.room == room) to the query.
One note here is if you console log your messages in your page component, you'll notice that the logs show up in the terminal and not the browser. This is because we are using a server component.
[00:00] We're going to go to the page component under room's ID, and here we're going to add in a new message form component and pass in the room ID as props. Now we haven't created this message form component yet, so let's go ahead and create that. So under [00:19] source app, I'll create a new folder called components. And inside components, I'll create a new file called messageform.js. And here I'm going to create a new component. So I'm gonna write export default function, message form, and then room ID as our prop. [00:39] And then I'm going to return a simple form. So in this form, we have a simple input field and a submit button. And next, we're gonna add a value in the input, and the value is gonna be a variable. And then we're gonna turn this component into a [00:59] client component, and we're going to import user state from react. And then we create a state to hold our message variable. And we're going to add a on change event handler. This event handler is triggered whenever the user types into the input [01:19] field, the function updates, the message state variable with the current value of the input field. And I'm just gonna break this input field into multiple lines so it's easier to read. And next, I'm going to add a on submit event handler to the form [01:39] element. So on form submit, it will execute a function called create message. So we're gonna go ahead and start implementing this function. So first I'm gonna write e dot prevent default. This prevents the default form submission behavior, which would normally cause the page to [01:59] reload. And then we're gonna import client and SQL from fauna. And let's initialize a new fauna client just like we did in the previous components. And then back in the create message function, we will do a fauna query to create a new message. So I'm [02:19] going to write await client dot query and then round brackets inside round brackets SQL backticks. Inside the backticks, we write the SQL query. So I'm gonna write message dot create. And then we're gonna have a text field where we'll add the message [02:38] variable. And then we have a room field that has a dynamic reference to the room. So we use the function room dot by ID, and then we pass in the current room ID. And this function call will get the reference to the room. And then we'll set the message to empty string again. Next, [02:58] we're gonna go back to the page component. And here we're going to import the message form component. Okay. So now we're gonna go back to our application in the browser and let's go into a room. And we're gonna open the network tab in our developer tools. [03:20] And we will try to create a new message. And in the network tab, we can see that we have successfully inserted a document into the Fauna database. Okay. So next, we want all the messages that are in this room to appear as a list. So somewhere here. [03:39] So let's go ahead and add that. So back in our code, and we're here in our page component. And in this page component, we're already querying the room by its ID. And in this single query, we can also return all the messages in this room. So we're gonna capture the results of the query into a new [03:59] variable. And then we're gonna write let messages is equals to message dot where, and then dot room is equals equals to the room reference. Now in SQL, we don't really need a return keyword. We can just write the object that we want to return, and it will just return the object. And in my return object, I want [04:19] the name of the room as well as all the messages in that room. And finally, I will also console log the response. [04:40] Now if we go back to the application in our browser, everything should work as before. Now notice we don't really see that console log here anywhere in the browser dev tools. However, in our terminal, we will see that console log. And notice that it is returning the name of the room as well as all the messages in the [05:00] room. So why is the console log appearing in the terminal? Well, because this component is a server rendered component. So the database call is actually happening in the server side. Okay. Next, let's create a new component called message list component and then pass in all the [05:20] messages as props. So in the components folder, I'm gonna create this message list component. And I'm going to write export default function message list, and I'm going to have messages as the props. And I'm going to return a simple [05:39] div. And I'm going to loop over the messages and simply return the text for each message. And here it's actually going to be messages dot data dot map. And let's go back to the page component and import the message list component. [05:59] So let's check everything. Let's test everything out. So I'm gonna create a new message. And I actually have to reload the page for it to show up. So let's create another one. And looks like it's working. However, it's not real time. So in the next [06:19] video, we're gonna hook up streams and make them real time.