Remix Fundamentals Progressive Enhancement Solution
Transcript from the "Progressive Enhancement Solution" Lesson
[00:00:21] So, in the background here, I encouraged you to go to the root.tsx, which we have not looked at so far. But this is your component that's responsible for rendering everything between the opening HTML and the closing HTML. So if something doesn't show up in the body of your HTML, it's your fault, because you're the one who's rendering that, remix doesn't touch that.
[00:01:06] I can still go to post, I can go, let's not slow this down, we don't need that for right now. I can go to the homepage, I can go to the login, all of this. You'll just notice we're doing full page refreshes between these, but the app works.
[00:02:38] And I'm not just talking about navigating around these different pages, I'm actually talking about the full experience, even mutations, New Post, new-post-yo, This is new, I keep doing that, new. And dude, totally created. Now, I can go to my post page, and there's my new post, and there it is.
[00:06:10] I was not planning on doing that, but I'm like, well, I finished a little faster than I was expecting, so let's see how far I can take this thing. And eventually, I think maybe I'll turn this thing into [LAUGH] a business, cuz it's pretty cool. Would you pay three bucks a month for that?
[00:06:23] I don't know, maybe. And so many things I was not planning on doing, the blog post recommendations at the bottom of every one of these blog posts. You get a recommendation to three other blog posts that are related to what you're reading, something you've never read before at least recently, and some other random thing that's popular post.
[00:06:44] It's different every time, you refresh the page, it's gonna be different. I just like a lot of different ideas, like, wow, look at all these cool thing I can do on top of what I've already done just because I don't have to worry about application state management. So it makes me so much more productive.
[00:08:59] And of course, none of you would ever do that, I know, you'd never make a worse experience, you'd always think about penning UI, and so that's what we're going to do. We'll go into our app > routes > posts > admin > and new. And in here, this is all client-side stuff, so we've taken care of the backend, that's all done.
[00:09:19] All we have to do is on the client, we need to know when the user has made a submission so that we can say, hey, we're creating, this thing is happening. And because remix is the one managing that fetch request for us, it's the one where we're gonna get the information about transitions that are going on.
[00:09:34] Now, transitions are not just for posting or submitting a form, this is anytime you transition between different routes, okay? So we're gonna get transition from useTransition. And again, it's not React, it is remix-run/react. And by the way, I should mention, like I said, we will probably change that.
[00:09:59] And if we do, of course, we'll probably support the old version or whatever. So we don't break your stuff or we'll have a code mod or whatever, but in the repo, I made this CHANGELOG.md file. And so if eventually that does ship and that changes, I will add that note to the changelog.
[00:10:15] So hi, folks watching in the future, just check that changelog to see whether that piece has changed as well as like the file system routes and stuff. Okay, so now we have the transition, the transition is gonna tell us some stuff about where we're going and what what's happening, what is causing this transition.
[00:10:35] So we're gonna get our isCreating state from, nice try, compiler. But actually, transition has a submission. It may or may not have a submission, if we're just clicking on a link, there's no submission there. The user is not submitting any data, they're just clicking on a link. But if they're submitting a form, that is going to have a submission.
[00:10:55] And so we're gonna just say, we're creating if the transition has a submission, so we'll just booleanify that thing. I know some of you are probably like, why didn't you just not note that thing? I'm like, you got to be honest. Is this more simple than just Booleaning it?
[00:11:12] I don't know, a double bang, I don't know. I mean, if you wanna save your keystrokes, that's fine with me. But okay, so now we know that whether we're in a creating state based on whether there's a transition. So our designer just said, hey, just disabled the button and update the text content for the button, we don't have a loading spinner for you.
[00:11:30] But you could render a loading spinner, you do whatever you want to, have a little bar that goes across the top, because you can actually use this anywhere in your app. I could put this in the route of my app and have a global bar. You do whatever you want, because there's only one transition that can happen at a time.
[00:11:47] You can't submit multiple forms at once, and we'll talk about that in the advanced remix workshop. But for these navigation based transitions, you can only navigate to one place at a time. Even if you submit over there and you're like, never mind, I'm submitting over there, you no longer have that old one, right?
[00:12:01] So there's only one transition, that's why this is global, and you can have it anywhere. Okay, so we'll take this as creating, and we're gonna say disabled if we are in isCreating state. And then if we're isCreating, then Creating..., otherwise, Create Post. And that's it, put it on.
[00:12:47] We are staying on the page, we're doing a fetch request, but we've hooked into remix, so remix can tell us the navigation that's going on, which is a form submission so we can say creating. And that was the exercise, there's the extra credit. That's slightly different topic, but it was not a lot of code changes but a fair bit of concepts, hopefully, it all made sense.