Implementing comment creation

In your existing UI, in the Ticket Details page, there’s already a TicketComments component used that has the components we need. So, the only thing we have to do is to process the comment and send it to the Supabase server for insertion into the database.

To do this, open up the TicketComments.js file and instantiate a Supabase client. Also, we need to make sure we add a property to TicketComments such that we can pass the ticket ID, such as <TicketComments ticket={ticket.id} />:

export function TicketComments( {ticket} ) {
  const commentRef = useRef(null);
  const supabase = getSupabaseBrowserClient();
...

Then, we need to ensure to pass that ticket ID from TicketDetails to the TicketComments component. In the TicketDetails.js file, pass it like so:

<TicketComments ticket={id} />

Next, back in the TicketComments component, change the onSubmit code of the <form> element using the following code...