1 00:00:02,270 --> 00:00:04,470 Now for sending an HTTP request 2 00:00:04,470 --> 00:00:06,560 we can use the fetch function. 3 00:00:06,560 --> 00:00:10,820 That's a default JavaScript function built into JavaScript. 4 00:00:10,820 --> 00:00:12,550 It has nothing to do with react. 5 00:00:12,550 --> 00:00:15,118 It's a standard JavaScript function supported 6 00:00:15,118 --> 00:00:16,910 in modern browsers, 7 00:00:16,910 --> 00:00:21,830 and it is a function that allows us to send HTTP requests. 8 00:00:21,830 --> 00:00:26,290 We could also use third-party packages like axios 9 00:00:26,290 --> 00:00:30,580 which has all the popular library for sending HTTP requests. 10 00:00:30,580 --> 00:00:33,240 But I don't want to install an extra library here. 11 00:00:33,240 --> 00:00:35,900 So I'll stick to fetch. 12 00:00:35,900 --> 00:00:38,260 Now fetch wants an argument 13 00:00:38,260 --> 00:00:40,630 and the first argument should be a string. 14 00:00:40,630 --> 00:00:44,980 It should be the URL to which we wanna to send a request. 15 00:00:44,980 --> 00:00:47,960 And here that states URL which we get 16 00:00:47,960 --> 00:00:51,193 from the Firebase real-time database console. 17 00:00:52,350 --> 00:00:56,430 Now this Firebase real-time database service works such 18 00:00:56,430 --> 00:01:00,910 that this URL can be manipulated. 19 00:01:00,910 --> 00:01:04,510 We can add segments after this domain. 20 00:01:04,510 --> 00:01:08,770 And then these segments will be translated into folders. 21 00:01:08,770 --> 00:01:11,400 You could say in your database into tables, 22 00:01:11,400 --> 00:01:14,670 you could say, so we could send the request 23 00:01:14,670 --> 00:01:18,900 to this URL/meetups. 24 00:01:18,900 --> 00:01:23,100 And that would add a meetups table, a meetups collection 25 00:01:23,100 --> 00:01:25,083 to that database here. 26 00:01:26,670 --> 00:01:28,120 And hence, I'll do that here. 27 00:01:29,190 --> 00:01:32,930 Now, one special thing about this Firebase API is 28 00:01:32,930 --> 00:01:36,030 that you need to add dot json at the end here. 29 00:01:36,030 --> 00:01:37,800 That's not react specific. 30 00:01:37,800 --> 00:01:40,543 That's just something Firebase requires. 31 00:01:41,730 --> 00:01:42,660 And with that, 32 00:01:42,660 --> 00:01:46,663 that is the URL to which we're sending our request. 33 00:01:47,540 --> 00:01:51,550 But here I actually wanna store data 34 00:01:51,550 --> 00:01:54,312 on Firebase servers and to signal to Firebase 35 00:01:54,312 --> 00:01:58,930 and to this API that we want to store data, 36 00:01:58,930 --> 00:02:02,570 we actually must send a post request 37 00:02:02,570 --> 00:02:06,240 and by default fetch sends a get request. 38 00:02:06,240 --> 00:02:10,040 And that will always depend on the API you're working with. 39 00:02:10,040 --> 00:02:12,590 But most APIs are built such 40 00:02:12,590 --> 00:02:16,833 that storing data requires post requests. 41 00:02:17,790 --> 00:02:20,670 Now to send a post instead of a get request 42 00:02:20,670 --> 00:02:23,650 we add a second argument to fetch here. 43 00:02:23,650 --> 00:02:27,300 And that second argument is an object which allows us to 44 00:02:27,300 --> 00:02:29,710 configure this fetch function call 45 00:02:29,710 --> 00:02:32,880 and this HTTP request, therefore, 46 00:02:32,880 --> 00:02:35,500 and here in this object we can, for example, 47 00:02:35,500 --> 00:02:38,760 set a method property to define the age 48 00:02:38,760 --> 00:02:41,500 to DB method that will be used. 49 00:02:41,500 --> 00:02:44,083 And here we can set this to post instead of get 50 00:02:44,083 --> 00:02:47,150 which would be the default. 51 00:02:47,150 --> 00:02:49,263 So here we use post instead. 52 00:02:50,270 --> 00:02:52,620 Now, when we send a post request 53 00:02:52,620 --> 00:02:55,620 we should also add the data to the request 54 00:02:55,620 --> 00:02:57,790 the data which we wanna store. 55 00:02:57,790 --> 00:03:00,770 And we do that through the body field, which we add 56 00:03:00,770 --> 00:03:04,633 to the second argument to this configuration object. 57 00:03:05,580 --> 00:03:08,740 Now body wants the data we wanna append 58 00:03:08,740 --> 00:03:12,263 and that data should typically be in json format 59 00:03:12,263 --> 00:03:15,761 which is a very popular, the most popular. 60 00:03:15,761 --> 00:03:20,400 I would argue data format for transmitting data 61 00:03:20,400 --> 00:03:23,810 with HTTP requests and in Java script 62 00:03:23,810 --> 00:03:25,500 we can easily create json 63 00:03:25,500 --> 00:03:27,390 by using the built in json object 64 00:03:27,390 --> 00:03:30,070 and calling the stringify method, 65 00:03:30,070 --> 00:03:31,580 and choose stringify 66 00:03:31,580 --> 00:03:35,490 we can pass default JavaScript objects or a raise 67 00:03:35,490 --> 00:03:40,490 or values in general, and they will be converted to json. 68 00:03:40,800 --> 00:03:43,930 So here we could pass our meetup data object 69 00:03:43,930 --> 00:03:45,910 which we're getting as a parameter 70 00:03:45,910 --> 00:03:48,563 as argument to the stringIfy method. 71 00:03:49,760 --> 00:03:50,930 Now, last but not least 72 00:03:50,930 --> 00:03:53,600 we can add some extra headers if we want to. 73 00:03:53,600 --> 00:03:58,100 And for example, adds to content type header and set it 74 00:03:58,100 --> 00:04:02,730 to application/json, to add this extra metadata 75 00:04:02,730 --> 00:04:05,620 to the outgoing request and make it crystal clear 76 00:04:05,620 --> 00:04:09,680 that this request carries json data, some APIs 77 00:04:09,680 --> 00:04:12,820 also required this, and with that 78 00:04:12,820 --> 00:04:15,340 we're sending such a post request. 79 00:04:15,340 --> 00:04:17,700 We can do more with fetch. 80 00:04:17,700 --> 00:04:20,940 We can listen to the success and error cases 81 00:04:20,940 --> 00:04:25,270 and we do that in the full react course, which I offer. 82 00:04:25,270 --> 00:04:28,430 But for the moment here, this is actually enough 83 00:04:28,430 --> 00:04:31,800 because this will already sent a post request 84 00:04:31,800 --> 00:04:35,080 with our data to Firebase. 85 00:04:35,080 --> 00:04:38,040 And hence, now here, if we saved this 86 00:04:38,040 --> 00:04:43,040 and I click on add meetup now with data entered, 87 00:04:44,000 --> 00:04:46,070 we don't see any feedback here. 88 00:04:46,070 --> 00:04:47,920 We'll work on that in a second. 89 00:04:47,920 --> 00:04:49,420 But if we go to Firebase 90 00:04:49,420 --> 00:04:52,240 we see that there is a new meet-ups node. 91 00:04:52,240 --> 00:04:55,590 And in that note, we got this cryptic ID here, 92 00:04:55,590 --> 00:04:58,920 which is actually auto-generated by Firebase. 93 00:04:58,920 --> 00:05:03,920 And if we expand this, we see our submitted data. 94 00:05:04,100 --> 00:05:08,743 So storing that data on Firebase servers works. 95 00:05:10,120 --> 00:05:11,210 Now let's work 96 00:05:11,210 --> 00:05:14,760 on the feedback which we provide to the user here. 97 00:05:14,760 --> 00:05:16,623 When we add a meetup.