Realtime Sharing

[00:00 - 00:07] Now one thing left to do is to share this storyboard with someone else. So another user can also add a story to this user's storyboard.

[00:08 - 00:22] So what we need to do is when user click on start sharing, we enter the email address and we add this email address to this table called sharing status. So in order to do that, we go to the share client component.

[00:23 - 00:39] And here we have a model and we need to create a function called add to share tables. What we are going to do is we need to get the current user and then we are inserting the email.

[00:40 - 00:54] So email is we are going to pass this string. We are going to pass from this function and we are adding the user ID and we can also just simply do this one here instead of selecting.

[00:55 - 01:07] We are telling from this user I'm sharing to this email. The model that we have here, when we submit, we add the email address and we submit, we will get the data here.

[01:08 - 01:16] So what we need to do is we need to pass the email from this data. So we can do something like this, pass the data and fetch the email from this data.

[01:17 - 01:22] Then we can make this function a sync function. You can call add to share table.

[01:23 - 01:33] And also if someone is sharing, we need to watch this data. To do that, we can also do something like use effect and we can get the sharing status.

[01:34 - 01:43] Basically, we are getting sharing status from super base. So we are checking if in the sharing status table, if we have any data with this user ID.

[01:44 - 01:48] So we are filtering the data with the user ID. And if the data is there, then we are setting it to true.

[01:49 - 01:53] Otherwise we are setting it to false. We can call this function inside here.

[01:54 - 02:07] Sharing status and we need to pass the dependency super base and set it sharing . And one last thing is that when user start sharing, they will start seeing the storyboard.

[02:08 - 02:16] But we need to also let user access the old stories. But to do that, we can create a function called update old items, something like this.

[02:17 - 02:25] So we are fetching all the stories and if there's any stories with this user ID , then we updating the email that we shared with. We can also call this function.

[02:26 - 02:34] I will move this up here and we can also call this function here, update old items. We completed the sharing part.

[02:35 - 02:41] So let's check if it works. We go to our project and I'm going to start.

[02:42 - 02:53] So my email address is this one and I'm going to click Add one story and I'm going to click start sharing. And here I'm going to add another email address.

[02:54 - 02:56] So the email address is not visible. I'm going to change it.

[02:57 - 03:08] If you go to share model and the input, we can add a class name called text black. And yes, now you can see that.

[03:09 - 03:12] Nice and submit. And here we say stop sharing.

[03:13 - 03:18] Now it is sharing. And if you go to sharing table, you have the one ID.

[03:19 - 03:32] Let's try to log in with the different email address and I'm going to log in here with my other email address. And if I go to the right side, there is nothing.

[03:33 - 03:45] And if I start sharing here and click here and it's right away, start sharing my old story. So in the left side, if I add a new one and it is sharing with the right side.

[03:46 - 03:51] So same with the, it's kind of like a multiplayer. So on the right side, I can delete stuff.

[03:52 - 03:55] And just like that. And it is reflected right away.

[03:56 - 04:07] So now if I stop sharing and if I add something new again here on the left side , it doesn't reflect on the right side. If I add something on the right side, it doesn't reflect on the left side.

[04:08 - 04:12] So all of this filtering is done by RLS. So it's really great.

[04:13 - 04:15] And this is how you sharing the data between two users.