No Comments Yet
Be the first to share your thoughts and start the conversation.
Creating Delete Button & Notifications
Loading...
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â Next, I want to add a button that will allow us to delete a document because here on my real account, we have started gathering so many documents which
00:00:09Â are not in use and I'd like to keep everything tidy.
00:00:11Â So let's create a simple model that allow us to delete a document if we have the permission to do so.
00:00:18Â To start creating the delete model, I think we even left it to do for ourselves right here.
00:00:24Â And we're now slowly finishing all those to-dos.
00:00:27Â First the delete button and then the notification functionality.
00:00:31Â But this to-do is right in our homepage.
00:00:34Â So here we have to add that delete button.
00:00:38Â So let's go ahead and create a new component actually called deleteModel.tsx where we can run RAFCE and we can very simply import it right here.
00:00:52Â DeleteModel.tsx.
00:00:54Â coming from components delete model, room ID equal to ID.
00:01:00Â And now we can implement it.
00:01:02Â This delete modal is exactly the same if not even much simpler than the share modal.
00:01:08Â So I'll simply provide you with the code for it, go in the GitHub repo, code snippets, copy it and just paste it right here.
00:01:16Â You'll notice it's about 50 to 60 lines, primarily just the JSX for the dialog component, which you already know how to do.
00:01:25Â Right here, we're calling this delete document.
00:01:28Â That is a server action, which we haven't created yet.
00:01:32Â So that matters more than just rendering the JSX.
00:01:35Â So let's navigate over to room actions and let's create a delete document action.
00:01:42Â We can do that right here below by saying export const delete document is equal to async function where we have to get the room ID.
00:01:54Â room IDs at the same time, the document ID, we can open up a try and catch block.
00:02:01Â In the catch, we can say console.log, error happened while deleting a room.
00:02:06Â And here, the only thing we have to do is say await.
00:02:10Â LiveBlocks.deleteRoom to which we pass the Room ID.
00:02:15Â Then we want to re-validate the path of home page and we want to redirect to the home page if we're not already there because we can also delete the document
00:02:25Â from some other places.
00:02:26Â So let's import that from navigation.
00:02:30Â Now, if we go back, we're using this delete modal.
00:02:33Â Let's make sure that it is properly imported because it is giving me an issue right here.
00:02:39Â Delete modal, we're good.
00:02:41Â And going back to our application, since we're the creator of each one of these documents, we can now delete them as well.
00:02:48Â So let me try to delete this empty untitled one.
00:02:52Â We have this nice looking modal and we can click delete.
00:02:57Â And there we go, it's gone, as easy as that.
00:03:01Â Now we can also use this delete model right inside of a specific document.
00:03:06Â So right here, we can add it to the editor.
00:03:10Â We can do that if we go over to the editor component and then go next to the toolbar plugin.
00:03:17Â You can see we have already put this code for it before.
00:03:20Â So we just need to import the delete model And if we are the editor, we should be able to see a delete button right here.
00:03:28Â And if we check if it works, it indeed does.
00:03:34Â Great.
00:03:35Â The last thing we can focus on are the notifications.