It's going to be really quick, so we'll just go ahead and build that, and refactor a little bit. In the next video, we are going to build out the React and Redux required to create a new request on our back-end.

Let's go into our bootstrap.js. What's happening is whenever we hit this request/new route, when we hit the new request button, we're being pushed to the newsletter/new route.

That's in requests, so in requests when we hit this new button we're being pushed to request/new. That brings us to the same exact form that newsletter/new brings us. That's because we are using the same component.

Now let me just show you one more time where we're pushing to this. I'm going to hit command + shift + f and paste that in. You'll see that it brings up wherever this is happening. You'll see in requestsGrid.js we're pushing.

You'll see when we handleAddRequest on this button that we added to our RequestsGrid it is pushing us there. This Button we see here on requestGrid is this button right here.

Whenever we click that, it's running this function which is pushing us to request/new. Let's go back to the route in bootstrap.js, and let's get rid of all these gross comments. What we want to do is we want to create a component called NewRequest.

bootstrap.js

<Route path='/request/new' component={requireAuth(NewRequest)}/>

Let's go and import it, even though we haven't created it yet. Let's say:

bootstrap.js

import NewRequest from './components/requests/requestsNew';

We haven't built this company yet, so stand by. Let's go into that folder now. In our requests folder let's create a new file. Let's call it requestsNew.js. Now before we do anything in here let's look at our newsletterNews.js. This is what we were pushing to just barely.

Back in here, we were pushing to this one. Now when we click on it, what's going to happen is, it's going to give us an error because we haven't actually exported a component out of there.

You'll see it just goes white and that's because we haven't yet built a component, you can't import a component that's not being exported. What we want to do is basically copy everything from newsletterNew.js into requestsNew.js, and refactor it from there.

I just copied newsletterNew.js into requestsNew.js. What we need to do is still import the NewsletterNew form but we need to get it from NewsletterNew. So let's say:

requestsNew.js

import React, { Component } from "react";

import NewNewsletterForm from "../newsletter/newsletterNewForm";

class NewRequest extends Component {
  onSubmit = fields => {
    // if(button == 'submit') {
    //   // save new newsletter on the backend. perform a post request here.
    //   console.log('trying to submit to backend.');
    // }
    this.props.history.push("/dashboard");
  };

  onCancel = () => {
    this.props.history.push("/dashboard");
  };

  render() {
    return (
      <div className="new-request">
        <NewNewsletterForm
          onCancel={() => this.onCancel()}
          onSubmit={event => this.onSubmit(event)}
          formTitle='New Request'
        />
      </div>
    );
  }
}

export default NewRequest;

Now let's look at it. Let's go to requests and hit new. It requires AUTH, so we have to log in for this. You'll see that we have it. You'll see that it's not on the grid where we want it, and that's because we just changed it to NewRequest.

If you remember new-newsletter, use command + shift + f to search up here., you'll see we're placing it on the grid. We just need to put it on this place as well. I'm not really going to make a new file for this. I mean it's super easy, so let's just put a comma here and say .new-request.

We're putting plenty of items on the grid in the same exact place, so we could refactor and make it all nice. That's possibly something we'll do in the future, but for now we're not going to. That should exist in the same place. You'll see it's right here in New Request, but there's a problem.

The problem is that we have all these different titles that aren't request. You'll see in the design, if we hit New Request, it says Service Requests Title and more stuff like that. What we need to do is we need to refactor our newsletterNewForm.js to take in custom titles.

We could do that or we could make a requestNewForm, but it should be pretty easy just to pass in placeholders and titles. Let's commit our code and do that in the next video. Let's say git status, git add ., and let's say git commit -m "built new request component".

Resources

• Source Code