Fetching Data

[00:00:00]
>> All right, hopefully we get some data from somewhere, right? So we're not just making this up. So there's a Open Brewery DB. If you don't drink that's fine, awesome. You should totally make a library app or something like that, there's open library, this is really just for demonstration purposes.

[00:00:28]
But yeah, let's go by city San Diego, right? And we're in Minneapolis right now, so we'll do that. So in our connected callback, we're gonna do if not this breweries and this may be a place where we can initialize too and just say like, if this breweries doesn't exist then set to zero.

[00:00:52]
But this fetchBreweries, we're gonna go fetch some breweries, right? So we need to make a fetchBreweries, okay. So async cuz fetch, right? We're gonna async from our fetchBreweries and knew we wanted to do that. So we're gonna do here and then, so we need to do const response equals fetch and then we're gonna go get breweries but we wanna go to Minneapolis and mini.

[00:01:29]
No m, am I close?
>> You got it.
>> I got it. My [LAUGH] Midwesterner figured it out. Okay, here we go. And then what do we do? We actually just want the JSON response, so equals, but we're gonna do away that one and then we're going to await response.json cuz it's a promise.

[00:01:59]
And then we say this breweries equals JSON response then we get a JSON response, then we will do that. This should maybe do it, let's see what's going on. No, it did not, let's see. Cuz I set breweries. Let's see here.
>> [INAUDIBLE]
>> Okay, yeah, we could do that.

[00:02:29]
If not breweries that length, right? Cuz we know we'll have breweries and there you go. I got 20 breweries here in town hopefully. And okay, this is kinda cool. If you go to a new town you can get some breweries. Check them off your list but wouldn't it be great to check them off your list or do something like that.

[00:02:55]
One other thing we could do is also add a loading, right? Type Boolean and then this would be something we'll do this stuff loading true before and then they start loading false, right? Then down here, we could do some cool stuff, right? So we could do whatever we want to do here we could, we could really nest it as much as we want.

[00:03:34]
But we could do maybe, I kinda wanna put it down here, right? So this.loading, if this dot loading then html p, whoa, we're gonna just return html loading [INAUDIBLE] that otherwise do nothing, all right? Lets see if that kind of, it's not working. But maybe if we can trick it by messing up the URL here [LAUGH] still loading, right?

[00:04:14]
It's just gonna be loading forever. It's just the internet's too good here in the Frontend Masters studio. We're here, we're fetching from an API. We're getting some stuff, we're doing if it's loading thing, there's another way you could do this in line, you could also do up here.

[00:04:37]
If this.loading and then you could instead return here, right? So and then I basically just return the same thing I just returned, might be a more efficient way so you never actually get to the loading, you never get less if statements in your template is kind of better just in general.

[00:04:59]
And that might be more, yeah [INAUDIBLE]. Okay, cool. Well, we got that step in and so there's a million things we can do. But let's just add a visited state, right? Cuz that's what I want to do, right? I wanna keep track of things I've been to and check them off and make sure I'm going to the right places when I visit a new town.

[00:05:23]
So what we wanna do is we're probably gonna have to go down here and for every brewery, right? We're in, we have a brewery name, right? But we probably need a button in here and it's very clear view button and then visited or something, right? Like a visited button and we'll probably see that over here.

[00:05:48]
Looks awful, we can solve that, we know how to style things. So, but one thing we might wanna keep track of, how many we visited, stuff like that. So let's get this button working first though. So button, right? What do buttons do? You click them and then they do something, right?

[00:06:09]
And so, you're gonna just go to this.togglevisitedstatus and then we'll pass the brewery into that just cuz you wanna know which brewery you're going to. You could do a brewery ID if you want but we're basically just toggling the brewery status in. I have not closed something and it's very, okay, I need to close that.

[00:06:33]
Okay, cool. And here, down here, we'll just do it after the render function, toggle visited status and then expects a brewery and then we're going to this.breweries, this.breweries map or map through them all. We'll find every brewery, if the brew goodness code completed, you're in the way if the brewery equals, so we're gonna have to name this something else cuz we're using brewery to update, right?

[00:07:26]
That's you click down on button, you wanna update a brewery. And so, we're gonna look through all the breweries or map through all the breweries and if that brewery equals the brewery update, awesome, then we have work to do. So if that's true then we're going to basically splat out the whole brewery and then what we wanna set visited which is kind of a new attribute.

[00:07:54]
We're inventing this, we're hooking into the thing and we're saying visited does equals not brewery.visited. So that will be true on our one but false on everything else. And then we need to do the false case and then we're just gonna return the brewery. And let's see if my code formatter kicks in.

[00:08:19]
Once it's so mad at me, let's see, I messed up that's why he's mad at me. Okay, and then brewery is not defined, I thought it was.
>> Your [INAUDIBLE] seen instead of equally
>> Thank you, appreciate you. Okay, but it's still mad that brewery is not defined.

[00:08:48]
Let's see where does it think. Let's see, maybe I can do that. Maybe I can do trick it to do this. All right.
>> Here there's parenthesis there at the end of brewery [INAUDIBLE].
>> You're saying.
>> You're just mapping Boolean right now.
>> Okay, yeah, yeah, yeah.

[00:09:16]
All right, so there, thank you. And now I need to close all that because it's done. Great, okay, so now we can say visited, unvisited but maybe we'll, it's good but we need to maybe fix our button text a bit [LAUGH]. So we can say like, this.brewery.visited?mark unvisited, right?

[00:09:59]
So and then otherwise mark visited. This is why JavaScript is winning [LAUGH] the world, okay. Here we go, we got this, we're gonna just kinda keep formatting to make my OCD happy and then we're gonna close that and then we're gonna close that and then we're gonna close.

[00:10:25]
I don't know where that guy's coming from. Okay, that's the map. Okay, cool. And let's see what's happening, we still messed up our URL. No, that's fine but what is this guy about? Okay, okay. This is a weird bit about when you do a function inside of here.

[00:11:00]
Okay, when you want to pass the brewery, you kinda have to do the anonymous function and then pass that through. Okay, let's see what's the browser mad at, undefined proc cannot read property visited. Okay, so it must really hate that we did that. That brewery visited, we'll just do like [INAUDIBLE].

[00:11:27]
>> Maybe not on this, just brewery.
>> Just brewery, you're right, okay. So now we can mark these as visited, we have visiting and then we can actually go up here and instead of just doing the total count, right? Of breweries, we could just say, man, let's set up some variables.

[00:11:53]
[LAUGH] total visited equals this.breweries.filter.b dot visit whoa, b.visited, we'll just do that and then dot length, right? And then we'll do the opposite for total unvisited. B not. B.notvisited [SOUND] okay, and then that's fine. Then here I'm going to say total unvisited and total visited. Okay, three remaining.

[00:13:01]
Great, so we have visited zero but now we visited one, we visited two, visited three. So we can't get a reactive context building, right? Looks terrible, does not [LAUGH] quite fit our, we're not gonna make the millions of dollars we hope from this application. But so far we're kind of being able to kinda build out an application that goes and fetches JSON from somewhere and then is able to pipe that into kind of a reactive little context.

[00:13:32]
Any questions or should we keep going? Yes.
>> This might be premature, you're welcome to [INAUDIBLE].
>> Sure.
>> it's someone who's deeply familiar with react and is always looking to cut out libraries, the syntax that we just saw [INAUDIBLE] app, as you say very similar to much of how you would implement this and especially class component style react.

[00:13:53]
>> Yeah.
>> The kind of one piece that's in my head, missing in the puzzle is that kind of state management and the kind of the unidirectional data tree and react offers. Are there nascent solutions for that in the kind of web components world, are there?
>> Yeah.

[00:14:09]
>> Methods of, yeah.
>> Like a global state manager?
>> Exactly, yeah, [CROSSTALK] ways of yeah, relaying data up to some centralized store that then propagates that into a bunch of web components at all places on the DOM.
>> Yeah, total, so we're going back to our buddy lead.dev.

[00:14:30]
Right now and this kind of gets into the FAQ sort of portion of it, but right now reactive context is like BYO, bring your own reactor contests. And that is good just cuz you can go wild [LAUGH], as wild as you want. But there's a few things happening.

[00:14:56]
So in the documentation here for lead.dev. So it has this thing called a reactive no, my gosh, let me see here, I might need to go to the labs because I think it's a new experimental thing. Let me see it's called a reactive controller, there we go. A reactive controller and it's sort of sounds like it sounds but you build a controller that has state and then you, like this resize controller that tells the size I guess I should zoom in here.

[00:15:42]
So you have the resize controller and then it returns the text size or whatever. And that is sort of how they're solving it, you set up these reactive controllers and then you just basically not quite the use syntax but the new class, you say new resize controller to observe this reactive piece of state somewhere upstream.

[00:16:17]
Web Components not this one but the CG [INAUDIBLE] link to fiber lab. Boy, Web Components cg, that's my group. The Web Components community group, again, we're not official W3C or TC39 in JavaScript case. We can't propose elements, we can't propose things but the people who do and can propose things are working in this group [LAUGH] to kind of see it by people before things get put out in the world.

[00:16:55]
And one thing they are looking at is a official context protocol. Benjamin works at Adobe right now if I remember that correctly and there's some goals and non goals but basically you create context somewhere and then you can dispatch that through events, sort of event driven context manipulation.

[00:17:22]
And then you need to consume that reactive controller or that reactive context as well. So I think if you dispatch the event and get the logger context then you have the logger disposer and you have this logger, yeah, this logger gets sent to the value of the context event.

[00:17:48]
So. Not super clean but again this is sort of, Web Components likes to build out the primitives that you build the nice looking thing on top of. So this would become more the browser level way to do it and then you layer on a nice new emit API above that.

[00:18:10]
Yes.
>> Someone in chat mentioned reactive controller and lit element
>> Yeah, that's what I was talking about here so this reactive controller, this mouse controller example is pretty good. So you grab this mouse controller, the mouse controller looks a bit like this, it connects to a host and then watches the mouse move but it stores some data about itself or in broadcast this data or that data is in there.

[00:18:43]
And then mouse is that controller and then you have the mouse position. So the data store is happening upstream and then you are the data creation or whatever is happening upstream and you're just kind of using object, that so. Yeah, and again, this goes into that conversation of why would you use a library because they have some of the problems solved.

[00:19:12]
And I've seen a couple other things like fast was using it interesting way of using dependency injection. It was just a tweet and then it vanished but it was sort of this idea, you can create a reactive context and then inject it or store and then inject it in your component and start using it or committing to it and stuff like that.

[00:19:37]
Yeah, so this stuff exists and this is why maybe you wanna use the framework just so you can kind of get some of the benefits of using this stuff.