1 00:00:00,330 --> 00:00:01,000 Nicely done. 2 00:00:01,290 --> 00:00:09,630 And once we can fetch the stories and of course, we change the estate values using our Dirceu now it's 3 00:00:09,630 --> 00:00:10,250 the easy part. 4 00:00:10,500 --> 00:00:16,980 We just need to navigate the stories, get them from global context, because remember, in the context 5 00:00:16,980 --> 00:00:18,300 we pass in the whole state. 6 00:00:18,780 --> 00:00:20,360 So I don't need to worry about it. 7 00:00:20,580 --> 00:00:27,090 I know that I have access in the stories and not only I'm getting news loading, but I also want to 8 00:00:27,090 --> 00:00:31,710 get my hits because of course that is my property over there. 9 00:00:32,040 --> 00:00:34,110 And I'll start with is loading. 10 00:00:34,290 --> 00:00:39,120 And then if I'm not loading and of course I would want to return something else and that something else 11 00:00:39,390 --> 00:00:40,560 will be my section. 12 00:00:40,810 --> 00:00:47,640 I'll add a class name of stories over here and inside of the section. 13 00:00:47,940 --> 00:00:49,980 We're just going to iterate over hits. 14 00:00:50,200 --> 00:00:53,940 Can we use the map method so that stays the same. 15 00:00:54,240 --> 00:01:00,810 And as far as the name for every article, I'm just going to go with the story and I'll try to work 16 00:01:00,810 --> 00:01:05,960 on so I just can see what we're getting back and what we're going to be structuring. 17 00:01:06,210 --> 00:01:11,400 So in here, I'm going to go so log on the story since I would want to show you the properties first 18 00:01:11,700 --> 00:01:13,640 and then we're going to go with return. 19 00:01:13,860 --> 00:01:15,960 And I would want to return the article. 20 00:01:16,230 --> 00:01:20,490 I'll add a class name here and the class name will be Story. 21 00:01:20,760 --> 00:01:25,170 And for the time being, let's just say single and story. 22 00:01:25,320 --> 00:01:26,010 Let's say it. 23 00:01:27,180 --> 00:01:33,750 And there it is now we have all our stories, but for the time being, with just display, there's simple 24 00:01:33,750 --> 00:01:34,130 text. 25 00:01:34,530 --> 00:01:38,240 What is more important is what we're getting in the console. 26 00:01:38,610 --> 00:01:43,790 So in a console, I can see that this is the structure for every story. 27 00:01:44,100 --> 00:01:50,060 So we've got author, we have the number of comments and some other properties. 28 00:01:50,340 --> 00:01:56,810 So of course, one by one we can restructure them and then add them to our UI. 29 00:01:57,270 --> 00:01:58,470 So I have my story. 30 00:01:58,680 --> 00:02:06,210 And then the problem is that I'm looking for our object ID cards and an object ID that is the name of 31 00:02:06,210 --> 00:02:12,720 the property, because of course we know that we need to keep the values here unique because we have 32 00:02:12,720 --> 00:02:20,220 a list or we need the unique value and we can see that unique value is in the object ID property. 33 00:02:20,610 --> 00:02:22,920 And then I'll set it equal to my story. 34 00:02:22,920 --> 00:02:23,880 Of course, since I'm doing the. 35 00:02:24,210 --> 00:02:28,200 And then I would want to look for the title of the story. 36 00:02:28,240 --> 00:02:30,690 I want to get a number of comments. 37 00:02:30,990 --> 00:02:32,670 I also would want to get the URL. 38 00:02:33,030 --> 00:02:39,420 So of course the user can navigate that story and points as well as the author. 39 00:02:40,230 --> 00:02:44,940 So again, if you want different properties, just grab them from the story. 40 00:02:45,270 --> 00:02:49,340 And then as far as my return, well, let's say so. 41 00:02:49,350 --> 00:02:53,790 We have the article not to start, but we know that it is a list. 42 00:02:53,790 --> 00:02:56,040 So let's a property as well. 43 00:02:56,220 --> 00:03:01,590 And that one, of course, will be equal to the object, adding that instead of the article I'm going 44 00:03:01,590 --> 00:03:07,530 to go with heading for an out of class name and class name will be title. 45 00:03:07,920 --> 00:03:11,670 And then of course we pass in my title value. 46 00:03:11,760 --> 00:03:12,150 Correct. 47 00:03:12,450 --> 00:03:13,290 So I pass it. 48 00:03:13,300 --> 00:03:18,640 And there is now of course I have all the titles for the current. 49 00:03:18,640 --> 00:03:25,860 It's then I would want to set up my info where essentially I'm going to have the paragraph with author 50 00:03:26,100 --> 00:03:27,690 and number of comments. 51 00:03:28,140 --> 00:03:31,600 So here's what I want on display in this line over here. 52 00:03:32,010 --> 00:03:38,700 So this is going to be the amount of points and then the author, as well as how many comments this 53 00:03:38,700 --> 00:03:40,410 particular story has. 54 00:03:40,740 --> 00:03:41,640 Let's not forget back. 55 00:03:42,810 --> 00:03:49,440 We're going to go here with a paragraph and I would want to add a class name of info and instead of 56 00:03:49,440 --> 00:03:56,430 this paragraph, which is display the amount of points of this particular article has, and then let's 57 00:03:56,500 --> 00:03:59,220 add text points, points. 58 00:03:59,370 --> 00:04:06,300 And then by and also I want to go with one span where I would want to display the author. 59 00:04:06,930 --> 00:04:09,480 So I'm just going to access right away the author. 60 00:04:10,410 --> 00:04:13,620 So and then we'll have a vertical bar. 61 00:04:14,070 --> 00:04:22,470 And lastly, outside of the span, let's just go with a number of comments, number of comments and 62 00:04:22,470 --> 00:04:24,870 also comments as a text. 63 00:04:25,230 --> 00:04:29,070 So say that this is something we should see on the screen. 64 00:04:29,190 --> 00:04:31,080 We have the title, we have the points. 65 00:04:31,320 --> 00:04:36,850 We have the author, as well as how many comments this particular article has. 66 00:04:37,230 --> 00:04:39,720 And then lastly, I would want to add two things. 67 00:04:40,110 --> 00:04:45,150 One is going to be the link that allows the user to navigate that specific story. 68 00:04:45,390 --> 00:04:50,310 And then the second one is the remove button that allows us to remove that story. 69 00:04:50,820 --> 00:04:57,300 Of course, when I say remove story, I'm talking about the UI, so we'll just remove it from the UI 70 00:04:57,690 --> 00:04:59,700 and here instead of the dev. 71 00:05:00,730 --> 00:05:07,810 I'm going to go with my link and say your URL and then we're going to go Target and then blank since 72 00:05:07,810 --> 00:05:09,050 I would want to open a new page. 73 00:05:09,340 --> 00:05:14,770 But before we do that, you know, let's just set up our link and then the button and then we'll do 74 00:05:14,770 --> 00:05:15,560 that one last. 75 00:05:15,820 --> 00:05:22,510 Now, I do want to add here, though, for the styling and I'll say read and then hyphen link. 76 00:05:22,870 --> 00:05:27,490 And then as far as the value of, say, read and learn more. 77 00:05:27,760 --> 00:05:31,170 And then right next to my link, I'm going to go with my button. 78 00:05:31,450 --> 00:05:37,900 And then as far as the class name, I'll say remove the hyphen B10 and eventually there's going to be 79 00:05:37,900 --> 00:05:38,440 unclick. 80 00:05:38,950 --> 00:05:40,450 So I would want to read that story. 81 00:05:40,450 --> 00:05:43,570 But for the time being I'll just say remove. 82 00:05:43,750 --> 00:05:44,470 I'll save it. 83 00:05:45,500 --> 00:05:51,340 I should have both of these things now at the moment, nothing is happening when I click either of them. 84 00:05:51,410 --> 00:05:57,260 I mean, this one technically navigates to the article where I want it, but I would want to set up 85 00:05:57,260 --> 00:06:00,980 this functionality in a separate tab. 86 00:06:01,250 --> 00:06:07,490 So every time I click, I would want to open up new tab so the user stays on my app. 87 00:06:07,490 --> 00:06:13,460 And then if he or she wants to read the article, of course they would just need to look in the other 88 00:06:13,460 --> 00:06:13,760 time. 89 00:06:14,150 --> 00:06:21,000 And also there is a button which doesn't do anything, of course, or we will add that functionality. 90 00:06:21,410 --> 00:06:26,930 So first, I would want to deal with this one, the link, and simply if I want to open up a new tab, 91 00:06:27,290 --> 00:06:32,420 I can go Target Target and I'll set it equal to the blank. 92 00:06:32,690 --> 00:06:33,950 So underscore blank. 93 00:06:34,190 --> 00:06:39,110 But then once I do that, there's going to be a big fat complaint in here. 94 00:06:39,620 --> 00:06:46,570 And of course I'm going to be scrolling up and the north using target underscore blank without that 95 00:06:46,580 --> 00:06:47,480 relationship. 96 00:06:47,750 --> 00:06:51,070 And the text value is a security risk. 97 00:06:51,410 --> 00:06:57,470 And essentially what you need to do is just copy and paste this and then pass it in where you have the 98 00:06:57,470 --> 00:06:57,740 link. 99 00:06:59,030 --> 00:07:05,930 Just pass and that specific value and you're going to be in good shape, but now, of course, I can 100 00:07:05,930 --> 00:07:10,990 open this article, but I'm opening this up in time, which is good. 101 00:07:11,300 --> 00:07:15,440 That means that user stays in my application. 102 00:07:15,740 --> 00:07:21,030 And then, of course, I have the button that we will set up in the next video. 103 00:07:21,170 --> 00:07:27,080 So next video, we're about this move, but that is how our app should look like. 104 00:07:27,410 --> 00:07:32,720 So notice on a bigger screen, of course, now I have the Tulkarm layout. 105 00:07:32,990 --> 00:07:35,540 So that's why I have two stories side by side. 106 00:07:35,870 --> 00:07:42,100 Now, also navigate back to my stories and I don't need to console longboarding anymore. 107 00:07:42,350 --> 00:07:45,920 I know what I'm getting back, so I think we can just remove that. 108 00:07:46,280 --> 00:07:49,050 And yeah, I think we are in good shape. 109 00:07:49,310 --> 00:07:55,310 We have stories displayed and of course we can add more functionality to our application.