WEBVTT 00:00.640 --> 00:02.120 Hi everyone. 00:02.120 --> 00:07.000 In this video, let's customize the wristband okay. 00:09.120 --> 00:17.080 Right here we have so many nested object here, here and here. 00:17.360 --> 00:20.520 And of course we don't want that right. 00:21.000 --> 00:24.160 So in this video let's step by step and build. 00:29.360 --> 00:31.720 Let's go to the command DTO. 00:32.680 --> 00:34.160 Let's create a new file. 00:34.160 --> 00:36.840 Call this one command. 00:39.400 --> 00:53.160 And support class this one command DTO okay right here the first page will be small underscore ID. 00:55.240 --> 01:02.720 And when we use ID marks to remove the object ID over here okay. 01:05.170 --> 01:08.610 And let's say the next thing will be the boss ID. 01:09.090 --> 01:09.650 Okay. 01:10.610 --> 01:16.330 We now need to populate the boss because if not, we don't need that okay. 01:16.370 --> 01:23.850 So for that reason, in this case, we can still use the boss with a small and object over here. 01:24.730 --> 01:26.090 It will be enough. 01:27.250 --> 01:28.570 The next thing will be. 01:29.130 --> 01:31.050 We will leave that later. 01:32.690 --> 01:33.130 Okay. 01:33.130 --> 01:38.850 Let's focus into the user command and fix the dataset object. 01:39.690 --> 01:40.810 The user command over here. 01:40.810 --> 01:44.490 Instead of loop directly the object with user command. 01:46.250 --> 01:50.170 The best way is we need to follow the object over here. 01:51.130 --> 01:58.410 It means right here we will use user command name okay. 01:58.810 --> 01:59.930 And one more thing. 01:59.930 --> 02:02.370 We will use our command and. 02:05.780 --> 02:11.580 And in later we will have a user command avatar to show the avatar. 02:12.060 --> 02:12.580 Okay. 02:12.620 --> 02:15.660 In order for that application. 02:15.660 --> 02:19.860 But right now we don't have avatar. 02:19.900 --> 02:23.020 Right click add the. 02:25.660 --> 02:26.340 Avatar. 02:26.740 --> 02:29.660 Okay, I will create a todo. 02:29.700 --> 02:34.580 Let us in later when we come back and fit us. 02:37.500 --> 02:42.980 And right here also we bought a small and giant form. 02:43.220 --> 02:43.740 Right. 02:45.460 --> 02:55.180 And right here let's move the object and object dot user command dot add okay. 02:59.540 --> 03:05.340 And object user dot name. 03:06.900 --> 03:07.380 Okay. 03:07.420 --> 03:07.990 That is. 03:08.350 --> 03:14.350 And right here, make sure we put some question mark right here to prevent some error. 03:19.670 --> 03:20.230 Okay. 03:20.870 --> 03:26.550 If for some reason this here will be undefined, it will not show its data. 03:27.150 --> 03:29.030 It will show the error. 03:29.070 --> 03:29.430 Okay. 03:29.470 --> 03:30.150 We don't want it. 03:30.150 --> 03:30.910 Show the error. 03:30.910 --> 03:31.350 Right. 03:31.590 --> 03:35.990 So for the last one we put some question marks over here. 03:37.150 --> 03:45.310 After that, after we have the user we need to reply to user okay. 03:45.910 --> 03:49.150 Let's scroll a little bit with the reply to user. 03:49.550 --> 03:51.950 It will be very similar right. 03:51.950 --> 03:58.230 Let me copy entirely over here and Buddhas and replace it with. 04:02.630 --> 04:04.510 Replies to. 04:06.790 --> 04:14.040 User ID and reply to use our left and right here. 04:14.080 --> 04:24.360 Reply with reply to user like us and make sure you later with the avatar over here. 04:28.160 --> 04:29.640 And now we need to contain. 04:37.200 --> 04:38.240 With a string. 04:38.480 --> 04:47.400 Okay, now with this information let's take that or we need to create it up. 04:48.440 --> 04:49.160 Up right. 04:50.520 --> 04:53.160 Okay so let's move this. 05:07.560 --> 05:08.840 This will be right. 05:14.560 --> 05:16.680 And now we also need a pattern. 05:16.720 --> 05:17.400 Let me see. 05:18.680 --> 05:20.240 Current pattern right here. 05:21.800 --> 05:22.400 Okay. 05:22.800 --> 05:25.560 We just need to call the pattern. 05:31.000 --> 05:32.520 With a string. 05:34.760 --> 05:35.440 With the object. 05:35.800 --> 05:41.080 So this will be enough right. 05:41.720 --> 05:47.280 Now let's say let's go back to the command controller and do that. 06:04.040 --> 06:04.640 Let's say. 06:07.360 --> 06:07.840 Okay. 06:07.840 --> 06:11.120 Right now we already got the information right. 06:11.800 --> 06:12.840 User command. 06:12.880 --> 06:14.600 User command name. 06:14.600 --> 06:15.850 them over. 06:15.850 --> 06:20.010 And also and right here we need to add the replies. 06:20.010 --> 06:20.530 Right. 06:20.890 --> 06:21.730 The replies. 06:21.730 --> 06:25.290 So for this guy we can explore. 06:28.290 --> 06:30.690 No replies. 06:36.650 --> 06:39.090 Well what is the structure of the reply? 06:39.130 --> 06:45.130 I want it to have exactly structure of one command little right for the result. 06:45.130 --> 06:49.610 I will put the responsibility right over here. 06:50.370 --> 06:54.090 But you can see this work are not well. 06:54.730 --> 06:56.090 It will not work. 06:56.130 --> 06:56.970 Let me say. 06:59.530 --> 07:05.490 Right here it shows the replies, but it doesn't transformation, right? 07:05.810 --> 07:07.610 Why doesn't transformation? 07:07.810 --> 07:16.650 Because when we use the plan tool object, if you remember in here we use the something called plan 07:16.650 --> 07:18.820 Time to instant, right? 07:19.180 --> 07:25.940 We will transform the data into the digital sink. 07:25.980 --> 07:29.340 We use the blend tool is done. 07:29.380 --> 07:34.100 It only affects in the top level data. 07:34.140 --> 07:39.780 It not affect in the nested array or nested object. 07:39.820 --> 07:40.220 Okay. 07:40.260 --> 07:52.540 So for that reason, in order to tell the plan to instant look up the nested array object, also we 07:52.540 --> 08:00.060 should view the type okay with the response magnitude over here. 08:02.820 --> 08:06.020 And let's say let me say. 08:08.060 --> 08:11.900 Right here you can see it already work right with have a right. 08:12.380 --> 08:20.110 Right here we have a object with user command ID and reply Two users. 08:20.430 --> 08:24.510 Okay, we have some stuff like that, right. 08:25.470 --> 08:27.990 And then created an add. 08:28.150 --> 08:29.510 So very good right. 08:29.910 --> 08:34.310 So let me remind you for you what exactly about the type right here. 08:34.710 --> 08:39.470 Well the title here, it will allow the plane to instant. 08:42.790 --> 08:47.390 Understand the nested data okay. 08:47.670 --> 08:51.790 Without the terms, Next.js cannot understand. 08:52.550 --> 08:53.070 Okay. 08:53.510 --> 08:54.590 That checks it. 08:54.590 --> 08:57.710 Only understand the first level object. 08:59.030 --> 09:09.990 In order to tell Next.js, look up the nested object or nested array, we should tell it using the decorator 09:10.390 --> 09:13.390 types from Next.js. 09:14.830 --> 09:20.230 So I hope you understand and very clear about the types right now. 09:21.710 --> 09:22.510 I will see you.