Project JavaScript: Loading State

[00:00:00]
>> All right, so let's go grab the word of the day. And I'm just gonna do that here directly, you could write another function to go do that, I"m not, I'm just gonna do it right here cuz it's not a lot of work. Cuz you only request the word of the day once, right, when the page is loaded.

[00:00:17]
So const res = await fetch ("https://words.dev-apis.com"), make sure you get the URL correct. It's like mailing a letter, you have to make sure you mail it to the right address or it doesn't work, word-of-the-day. Why res? This is a common shorthand for response, it's a response from the API.

[00:00:57]
And if you're feeling like you wanna have a fun game here, just put random=1, and you'll get a new word every single time. I will warn you, once you create this, you'll waste a bunch of time playing the game, it's just always happens cuz you wanna guess the damn word.

[00:01:13]
Maybe, I'm just projecting here, I'm definitely projecting here. Anyway, we'll stick to this one cuz I don't wanna end up playing the game too much, I'll embarrass myself. Okay, I'll say const resObj = await res.json, and then now I have the word of the day, right? So const word =, Yeah, it'll be resObj.word, right?

[00:01:57]
Now, I'll show you a fun little trick, there's a thing called destructuring, which I do in my answer here. If I do it like this, This is basically saying, I know what I'm getting back from this has a property in it called word, pull that out and call it word.

[00:02:15]
I'm gonna leave that off, but that's where that is in my code. We're just gonna call this resObj, for now, and you know what else? And we're also gonna make this, too, uppercase, because the API response is gonna give you back a lowercase one. And if you remember, I'm working 100% in uppercase, so I'm just gonna make everything sure everything is always in uppercase.

[00:02:37]
I now have the word, which is here, so I'm just gonna say, console.log(word). So I'll go over here, refresh, check out this. And now I have IVORY here, right? I also have a console log down here for all the button presses, which I am going to get rid of, cuz it's gonna annoy me.

[00:03:01]
Which is good right? I am now getting IVORY back from the API. So, let's use the dev tools to figure this out, there's a dev tool here called Network. Click on that one, you might have to refresh the page, and you'll see something that looks like this. Typically it would show you all the HTML and CSS and JavaScript that you got back as well.

[00:03:25]
Because we're using file here, the computer won't show it, but if you're on Google.com, we'd be able to see, well, let's just look at it. So here on Google.com, right? If you come in here to the dev tools, you can see all the various different requests. This is all of the HTML, the CSS, the JavaScript this page is loading.

[00:03:45]
You'll see some of these red ones here, that's actually my ad blocker blocking a bunch of stuff on Google. Some of these will be CSS, looks like none of its CSS, but some of its HTML, some of it is JavaScript, and there's one here called XHR. I forgot what XHR stands for, but it's all of your AJAX requests.

[00:04:08]
So, if we go back over to our Word Masters, you can see it's only loading one thing, but specifically if you click on the XHR, it's loading that word-of-the-day. If I click on it, it'll open this little thing down here, I can see all the things that it sent back to me, I got a 200, okay.

[00:04:29]
Most of you are probably familiar with 404 not found, right? The meme of whenever you can't find something it's a 404 error, that's called an HTTP status. So you may not know this, but l a 200 request is everything's okay, everything went great. A 301 is a redirect, right, so it's, hey, you went here, but you actually need to go here, right?

[00:04:55]
So for example, I think if you go to nest.com, it'll take you to Google.com, right? That's gonna be done via a redirect, right, like a 300 or something like that, cuz Nest bought, or rather, Google bought Nest, right? So that's a 300, a 400 is you messed up, right?

[00:05:16]
You did something wrong, so a 403 is forbidden, meaning you're trying to access something that you can't. A 404 is not found. There's, what is it, a 437 is I'm a teapot, which is a computer science joke. Someone made a coffee maker and the joke was that you make a request to not the coffee maker but the tea maker and it'll say, I'm a teapot, right?

[00:05:41]
And then all the 500s are the server crashed, right? Sso if you get a 500, it's like, hey, our fault, something broke. Those are all the HTTP statuses, which is what you'll see here with status. You'll see all the response headers, it'll tell you how long the content is.

[00:06:01]
All sorts of things like that. But more importantly, is you wanna look at the response, this is what the API actually sent back to you, right? So I got IVORY and 53 back from the API. I use this all the time, which is why I wanted to show you, okay.

[00:06:25]
So, I now have the word, awesome. So I think the next thing that I would do here, Maybe, we'll do the loading indicator next. I think that's probably a good idea, cuz once this is loaded, then we can stop showing the loading indicator. Probably what I would do here is I'd just make a function that just hides the loading indicator, right?

[00:06:50]
So, I'll make another function here, function setLoading, something like that, that's what I called it here in my notes. It'll take in some true or false. So you could totally say, if is loading, add it, if not loading, don't add it. I'll show you a shorthand for doing that.

[00:07:12]
If you remember, I grabbed up here the loading div, so I already have this available. And if you remember, I created the hidden class, right? So what I'm gonna do here is I'm gonna say, loadingDiv.classist, and then there's a function here called toggle. So, if I do add('hidden'), right, even if it's there, it'll add it.

[00:07:36]
And if I do, I think it's remove, If it's not there, it'll always try and remove it. There's one called toggle, and then I can give it isLoading. So if loading is true it'll add it. If it's loading is false, then it will remove it. So it's just I don't have to do an if-then statement, I can just use toggle.

[00:08:02]
And now I have this function here. Rather than having to put this piece of code everywhere in my code base, I can just call this setLoading function with true or false and it'll hide and show things as needed. So as soon as I have word here, right, I can just say, setLoading(false), right, it's no longer loading once I have the word.

[00:08:21]
But I think I have to flip it, right? If it is loading, show it, if it's not loading, don't show it, yeah. So it's actually this exclamation point. And I think that should work. Let me just check before I talk, yeah, there goes. Okay, so, Yeah, let's think about the logic here, cuz I had this flipped around.

[00:08:53]
If it is loading then we should show, so it should not have the hidden, Class, right? If it is loading, then it's not hidden. If it isn't loading, it is hidden. So I had this kind of flipped around, maybe a better way of doing this, if you wanted to make this a little bit more easy to verbalize.

[00:09:23]
What I could do here is I could put the visibility:hidden here, so that by default this is hidden, and then I could put this as show. And I could just say, visibility: visible. And then rather than having this, I'd have to go back into index.html, say, okay, by default you show this.

[00:09:44]
And then down here in Wordy Masters, rather than having to do this, Then I can do show. Kind of flipped the way that we're thinking about it. And now this translates to English better, right? Did I save everything, I did, I think, right? It's just, Very quick to show.

[00:10:17]
And then now in theory, if I say show, Did I not save my CSS, maybe? So what's happening here, I have these two classes. If they're both on there one with visibility: visible and one with visibility: hidden, which one of these wins with the cascade? .info-bar. So the easy way to deal with that would just be to move this underneath it.

[00:10:57]
And now, which one wins? The one that's lower, and now it works, okay. So I hope this just shows you that I make a ton of mistakes when I'm writing code and I have to go back and rethink everything, what it was doing there. This is about the most simple cascade thing that can ever happen to you, still mess it up all the time, totally normal.

[00:11:22]
Okay, so now I have a setLoading function that we can use wherever we're loading something. The only other time that we're gonna be loading something is if we're making a request to the API of, hey, is this a valid word?