Build a Fullstack App with Next.js, v2 Modal Client Component

[00:00:00]
>> So then we need to kind of build a UI for this thing and hook it up. So finally, a client component. So we're gonna use a modal, we're gonna make a modal pop up where you can type in the new project name, hit create, it creates the project, it goes away.

[00:00:15] It's not gonna show up on the screen for the reasons we just talked about until you do a refresh though. So remember that. So let's do that. We're gonna go and make a client component. And we can just call this I mean call it whatever you want I'm just gonna call it new projects inside the components folder.

[00:00:43] And I think if we're going to need to have to install something here I have so many things running go we got to install react modal. So MPM install React Modal. And for our imports, we're just gonna bring these in I think once the types I'm telling you it used to do this I don't know why it's not I feel like it's early days of TypeScript again where they're making me doubt these types all over again.

[00:01:22] So we got our create new project that we just made, usse state this React modal or button input. First thing first is for React modal. We have to set a portal, basically, if you don't know what a React portal is, it's basically by default, everything in React renders underneath the same tree.

[00:01:47] A portal is like, I wanna render, you can render anywhere. It doesn't have to be part of your React app. You can render in any div anywhere. So that's basically what a portal is. And it's great for modals because modals are usually, you know, created and rendered somewhere down the tree, but they need to be on the root.

[00:02:06] So, we can create a portal for a model that we created nested in our app, but have it render all the way out here where the body tag is, which is exactly what we want. So, we'll do that. But in order to do that, we need to go to our layout file and our dashboard.

[00:02:21] So, dashboard layout, and we need to add a div in here somewhere so I'm going to add a div underneath the glass pane with an ID of modal like that and just leave it empty. We need that target there for, this is where a modal is gonna render.

[00:02:46] Okay, so we're going to do that. Oops, I thought I had that copied. There we go. So modal that set element, id of modal. And then we could just make our new project component here, which is your classic React component so let's make sure I get those names right.

[00:03:09] This is gonna do all types of form stuff all the stuff that you're used to. Alright so we got the new projects here. We need to get some state that's going to keep track of the modal opening and closing and make some helper functions for it. And then we need to make some state for the form that's going to keep track of the name that we need to submit.

[00:03:28] So let's do that. So we'll say const isModalOpen and then setIsOpen. Because you states, default to false. Make some helper functions here. Close modal. Equals set Is open to false. openModal is the opposite. There we go. And then name, set, name, state. String. All right, got those. I'm gonna move that up there.

[00:04:17] And then from there, we need to make a function to handle the submit of our form. So we'll do that. And it's just gonna call our new project and close the modal. So nothing crazy. So handle. Submit. And prevent that default. Otherwise, our screen will reload. Wait. Create new project with our name.

[00:04:49] And then close the model. And then lastly, we can put our JSX in here, which really isn't a lot going on. So I'm mostly just gonna copy this and we can talk about it like always so much style stuff. Okay So one thing is I need to rename this, at least mine is isModalOpen some rename mine because that's what I called it up here there's my be different if you copied it from the code.

[00:05:28] Let's follow what's going on here. So first we have a button that you can click on it opens the model when you click New Project. Once the model is open, it's going to show a form that has an input for a name. You can submit with this create button.

[00:05:42] Once you submit, it's going to call our it's going to use that function we call it Create New Project. And then close the modal and the Create New Project goes to API project. And then API project checks to see if it's the user, creates a project for that user with a name, and it just responds okay.

[00:06:04] So all we got to do now is put this new project into the home page. So home we got a page if you scroll down, there's a block right that says new project here. We've got put the new project card here. That we can use it. So let's try that.

[00:06:27] New project. This thing says, I forgot to put client one at the top, didn;'t I? Rookie mistake. Use client. There we go. All right, there's our new project. We can click it, it brings up a new project model. You can give it a name. This is my project.

[00:07:03] You can click create. It'll close. It will not show for the reasons we talked about. But if I refresh this is my new project. And then this just keeps getting pushed down. It's always the last thing