Realtime Database Changes

[00:00 - 00:08] Alright, welcome back. And now what we want to do is whenever we add a story to Superbase and we want to see it in real time.

[00:09 - 00:17] So to do this, we need to go to our client component called Story. And in here, we need to create a use effect first.

[00:18 - 00:32] We need to use Superbase channel. So basically, Superbase is using Phoenix channels that are behind the scenes and we can open a channel so you can create the room and then start watching for these channels .

[00:33 - 00:50] So what we are going to do here is first of all, we need to create an import client component and a Superbase, start a Superbase instance again and simply can do this. And in a use effect, what we need to do is create a channel.

[00:51 - 01:00] Here you can access to channel. Either you can call this story or you can also keep it like this.

[01:01 - 01:09] And I want to see in any channel and whenever there is a Proscratch change on our Story table. So here you can check the Scratch change.

[01:10 - 01:23] So in here, we can do the second parameter and also we can listen to all the events. And then on the payload, this is where we need to do something.

[01:24 - 01:29] If we are inserting something, we get the event type insert. If you delete it something, we are getting event type delete.

[01:30 - 01:42] So for now, what we want to do is check for the event type. So whenever there is a new story in the database table and then we can, we are setting this story.

[01:43 - 01:44] So this will return right away. It will re-render.

[01:45 - 01:52] So what we are going to do is at the end of this, we need to say.subscribe. This.

[01:53 - 02:04] Here we need to pass another parameter, set the stories. So two dependencies, super base and set the stories.

[02:05 - 02:11] So now whenever we enter something, it should right away reflect on our app. So let's go back to our app.

[02:12 - 02:20] Let's add something here. Where you add, it will reflect right away.

[02:21 - 02:27] So if you want to debug also, you can debug in your network. We need to also delete the story.

[02:28 - 02:35] So if you go back, we have on delete already, but it is also a lock. But here is a real simple.

[02:36 - 02:40] We are getting the ID already here. We are passing the ID of the story.

[02:41 - 02:45] So we can use that ID to delete any story. So really simple.

[02:46 - 02:59] You can say from stories, delete if the ID matches. So basically, I would say instead of match, you can say like this.

[03:00 - 03:07] Yeah. So it will check for the ID column.

[03:08 - 03:16] And if that value is matches our ID, it will delete. So let me go back and I delete this and delete this and delete this and delete this.

[03:17 - 03:20] But nothing happens. If you go to database, everything is deleted.

[03:21 - 03:28] So now if I refresh here, everything is deleted. So what we want to do is when you click add, now it reflects right away.

[03:29 - 03:36] But when you click on delete, it should reflect right away. So to do that also here, just like we did for the insert.

[03:37 - 03:43] We can do for the delete. We can say delete.

[03:44 - 03:54] But here what we need to do is we need to filter what story we deleted. So with delete and all payload ID is equal to the story ID that we have here.

[03:55 - 03:59] And then we are deleting it. Let's go back to the app.

[04:00 - 04:10] And if we add a new one, we reflect another one and we click on delete to reflect right away. Yes, this already we are using super best real time.

[04:11 - 04:14] And what we need to work on next is start sharing with another person.