Create a New Shop Form Page for Logged In Users
Logged in vendors need a way to create a new shop to sell products on. This lesson will do some presentational code set up before we interact with the database.
We'll create a button that we conditionally show to logged in users, create a new page, and walk through a new shops form component.
Shadid Haque: [0:00] When the user is logged in, in our nav bar we want to show a new button called Manage Shops. We'll go to our nav.tsx file and add this new button. [0:17] The href for this button will be manage-shops. Let's zoom out a little bit here. When we click on this button, it tries to take us to the manage-shop page, but we don't have this page yet. Let's go ahead and create a new page called manage-shops.
[0:55] In our manage-shop page, we'll have a form to create a new shop. Let's go ahead and create a new component for that. We'll call it NewShopForm.
[1:06] Inside the component folder, let's create a new file called NewShopForm.tsx. I already have some pre-written code for this form component, so I'm just going to paste it here. This component code will be provided with the lesson notes.
[1:21] We'll go back to manage-shops and import the new form component. Notice the CSS styles doesn't look good in these inputs. This is because we haven't added the tailwind forms plugin. Let's go ahead and do that.
[1:38] We will open up a new terminal and we'll do $ npm i @tailwindcss/forms. Then, in our tailwind.config file, we'll add this plugin in our plugins array. Refresh the page and we will see that the styles are applying properly now.
[1:59] Let's go to the NewShopForm component again. Let's go over this component code. We have a simple form with three inputs, the Shop Name, shop description, and Image URL.
[2:14] We are using the useState hook to store the form state. We have a handleChange method to handle the changes in the input. Finally, we have our handleSubmit function. This function will run on form submit. The form submit is not implemented yet. We will implement this in the next lesson.