Getting Images

[00:00:00]
>> Jafar Husain: So did everybody get what we've done so far? We create an observable for each one of those dom, all the interesting dom events and we just merge them together and that's any action they can be performed on the UI and then we just subscribe to that an we display the learning bar.

[00:00:13]
So okay, easy stuff over. Let's start building images.
>> Jafar Husain: Help me out, folks at home I'll also take ideas from you as well. How should I start here? It's kinda of hard, right, because we could get images from loading a new sub in theory. But you get images from pressing Next and Back.

[00:00:38]
How do we even know where to start?
>> Speaker 2: Could start by getting the value of subSelect.
>> Jafar Husain: We could get the value of subSelect, okay. So I could go,
>> Jafar Husain: Like so.
>> Speaker 2: And then you could set images to get subimages, passing in that value.
>> Jafar Husain: Set images to-

[00:01:05]
>> Jafar Husain: Get subimages, and then I would pass in the value. That seems pretty reasonable to me.
>> Speaker 2: It'll give you a stream.
>> Jafar Husain: It'll give me a stream, absolutely.
>> Speaker 2: So you'll get a bunch.
>> Jafar Husain: It's technically going to be an observable of an array of all the image URLS, that's technically what I'm gonna get here.

[00:01:23]
Do we wanna take? Let's kick the tires, let's take a look at it in the console. How does that sound?
>> Jafar Husain: So what happens if we do that? I'm just gonna subscribe.
>> Jafar Husain: I'll comment this out for now.
>> Jafar Husain: Think I got an error, cuz I'm not seeing anything.

[00:02:04]
We got an array of 101. And look, we got a whole bunch of image URLs in there. All right, that's a pretty good start.
>> Jafar Husain: Do we feel closer? I feel a little bit closer. So, here's an interesting thing though. You notice the logic that we're doing of plucking this value out of the drop down list.

[00:02:28]
It's kinda already what we're doing in map, right? Like does anybody feel that way? We're kind of doing this logic right here. Isn't that very similar to what we're doing in the map function? I mean, it's weird. We've got a stream that'll give us the value whenever it changes, but we also want to get the value of what it is right now, right?

[00:02:52]
So this kind of repeats that code just a little bit. Kind of repeats that code. At least this piece. What if instead of a stream of changes, we had a stream of all the changes but it also started with the value of whatever it was right now. Does that make sense?

[00:03:11]
Often, that's a nice, that's a better way of thinking about the problem, because instead of thinking about it as, well, I'm just gonna do this thing, this one thing right now, and then I'm gonna worry about streams. Instead you can just take this one thing, stick it on the front of the stream, and then you can think exclusively about streams, thinking exclusively in terms of streams.

[00:03:29]
So if I wanted to just take the value of whatever was in sub-select and then just stick it on the front of the stream. How would I do that? Knowing how I solved the problem of animations allowed last time. In which we stuck a value at the front of the observable.

[00:03:45]
And a value at the back of the observable.
>> Speaker 2: KinCat?
>> Jafar Husain: Yeah, KinCat. So subs doesn't just mean, I don't really want subs to mean all the future changes of the subs. I want subs to include, the value of what subs is right now. And then it's just all the streams of all the subs I need to care about, so we're subtly shifting the definition of what subs is.

[00:04:08]
>> Jafar Husain: I'm gonna use KinCat.
>> Jafar Husain: Cool. So now, instead of this. Instead of just operating on whatever it is right now, let's do the equivalent of what this would be over every item in the substream. Which now includes not just future changes of the sub, but it'll immediately start with whatever the sub is right now.

[00:04:42]
So this is how you would do something to a scalar value. How do we do the equivalent of this on a scalar value to every value in the substream? That's the leap we need to make when we think about single value programming and stream programming. What do we do?

[00:04:58]
Well, we took a value and sub and then we got the sub images for it. How would I get the sub images for all of the values?
>> Speaker 2: Map it.
>> Jafar Husain: All the future values of subs. Yes, I would map it. Absolutely. So I'm gonna go images = subs.map.

[00:05:19]
And then I'm going to get a sub, and then I'm going to call, getSubImages. Now, how many dimensions is this collection?
>> Speaker 2: Don't you need a pass sub to getSubImages?
>> Jafar Husain: My bad, thank you.
>> Jafar Husain: Same question.
>> Speaker 2: Two dimensions.
>> Jafar Husain: Two dimensions. Why is it two dimensions?

[00:05:48]
>> Jafar Husain: What does getSubImages return?
>> Speaker 2: It's a string of image locations.
>> Jafar Husain: Yeah, well, it's technically an observable that gives you one array, but that's still a flat observable. It could be an array. It could be a number. It doesn't matter. Just because the observable only fires once, two doesn't mean it's not an observable.

[00:06:08]
So this is technically an observable of observables for the same reason as this is a two-dimensional collection. Remember this example that we did, guys?
>> Jafar Husain: So because we've called the function, which takes a simple value, i.e. the sub we're in and creates an observable of an array of all the images for that, right?

[00:06:29]
And we've executed it for every item in another observable, we're going to end up with a two dimensional observable. Make sense? So, all right. Well I can't subscribe to this as it is, it's a two dimensional observable.
>> Speaker 2: Can we use merge map, is it, or is there a KinCat map and a merge map?

[00:06:51]
>> Jafar Husain: Yeah, and just cuz you're using that term, that's just a shorthand for map merge all.
>> Speaker 2: Yeah.
>> Jafar Husain: So, merge map,
>> Jafar Husain: You do that, and then you can get rid of this. So everybody see that? It's just a short hand for map and merge all. And concat a map and concat all has a concat map which is a short for map and concat all and not surprisingly switch map is just short for map switch latest, okay.

[00:07:19]
So what do we think guys? So now we have a one dimensional observable of a raise of images. Cool. We can subscribe to this. Heck, let's actually try it, what the hell.
>> Jafar Husain: See what happens.
>> Jafar Husain: Uh-oh.
>> Speaker 2: You misspelled the concat up above.
>> Speaker 2: There it is.

[00:07:49]
>> Jafar Husain: Wow, so instantly, we get all of these. What happened there? The first sub just came leaping right out of that observable, right? Because we concatenated it to the front. And so we immediately turned around and got all of the images for that. By the way, the reason it happened so quickly is I'm caching in local storage the result of these calls just so we don't hit the Reddit API too often as you guys were all experimenting with this on your own.

[00:08:15]
So that's why the second request happened so quickly. But in point of fact, in reality, it would probably take a few hundred milliseconds. Does that make sense? Two-tenths of milliseconds. So all right, we've got and now presumably if I change the sub this will be interesting. If I change the sub what happens?

[00:08:36]
>> Jafar Husain: I would expect this to also get yet another array. I don't know. I can't tell if we did, but we should. Yeah, we did. So here's the second array beginning here. I think. Hard to tell, but does that make sense? Just so we're 100% clear that that's working.

[00:08:53]
I will log the lengths and then we should see that we get it twice.
>> Jafar Husain: So once I change the sub, right, does that make sense? And if I switch it back, you get the picture. Okay, so we're getting close here, all right