So let me get to the design and show you what we're going to be building. So if you're in the newsletter and you hit the plus button, it brings you in this page which allows you to create a new newsletter.

So we're going to develop this feature. Let's go ahead and go to our code and build a component and a route for this. What we want to do is create a new component in the newsletter directory and call it newsletterNew.js, then let's build it out.

newsletterNew.js

import React, { Component } from 'react;

class NewNewsletter extends Component {
    render() {
        return (
            <div className='new-newsletter'>

            </div>
        )
    }
}

export default NewNewsletter;

So what we are going to do here is the basically the same approach as what we're did in sign up and sign in components because we need a form and we need a way to submit our form, and it's a cleaner approach to have a container component and then put the form in its own component and then handle it that way. So let's go ahead and build the route and then start building out the component.

Let's go to bootstrap.js and let's just copy our dashboard route because we want to use requireAuth because we don't want anybody to be able to create new components and later on when we talk more about the user object we'll have to protect this route to requireAuth and require admin.

So once we get the features built we will introduce another component much like requireAuth, but we'll call it require admin. So if you remember the user object has a property on it called admin, and right now all the accounts we've created are set to false. We don't want to create that right now but just know that that's another layer of protection we want and another kind of layer of who can do what with permissions.

So let's rename this route, and import our component.

bootstrap.js

// DASHBOARD
import Dashboard from './components/dashboard';
import NewNewsletter from './components/newsletter/newsletterNew';

function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router history={history}>
        <Switch>
          <Layout>
            <Route path='/' exact component={Signin}/>
            <Route path='/signin' component={Signin}/>
            <Route path='/signup' component={Signup}/>

            <Route path='/dashboard' component={requireAuth(Dashboard)}/>
            <Route path='/newsletter/new' component={requireAuth(NewNewsletter)}/>
          </Layout>
        </Switch>
      </Router>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

Okay now let's go ahead and go back to our newsletterNew.js component and let's type something in there so we know it's working.

Now let's check the browser.

And we can see that it says "form for new newsletter goes here". Sweet. So let's start off by securing it to where we want it to exist on the grid. If you remember where we want this to go it's basically on the content start to the content end, so this is going to mean the same exact place like newsletter grid and sign up and sign in are at.

So let's get Firefox and log in and try and add a new newsletter and I'm going to inspect the element where it is on the grid. Right now we only have two grids, the layout grid and our header grid and header exists on the layout grid in the header area.

Right now we have this new newsletter in our layout as well but it doesn't really exist anywhere or it automatically exists in the next available space because we haven't explicitly declared where we want it to exist. And if you remember we call the area we want to put it content-start and content-end on the column and row axis'. So lets go style our component to fit right there on the grid.

Let's create a new file and call it newsletter-new.scss. We also need to import it into our main.scss with @import 'newsletter-new';. Okay let's type out some styles.

newsletterNew.scss

.new-newsletter {
    grid-column: content-s/content-e;
    grid-row: content-s/content-e;
}

Let's check it out in our browser and when we inspect it in here you can see that it fills up the whole content, so that's what we want. Let's go ahead and start building the form. Let's clear out our dummy text in newsletterNew.js and let's start by just throwing in the sign in form just to kind of give you an idea of what we want to do.

newsletterNew.js

import React, { Component } from 'react;

import SigninForm from '../auth/signinForm';

class NewNewsletter extends Component {

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

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

export default NewNewsletter;

So this will give us an idea of what we want and then we'll refactor this into a new form, so let's check it out.

As you can see, it looks just like the sign in form that we put in, but our URL is still newsletter/new, but we can see that the sign in button doesn't work because we disabled it. Now what we want to do is look at our design and think about what we want because we don't want it to really look like our sign in. Here's our design.

Once we have this built out, we'll be able to reuse this component to build our edit form, since they are nearly identical. So we have to build it once and then just modify it a bit to handle a couple specific conditions.

If you go over to our dashboard, to the requests section you'll see that if you add a new request it's exactly the same as well. They're all the same just with different titles different button titles and that's about it. So basically this is all the same just different titles and placeholders.

So let's go ahead and commit our code. In the next video we will refactor our component here to use new form that we'll create as well as some new inputs.

git status
git add .
git commit -m "built newsletter new component and placed signinform into newsletter new component"

See you in the next video.

Resources

Code at this stage