1
00:00:00,470 --> 00:00:07,970
All right, I think we're done with environment variables and hopefully your head is not spinning.

2
00:00:08,270 --> 00:00:16,250
Just remember to create dot envy in sauce and set up variable name and then some kind of value and then,

3
00:00:16,250 --> 00:00:22,310
of course, an axis that you just go with process dot energy and then whatever is the name.

4
00:00:22,490 --> 00:00:25,820
And of course, always, always you need to restart the server.

5
00:00:26,210 --> 00:00:32,120
And you also need to make sure that you add the filename to the get ignored.

6
00:00:32,570 --> 00:00:37,670
So with that out of the way and by the way, for some reason I'm sitting in a file and I'm going to

7
00:00:37,670 --> 00:00:40,220
go back to Abcess where I have the setup.

8
00:00:40,670 --> 00:00:45,890
And once we have everything in place now, of course, we can work on our return.

9
00:00:46,130 --> 00:00:46,580
Yes.

10
00:00:46,580 --> 00:00:48,970
Later we'll make this a bit more interesting.

11
00:00:49,250 --> 00:00:53,710
But for the time being, we have the function we can get out and images.

12
00:00:54,080 --> 00:00:56,120
So we might as well set up our return.

13
00:00:56,970 --> 00:01:00,430
No one gotcha here is that all right away?

14
00:01:00,450 --> 00:01:06,870
Also create the form so we won't set up the functionality, but the form will be there since we'll be

15
00:01:06,870 --> 00:01:07,870
adding the photos.

16
00:01:07,890 --> 00:01:09,360
So we might as well do that.

17
00:01:09,780 --> 00:01:13,250
And we're going to start in our images.

18
00:01:13,470 --> 00:01:19,200
So where we're fetching the images and of course, the moment I have the data now, I would want to

19
00:01:19,200 --> 00:01:27,420
use my set photos and of course I would want to remove the loading or start loading to false, because

20
00:01:27,960 --> 00:01:34,800
keep in mind, when we start fetching images, of course, we set loading to do so in here.

21
00:01:34,800 --> 00:01:41,020
I'm going to go with set and line photos and of course, I'll pass in my data.

22
00:01:41,340 --> 00:01:43,590
So that is going to be my right.

23
00:01:43,950 --> 00:01:49,270
And then once I have that, I'm going to go with set and then uploading equal to false.

24
00:01:49,680 --> 00:01:53,000
Now, of course, we can start working on our return.

25
00:01:53,490 --> 00:01:59,360
So first again, we'll just set up that form and then eventually we'll deal with images.

26
00:01:59,730 --> 00:02:05,070
So as far as our turn, we're going to go with mine and I'm going to remove the text that I'm going

27
00:02:05,070 --> 00:02:10,200
to go with a section and the class name will be Search Like So.

28
00:02:10,500 --> 00:02:15,360
And then instead of the section, there's going to be a form with a class of search form.

29
00:02:15,810 --> 00:02:18,600
So search I found form.

30
00:02:19,860 --> 00:02:22,790
As far as the action, we don't care about the action.

31
00:02:22,920 --> 00:02:28,560
We'll handle it on our own end and then we'll have one input.

32
00:02:28,900 --> 00:02:30,690
The type will be text.

33
00:02:30,690 --> 00:02:36,780
So we just go with the basic one and I'll add a placeholder and the value will be search.

34
00:02:37,020 --> 00:02:38,580
So we add the value over here.

35
00:02:38,880 --> 00:02:41,300
And of course, I would want to start a little bit as well.

36
00:02:42,360 --> 00:02:45,310
So we're going to go with form my input.

37
00:02:45,690 --> 00:02:52,440
Now, keep in mind, of course, eventually there's going to be a value on change like we normally have,

38
00:02:52,440 --> 00:02:54,800
but for the time being, we don't care about that.

39
00:02:55,290 --> 00:02:59,750
And then inside of the forum, I would want to go with someone.

40
00:02:59,970 --> 00:03:08,680
So Type's met online and hear a class name and this is going to be met and then I meet.

41
00:03:09,520 --> 00:03:12,920
Now I think I'll write a way set up on Kaleck.

42
00:03:13,200 --> 00:03:19,260
So basically when I submit the form and I'll have my handle submit, of course it's just going to be

43
00:03:19,260 --> 00:03:20,450
a placeholder function.

44
00:03:20,610 --> 00:03:25,620
We're not going to worry about functionality, but at least we could set up a placeholder.

45
00:03:25,920 --> 00:03:30,560
And then I already imported the icon from react icons.

46
00:03:30,810 --> 00:03:32,190
And that's one side of the button.

47
00:03:32,520 --> 00:03:35,730
I'll place my F.A.A. search icon.

48
00:03:35,910 --> 00:03:40,410
And if I say right now, of course, there's going to be a big fat complaint because I don't have an

49
00:03:40,410 --> 00:03:40,920
estimate.

50
00:03:41,370 --> 00:03:52,110
So either after the use the fact or before I'm going to go with Zimet, so Consed Handles met and of

51
00:03:52,110 --> 00:03:56,520
course I'm going to be looking for the event object and I would want to prevent a default.

52
00:03:56,640 --> 00:03:57,590
That's going to be a start.

53
00:03:57,870 --> 00:04:01,080
So we go here with prevent default.

54
00:04:02,020 --> 00:04:07,920
And I would want some kind of value in a console, so just say hello, OK, awesome.

55
00:04:08,390 --> 00:04:15,440
And then once we save and by the way, of course, we do need to hear a class and for some reason,

56
00:04:15,650 --> 00:04:20,570
some, of course, should be submit BDM, OK.

57
00:04:20,600 --> 00:04:23,870
And now, of course, we can see that we have a better looking button.

58
00:04:24,290 --> 00:04:26,360
And I'm just going to type something here.

59
00:04:26,900 --> 00:04:35,470
And he finds back in a console and once I click once I click on a button where I can see the Hello Beautiful.

60
00:04:35,990 --> 00:04:43,100
And then right next to the section where we have the search, I'm going to go with my photos.

61
00:04:43,410 --> 00:04:48,080
So here I have the section and I'm going to place the second section right next to it.

62
00:04:48,440 --> 00:04:53,980
We'll have a class name of photos show online inside of it.

63
00:04:53,990 --> 00:04:59,090
There's going to be there with a class, a photo center, photos online center.

64
00:04:59,390 --> 00:05:02,180
And I'm going to iterate over my photos.

65
00:05:02,990 --> 00:05:04,570
So what photos am I talking about?

66
00:05:04,850 --> 00:05:05,670
Of course, these ones.

67
00:05:06,170 --> 00:05:12,490
So these are my state values for one state value, which is an array, of course.

68
00:05:12,920 --> 00:05:14,990
And then I would want to iterate over that.

69
00:05:14,990 --> 00:05:15,340
All right.

70
00:05:15,890 --> 00:05:24,200
For every item, I'm going to return a photo component, something that we pretty much are doing in

71
00:05:24,200 --> 00:05:25,360
every project.

72
00:05:25,520 --> 00:05:29,750
So I think at this point, we should be extremely familiar with that.

73
00:05:30,020 --> 00:05:35,000
We're going to go with photos and then, of course, map online for every photo.

74
00:05:35,330 --> 00:05:38,300
I would want to return a photo here.

75
00:05:38,690 --> 00:05:43,970
Now, as far as I remember, they didn't have I.D., so I just passed in the annex here.

76
00:05:44,390 --> 00:05:47,870
And then I'm going to name this image and then index.

77
00:05:48,140 --> 00:05:54,290
So, of course, this all references each photo and then I have the index just there's going to be index

78
00:05:54,290 --> 00:06:00,550
in the array and then I'll pass all the properties from the image to my photo component.

79
00:06:00,680 --> 00:06:04,130
So I go down the dot and then the image.

80
00:06:04,850 --> 00:06:05,220
Awesome.

81
00:06:05,870 --> 00:06:11,870
Now we say that we should have photo component because that's the heading queue that I currently have

82
00:06:11,870 --> 00:06:12,570
in a component.

83
00:06:13,070 --> 00:06:18,560
And before we go any further right next to there, I would want to set up my loading.

84
00:06:18,950 --> 00:06:21,860
So in this case, loading is going to be a little bit different because.

85
00:06:22,930 --> 00:06:29,050
We'll be listening for Skrull event, so if you take a look at the complete project, notice how I'm

86
00:06:29,050 --> 00:06:34,450
not really displaying loading when we load here somewhere on the top.

87
00:06:35,260 --> 00:06:38,530
As we keep on scrolling, notice, the loading is in the bottom.

88
00:06:38,860 --> 00:06:43,200
That's why we don't have multiple times pass the photos.

89
00:06:43,420 --> 00:06:44,740
I have my loading.

90
00:06:44,790 --> 00:06:45,880
That was the whole point.

91
00:06:46,150 --> 00:06:48,370
And I'm just going to go with congressional rendering.

92
00:06:48,670 --> 00:06:56,710
So we go if we're loading, then, of course, our one on display heading to and a class name floating

93
00:06:57,160 --> 00:07:00,500
and the text will be loading and then dot, dot, dot.

94
00:07:00,880 --> 00:07:02,250
OK, awesome.

95
00:07:02,260 --> 00:07:03,820
We save that.

96
00:07:04,090 --> 00:07:13,000
And the last thing that I would want to set up, of course, in the UI is the photo so I can see a better

97
00:07:13,180 --> 00:07:14,710
looking component.

98
00:07:15,100 --> 00:07:19,030
So I'm going to navigate, of course, to my photo dress.

99
00:07:19,180 --> 00:07:20,860
That is my component.

100
00:07:21,280 --> 00:07:25,610
And for the time being, why don't we just cancel?

101
00:07:25,620 --> 00:07:27,010
Like, what is that image?

102
00:07:27,010 --> 00:07:30,640
Because, of course, I want to go over what properties I'm looking for.

103
00:07:31,000 --> 00:07:38,130
So back in the objets before I pass in the image, I'll also cancel login and you can see that.

104
00:07:38,140 --> 00:07:40,300
And by the way, of course, that did have the image.

105
00:07:40,300 --> 00:07:41,550
I don't know why I didn't have that.

106
00:07:41,560 --> 00:07:47,460
So for the time being, let's just leave it the index and then maybe later I'll change it or, you know,

107
00:07:47,740 --> 00:07:48,750
why don't we do it right now?

108
00:07:49,150 --> 00:07:52,750
So we're going to go with image and then dot it for some reason.

109
00:07:52,750 --> 00:07:56,710
I don't know why I went with it, but just switch back to the.

110
00:07:57,490 --> 00:08:03,250
Now, what else am I looking for here in this particular object?

111
00:08:03,580 --> 00:08:10,030
Well, first of all, I would want to get of course, the euro amount is sitting in the EU or else.

112
00:08:10,300 --> 00:08:13,400
And then more specifically, I'm looking for the regular.

113
00:08:13,840 --> 00:08:15,430
So this is going to be the object.

114
00:08:15,430 --> 00:08:16,450
That's what I'm looking for.

115
00:08:16,820 --> 00:08:19,450
Then I would want the alternative description.

116
00:08:20,550 --> 00:08:22,050
So that should be somewhere here.

117
00:08:22,080 --> 00:08:22,860
So there it is.

118
00:08:23,040 --> 00:08:25,270
That's the property then I would want to check.

119
00:08:25,290 --> 00:08:29,700
Well, how many like the photo has and in this case, that is one.

120
00:08:30,120 --> 00:08:34,070
And then more specifically, I would want to get info about the user.

121
00:08:34,440 --> 00:08:41,130
So notice here the user object, I get it over here and then I'll take a look at the name of the user.

122
00:08:41,490 --> 00:08:49,460
I would want to have portfolio URL because notice as you're hovering, I want to show that photo.

123
00:08:49,770 --> 00:08:53,490
And then lastly, I would also want to get the image.

124
00:08:53,970 --> 00:08:59,010
And that image, of course, is going to be in the profile image and one medium.

125
00:08:59,340 --> 00:09:04,310
So this is going to be the case where, again, we have a bunch of nested objects.

126
00:09:04,740 --> 00:09:11,640
So the URL is, of course, when we click on the photo and then the actual photo is coming from that

127
00:09:11,640 --> 00:09:15,640
profile image and then more specifically, medium property.

128
00:09:15,930 --> 00:09:21,840
So if you want to double check, just take a look at the object, what properties it has.

129
00:09:21,840 --> 00:09:24,720
And then, of course, if you want different ones, go with different ones.

130
00:09:25,020 --> 00:09:27,300
But in my case, I'm going to remove this image.

131
00:09:28,390 --> 00:09:32,560
Because they already showed you what we're going to be looking for and in this case, I'm just going

132
00:09:32,560 --> 00:09:37,280
to do all the destruction right here in the function parameters.

133
00:09:37,600 --> 00:09:43,330
So, first of all, I'm going to be looking for that photo and that is sitting in the or else that's

134
00:09:43,330 --> 00:09:44,140
the proper name.

135
00:09:44,350 --> 00:09:46,680
And then more specifically, regular.

136
00:09:47,050 --> 00:09:48,990
OK, that is the name.

137
00:09:49,330 --> 00:09:55,210
And then as far as the return, of course, I'm going to go with article or here and line inside of

138
00:09:55,210 --> 00:09:55,770
the article.

139
00:09:55,780 --> 00:10:02,770
And by the way, I would want to add a class photo here, photo and then side of this article.

140
00:10:03,050 --> 00:10:06,910
I would want to go with image online for the source.

141
00:10:07,160 --> 00:10:09,060
We're going to go with our property.

142
00:10:09,370 --> 00:10:15,150
And then, of course, I also want to have that alternative description shown here where I have the

143
00:10:15,160 --> 00:10:15,720
URLs.

144
00:10:15,760 --> 00:10:17,220
It's not in the same object.

145
00:10:17,500 --> 00:10:19,180
That's why we add comma.

146
00:10:19,600 --> 00:10:27,010
So that one is sitting on the main object and we just go without underscore and description like so

147
00:10:27,370 --> 00:10:34,750
online we would want to grab that property copy and paste and now we're in good shape where of course

148
00:10:34,960 --> 00:10:42,760
we have the images and then once we have the images, then of course we can set up also info about the

149
00:10:42,760 --> 00:10:44,580
image and the way it's going to work.

150
00:10:44,590 --> 00:10:49,270
I'm going to go with Def with a class of photo and line info.

151
00:10:50,450 --> 00:10:57,410
And this is where I'll place the name, the likes and also information about the user, so let's keep

152
00:10:57,410 --> 00:10:58,760
on the structuring.

153
00:10:58,760 --> 00:11:04,470
We're looking for likes and then we have a user object and line inside of the user object.

154
00:11:04,490 --> 00:11:05,170
We have a name.

155
00:11:05,570 --> 00:11:09,850
We have portfolio and underscore.

156
00:11:09,890 --> 00:11:10,440
You are.

157
00:11:11,390 --> 00:11:18,150
And then also I would want to get that image and I want to sitting even more or less that so we go with

158
00:11:18,170 --> 00:11:24,660
profile, underscore you all and more specifically, medium, medium like so.

159
00:11:24,950 --> 00:11:31,910
So once I say I've noticed how we have a bunch of nested structures and it looks like I messed up a

160
00:11:31,910 --> 00:11:38,270
little bit on a proper name, it shouldn't be profile, you should be profile image.

161
00:11:38,690 --> 00:11:43,690
Now we're getting the image of the user and then of course within the info.

162
00:11:43,730 --> 00:11:45,610
Now I would want to pass that data.

163
00:11:46,040 --> 00:11:51,520
So start here with heading for online or set up the name of the user.

164
00:11:51,830 --> 00:11:57,850
Then we have the paragraph with the likes and then we'll just add like, OK, so let's save.

165
00:11:58,370 --> 00:12:02,500
And then also within this div, I would want to set up my link.

166
00:12:02,880 --> 00:12:11,150
Now the thing is I have there a Tulkarm lounge so I'll place the for and the paragraph in there and

167
00:12:11,150 --> 00:12:20,060
then right next to it I will set up my link as far as the we're going for port folio and then underscore

168
00:12:20,090 --> 00:12:22,880
you are all online for the image.

169
00:12:22,880 --> 00:12:26,770
Of course I would want to set up that image of the user.

170
00:12:27,110 --> 00:12:34,010
So remember when we structured the medium, this is where we pass it and we go with medium and long

171
00:12:34,010 --> 00:12:35,020
for alternative.

172
00:12:35,390 --> 00:12:42,290
We can go with, I don't know, maybe name and we're going to go with class name and then we're looking

173
00:12:42,290 --> 00:12:46,480
for user, my friend and I g.

174
00:12:46,880 --> 00:12:56,030
And if everything is correct, my app should not break and I also can remove my console log.

175
00:12:56,270 --> 00:13:02,360
So let me keep on scrolling and line here in line forty seven.

176
00:13:02,360 --> 00:13:11,390
I'm going to remove my console log and that should be our application where on initial load we get ten

177
00:13:11,480 --> 00:13:19,370
images and then when we hover over the image, unless we get the info about the image that I like as

178
00:13:19,370 --> 00:13:23,540
well as the user that share the photo.

179
00:13:23,870 --> 00:13:25,030
OK, awesome.

180
00:13:25,380 --> 00:13:30,590
Now of course we can make our app a bit interesting by adding more functionality.