Since we've already built these components, let's go look at where those are in our application. So we are just at the dashboard on the newsletter tab so we have our box and we have the latest newsletter and it's working great. Now there's one small thing we're going to have to change after we get these in and I'll show you what those are once we do that.

So the first step in putting these components in is setting the grid to be placed in its parent grid. So we if we inspect the element and we open it up, You'll see our div is in the top left corner.

We want it to exist in the center here on the grid. That's pretty easy. Let's go into our newsletter detail component and grab the className newsletter-detail and let's go place that on the grid. Create a new file called newsletter-detail.scss.

newsletter-detail.scss

.newsletter-detail {
    grid-row: content-s/content-e;
}

Next, let's go in to our main.scss and let's import it.

So we're importing that, let's go check it out in the browser now and you'll see it's moved down below.

OK. Now the reason it's not within the center is because we haven't declared where we want it on the column axis. So let's add that in now.

newsletter-detail.scss

.newsletter-detail {
    grid-row: content-s/content-e;
    grid-column: content-s/content-e;
}

That should put it in the place where we want it. So now all we have to do is throw in our box component and our latest newsletter component, then we'll refactor them in the next video. Let's go into the detail and add in these two components.

newsletterDetail.js

import React, { Component } from 'react';

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

import NewsletterBox from './newsletterBox';
import NewsletterLatest from './newsletterLatest';

class NewsletterDetail extends Component {

    componentDidMount() {
        this.props.fetchNewsletterWithId(this.props.match.params.id);
    }

    render() {
        console.log(this.props.newsletterToEdit);
        return (
            <div className='newsletter-detail'>
                <NewsletterBox/>
                <NewsletterLatest/>
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { newsletterToEdit } = state.newsletters 
    return { newsletterToEdit };
}

export default connect(mapStateToProps, actions)(NewsletterDetail);

Let's see what this looks like in the browser.

Now the problem is that it's just automatically fetching the latest newsletter for both of these components, and we don't want the latest date and the latest newsletter. We want to be able to show the one we've clicked on, since we're already fetching the details of this item. We just need to throw it into these components.

So the refactor we want to make is basically going into these components, like newsletter latest, and instead of fetching a letter here what we need to do is just pass one in as a prop. So let's do our refactor those in the next guide.

git status
git add .
git commit -m "placed newsletter box and latest components in the newsletter detail component"
git push origin master

I'll see you in the next video where we will make those refactors.

Resources

Code at this stage