Insert Submitted Data to Supabase Tables

Kristian Freeman: [0:00] We now have real-time subscriptions built into our chat application then. Now that we can see new messages as they come in, obviously the next thing we need to do is make sure that we can create messages from our user interface.

[0:12] Much like with the other examples, there is a great API section for this if we click on API and go to message. You can scroll down to the insert rows section, and you can see that the way this works is a lot like SELECTS.

[0:26] We say await Supabase .from(message). Then, we insert a array and that array contains a list of objects which are our new message objects. You can insert many rows here.

[0:40] For instance, you can see, since this is just an array, you can pass in a second object or a third object. You can also do something called Upsert which is an insert and an update at the same time though we won't be doing that right now. We'll be using Upsert a little bit later in a future exercise.

[0:58] Let's begin adding support for adding new messages in our UI by creating a new form. That form will have an input and inside of that input, I'll just give it a placeholder of something like, write your message.

[1:11] Then it'll also have a button which will be used to submit the form. If I save an update, here's my new form. It doesn't look great, but it will work for our purposes. Of course, as with many forms, I need to do something with this message when it is ready to be submitted.

[1:28] If I say, "Hello." Hello, and then click send message. Nothing happens. In fact, it just reloads the page which is definitely not what we want here. We need to add some JavaScript code to hook up this form and do something with it.

[1:43] Let's start by just doing a couple things to make this work better. First, this input will become required, meaning that it needs to have some value before you can submit it.

[1:52] Second, we need to add the actual on submit, which will allow us to do something when we submit this form. I'll just call this, send message. Finally, we need to be able to refer to this input in some way and we'll do that by using a ref. A ref is a reference in React.

[2:11] I'm just going to add the ref prop here, and I'm going to give it a ref of message. Now, we need to create this message ref. Up here at the top, let's import use ref, and then create a new ref instance using the use ref function.

[2:28] This will just be a message and I'll just call use ref passing in an empty string as the default value for this ref. Now, I need to set up the send message function. Let's do that next. I'll say send message, which is an async function that takes in event in as the function argument.

[2:49] Then I need to do two things inside of this function. First, I need to call event.preventdefault that will stop this form from reloading the page and allow us to do stuff with the content of this form. Then I need to create my new message.

[3:08] What I'm going to do is, I'm going to get the message content. I'm going to say, content= and this will be message.current.value. Message is our ref here. Current is going to be what that ref is currently pointing to, which is this input HTML tag.

[3:28] Then value is going to be the text inside of it. Then I can actually create my message. I'm going to say, await supabase.frommessage.insert. Then I'm going to pass in an array here which will just have one object, which is the message I'm creating.

[3:46] This will have a content that will just match the content variable here. Then it will also have a user ID. The user ID is going to be session.user.ID. Session is going to be a prop that should be passed in to this chat component.

[4:04] You might remember that in index.js, we passed in both session and Supabase as part of our useSupabase hook here. We haven't had a reason to actually use it in our chat component yet. Let's just pass that in. Session is this session here coming from right there.

[4:22] Then up at the top of our chat component, we will also make that available as a variable destructured from these props being passed in to the component.

[4:33] Once we've created a new Supabase message, content is going to be the, obviously, content of our message and then our user ID is going to be at the session.userID. We can assume that the message has been created.

[4:47] We'll come back to message.current.value and we'll set that back to an empty string. We'll just clear out that input. Now, if we save and we refresh, and then we come back to our user interface, let's try writing message.

[5:03] I'll say, "Hello world from my form," and click Send Message. You can see that it created the message and appended it to the end of the message array. Then it also cleared out the form.

[5:15] Just to double-check, let's come back into our table editor and go into message and you can see "Hello World from my form." It has the same user ID as all of our other messages and it's actually being created from the user interface. Because we have subscription set up previously for our messages, we don't have to do anything in terms of looking at the message locally, adding it to the array or anything like that.

[5:39] It adds a message up using the insert call. Then, the message subscription which we previously set up, sees a new message has come in, even though it is from our user, and then appends it to the end of our message array.

[5:53] We have a full circle creating a message in UI, sending it up to Supabase and getting it back using the Supabase message subscription.