How to Manage Modal Window Components in Redux

[00:00 - 00:05] Add the ModelManager component. In this lesson we'll define the visual part of the Model Management system.

[00:06 - 00:25] Define the model windows, Openers see, Index CSS, and here add the model panel class. You should have position fixed, so that it doesn't depend on scroll, top 50, left 50 so that we sent it on screen, with transform_translate_3d to account for the size of the model panel.

[00:26 - 00:40] And then, the index 10, to put it on top of other elements. Then, create a C, Project, Save, Model, TSX, Expert const, Project, Save, Model.

[00:41 - 00:51] It's a functional component. We'll need to be able to hide this window, so we'll get the dispatch method, using use Dispatch, and then return the layout.

[00:52 - 01:03] There is going to be an alternative with class names Window and Model Panel. Inside of it, there is going to be a div with class name, Title Bar, with the Title Bar text, Save.

[01:04 - 01:20] Below, there is going to be a window body, with field draw, containing a button, that is going to dispatch, Hide, Action, OnClick, and you should say Cancel. Now let's define the projects model, creating new file, Projects, Model, .tss.

[01:21 - 01:34] This component will show the list of the projects, loaded from the server, Expert const, Projects, Model. Here we also need the dispatch method, Cons Dispatch, Use Dispatch.

[01:35 - 01:56] Define the layout, We're under Window, Model Panel, with Title Bar, and Title Bar text, Load Project. Here we also want to add the Title Bar controls, it will contain the close button, that will dispatch, Hide, OnClick, and then below the Title Bar, we're under the projects container, and for now, we just render Projects list text there.

[01:57 - 02:01] Now let's define the model layer component. It's going to be a component to render model windows.

[02:02 - 02:40] Inside of the SRC, Create new file, Model, Layer, Tss, Expert const, Model, Layer, Here depending on the model name we get from the model name selector, We're going to render different windows, Switch, Model, Name, Case, Projects model, Then we return Projects, Model, Case projects, Save model, We're under the projects save model component, and by default, We render nothing, Return null. Now let's render the model layer, Open up Tss, and add it above the canvas.

[02:41 - 02:53] The last thing we do in this lesson is we add the Save and Load buttons to the File panel. Let's open it, File panel, And now below the Expert button, We add two more buttons.

[02:54 - 03:01] One to save the projects, And one to load. Let's get the dispatch method, const dispatch, equals use dispatch.

[03:02 - 03:16] Now make the Save button, dispatch the Show action, With project save model, And add the class name save button to it. The Load button should have dispatch, Show projects model on click, And have class name load button.

[03:17 - 03:25] Open the app in the browser, You should be able to click on Save, And see the Save model, And Load, and see the load project model.