How to Edit a Newsletter in the Property Management Application
All right welcome back. So there's a couple things we need to change before we do this.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

First things first, we need to get it into our index.js, so let's import it from newsletter let's say comma and we'll call it editNewsletter because that's what it's called. Then we just need to export it down here.

index.js

import {
    signUp,
    signIn
} from './auth';

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

import {
    changeSelectedRequestType,
    createNewRequest,
    fetchRequests,
    changeStatus
} from './requests';

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

Let's exit out of this file now, and what we need to do in newsletterEdit.js is provide the id right here on line 20. If you remember when we wrote this function we provided an ID, so we need to provide that. Let's say this.props.match.params.id see that we were taking in an id as a parameter here in editNewsletter, in this function here, ItemId, so what we need to do is pass it in so we can tell the server which one to change.

Now we also want to change one more thing, we're saying if the image is not defined then don't append it, but we actually do want to append it because if we don't then the server won't know that we just don't want an image. We want it to be undefined and then I just have it checking on the backend so we don't need to worry about that, we want to append it either way, it's just going to be undefined and then the server will say hey is this parameter undefined if it is then just don't update the image, don't change it we just want to leave it.

Okay so that's what we're doing there, and we're passing in the id so we should be good to go, let's go test it out. Okay, let's log into the application, fetches it right, now let's open up our console. Okay so we're probably going have like one error. Yeah, we do, and that's just cause it tries to fetch the image initially and it can't find it and then we get it, so don't worry about that, we should fix that but we don't need to right now.

Okay, let's hit edit, and now let's just change this body, I'm going to cut it and just google like blackberries and then I will I will cut a bunch of text, yeah, there we go. The BlackBerry is an edible fruit, there we go, paste that in. And I'm going to hit submit here and look it works, it says yo blackberries r good, and it says the blackberry is an edible fruit produced by many species in the genus Rubus in the family Rosaceae.

large

Anyway yeah, that's how you edit an item it works great. Let's try it with an image now, hopefully it works. Here, let's get a picture of a BlackBerry really quick, this one looks pretty nice. Okay, let's upload it and let's hit submit and what do you know it works, sweet that's awesome.

So what we need to do now, is we need a check in the next video if everything's working on our newsletters and then just kind of overview of what we're going to do in the next set of videos.

OK let's commit our code,

Terminal

git status
git add .
git commit -m "finished editnewsletter functionality"

I'll see you in the next video.

Resources

Source code