Let's go into the newsletterDetail.js and let's import our form button from formFields.js.

Now we probably shouldn't use this, because it takes in fields, but we'll try it anyway. So let's copy the constant from FormButton in formFields.js so we can remember what props it uses. Let's use this button.

newsletterDetail.js

render() {
        console.log(this.props.newsletterToEdit);
        return (
            <div className='newsletter-detail'>
                <FormTitle className='newsletter-detail__title' text='Newsletter Archive'/>
                <NewsletterBox date={this.props.newsletterToEdit.date}/>
                <NewsletterLatest {...this.props.newsletterToEdit}/>
                <FormButton 
                    className='newsletter-detail__cancel'
                    small={true}
                    onClick={() => this.props.history.push('/dashboard')}
                    title='Cancel'
                    />
            </div>
        )
    }
}

That should work, let's see what it looks like, then we'll place it on our grid, because it is working.

Ok we have our button. Now let's throw it on the grid, which should be super simple. Open up newsletter-detail.scss and let's add a place in our grid for this button.

newsletter-detail.scss

    &__cancel {
        grid-row: 1;
        grid-column: latest-s/latest-e;
        justify-self: end;
        align-self: end;
    }

Let's see what that looks like.

And it works. Now we just need a couple of margins.

    &__cancel {
        grid-row: 1;
        grid-column: latest-s/latest-e;
        justify-self: end;
        align-self: end;

        margin-right: 1rem;
        margin-bottom: 1.2rem;
    }

Now it looks like our design, and we're done with that component. So we're all good. Looks like we're done with the newsletters. Now what we want to do is, before we implement all of the functionality, we will build out all of the requests features, and then once that's done we will throw in all the functionality.

And then we will fix the header up at the top to display the correct content and we will move on from there. So we just have requests and functionality. But honestly, the majority of the the application was the newsletters.

Let's commit our code.

git status
git add .
git commit -m "cancel button for newsletter archive detail component"

I'll see you in the next video.

Resources

Code at this stage