The reason why you're going to have to extend your knowledge is with the portfolio manager, we were working with one master component which was that portfolio manager so the blog form was technically always called from the same place.

Here we are getting a little more creative and it's part of the reason why I wanted to use that modal setup, was because if you ever have to implement this in a real life application in your job or in a project that you're creating, then it might be a little bit tricky and you're gonna see right here that there are a few important concerns that you have to walk through because we do not have a single source for calling this blog form anymore.

We have the blog modal which is always gonna call a new blog and then we have the blog form or I should say the blog detail page that's gonna call this so we have two locations that have two separate but similar goals and they're sharing a component. And that is something that when you're working with frameworks like React, this is something you're gonna have to do quite a bit and so the more practice you get with it, the better it's going to become. So let's get started. We have a decent amount of code to write in this guide. Some of the patterns that we implemented with the portfolio manager, we'll be able to replicate them here and then some of them we're gonna have to learn a bit more.

So the very first thing I wanna do is we need to come to our blog form here and we're going to add a couple more pieces of base state. So we're first going to add a apiUrl and then we're going to add a apiAction. If you remember back to our portfolio form, we did the same thing so let's pull in the base state for our apiUrl by going down to our handleSubmit function.

So if you come down to handleSubmit here, you'll see that we have this portfolio blogs and I'm going to completely cut that out and then I'm gonna replace it with a call to this.state.apiUrl and now let's go up and let's add this new action as our base state. So our new action is going to simply be that URL, wrap it all up as a string.

So you have HTTPS, your URL so your subdomain.devcamp.space/portfolio/portfolio_blogs, that is the URL you call when you want to create something new. Now the base action here is going to be post so we wanna make sure that whenever we're creating a new blog form, we're going to use post and then we're going to switch this to patch if we happen to be in edit mode.

So our apiAction, I'm going to copy this, save it and then inside of our axios call we're going to update this so it's dynamic. But before we get down into that part of the application, let's update our componentWillMount. I have one bug that I noticed when I was prepping for this, if you notice I'm calling status here that if you remember the correct property is blog_status and you may have noticed this when we were working with edit mode up to this point.

If you click on the title, the blog status is not populated so we wanna make sure that we're always sending this in and when we get to some of our final polish items because we're gonna have a whole section that's just dedicated to cleaning up a few spots on the page throughout the entire application.

We're gonna turn this into a select form so you can drop down and pick your items. For right now I'm not worried about it, but we will do that eventually. But right now this isn't getting populated at all in edit mode and it's because I have it listed as status when it's really blog_status and we need to call blog_status right here and now if you come down and let's hit refresh, click on testing with image, you can see that that's now populating.

So that's more of a bug fix than anything else and now that we have that, we also need to call content. We haven't called our content up until this point so I can say this.props.blog.content and so that's going to populate our base content and if you have some confusion because you may think well, how is our content getting populated, well, we are passing that directly into the rich text editor component.

So inside of our content to edit here, we are passing the data directly in, but remember we also need to establish a base case for our blog form component so that's what we're doing because right here we're not actually setting state and this would be a bad place to call setState so we're not setting our state here so our rich text editor knows about our content, but our blog form doesn't and that would be a problem.

What would happen if we did not give this base state for our componentWillMount is you would submit your edit and your title would get updated, your status would get updated, images would, but content would be completely wiped out each time. That's probably not what you're wanting to do so we need to say that if there is content, we're gonna pipe it in right here.

And then the last two things is we need to pass in a apiUrl and then a apiAction. Now this apiAction is going to be patch so any time we wanna edit something, the correct verb, the HTTP verb, is patch and so we're going to pass that in. Now for the apiUrl here, what we need to do is a slight change. We need to pass in the ID.

So I'm going to come all the way up to our apiUrl. Let's copy this and what we're gonna be using is pretty similar except we also need the ID and this needs to be dynamic so I'm gonna put it inside of backticks and then we can say portfolio_blogs/ and then with a $ curly bracket here say this.props.blog.id and hit save.

blog-form.js

componentWillMount() {
  if (this.props.editMode) {
    this.setState({
      id: this.props.blog.id,
      title: this.props.blog.title,
      blog_status: this.props.blog.blog_status,
      content: this.props.blog.content,
      apiUrl: `https://jordan.devcamp.space/portfolio/portfolio_blogs/${
        this.props.blog.id
      }`,
      apiAction: "patch"
    });
  }
}

One little refactor you could do if you'd like is to use destructuring. Notice how many times we're calling this.props.blog right here. You could use destructuring right inside of here and pull all of these out so you could just say the ID is the ID, titles, title and so that would be a good practice for doing destructuring.

Okay, so now that we have this, it's time to update our axios call so let's move down into handleSubmit. Right now we have said that every handleSubmit is really just gonna be a post request and we can't have that. We need to use post and patch or else the API is not gonna know what to do with their data so let's get started on handleSubmit and cleaning this up and you can definitely reference the handleSubmit in the portfolio form because if you are not really that familiar or you don't use axios's kind of alternative configuration, then you may get a little bit confused or you might make a typo so we might as well just copy this and I'm going to paste this here.

And we can get rid of axios and post and we're gonna keep then because we want this process to occur and we'll say method: this.state.apiAction, that's the same, apiUrl's the same, buildForm is the same, withCredentials is the same, so we don't have to make any changes. What we now have is a dynamic way of handling our submit.

If we're in edit mode we're gonna send up patch, if we are in the just regular new mode which we don't really have a name for, but if we're not in edit mode, it's going to call post and it's gonna create a new record.

Okay, so we are moving along quite nicely. The next thing that we're going to do is we now, if you come down into the then response block so this is what happens when we have created a blog post. Right now it's calling handleSuccessfulFormSubmission, this is where we get into the part where we need to work with two different parent components.

We have to work with the modal when we want to create a new blog post and that is what this this.props.handleSuccessfulFormSubmission, that's where it's coming from. But if we're in edit mode, we need to let the blog detail component know about that. So what we can do here is just say if this.props.editMode, if that's the case we want to update blog detail component else then we want to simply do the same behavior as before, we want to go update the blog modal.

So we are going to have a function here we're going to call that will handle a successful update action so we can pretend that it's already there. So I'll say this.props.handleUpdateFormSubmission and let's scroll up to give ourselves some room and it's going to take in the same content as our SuccessfulFormSubmission.

The update and the create actions in the API both return the same data structure and that's something that's really nice because now all we have to do is say this.props.handleUpdateFormSubmission and pass in response.data.portfolio_blog and that's all we need to do. Now this method is not created yet so we're going to have to implement that and we're actually done with everything we need to do in the blog form.

So let's get started on that. If you go to the blog detail and scroll all the way up to the top, let's add in and bind our prop function that we know we need to create. So I'm gonna say this.handleUpdateFormSubmission equals this.handleUpdateFormSubmission.bind to this and now let's create this function.

this.handleEditClick = this.handleEditClick.bind(this);
this.handleFeaturedImageDelete = this.handleFeaturedImageDelete.bind(this);
this.handleUPdateFormSubmission = this.handleUPdateFormSubmission.bind(this);

Now this one will take in a blog so I'm gonna call it blog for the function argument and all this needs to do is update the blog detail state. So I'll say this.setState and then inside of here we're gonna take the blogItem and pass in and replace it with our blog and then we also need to switch editMode to false.

The cool thing about that is even though we're on the same page, as soon as editMode is turned to false, it's gonna switch back into the blog detail where you see the content, it's rendered as HTML, you see our featured image, you see the title. All of those kinds of things, so that's pretty cool. We don't have to do any routing, we just update the state and everything should work.

So now that we have that, we only have a couple other or one other item to add. We simply need to pass in this handleUpdateFormSubmission into our blog form component so we need to pass in one more prop so handleUpdateFormSubmission equals this.handleFormSubmission.

blog-detail.js

const contentManager = () => {
  if (this.state.editMode) {
    return (
      <BlogForm
        handleFeaturedImageDelete={this.handleFeaturedImageDelete}
        handleUpdateFormSubmission={this.handleUpdateFormSubmission}
        editMode={this.state.editMode}
        blog={this.state.blogItem}
      />
    );
  } else {
    return (
      <div className="content-container">
        <h1 onClick={this.handleEditClick}>{title}</h1>

        <BlogFeaturedImage img={featured_image_url} />

        <div className="content">{ReactHtmlParser(content)}</div>
      </div>
    );
  }
};

Okay, that was quite a bit of code, but hopefully you're starting to see a pattern here of how you can have components interconnected passing data between each other and working with state. So let's go test all of this out. So I have this testing with image here, I'm gonna hit refresh and if I click on this you can see we have testing with image and we have some content here. We can add some more content and we're in draft mode. Let's click save and it looks like all of our content is updated.

If I say testing with image with update here in the title, hit save, all of that is working nicely. If I click on it and I wanna add an image this time, I'll go to drop zone, upload that image, hit save and there you go, your image is uploaded. All of that's working perfectly. Let's click on blog, let's see if we can create a new blog post still so I'm gonna say testing after update feature.

Blog status you can do as draft or published, add some content in, add a featured image and now if you click on save, looks like that worked, click on it, all of it's working. We have a new feature, we have an update feature, they're working together. They're working with multiple parent components and we're able to share the functionality inside of the blog form and now you're taking advantage of this component based architecture where you're able to create a single component that's able to be reused in different parts of the application.

And the really cool thing about this is if you use your imagination, think of an application where you wanna take this kind of functionality and you wanna share it someplace else. Right now everything's kind of in the same area, but imagine a scenario where you wanna have an admin dashboard and in that admin dashboard you also wanna be able to create blog posts. You can follow the same pattern and call the blog form the exact same way we're doing with this modal and have that exact same shared functionality and that's pretty cool.

That really hopefully shows you a little bit of the potential that you have with React and also part of the reason why it's such an incredibly popular library is because it gives you pretty much complete control over the type of user experiences that you wanna build. So great job if you went through this, this blog form, except for a few polish items, is completely done.

Nice work and you're done with this whole section. In the next section we're gonna finish up a few polish items with the rest of the app just so it's nice and ready to showcase, whether you're looking for a job, whether you're looking for freelance work or you're simply looking to build your developer resume.

Resources

• Source code