Now since we don't have any in our database it's just blank. So what we need to do is learn how to add new items with our form here. So we want to type in a title, a body, a image and then have it submit and then go back and fetch it and show it.

Right now if we put data in here and selected an image and hit submit nothing happens it just comes back here and refetches our newsletters which are empty so it doesn't display anything. So let's go implement that feature by heading into newsletterNew.js.

Basically what we want to do is, we want to get rid of this set of four comments and we want to say hey let's do what we're doing in requestsNew.js and let's hit a different endpoint okay, we want to create a new newsletter. So I'm in requestsNew.js right now, and we want to do the same exact thing. We want to take the title, body, and image and put it in formData object and send it over to an action creator to do that for us to hit the endpoint.

So let's just copy this code right here in our requestNew.js

const { title, body, image } = fields;

var formData = new FormData();
formData.append('title', title);
formData.append('body', body);
formData.append('image', image);

this.props.createNewRequest(this.props._id, formData, () => {
    this.props.history.push("/dashboard");
})

let's head back to newsletterNew and let's just paste it in our onSubmit function.

newsletterNew.js

class NewNewsletter extends Componet {

    onSubmit = fields => {

        const { title, body, image } = fields;

        var formData = new FormData();
        formData.append('title', title);
        formData.append('body', body);
        formData.append('image', image);

        this.props.createNewRequest(this.props._id, formData, () => {
            this.props.history.push("/dashboard");
        })
    }
}

OK we're going to have to hook up this this component to redux now so we can get access to our actions. So let's import connect from react-redux, let's import * as actions from ../../actions and then scroll down here to the bottom and let's say NewNewsletter is equal to connect and then we'll say null and then we'll put a comma actions and then we'll bind it to the NewNewsletter component, excellent.

newsletterNew.js

import React, { Component } from "react";

import { connect } from 'react-redux';
import * as actions from '../../actions';

import NewNewsletterForm from "./newsletterNewForm";

NewNewsletter = connect(null, actions)(NewNewsletter);

export default NewNewsletter;

So now we have access to our actions in this component and we're hitting the createNewRequests end point right, the new request action creator. We don't want to do that because we don't want to create a new request, we want to create a new newsletter. Now both of these endpoints, if I go to requests.js under actions, both of these end points the requests new and the newsletters new they both take in the same exact data.

So what we want to do is copy this entire export function createNewRequest and we want to go into newsletter.js and we want to paste it in here at the bottom and let's rename it to createNewNewsletter.

newsletter.js

export function createNewNewsletter(userId, formData, success) {
    const token = localStorage.getItem('token');
    return function() {
        axios.post(`${ROOT_URL}/requests/new`, formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                authorization: token
            }
        })
            .then(response => {
                console.log(response.data);
                success();
            })
            .catch(err => {
                console.log(err);
            })
    }
}

Now what we need to do is we need to export this which we are and then we need to go into our index.js and we need to import it into this file, so we need to go to this second set of imports and we need to say import fetchNewsletters, fetchNewsletterWithId, and createNewNewsletter so we have access to it in our actions. We then need to export it from this file so create new newsletter so that we have access to it in files that we import our actions into.

index.js

import {
    fetchNewsletters, 
    fetchNewsletterWithId, 
    createNewNewsletter
} from './newsletter';

export {
    signUp,
    signIn,
    fetchNewsletters,
    fetchNewsletterWithId,
    changeSelectedRequestType,
    createNewRequest,
    fetchRequests,
    changeStatus,
    createNewNewsletter
};

Now one thing we need to change is we need to go back into newsletter.js and we need to change the endpoint. We want it to read ROOT_URL newsletters/new, we don't want to hit requests.

`${ROOT_URL}/newsletters/new`,

All right so the should all be the same, let's go ahead and test it out by first going into newsletterNew.js and changing this call to create a new newsletter.

newsletter.js

this.props.createNewNewsletter(this.props._id, formData, () => {
    this.props.history.push("/dashboard");
})

All right, so what we're going to do is we're just going to end the video here, and we got this all set up so we'll test it in the next video, so let's commit our code.

Terminal

git status
git add .
git commit -m "setup createnewsletter action and connected the newsletternew component to redux and our actions"

Okay, I'll see you in the next video where we'll test it out.

Resources

Source code