So we're going to set up the end point and the action, and all that junk. Okay, so we want to hit here, right now if we hit submit it just pushes back and doesn't do anything with the data. So let's go ahead and let's go into our code in newsletterEdit.js let's get rid of this comment on line 9 and let's do what we're doing in newsletterNew.js and let's just copy all of this OK including the form data.

Let's go to newsletterEdit.js at it and let's paste it in and let's get rid of this.props that pushes to dashboard. So what I've done in this video so far is copied everything from newsletterEdit, from newsletterNew.js on submit into here. Now the thing is with our image we're not going to be keeping track of the image right, for the title and the body we're just going to resubmit the title and the body right and we're just going to override it on the database even if it's the same.

Now, we're not going to give out the image because we don't want to send a whole other image over the network again, right. And there's no point in doing it, it's actually easier to do it this way because it's going to be undefined if we don't change it right. So let me show you what I mean, let's comment out this create newsletter call, and let's just say console.log(title, body, image);

Let's go to the browser, and let's log in, then let's go to edit, and let's just hit inspect and then let's hit console and let's hit submit. Okay, you'll see it says new newsletter item then it says the body but at the end it says undefined.

Now what that undefined thing is simply our image. It's undefined because we never put the image in the input we only put it in the image tag, it's only in the image tag it's not in the actual input in form fields image okay, in form image it's not in this input here. Okay the value is still undefined if we put like blah blah blah blah there and then we tried that it would print that out.

Now we could throw it in there manually once we put the image url in here right, we could throw it in there. But the reason we don't want to do that is because we don't want to send it over the network again when we don't need to. We only want to send an image over the network if it's a new image.

So if we go here and we select an image and we hit submit you'll see it says file right of this new file.

We only want to send that if we have a new file right. So if it's undefined we don't want to do anything with image okay, so that's why we don't do that. So let's just get rid of the form data.append, well what's actually check let's say if image is not equal to undefined then we will appended to the form data right, else we don't want to do anything.

newsletterEdit.js

if(image != undefined) {
    formData.append('image', image);
}

Let's get rid of the console log, and let's comment this out and let's create an action that is going to call it edit newsletter. So we're going to have to go create this so make sure this is all in right, this on submit function from my screen line 9-24 make sure you've got all this data. Okay, let's head over to our actions folder, and let's go into newsletter.js and let's create a new function. Let's say export function edit newsletter and we'll pass in form data and success.

newsletter.js

export function editNewsletter(formData, success) {

}

Now what we want to do is we want to say const token = localStorage.getItem('token'); and then we want to return a function and then we just want to do basically exactly what we're doing here in the createNewNewsletter function. We want to say axios.post root_url slash newsletters except for instead of new we just want to say edit and then slash and then we want to provide an id. So lets say the endpoint looks like this okay, it looks like this on server.

newsletter.js

export function editNewsletter(formData, success) {
    const token = localStorage.getItem('token');
    return function() {
        axios.post('${ROOT_URL}/newsletters/edit/:id')
    }
}

You can go check that if you want, what we are going to do is provide the id like this ${id} and then we are going to get this id from our parameters. We need to say item id, and then we can say something like const id = itemId; then we can just throw it in right here. That's going to specify which item we're actually modifying in the backend, it's going to filter through and say "Hey this one matches up, let's modify its data that we passed it."

newsletter.js

export function editNewsletter(itemId, formData, success) {
    const token = localStorage.getItem('token');
    const id = itemId;
    return function() {
        axios.post('${ROOT_URL}/newsletters/edit/${id}')
    }
}

Now we need to pass in our formData, then we need to pass in our headers, so let's say headers, then I'll say Content-Type basically it's exactly what we have here in our createNewNewsletter headers. I'm just going to copy the headers here and post it in here, most of this is all the same, but I didn't want to copy it all.

And we'll say .then get a response back, we'll say console.log, response.data to see what we're getting and then we'll hit the callback so we can navigate back to the dashboard. Then we just need our catch to display an error if we have one, and not go back, just stay on that page.

newsletter.js

export function editNewsletter(itemId, formData, success) {
    const token = localStorage.getItem('token');
    const id = itemId;
    return function() {
        axios.post('${ROOT_URL}/newsletters/edit/${id}')
            headers: {
                'Conent-Type': 'multipart/form-data',
                authorization: token
            }
        })
            .then(response => {
                console.log(response.data);
                success();
            })
            .catch(err => {
                console.log(err);
            })
    }
}

Let's go ahead and test it in the next video okay. So what we'll do is we'll try a couple things we'll try editing it without the image, and then we'll try editing it with another image.

I'll see you in the next video, let's commit our code.

Terminal

git status
git add .
git commit -m "Built edit newsletter action creator"

Resources

Source code