1
00:00:00,900 --> 00:00:06,240
We now need to get our list of results down into each of our different results list components before

2
00:00:06,240 --> 00:00:08,150
we start passing those down as props.

3
00:00:08,160 --> 00:00:12,780
I just want to give you a quick reminder of what exactly is inside of this results variable.

4
00:00:12,780 --> 00:00:18,210
So inside of my code or my search screen component I'm gonna add in a console log of results like so

5
00:00:18,870 --> 00:00:21,150
remember any time our component is shown on the screen.

6
00:00:21,150 --> 00:00:25,980
We're going to automatically initiate a search of the Yelp API so we should see one console log where

7
00:00:25,980 --> 00:00:31,030
results is an empty array and then a second one where it has a ton of data inside of it.

8
00:00:31,030 --> 00:00:34,250
So now I'll flip back go to my terminal and check out that console log.

9
00:00:34,260 --> 00:00:35,880
YEP HERE IT IS RIGHT HERE.

10
00:00:36,000 --> 00:00:41,520
SO THAT RESULTS variable is an array with a bunch of objects inside of it each object represents one

11
00:00:41,550 --> 00:00:44,000
different business or restaurant.

12
00:00:44,190 --> 00:00:47,540
I want to recall that inside of this object that represents a business.

13
00:00:47,640 --> 00:00:53,630
There's a bunch of different useful properties one that we really care about is the price property the

14
00:00:53,640 --> 00:00:58,030
price property is going to have a string that is some number of dollar signs.

15
00:00:58,170 --> 00:01:01,920
Those dollar signs indicate how expensive a given restaurant is.

16
00:01:01,920 --> 00:01:07,230
So we want to use that price property right there to decide how to group up all of our different restaurants

17
00:01:07,680 --> 00:01:12,120
and show them either as cost effective bit pricier or big spender.

18
00:01:12,330 --> 00:01:17,100
So at some point time we're going to have to write out some filtering logic or some grouping logic essentially

19
00:01:17,340 --> 00:01:21,920
and we're going to want to group all of our search results depending upon that price.

20
00:01:21,930 --> 00:01:25,960
Property now that starts to raise a really interesting question.

21
00:01:26,110 --> 00:01:28,180
Let me show you what I mean.

22
00:01:28,240 --> 00:01:33,070
The big question here is where should we write out all that grouping logic all that logic that's going

23
00:01:33,070 --> 00:01:38,530
to look at our list of results divvy it up somehow and then show the appropriate list of results inside

24
00:01:38,530 --> 00:01:40,870
of our different three components.

25
00:01:40,870 --> 00:01:45,130
There's two different ways we can handle this and probably several more but there's probably two very

26
00:01:45,130 --> 00:01:51,440
obvious ones so to write out this filtering logic we could write it all out inside of our search screen

27
00:01:52,440 --> 00:01:57,420
so inside of search screen we would write out some filtering logic to find all the businesses with one

28
00:01:57,420 --> 00:02:03,390
dollar sign two and three and then once we find those different lists we can pass them down to our results

29
00:02:03,390 --> 00:02:05,020
list components.

30
00:02:05,100 --> 00:02:09,390
So the first one might get all the results with one dollar sign and then all the results of two and

31
00:02:09,450 --> 00:02:15,100
all then with three the other way we could approach this would be to just pass down the entire list

32
00:02:15,100 --> 00:02:18,390
of results into each of our results list components.

33
00:02:18,400 --> 00:02:23,170
In addition we could also pass in a second prop that says maybe to the first one please show all the

34
00:02:23,170 --> 00:02:26,500
businesses or all the results with just one dollar sign.

35
00:02:26,500 --> 00:02:31,780
So in this case we would add in some logic to our results list to decide exactly how to filter or what

36
00:02:31,780 --> 00:02:35,310
set of results to show to the user now.

37
00:02:35,330 --> 00:02:37,760
Either approach would definitely work.

38
00:02:37,910 --> 00:02:42,070
I'm going to suggest however that maybe option number one is a little bit better.

39
00:02:42,080 --> 00:02:43,270
Here's why.

40
00:02:43,370 --> 00:02:48,680
Anytime we have a component called something like results list usually the thought is that this component

41
00:02:48,680 --> 00:02:55,480
is going to take some amount of data and render everything inside there onto the screen so the implicit

42
00:02:55,510 --> 00:03:00,370
or the kind of thinking is that this component is going to take some list of data and no matter what

43
00:03:00,700 --> 00:03:06,910
every record we give it is going to somehow appear on the screen to the user so in general if we pass

44
00:03:06,940 --> 00:03:11,890
summary of data into this component right here and it doesn't show every last object that would be kind

45
00:03:11,890 --> 00:03:16,420
of surprising behavior to me it would mean that there's some kind of hidden configuration inside of

46
00:03:16,420 --> 00:03:22,260
results list that controls exactly what set of objects it shows and what set it doesn't.

47
00:03:22,440 --> 00:03:26,600
And that just makes understanding the results list a little bit more challenging.

48
00:03:26,680 --> 00:03:28,920
So instead I think we should take option number one.

49
00:03:28,960 --> 00:03:34,360
We should do all of our filtering and grouping logic inside of the search screen and then pass just

50
00:03:34,360 --> 00:03:41,510
the relevant results to each instance of our component again you can take either approach either approaches

51
00:03:41,560 --> 00:03:46,050
a hundred percent okay but I think this one just ultimately makes a little bit more sense.

52
00:03:46,710 --> 00:03:46,920
Okay.

53
00:03:46,940 --> 00:03:51,000
So let's start to write out some code to actually do all this grouping logic inside of our search screen

54
00:03:52,290 --> 00:03:53,560
so back inside of a search screen.

55
00:03:53,570 --> 00:03:58,680
I'm gonna delete that console log I just wrote out and I'm going to make a helper function called filter

56
00:03:58,710 --> 00:04:00,850
results by price.

57
00:04:01,230 --> 00:04:07,600
That's going to assist with this grouping task as an argument to this function I'm gonna pass in the

58
00:04:07,600 --> 00:04:09,790
price that we're looking for.

59
00:04:09,880 --> 00:04:14,390
So the idea here is that we're gonna call filter results by price three times each time we're gonna

60
00:04:14,410 --> 00:04:20,250
pass in some argument that's going to tell this function what set of results we want to get back.

61
00:04:20,290 --> 00:04:31,450
So ultimately price is going to be equal to one dollar sign or two or three like so it'll be our job

62
00:04:31,450 --> 00:04:37,330
inside of here to inspect that price variable inspect the list of results we got back and then return

63
00:04:37,450 --> 00:04:41,720
just the appropriate results so here's how we might do that.

64
00:04:41,720 --> 00:04:44,550
We might say something like return results.

65
00:04:44,600 --> 00:04:51,890
Dot filter and for every result inside of our results array we will ask ourselves if the results dot

66
00:04:51,890 --> 00:04:54,820
price is equal to the price that we just passed in.

67
00:04:55,400 --> 00:04:59,900
So if that's true right there we're going to return that inside of a new results set from this function

68
00:04:59,900 --> 00:05:01,690
overall.

69
00:05:01,710 --> 00:05:06,780
Now we can very easily use this function to pass down a customized set of results to each of our results

70
00:05:06,780 --> 00:05:13,750
list components so on the first one I'll add in a prop called results.

71
00:05:13,770 --> 00:05:18,450
So this is going to be the array of data that we want this component to show and its value is going

72
00:05:18,450 --> 00:05:21,180
to come from filter results by price

73
00:05:25,230 --> 00:05:31,290
and we want this first initial grouping to only show the one dollar sign restaurants then for the second

74
00:05:31,290 --> 00:05:34,320
one we'll do something very similar so I'm just gonna copy paste it down.

75
00:05:34,410 --> 00:05:40,470
But this one I want to show to dollar sign places and then the third one I'll have it show three dollar

76
00:05:40,470 --> 00:05:47,370
sign places just as a quick side note here the Yelp API also technically goes up to for dollar signs.

77
00:05:47,370 --> 00:05:53,470
But again we're just gonna worry about the one two and three dollar sign places okay.

78
00:05:53,470 --> 00:05:54,850
So that should be it.

79
00:05:54,850 --> 00:06:00,330
So now to actually test this out we can go over to results list we should be able to receive that new

80
00:06:00,330 --> 00:06:09,630
prop of results and then I'll add in a new temporary text element and I'll just print out how many results

81
00:06:09,630 --> 00:06:10,440
we got.

82
00:06:10,440 --> 00:06:17,910
So I'll put results is results dot link like so so I would expect to see now three additional pieces

83
00:06:17,910 --> 00:06:22,950
of text for each of our different results list components and each one should have a slightly different

84
00:06:22,950 --> 00:06:25,030
number of results.

85
00:06:25,130 --> 00:06:28,900
So I can say both these files and we're gonna very quickly see.

86
00:06:28,990 --> 00:06:29,280
Okay.

87
00:06:29,290 --> 00:06:29,710
There we go.

88
00:06:29,710 --> 00:06:35,810
So we get five cost effective places forty one bit price here and one big spender.

89
00:06:35,920 --> 00:06:40,800
Notice that we had overall 50 results but these only total up to 47.

90
00:06:40,840 --> 00:06:44,230
So the remaining three results are for dollar sign places.

91
00:06:44,230 --> 00:06:46,530
Again we're just not going to worry about those.

92
00:06:46,600 --> 00:06:51,010
If you wanted to add in one more copy of results list and show the four dollar sign places feel free

93
00:06:51,010 --> 00:06:55,120
to do so but I'm going to worry about showing these three groups okay.

94
00:06:55,190 --> 00:06:56,060
So this is pretty good.

95
00:06:56,060 --> 00:07:01,520
We've now got our title inside of results list and we've got the set of data that we want to show.

96
00:07:01,620 --> 00:07:06,380
It's not the last thing we do is somehow build a list out of all these different objects that were being

97
00:07:06,380 --> 00:07:07,310
passed in.

98
00:07:07,400 --> 00:07:09,320
So let's start to take care of that in the next video.