1. 11
    Create a New Shop Form Page for Logged In Users
    2m 40s

Create a New Shop Form Page for Logged In Users

Shadid Haque
InstructorShadid Haque
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

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.

egghead
egghead
~ 23 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today