RSVP Functionality

[00:00 - 00:12] In this lesson, we will finish the RSVP functionality and allow users to register for events. The API allows us to make a post request to /RSVP to register an unregister for an event.

[00:13 - 00:20] It also provides a get request to check if the user is already registered to a specific event. We are going to use both routes.

[00:21 - 00:34] After a user will click on the RSVP button, we will show him an alert dialog to confirm the action. shadcn/ui has an alert dialog component that we can use the first step would be to install the component.

[00:35 - 00:52] So npx shadcn-ui@latest add alert-dialog Now navigate to the RSVP button component. And import dialog components.

[00:53 - 01:37] Alert dialog, alert dialog action, alert dialog cancel, alert dialog content, description, the footer, the header, the title, and the trigger. Now to the RSVP button, add an "isAttending" and an "onComplete" props.

[01:38 - 01:51] You will use the event object to get the idea of the event. And change the button text and functionality accordingly.

[01:52 - 02:01] And the "ON COMPLETE" property will be used to refresh the event data in the "P ARANT" component after the user is RSVP. So the "isAttending" props is a boolean.

[02:02 - 02:07] And let's make it optional. And the "ON COMPLETE" function returns nothing.

[02:08 - 02:13] Now let's write a function to handle the button click. It will make the network request to the API.

[02:14 - 02:27] First let's get the token from the user context and add an "isAttending" state. Set it to false by default.

[02:28 - 02:34] And let's create the handleRsvp function call. It's an async function.

[02:35 - 02:39] Let's set the loading to true. So user won't be able to click the button twice.

[02:40 - 02:44] Let's set this disabled to true. Two are loading.

[02:45 - 02:58] If the loading state set to true, the user won't be able to click the button again. Then make the request.

[02:59 - 03:15] The method is "POST". And the body needs to be a stringify JSON of the event and the user ID.

[03:16 - 03:31] The event ID and the user ID. We need to add the ID property to the user type.

[03:32 - 03:51] Now we want to bust the headers, which is the content type. This should be application/json and the authorization header.

[03:52 - 04:03] She's "VIRRARE" and the token. Now set the loading to false after the API request ended.

[04:04 - 04:28] And show a toast to the user that is successfully either unregistered or registered based on the "Is attending" Boolean or the event title. If there is an incomplete function, we'd want to call it.

[04:29 - 04:36] This is the handleRsvp function. Now let's render the alert dialog inside the button, "LOGDINSECTION".

[04:37 - 04:47] So let's wrap the button with an alert dialog. Then with alert dialog trigger, we also want to pass the disable state.

[04:48 - 05:04] Now with the alert dialog content, this will only be rendered once the trigger is clicked. Render the header and the title.

[05:05 - 05:22] Let's test the user "Are you sure you want to?" And then based on the "Is attending" prop show "Cancel your registration" or register for event.title.

[05:23 - 05:30] Add a question mark and form a TID document. Now we can add a description in the header as well.

[05:31 - 05:41] Let's set the more context to the user. Your registration will be cancelled.

[05:42 - 05:58] If it's all on the "Attending" or you will be registered for this event and we'll receive email reminders. Now let's set the photo where the actions will be.

[05:59 - 06:13] We'll have a "Cancel" function that will simply close the dialog. And we'll have an "Action" button that will call the handleRsvp function button on click.

[06:14 - 06:21] We are also going to add a disabled prop to it, based on the loading state. And let's call it "Confirm".

[06:22 - 06:26] Great! Let's see that in action. Open the browser.

[06:27 - 06:43] Don't forget to run the app first. Click on an event.

[06:44 - 06:47] Make sure you are logged in. And click on the RSVP button.

[06:48 - 06:52] You now... You now see the alert dialog.

[06:53 - 06:58] Now click on "Confirm". And you can see the toast being rendered.

[06:59 - 07:05] One thing we need is to check if the user is already attending an event. So go to the Event Item component.

[07:06 - 07:13] And go to the Event Registration Card component. Here.

[07:14 - 07:18] You can see that the onComplete and the isAttending props are missing. So let's add it.

[07:19 - 07:27] Replace the immediate return with a function body. Let's format that.

[07:28 - 07:46] And add an isAttending state. The default value should be false Now grab the token from the useUser hook.

[07:47 - 08:02] Now write a new effect that will run on function mount for every event when the sheet is being opened. We are passing an empty dependency array so the effect will run on mount.

[08:03 - 08:10] And then call the fetch isAttending function. Let's define this function.

[08:11 - 08:20] It's an "Async" function. And make a request to the API.

[08:21 - 08:36] Pass the Event ID in the query problems. And pass a method equal to "Get".

[08:37 - 08:50] In the headers we want to pass a content tyFurizationpe. And then a Authorization handle.

[08:51 - 08:59] With the token. Now turn the request into a json.

[09:00 - 09:17] And set the isAttending state to the value of the RSVP prooperty on the response object. Now pass both the state value and the uncomplete handler to the RSVP button.

[09:18 - 09:28] So isAttending Equal the isAttending state. And onComplete equal to fetchIsAttending.

[09:29 - 09:47] Then we’ll refresh the ‘isAttending’ state after the user has been registered. Now you also want to change the text here so that if the user is attending, we show a different text to the user which is you are already registered for this event.

[09:48 - 09:57] Let's format that. Now navigate to your browser, refresh the page.

[09:58 - 10:05] And click on an RSVP and register for an event. You have already registered.

[10:06 - 10:13] Click on a specific event. And let's register for it.

[10:14 - 10:37] And you can see that the text has been changed. You are already registered for this event. Once you click the RSVP button again, you see that the cancel your registration is now being active. We can also change the button text between RSVP and cancel your registration.

[10:38 - 10:51] Now you can see the button text change. Let's cancel the registration. And we can RSVP to the event again.

[10:52 - 11:05] Great! In the next module, you will build my event space and allow users to create event and see the event is been registered to.