- [Instructor] In this video,
we're going to take a look at our next project,
and plan out the components and data we think we'll need.
This is a static mock-up with no interactivity,
but it gives us the idea.
It's for another fictitious brand,
Leaf & Mortar, and the goal is to build
a filterable directory of the people
who work at this landscape architecture firm.
We can filter by name, by job type,
and whether the person is an intern.
The list of people down here should update
live with the form fields.
So as we start to type a person's name,
the people who don't match it should go away.
As far as the components, we're going to need
a root component for the whole thing,
and we'll probably need one or more components
to handle this filter form, and then
of course the list of people, which could
be just a single component by itself,
or it could be, say, a people component,
and inside it could be a bunch of person components.
With other frameworks, having a component
that contains a list of other components is pretty common,
because view includes V4 to iterate over things,
you might not need to have those as often,
and we probably won't here.
Now in terms of the data, we're going
to need to track the values of all of these form fields,
the name, title, and the intern flag.
We'll need to track the list of people,
and that will be subject to the state
of the filters at the time.
So who's actually in the list at any given point
will change, depending on what filters
we've set up here in the form.
Now let's take a look at the actual data
we're going to use to power all this.
Over here in my editor, I've opened
the Chapter Three data file from the Assets folder.
This contains all the data we'll be using.
Most of this file is the list of people.
Here in the People key inside Leaf & Mortar Directory.
This looks just like you expect a web service to provide,
except that just like in our first project,
this is a static JSON file.
Down at the bottom, I'm going to scroll down
all the way and use Command-down arrow.
Here is another key, which is the titles.
And so these are the various titles
that would appear in the Job Types form
with displayed labels and keys that would
be used as the search value.
And I can see that says Support Stuff,
let's change that to Staff.
One thing to note is that this Form
component and the List of People component
are going to need to share the data
of who is in the list.
The filters are going to be filtering that list,
and this component will be displaying that same data.
So, that concludes our tour of the data we have,
what we're planning to set up in our view instance,
and the components we anticipate.
So now it's time to start building.