Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Building Jetsetter Exercise" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Build an example packing list application. Steve overviews some of the tricky parts you'll need to overcome when building the example. - https://github.com/stevekinney/jetsetter

Get Unlimited Access Now

Transcript from the "Building Jetsetter Exercise" Lesson

[00:00:02]
>> Steve Kinney: Okay, so we're gonna build an application now, right? And this is gonna be a little bit of you're going to built it and then we're gonna build it together, but let's take a tour of the application. So this is a second repo, I think it's actually the third one on the list, it's called Jetsetter.

[00:00:19] And Jetsetter looks a little bit like this when it's fully wired up, which is It's not a to do list, to do lists are overplayed, I'm not making a to do list. It's a list of items that I want to pack that I can check on or off.

[00:00:34] When you joke, but I use this app. I actually built an electron version of it and I, and basically you can have a bunch of unpacked items, you can pack them. And then when it's time for the next trip, you just hit mark all as unpacked and you can pack again, because I travel too much.

[00:00:52] So, we can see some different parts of it, over at the top we have a new item input, right? We were talking a little bit about inputs and like what's long term state versus a thermal state. So just put a mental bookmark there. Those two other very fancy red boxes are filters, mostly to just implement features later.

[00:01:10] I have never actually wanted to filter these lists, but they are simply so that we can play around some statement a little bit. Then we have the list, right? And there are individual items, and there's two things an individual item can do, right? It's got a check box which means it can be marked, and if it is marked as Packed, it goes down to the other list, right?

[00:01:36] Let's think about how we have to figure out that state, and where that state has to belong, cuz it's not isolated component. And we have removed, which will simple remove if from the list. So, there's a lot of slightly tricky things to think about here, right? Normally the best way to kind of break apart a mockup that you get from a designer, into react off and just kind of like look at and draw like boxes over each part, right?.

[00:02:02] But we have a little bit of a problem with those items can move back and forth between the two list, right? Which means they're probably not gonna belong into either one of those item list components, but they'll probably have to go one level up, right? Where we'll filter out between the packed items and the unpacked items, and there are all sorts of things to worry about with filtering performance.

[00:02:25] Don't worry about performance right now, we'll talk about that in three weeks if you want. That's a plug, I'm gonna do another workshop in three weeks on performance. So, don't worry about performance, we just wanna figure out where should this state go? And probably like can it be individualized, and then where does managing actually for individual item go, right?

[00:02:49] How does that work? The filtering, the filtering seems like per list, right? So that probably goes maybe on the list itself. There's a lot of like Interesting little edges cases to this, otherwise, seems like a simple to do list app, right? If you look at that marked all as unpacked, right?

[00:03:06] That theoretically needs to work with all of the items that's not specific to a list, right? So, it looks like a to-do list, it's got a bunch of little weird edge cases that are probably gonna trip us up a bit. So what we'll do is we'll spend about 30 minutes trying to get a working version of this application.

[00:03:25] Being able to add a new item, being able to filter the list, being able to check an item, to move it to the pack list or uncheck it to move it to the unpack list. Being able to remove an item, and the thing I didn't talk about there is we also have counts of each one of them as well as how many items are on that list.

[00:03:41] So if we go to the repo, you can see that I've done a little bit of work for you, and so I'll head over there.
>> Steve Kinney: On the master branch. There is some work on for you, and I will actually pull it open as well.
>> Steve Kinney: See if I get yield off and not killing the previous server, yeah, we'll run it at likely 3001.

[00:04:24]
>> Steve Kinney: Give it a second as create(rabdeck) starts up, and you'll see what I've left you with. So, I did some CSS for you, that's very nice. I put in this counter about your Lyft coming in ten minutes that we'll worry about later, that was very nice of me.

[00:04:38] Let's add a new item. I can't even type in the info field, that is problematic, because there is no actual state in this application yet. Let's take a look at the implementation so far. So I can go in to source and in to components, and if I look at my application, I have a list of default items that you saw on that page.

[00:05:00] But, here's just a bunch of helpful comments left for you, right? Setting the initial state, how are you going to manipulate the states? Where maybe wanna get items from state? There are some presentational components built for you, but there's no concept of necessary working with this state yet.

[00:05:19] So you're gonna be on your own to thing about it. And you see that I have two items lists, like the unpacked item should go probably in the one title unpacked items. But like again you're, your own person. Packed items should go in the packed items array. We've got this button, so we can go into the items.

[00:05:41]
>> Steve Kinney: And you can see that it's got a filter bar that has term set to string, and a update search term that doesn't do anything right now, so you're gonna have to figure that out. And the we have the ability to filter implement it here, but that could probably get pulled out, but you don't have to.

[00:05:59] And then, we map over those to create individual items, right? There is a little bit of work to do to wire these up going into the individual item, you can see it's got an on change, it shows the item value, so on and so forth, right? So we're gonna have to figure out where does the state go in this application, right?

[00:06:22] If we're gonna change an item in the item component, but the individual item lives somewhere else. How do we get that functionality down to it, right? There's a bunch of problems that we're gonna need to solve, and I'm gonna let you solve them for a little bit, and then what we'll do is we will come back together and we'll solve it as a team cuz who's not into teamwork?

[00:06:44] And I'll kinda show you one approach that we are eventually going to then refactor several times over the course of the workshop.