1 00:00:00,380 --> 00:00:00,710 Okay. 2 00:00:00,710 --> 00:00:05,900 So in this video, I want to create two components that are related to the UI. 3 00:00:05,930 --> 00:00:07,220 A message component. 4 00:00:07,220 --> 00:00:12,530 So when we have messages, it'll be wrapped in some kind of alert box. 5 00:00:12,530 --> 00:00:14,390 And then also the loader. 6 00:00:14,420 --> 00:00:17,840 Right now we just have an H two that says Loading. 7 00:00:17,840 --> 00:00:19,250 So pretty simple. 8 00:00:19,250 --> 00:00:24,740 Let's just go into our components folder and let's create a file. 9 00:00:24,740 --> 00:00:26,960 We'll call it loader dot JS. 10 00:00:29,400 --> 00:00:34,410 Now React Bootstrap actually has a spinner component that we can use. 11 00:00:34,410 --> 00:00:38,340 So let's say import the spinner. 12 00:00:40,900 --> 00:00:42,730 From React Bootstrap. 13 00:00:43,090 --> 00:00:44,290 And then let's say. 14 00:00:46,090 --> 00:00:48,280 And we'll call it loader. 15 00:00:48,370 --> 00:00:53,320 So as far as what we want in here, we're going to return the spinner component. 16 00:00:53,320 --> 00:00:58,000 So let's say Spinner, and then there's some some props that we can pass in. 17 00:00:58,000 --> 00:01:05,260 So I'm going to say animation border and say roll status for the style. 18 00:01:05,260 --> 00:01:12,940 We're going to have it 100 pixels for the width and then 100 pixels for the height margin auto because 19 00:01:12,940 --> 00:01:13,930 we want it in the middle. 20 00:01:13,960 --> 00:01:16,210 We want to display it as a block. 21 00:01:16,630 --> 00:01:17,020 All right. 22 00:01:17,020 --> 00:01:17,890 So. 23 00:01:19,600 --> 00:01:20,680 That should do it. 24 00:01:20,680 --> 00:01:22,480 And then we just want to close. 25 00:01:23,630 --> 00:01:25,170 Close that spinner. 26 00:01:25,190 --> 00:01:28,430 Actually, I think we have to do it like that. 27 00:01:28,460 --> 00:01:33,980 I think it has a closing or it may not matter, but let's go ahead and try that. 28 00:01:33,980 --> 00:01:38,480 So we'll save and then we're going to go into the home screen. 29 00:01:40,310 --> 00:01:43,130 And bring in that component. 30 00:01:43,130 --> 00:01:44,930 So let's say import. 31 00:01:45,960 --> 00:01:46,980 Loader. 32 00:01:47,970 --> 00:01:51,060 And let's see, we just want to put it right here. 33 00:01:51,060 --> 00:01:55,720 Instead of having this H two, we're going to have the loader component. 34 00:01:55,740 --> 00:02:00,930 So now if I save and we come back here and reload, you can see we get the spinner. 35 00:02:01,940 --> 00:02:05,750 Now I want to do the same thing for the single product here. 36 00:02:05,750 --> 00:02:08,210 So let's go into product screen. 37 00:02:09,590 --> 00:02:12,080 And let's bring it in right here. 38 00:02:12,080 --> 00:02:14,270 We'll say import loader. 39 00:02:15,430 --> 00:02:18,820 And then just replace this H two. 40 00:02:20,090 --> 00:02:21,560 And then that should do it. 41 00:02:21,560 --> 00:02:25,040 So if I reload now, I can see that loader real quick. 42 00:02:25,640 --> 00:02:25,970 All right. 43 00:02:26,000 --> 00:02:27,710 Now the message component. 44 00:02:27,740 --> 00:02:34,490 We're going to create a new file in components and let's call it message dot JS. 45 00:02:36,740 --> 00:02:37,130 Dot. 46 00:02:37,130 --> 00:02:40,490 JS and then let's say FC. 47 00:02:42,270 --> 00:02:47,730 And then what we want to bring in here is the alert component from React Bootstrap. 48 00:02:47,730 --> 00:02:53,250 So let's say import and then alert from React Bootstrap. 49 00:02:53,250 --> 00:02:56,850 And this is going to take in two props. 50 00:02:56,850 --> 00:03:00,210 So let's destructure and it's going to take a variant. 51 00:03:00,870 --> 00:03:03,600 So variant and then children. 52 00:03:03,600 --> 00:03:08,910 So variant is just like if it's a danger. 53 00:03:08,910 --> 00:03:14,340 So if we want it to be read or if we want it to be success, which would be green, etcetera, and then 54 00:03:14,340 --> 00:03:16,410 children is just whatever. 55 00:03:16,410 --> 00:03:17,850 We're wrapping it, right? 56 00:03:17,850 --> 00:03:24,750 If we have a message that says Hello, some text that says hello and we wrap it in the message component, 57 00:03:24,750 --> 00:03:27,840 then that hello is going to be spit out here. 58 00:03:27,840 --> 00:03:30,030 So what we want to return. 59 00:03:30,840 --> 00:03:37,140 Is going to be alert and the variant is going to be equal to whatever the variant is. 60 00:03:37,170 --> 00:03:39,900 And inside the alert will be children. 61 00:03:39,900 --> 00:03:43,020 Whatever is being wrapped will be output there. 62 00:03:43,320 --> 00:03:46,400 And then I'm going to make the default variant. 63 00:03:46,410 --> 00:03:50,820 I'm going to just do info, which I believe is like light blue. 64 00:03:50,820 --> 00:04:01,380 So to do that we can say message dot and then let's add default props and set the variant to info. 65 00:04:02,700 --> 00:04:04,230 And we'll save that. 66 00:04:05,680 --> 00:04:06,070 All right. 67 00:04:06,100 --> 00:04:10,240 Now what we'll do is if we have an error. 68 00:04:10,240 --> 00:04:11,380 So let's go to the home screen. 69 00:04:11,380 --> 00:04:16,930 If we have an error instead of just putting it in a div, we'll put it into the message component. 70 00:04:16,930 --> 00:04:19,480 So let's bring that into home screen. 71 00:04:19,480 --> 00:04:22,480 So import message. 72 00:04:24,320 --> 00:04:28,760 And let's replace this div with message. 73 00:04:30,290 --> 00:04:35,450 And then since this is an error, we want to use the variant of danger. 74 00:04:35,450 --> 00:04:41,270 So let's say variant and we're going to set that to danger. 75 00:04:43,250 --> 00:04:43,580 All right. 76 00:04:43,580 --> 00:04:44,930 That way it will be read. 77 00:04:45,570 --> 00:04:46,920 And then we'll just. 78 00:04:47,100 --> 00:04:56,050 We'll just copy this and let's go save that and let's go into the product screen and put that here. 79 00:04:56,070 --> 00:04:57,360 Same thing. 80 00:04:57,570 --> 00:04:59,010 We can import this. 81 00:04:59,010 --> 00:05:08,070 So if we go to the end of message and we do, I think it's Command I or control I, then we can choose 82 00:05:08,070 --> 00:05:09,690 it to auto import. 83 00:05:09,690 --> 00:05:11,310 So it should be brought in up here. 84 00:05:11,310 --> 00:05:14,100 I'm just going to move it with the other components. 85 00:05:14,370 --> 00:05:14,700 All right. 86 00:05:14,700 --> 00:05:15,750 So we'll save that. 87 00:05:15,750 --> 00:05:17,220 And now that should work. 88 00:05:19,050 --> 00:05:24,330 And just to test the message, I'm just going to copy this temporarily. 89 00:05:24,330 --> 00:05:28,290 Put that in there and let's say hello. 90 00:05:28,710 --> 00:05:30,750 And now you can see that that works. 91 00:05:30,750 --> 00:05:35,880 And if I change the variant to, let's say, success. 92 00:05:36,660 --> 00:05:39,600 Then it's green and the default should be info. 93 00:05:39,600 --> 00:05:43,290 So if I don't pass in any variant, then it's blue. 94 00:05:45,270 --> 00:05:48,500 Okay, so now we have those two UI components set up. 95 00:05:48,510 --> 00:05:54,270 So now what we're going to do is move on to the next section where we implement the cart functionality.