Creating the Request Add Button

So what we need to do is start with the add button, like we did in the newsletter component. We'll throw that in and we can do it pretty quickly by basically copying the code from newsletters a little bit. We're not going to copy the whole thing, so let's go into our newsletterGrid.js. Let's copy this component, and let's open up requestsGrid.js and paste it in place of our text.

requestsGrid.js

import React, { Component } from 'react';

class RequestsGrid extends Component {

    render() {
        return (
            <div className='requests-grid'>
                <Button className='newsletter-grid__button' icon='fas fa-plus' callback={() => this.handleAddNewsletter()}/>
            </div>
        )
    }
}

export default RequestsGrid;

We're also going to have to provide a function so let's go back to our newsletterGrid.js and I'm just going to copy the handleAddNewsletter function, and rename it for requests. Make sure to import the button.

requestsGrid.js

import React, { Component } from 'react';

import Button from '../button';

class RequestsGrid extends Component {

    handleAddRequest = () => {
        this.props.history.push('/request/new');
    }

    render() {
        return (
            <div className='requests-grid'>
                <Button className='requests-grid__button' icon='fas fa-plus' callback={() => this.handleAddRequest()}/>
            </div>
        )
    }
}

export default RequestsGrid;

We're going to have to specify where this belongs on our grid because obviously, it's a different className, and when we log into the application and click requests you'll see that we have a button that takes us to that new requests route.

Okay so that's the first step and that's really nice. So what we want to do now is basically push it to a route. Okay so let's just put that route together and just get this route out of the way. Let's go to bootstrap.js` and scroll down and basically we want to provide a similar route as newsletter.

Let's build that route and then let's organize our file so we can see what components the routes go to.

requestsGrid.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { Router, Route, Switch } from 'react-router-dom';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(compose((window.devToolsExtension ? window.devToolsExtension() : f => f)(createStore)));

// import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

import history from './history';

import Layout from './components/layout';

// AUTH
import requireAuth from './components/requireAuth';
import Signup from './components/auth/signup';
import Signin from './components/auth/signin';

// DASHBOARD
import Dashboard from './components/dashboard';
import NewNewsletter from './components/newsletter/newsletterNew';
import EditNewsletter from './components/newsletter/newsletterEdit';
import NewsletterDetail from './components/newsletter/newsletterDetail';

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

             {/* DASHBOARD */}
            <Route path='/dashboard' component={requireAuth(Dashboard)}/>

            {/* NEWSLETTER */}
            <Route path='/newsletter/new' component={requireAuth(NewNewsletter)}/>
            <Route path='/newsletter/edit/:id' component={requireAuth(EditNewsletter)}/>
            <Route path='/newsletter/detail/:id' component={requireAuth(NewsletterDetail)}/>

            {/* REQUESTS */}
            <Route path='/request/new' component={requireAuth(NewNewsletter)}/>

          </Layout>
        </Switch>
      </Router>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

When we go to our add button, it takes us to our new route.

You'll see that it brings up the new newsletter form but we kind of want to use it because it's very similar. The form is exactly the same basically but we'll worry about that later. Let's get the rest of these components laid on our grid and then we will start throwing in the functionality as we go.

Let's commit our code.

git status
git add .
git commit -m "built add request button and route to new request form"

Resources

Code at this stage