[00:00:00] Welcome back to the report that the property management application and the last card we set up our requests component are our property request component and route and this guy we are going to be developing the infant box component. And we just need to come out of this with understanding what we want component. So first thing we need to do is create a an item and component that's the base component components for reasons we'll be using as in the newsletter dodgiest as well. So let's call this info box yes. And then in here which shouldn't import React component from react class input box extends Component render turn and for locks and then fixed export default infobahn. So again we need to come out of this knowing what we're doing. So we just put it in the anvil box basic structure of a composite. And what we want to do and here is you can understand and combine this with a good mindset is we need that idea of saying how many of them are in there. We need a label and then for functionality we need we need the ability to say okay when we click this item we need to tell our application that we want to display this type of item. So if the item has if the item has a status of in progress we will display it if the item has a status pending when we Cookham pending we will display those. And so you get the idea. [00:01:59][118.7]
[00:02:00] So with redux we need to basically say okay when this box is clicked when we're clicked we want to dispatch an action to our store to producer or reducers which will then say okay set the current status to in progress or the current status pending. So we need to somehow tell us in full box that it is of time ending in progress or complete so we can easily do that by going to our support across Tajai us and using these and passing that prop. So let's get rid of that and let's say that in her first media type and info box it's going to auto import. So just say a pure import input box solution for box in a closet and then I'm just going to copy this three times and then log to get rid of the copies and I'm going to put it a prop that says type we're going to sit tight and then wait and see is equal to one of the three. The first one is going to be penny when it's all lowercase. The second one is going to be in progress. We're just going to say in progress. No special case just to keep things really consistent with these three types and complete or complete. Well let's put in the dash because they have here so in dash progress and complete those are three types of influxes we have pending in progress and complete. Let's go to our code for info box dodginess and let's just say the type of this input box is this stuff Propst dot type. Let's save that let's head to the browser and look at our 3 boxes or lines of code text this type the type of this box is pending in progress and complete. Excellent. [00:04:15][135.7]
[00:04:16] Now what we need to do is give this a little bit of height and weight just so we have something to click on again. So let's say endive let's just say class name is equal to you in full box. And let's head over to our main see assassin had some basic styles info box. Let's just say with 250 pixels PI 250 pixels analysts just added an importer color portrait of one pixel solid. And let's see what colors we give. Let's give it the color that we have in here. We can just quickly I can quickly snatch some of the styles so I'm just going to give it a color red there be 0 0 0 0 0. So I'm going to go back out of here. Get the heck away from Stout's for now so we don't lose track of what we're actually doing. Let's focus on the other boxes. Very great. Very simple simple layout. I'm going to add in a margin of 15 pixels just to throw in a little bit. Okay. We have boxes change changed to different pixels on the styles now. Once we have our boxes we have our boxes. Now we need to be able to click these and have it change the tides and normally you might think OK we can use that in a week because we've been using those but we don't want to go to any other different pages. I mean theoretically we could add in different your L's and show only those and all that we don't want to do that. We want to adding actual buttons that will allow us to get some sort of function so the calls may not see us. [00:06:20][123.6]
[00:06:21] And let's let's just add a function up here and say well we don't need. Yeah it's out of hand or selected. Okay. Now what we want to say here is this thought process dot and then we need. When you think about this we need to say okay what happens when we selected we are going to change the status which means we need to dispatch an action to reduce. So let's make we need to make a reducer into an arm or an action interactions get types and let's make this the export constant change box type we'll see Celenk Quest's request is equal to select. Worst case we have that. Now let's put it in her early next stodginess interactions with the city right here. What we call it select requestor. OK now we need a function this person. We know it's going to be in a different file and then I'm going to say export function select request type that I'm going to say turn and then object and see take select request type and a payload of the name which is going to be passed in as a browser. Let's head to our info box and that's basically provided. So that's going to be this thought process type. So what we'll say in our in our type here is instead of seamlessly take home pass that is that they will hold its head here and let's just connect we need to connect this up to read so we can actually do that so let's do that in the next guy. So get status get out get it set up in a box component and action to change selected time. [00:09:06][165.5]
[00:09:08] Okay I'll catch you in the next guy. [00:09:08][0.0]
[543.6]