Support Request Component and Route
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Hi and welcome back to the reactor. And the last set of guides we developed the use lettering component and its corresponding components components so in this set of guide we will be getting the requests feature. So if I had to do the design we ever learn we developed all this except for the styles of course we have all the functionality of this screen here. And we also developed. And so now in this guy we will be first starting with the requests component and then we will proceed to adding some type of components such as these boxes and the content and that and of course. So let's go ahead and look at the functionality of this. So we have the open button here and each one of these list items and then we can also move these two different lengths and then later what happens is you press on the pending one and then it moves it Team progress. Then if you press progress to completion and then there'll be an option in the completed one which we can access with this design that will then send us back up to pending. So kind of like a circle. So let's start by going out and closing newsletter off actions in recent years. And that's all we have because in style and we want to leave components and let's create a new folder and their components call support requests and then file in here call or request that Jassam with its name and request requests. So we didn't. Plural pluralize newsletter. And it is portal here to request and use letters not better. [00:02:07][127.0]
[00:02:08] We're just going to not have request be poor. Now let's improve our reactive and more reactive component react class support request Stenz component render Terry support request component and as always export default supporter request. So that's our basic react up here like we always have now thought around so we can actually get to this because we currently have no way of accessing this. So it's had these drop out. Yes. And will tighten around and let's give it some like a line space of our minds here so we can spread around a little bit. And in the future we will be adding a component called routes where we will just imported into bootstrap so it's the route is equal to slash for Dash quests exact component is equal to support request. And again as you can see my code and are saying automated port. So it's going to automatically import automatically for that component. If you didn't get that type how important support request from components support request support request then I'm going to close that close offer. So we have our support requests throughout and I'm going to change this once again to support request not requests. Now I'm going to show you why media like this with a dash. So let's go to our site map here and you can see. Not that it has newsletter then over overhears its support request. So two separate words. I want to add in a dash and yeah. So that's why I'm doing that. And that's actually the convention. Google has a has some link on that. [00:04:11][123.2]
[00:04:12] But if you just google white dashes like when you use dashes in your own requests or when you are out and points there is pretty good explanations all over you you. So yeah. But anyway we have our we have our end point here we want to start with the request and then we have these data onto it. So I just want to point out that right here we are learning lot and then we have these three. So if I go to our we have our newsletter and then we have these three on top of it. So it's kind of like a tree where newsletter is just by itself but then it extends these three contains newsletters on all of those. So that's why that structure Dawi and home of course is just the slash. So when we get around what we're doing now like basically the home is this just the sign except for we're going to default to that because that's where we want them to initially go. If for some reason the typing sign in which they will never do. Then you take them saying yeah okay so now we have our support request you're out of our component. Let's head to the app and see if we are brought to it when we go to that request. And it's not working and that's probably because I accidentally closed this out. So it's not around 7pm to start. I'll go back and rewrote it and it will be there. Now I'm going to check with my Koka is still here since you started it. I think it will be in the local storage why can't you think of where it is. It's an application. OK advocation local storage tokens so here. Ok cool. [00:06:09][117.1]
[00:06:12] Now let's go ahead and get back to sort of insider to request support request and for some reason we're getting a forum so requests or request can go to support request. And that's really strange to me. What's good about what should just be is the reason this is happening is because when we declare that route we didn't say exact. So basically it's taking this route and applying it. It's going to show for every component. If we don't have an exact this just exact. Let's go right here. It was probably displaying their support because right there. But now we have that support request. Let's go back and look at this so we can link with the that to kind of section 2. We want to have a three box components here and are contact component. So let's just go for some type of that is I would say give a three fold box components and then beneath this say support request content component which contains an honored list which contains our list items for each one of these and Styring will be done. So yes that's obviously Boehland thing is the drawdown will be done. So when we have these lists components and see the content we use implement a library like react and the real quick and get that in there just to improve visibility. But basically our component here and we have our Infobahn still that in the button and let's just put that trying to think of where we're going to need to put that. Once we get this component in we're probably going to have to structure this to display like a flex box like a column. [00:08:25][133.4]
[00:08:27] So we probably want to put it on top and then we would have these items in the room if we want to do is let's cut this out with command X or control x appear the. But another day here and then let's put the button useless say didn't put in the bottom which can be a time or it doesn't need to be it needs to be a lead time. So let's just put in the day for now let's just say quest those pieces back in Walt let's put it in its own device. Now it's phased in and I'm going to have it over if you guys fix this. This is kind of our structure your HDMI that we will be using. He has asked me Google names but if we make changes to that when we come around and see us as we know I'm going to go here. And of course it's just going to be just flying like that. So what we need to do is implement some bootstrap silos. So the first one we want it and this thinking displays are the only one because you can't Yukon's and stripe. So but when we get to see is that this will be a fastenings role and effort and request let's now and then for this day let's just say KLOS name is equal to let's take this one road and get rid of this and then let's just give each a class name call 2 and Steve 3 say call Andy 9 and let's head over to our newsletter just because I want to see what we did with that with and let's just copy that. But yeah. [00:10:15][108.6]
[00:10:15] Q It's checking here. We have our three boxes. We'll just worry about this later and then we have our ads for request content on a contender list. Okay so that's it for this guy and the next day we will hop into the 3 info box components go the on the box component. We'll also be using Kipoi eventually interviews later right here. So yeah the next guy will build on this component and talk about what we need inside of that. Yeah. So let's go ahead and commit our code seeking status. You can commit say added support request route and component. All right I'll see you the next guy. [00:10:15][0.0]
[609.3]