Build a New Newsletter Form Element

So what we want to do is basically create a new file in our newsletter directory. Let's call it newsletterNewForm.js.

And the reason I'm calling all these component lists different from the files that I'm calling the components is that I want to be able to quickly see what's in this directory when I'm importing stuff and not have a bunch of different names. I keep things really well organized but then keep them names something more readable like new newsletter rather than newsletter mail.

So a newsletter new form we basically want the same exact thing we want from signinForm.js and let's copy everything in here and let's throw it into our newsletterNewForm.js.

newsletterNewForm.js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

import { FormTitle } from "../formTitle";
import { FormInput, FormButton } from "../formFields";
import TextLink from "../textLink";

class SigninForm extends Component {
  render() {

    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit} className="sign-in-form">
        <FormTitle className="sign-in-form__title" text="Login" />
        <Field
          className="sign-in-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormInput}
        />
        <Field
          className="sign-in-form__password"
          placeholder="Enter Password"
          name="password"
          type="password"
          title="Password"
          component={FormInput}
        />
        <Field
          className="sign-in-form__login"
          name="login"
          type="submit"
          title="Login"
          component={FormButton}
        />
        <div className='sign-in-form__text-links'>
            <TextLink to='/forgot' text='Forgot Password'/>
            <TextLink to='/signup' text='Not a member? Register here'/>
        </div>

      </form>
    );
  }
}

SigninForm = reduxForm({
  form: "signin"
})(SigninForm);

export default SigninForm;

Okay so basically at this point we just have our sign-in form inside of a newsletter-new form. Now in order to get this to work properly, we're going to any rename sign-in form to new newsletter form.

newsletterNewForm.js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

import { FormTitle } from "../formTitle";
import { FormInput, FormButton } from "../formFields";
import TextLink from "../textLink";

class NewNewsletterForm extends Component {
  render() {

    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit} className="sign-in-form">
        <FormTitle className="sign-in-form__title" text="Login" />
        <Field
          className="sign-in-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormInput}
        />
        <Field
          className="sign-in-form__password"
          placeholder="Enter Password"
          name="password"
          type="password"
          title="Password"
          component={FormInput}
        />
        <Field
          className="sign-in-form__login"
          name="login"
          type="submit"
          title="Login"
          component={FormButton}
        />
        <div className='sign-in-form__text-links'>
            <TextLink to='/forgot' text='Forgot Password'/>
            <TextLink to='/signup' text='Not a member? Register here'/>
        </div>

      </form>
    );
  }
}

NewNewsletterForm = reduxForm({
  form: "newnewsletter"
})(NewNewsletterForm);

export default NewNewsletterForm;

With that changed up, let's import this in our newsletterNew.js component and see what it looks like.

newsletterNew.js

import React, { Component } from 'react';

import NewNewsletterForm from './newsletterNewForm';

class NewNewsletter extends Component {

    onSubmit = (fields) => {
        console.log('trying to handle submit')
    }

    render() {
        return (
            <div className='new-newsletter'>
                <NewNewsletterForm onSubmit={(event) => this.onSubmit(event)}/>
            </div>
        )
    }
}

export default NewNewsletter;

Okay so all I've done so far in this video is just creating a newsletter new form file and basically put everything from our sign-in form there and then just give it a different name. I left all the class names the same so we should still get the same styles on the browser. Let's check it out now.

large

Right now our styles are the same as our login page, which means that we might have to change a lot of things to adapt these forms to what we want for our add newsletter page. We don't want to have to do that because it's better to use the same styles, and same components to make things reusable, with less code. That makes it a lot easier to make things quickly. So what we want to do is refactor this.

Let's commit our code and then in the next video we will refactor our form inputs and a bit of our grids to adapt to this change. It might get a little confusing at first but once we're done with this refactor and have the new newsletter built you'll be glad we did it.

git status
git add .
git commit -m "built newsletter new form"

I'll see you in the next video.

Resources

Code at this stage