[00:00:00]

>> All right, then moving on to the compound pattern, which is still using the
provider pattern by the way. So maybe also if you still have questions, this might
clear some things up. But with the compound pattern, we can create multiple
components that work together to perform a single task.

[00:00:13]
And this is very nice to use with the provider pattern. So for example here we want
to click on a search and again this opens like that, that search bar. Now
essentially what happens here is that the search bar and this kind of like fly
outs, they all work together, like all those components are performing a single
task like the user clicks on the inputs then this input shows these list items.

[00:00:34]
So we could wrap all these components within a provider that provides that data or
that state, like okay, is this list item open or is a list open has user clicking
it and all that stuff. Now often what you see with the compound pattern and maybe
you've used this in like component libraries is that we can import like a single
component or like a visual component.

[00:00:56]
And then we can use like dot notation like fly dot input, fly dot list to
conditionally render the components that this compound component provided. Hope
that was not too confusing. So for example here we have like the fly dot inputs
which I tried to make like here, and fly dot list list item.

[00:01:15]
Now you can see here that we don't have any state in the search input itself
because that state is contained within the flyout itself. So we can see kind of the
implementation here. And we will of course have an exercise that also makes you do
this, but so the fly out component here, so that's like the parent that wraps all
those smaller components, that's a stateful component.

[00:01:38]
And that provides, all right, yeah so we create a context again like we have for
the provider pattern, and this returns a provider that has the open toggle value
and set value method, just for this example, of course you can pass anything, and
then that renders the children.

[00:01:55]
Now any of those children can use this context or use that consumer components to
retrieve the value of to toggle or to set the value to open all the values that we
provided here in this provider. Now the cool thing about the compound pattern is
that you can also just say like flyout dot input is this input component, flyout
dot list is this list component and that makes it super easy, yeah, to create like
those sub components because we only have to have like one single import.

[00:02:23]
Like we saw here, we can just do like import flyouts and we don't have to also
import like flyout input, flyout list, flyout list item. You don't have to do that
with a compound pattern, but it definitely makes it clear like okay, this is just
one component and all these sub components, they just like work together.

[00:02:39]
It's just like part of one bigger component. It's not like a standalone component
on its own, yeah. Now here we see that we're just rendering it right away. One
other way that you might often see it is using the react children map with the
clone elements. So instead of directly rendering like props of children like
wrapped within that provider, we can also just map all the children and directly
pass the props or like these props the open, toggle, value, set value the same like
value that provided to the provider before [LAUGH] that we now pass it directly as
props.

[00:03:17]
So you can see that here, like props and then like on focus, on blur, children, all
those things, so yeah. Let's see, I guess this is just an example. Yeah, so here
we're using like it's basically just a real version of the example that we saw
before in the animation.

[00:03:39]
So we have like San Francisco, Seattle, Austin, Miami all that stuff, and we can
easily render that here. So we're just importing the fly outs, we have the fly out
input and we can, if we want to, we could just add more items. I don't know, have
multiple boulders for no reason.

[00:03:55]
And then we have, so it's super easy to like add new components and if you are
using maybe a component library or something, those components are usually styled.
You see this in like material UI, probably many other ones as well. Yeah, we don't
have to care about the styling of the components or the state.

[00:04:14]
So it's super easy to render stateful components, but in a very easy,
straightforward way. Yeah, so the trade-offs like the pros are kind of what I just
talked about having that single import, which is super nice. We don't have to
explicitly import all those child components as well.

[00:04:30]
And yeah, so the state management, so any component that uses such a compound
component doesn't have to implement its own state, because that's already contained
within that compound components. Now the only kind of drawbacks is I guess when
you're using react children map, you just have to be more careful with how you're
rendering those children.

[00:04:49]
Because it's like only direct children will then get access to like all the props
that we pass, but yeah, that's just kind of like implementation details. Same with
the naming collisions, maybe the child components that we pass already have props
that we're then passing when using react clone elements, cuz it's only performing a
shallow merge, but again that's about it.

[00:05:13]
All right, so the last challenge of today, as far as I know, is to create a
compound pattern or a compound component. So here we see that we have an input
component. I'm just going to make this big real quick, one sec. Okay, so in this
input component, we see that we have the state for logic, like set open value, set
value toggle.

[00:05:41]
And this one is or this input component is rendering the flyouts. Now you can see
that this is not a compound component like we're actually creating all those
children ourselves. So instead, what we wanna get is something like we saw before.
Like we just wanna be able to import a fly outs and then render a flyout dot input,
input list, list item.

[00:06:02]
So it changed this code to create a flyout components that's the input component
returns, if that makes sense, clear? And of course, if you need any inspiration,
just scroll up a bit and you will probably see the implementation.