00:00:00 So let's quickly create this success page that'll be under the new appointment page and under success.

00:00:09 So we can create a new page.tsx, run rafce, and this will be our success page because we have successfully created a new appointment.

00:00:23 And there we go.

00:00:24 We are on the success page.

00:00:25 That page will look something like this.

00:00:28 To get started with the success page, we can give this div a class name equal to flex, h-screen for full height, max-h-screen,

00:00:40 and padding x of about 5% on each of the horizontal sides.

00:00:46 So left and right.

00:00:48 Also, in between this div we can have another div which will wrap our image.

00:00:53 So here we can give it a class name of success-img and right within it we can render a new link component which we need to import from NextLink and it'll

00:01:08 have an href pointing to just forward slash which is the home page.

00:01:13 Right within it, we can render a new Next.js image.

00:01:16 So let's make sure to import it from Next image and give it a source equal to forward slash assets, forward slash icons,

00:01:26 forward slash logo dash full dot SVG.

00:01:30 Let's give it a height of a thousand, a width of a thousand, an alt tag of logo and a class name equal to h-10 w-fit.

00:01:42 So if we save this and go back, you can see care pools in the middle.

00:01:46 Great.

00:01:47 Now let's create a new section below the link.

00:01:52 And to this section, we can give a class name of header, margin bottom of 6, max-w-600 pixels, and a text center, since everything in this screen will

00:02:06 be centered.

00:02:06 And actually, this will be an H2 instead of a section, because this will be a text, which we'll later on wrap into a section.

00:02:14 So for now, this text can simply say something like your, Within a span, we can say appointment request has been successfully submitted.

00:02:26 Great.

00:02:26 And we can make this thing within a span with a class name equal to text-green-500.

00:02:33 So if we go back now, you can see great looking H1 that says this.

00:02:38 As I said, we can also wrap it in a section.

00:02:40 So let's do just that.

00:02:42 We have a section.

00:02:44 And that section will have a class name equal to flex, flex-col, and items-center.

00:02:51 And within it, we can render another image that'll have a source equal to forward slash assets, forward slash gifts, forward slash success.

00:03:06 And we can give it a height of 300, a width of about 280, and an alt tag of success.

00:03:15 And now we can put this H2 within this section so they appear one below another.

00:03:21 And if we go back, you can see this great looking GIF that just repeats, looking Great.

00:03:28 Also below the H2, let's also do a P tag and say something like, we'll be in touch shortly to confirm.

00:03:38 Okay.

00:03:38 And we'll do that through SMS.

00:03:40 So we can say, we will be in touch shortly.

00:03:43 Save it.

00:03:44 And that's looking great.

00:03:47 Now let's go below this section and create another section inside of which we'll cover the details of your specific appointment.

00:03:56 So we can give it a class name equal to request-details and we can render a p tag that's going to say requested appointment details.

00:04:09 Okay, simple enough.

00:04:11 Next, we can have a div with a class name.

00:04:16 equal to flex, items-center and a gap of three.

00:04:21 And within it, we can render an image of your doctor.

00:04:25 But where are we going to get the doctor from?

00:04:29 That's the question.

00:04:30 We somehow have to fetch the information of your appointment.

00:04:35 So for now, let me comment out this image.

00:04:38 Everything still works.

00:04:39 And now we need to fetch the details of the appointment to be able to show them.

00:04:44 And for that, we'll dive into the appointment actions.

00:04:48 I hope you can start seeing the pattern here.

00:04:51 We have all of these pages and then we have actions whenever we want to do something with the databases.

00:04:56 Okay, so this action will be pretty straightforward.

00:05:01 Export const getAppointment.

00:05:05 And it's going to be an async function where we need to pass in the appointment ID as a string.

00:05:11 And we're going to open up a try and catch block.

00:05:15 In the catch, we'll simply console.log the error.

00:05:20 And in the try, we'll try to get the appointment by saying const appointment is equal to await databases.getDocument.

00:05:31 So it's singular.

00:05:33 And here we can pass the database ID.

00:05:38 which we're getting from the app right config.

00:05:40 So database ID.

00:05:42 We also need to pass the appointment collection ID.

00:05:45 So we know from which collection are we fetching the document from.

00:05:48 And then we need to pass the appointment ID to fetch that specific appointment.

00:05:54 Once we have that, we can return parse stringify this appointment.

00:06:00 Great.

00:06:01 So moving back into the success page, we can just fetch it.

00:06:05 But we first have to know where are we going to get the appointment ID from?

00:06:09 And that's going to be coming from search perhaps.

00:06:12 As we have learned so far, whenever you have a dynamic route, something like this, you can pull it from that route.

00:06:20 But here, we're only getting the user ID.

00:06:22 How are we going to actually get the appointment ID?

00:06:26 Well, let me show you.

00:06:28 If you go back to this page, you'll notice that we have a couple of things here that are a bit different.

00:06:34 And they cannot zoom it in as it is in the top bar, but I can copy the entire URL and then explain it within here.

00:06:42 So you can notice how we have this patience123.

00:06:45 And this is the ID of the patient.

00:06:48 And you get it through search perhaps because it's right here.

00:06:52 But you can also notice that under success, we have this question mark pointing to the appointment ID.

00:06:58 This is called a query parameter and you can have multiple.

00:07:02 You just add the end sign and then say a is equal to something.

00:07:07 And then you can extract that parameter from the code as well.

00:07:11 So let's first extract the patient ID and then I'll show you how to extract the appointment ID.

00:07:18 So when it comes to fetching the user ID, you just say params and then destructure the user ID from it.

00:07:24 And we can go outside and to fetch the search params, you just destructure the search params from here.

00:07:31 And all of that will be of a type SearchParamProps.

00:07:35 How simple it is to do it in Next.js.

00:07:39 So now to get the appointment ID, We can just say that's equal to inside of parentheses, search params, question mark dot,

00:07:50 appointment ID as string or an empty string.

00:07:55 We do this just for tab script reasons so it knows that it's actually a string.

00:07:59 And to get the actual appointment now based on the appointment ID, We can do that by saying await getAppointment to which we pass the appointment ID.

00:08:10 And of course, we have to import this getAppointment from there.

00:08:14 And we have to make the entire function or page async because we're using top level await there.

00:08:21 We also might need to fetch the image of a specific doctor.

00:08:24 So we can say cons doctor is equal to.

00:08:27 And we need to find a doc where the doc.name is triple equal to appointment.primaryPhysician.

00:08:40 So now we have the doctor belonging to that appointment as well.

00:08:44 and we can use it right here for our image.

00:08:46 So let's bring the image back and let's say something like source is equal to doctor?image and we can add an exclamation mark to let it know that it will

00:08:57 be there.

00:08:57 The alt tag will be just doctor.

00:09:00 A width will be around 100 pixels.

00:09:03 Height will be about 100 pixels as well.

00:09:06 And then a class name will be a size of 6. If we save it, you can see that it cannot read the primary physician from the appointment.

00:09:15 I think the issue is that I actually put a fake patient and appointment ID here while I was explaining to you how these parameters work.

00:09:22 So if you had the right IDs, it would work.

00:09:25 But in my case, I have to fetch some of the IDs from the AppWrite dashboard.

00:09:30 So let me do that and fill them in.

00:09:32 Or what you can do as well is just try to create a new appointment from scratch.

00:09:36 So let me quickly get my user ID.

00:09:41 That's going to be right here for the patient ID.

00:09:44 And I also have to fetch my appointment ID, which I think is here.

00:09:50 So if I add it here, we should be good.

00:09:53 Yeah, there we go.

00:09:54 And we can see the image of a doctor, which means that we're successfully fetching it.

00:09:58 Let's also indicate other details about a booking or about the appointment schedule.

00:10:04 So if we go a bit below this image, we can render a p tag and then give it a class name equal to white space, no wrap, and say doctor,

00:10:17 and then render the doctor?name.

00:10:21 We can also go below this div and render another div that will have a class name equal to flex a gap of two.

00:10:33 And within it, we can render another image.

00:10:36 This will be an image of a calendar.

00:10:38 So we can say source forward slash assets forward slash icons.

00:10:43 forward slash calendar dot svg we can give it a height of 24 a width of 24 and an alt tag of calendar right within it we can render a new string which

00:10:57 will be dynamic of format date time coming from utils and to it we can pass the appointment And then call the dot date time on it.

00:11:11 It's going to look something like this.

00:11:13 And if we do it properly, it's going to say June 13th, 2024. And then it's going to say the time as well for you.

00:11:20 This is going to be a different time, of course, but it's good to know that all of our appointment details are readily available right here.

00:11:27 Now we can go below this section and we can create a button that will allow us to book a new appointment if we want to.

00:11:36 So import the button from components UI button.

00:11:40 Give it a variant equal to outline and a class name equal to shad-primary-btn.

00:11:50 and say as child because we'll put a link within it.

00:11:53 This will just redirect.

00:11:55 So we can put a link that's going to have an href of dynamic template string, forward slash patients, forward slash user ID,

00:12:06 forward slash new dash appointment.

00:12:09 And within it, we can simply say something like new appointment in case you want to make multiple.

00:12:17 And right below the button, we can render a P tag that's going to have a class name equal to copyright.

00:12:26 And we can just render that copyright sign.

00:12:29 I'm sure we used it somewhere, 2024. There we go.

00:12:32 I can just copy it, paste it here and say 2024 Care Pulse.

00:12:40 There we go.

00:12:40 And if I go back, we have a great looking page.

00:12:44 And if you want to, you can go ahead and schedule a new appointment.

00:12:48 Oh, but something breaks here.

00:12:49 I think that's because the patient ID of 123 was still hard coded here.

00:12:53 So I actually want to use a real patient ID.

00:12:56 And one more time, I will just get it from patients and I'll copy my patient ID.

00:13:02 So if I go here and correct it, we have the success and then go to new appointment.

00:13:09 Oh, and it looks like it's still struggling to fetch this patient ID.

00:13:14 Interesting.

00:13:15 Let's see why that is.

00:13:17 That is under the new appointment page.

00:13:19 So let's go to new appointment page, and it's referring to this thing right here.

00:13:25 So it looks like it's having trouble fetching this patient by the user ID.

00:13:31 Maybe instead of the patient ID from here, I should have actually used the user ID.

00:13:36 That might be the thing.

00:13:38 And once again, you will not have to do any of this.

00:13:41 That's just because I overrode the real values that we had before.

00:13:45 So if I use this one, let's see if it works.

00:13:49 Yep.

00:13:50 Now we can actually get it and we can schedule a second appointment, which will again redirect us to the appointment screen.

00:13:57 How great is that?

00:13:59 So no longer have to go through the entire registration process.

00:14:02 You can just schedule it here.

00:14:03 Let's say my leg hurts.

00:14:06 Uh, I can say I've been running a lot and let's create a second appointment.

00:14:14 There we go.

00:14:15 It has been created with Dr.

00:14:16 Evan.

00:14:17 And here we can also see the June 28th as the date and we can create one more.

00:14:22 But what is this good for if we're not getting any kind of reminder about this meeting, like an SMS notification?

00:14:29 Or even more importantly right now, like what is this doing if we are the only ones seeing it?

00:14:34 What should be happening now is this should be seen by the hospital admin and then they should be able to give it to a specific doctor that can then either

00:14:45 accept or reject it.

00:14:46 Which brings us to the second biggest part of the application, which is the admin interface, which you can see here.

00:14:53 So now the patient side of things has been completed and we are ready to focus on the admin side of things.