Non-Nav Fetching Exercise

[00:00:00]
>> So coming over to exercise five. And stopping this server, and starting node dev 5, then go into port 4005. We log in with kody@remix.run, kodylovesyou. And there we are right back to our app. Okay, so for exercise five, we're gonna start talking about non navigation fetching with useFetcher.

[00:00:37]
As I said earlier, this could be retitled and maybe should be retitled to, back end connected UI components. So the ability to take like I said earlier also a component used to be just the JavaScript and then that would hook on to the HTML and then we realized hey, how about we combine these and because that's one concern.

[00:00:58]
And then so we was like, hey, actually the CSS is kind of an important concern of that too. So now we've got single file components and CSS and JS and JSX and all that. It's all this happy thing, but there's another piece that's missing and that's the back end the thing that our Autocomplete is talking to or the thing that.

[00:01:14]
Whatever, like useful UI elements that you can think of is communicating with. That's an important piece of what makes a component. Now I'm not suggesting that all components need to have a back end element. Some of them it's just a button man, you just like send some prompts to it, but for some user experiences, some of these components are best modeled as a complete experience with the back end portion.

[00:01:42]
So that's what we're gonna be working on here. And it's super, super cool. So I've got some background on this a little bit. You can read through what we're gonna be building in this exercise is when you create a new invoice we no longer have the customer input here.

[00:02:00]
So you should be able to type in the customer that you want and it should auto populate the matching customers based on who you're typing in here. So I've already done all of the React work for you because I this is not a React workshop. So all of that stuff is done.

[00:02:20]
We're using downshift, which is a library I wrote years ago at PayPal, and it's, I think, pretty great. So we're using that I actually didn't write the hook that we're using though. I moved on before hooks were things so. We're not using my code necessarily but yeah, we're using downshift for managing that you're just going to be integrating some of the downshift API's with remix fetchers.

[00:02:44]
And yeah, and then building out the backend piece of that as well to create this holistic back end thing. Files you are going to be working in the customers component is inside of this resources route. I want to be very clear, there's no convention or special API around calling this folder resources.

[00:03:07]
That's just I want it /resources/customers to be the resource route here. It just made sense to me to call it that. The other thing is we are importing component from that resource route into other components. This is not normal, you should not typically be importing things from other routes, routes should not be importing things from each other most of the time.

[00:03:31]
But this is actually one case where it's chef's kiss beautiful it's really, really nice and so yeah, just keep that as kind of a general thing, try not to import between routes. If you need to share code, you put it into a different file and import from both of them.

[00:03:45]
And then we're going to be integrating that component into our the new route for our invoices. So that is what you are doing and I hope you have a stellar time of it.