React - Tidy Up, and Finish

This video is available to view for members only.

Click here to Join!

Already a member?

Login


In this final video in the React section, and to wrap up this course, I am going to improve the user experience of our React CRUD application by adding in a few nice features. These are:

  • A working 'create' button :)
  • Redirection on create
  • A working 'edit' button
  • Redirection on edit

Though all of these sound quite simple, as you will soon see, they aren't quite as obvious as you might initially think.

Adding a Create Button

Let's start with the easiest thing to fix.

I'm going to add this directly to the Table component, but you may wish to rethink this implementation if you need to re-use this Table for more than just blog posts.

// /src/components/Table.js

import React, { Component } from 'react';
import { Link } from 'react-router';

export default class Table extends Component {

    // * snip *

    render() {
        return (
            <div>
                <table className="table table-hover table-responsive">
                    <!-- * snip * -->
                </table>

                <Link to="/posts/create" className="btn btn-lg btn-success">Create</Link>
            </div>
        );

React Router comes with a component for rendering our Router-friendly <a href>'s.

We need to import it:

import { Link } from 'react-router';

Then using it is really quite self explanatory:

<Link to="/posts/create" className="btn btn-lg btn-success">Create</Link>

The bit I don't like?

We link to a path. That path may very well change. If it does, we need to find / replace all instances of the path. Not the end of the world, but named routes are nicer, if not so visually as obvious. Swings and roundabouts, I suppose.

Also, remember to use className instead of class when adding in CSS classes.

Still, very easy to add these in.

Redirection On Create

We now have a lovely green button that allows us to add blog posts without manually visiting the /posts/create route.

However, when you click this button and then submit the resulting form, nothing actually happens.

Well, it does - in the background the data is POST'ed to the API and the blog post is created. But from the front end / user perspective, it doesn't look like anything happened.

Adding in a redirect is a bit of a palava. But let's do it:

Firstly, we need to wrap our Create component with the withRouter component.

By wrapping our component withRouter, we gain access to this.props.router from our component, which means we can redirect via React Router:

// /src/App.js

import React, { Component } from 'react';
import { Router, browserHistory, Route, IndexRedirect, withRouter } from 'react-router'
import List from './containers/blogPosts/list';
import Create from './containers/blogPosts/create';
import Update from './containers/blogPosts/update';
import NotFoundPage from './components/NotFoundPage';

export default class App extends Component {

  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/">
            <IndexRedirect to="/posts"/>
        </Route>
        <Route path="/posts" component={List}/>
        <Route path="/posts/create" component={withRouter(Create)}/>
        <Route path="/posts/update/:postId" component={withRouter(Update)}/>
        <Route path="*" component={NotFoundPage}/>
      </Router>
    );
  }
}

We will need to redirect both on Create, and on Update, so I have wrapped both components withRouter.

Once the component is wrapped, we can then immediately gain access to the router:

// /src/containers/blogPosts/create.js

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import Form from '../../components/form';
import { createBlogPost } from '../../actions/blogPostActions';

export default class Create extends Component {

    handleSubmit(data) {
        createBlogPost(data);
        .then(res => {
            this.props.router.push("/").bind(this);
        });
    }

    render() {
        return (
            <div>
                <Form onSubmit={this.handleSubmit.bind(this)}></Form>
            </div>
        );
    }
}

As our createBlogPost function is going to return a promise, we can hook into the then-able and redirect if successful. Pretty neat.

Repeating this process for Update is easy enough:

// /src/containers/update.js

    handleSubmit(data) {
        updateBlogPost(this.props.params.postId, data)
        .then(res => {
            this.props.router.push('/');
        });
    },

We don't yet have a working 'Edit' button though, so let's fix that also.

Working 'Edit' Button

We need to pass in the current post.id to the 'Edit' button link in order to ensure we end up on the right blog post when clicking the button.

Fortunately, we are already inside the 'loop' thanks to our map function:

// /src/components/Table.js

    render() {
        return (
            <div>
                // * snip *

                {this.state.blogPosts && this.state.blogPosts.map((post, i) => {

                    return (
                        <tr key={post.id}>
                            <td>{ post.id }</td>
                            <td>{ post.title }</td>
                            <td>
                                <Link to={`/posts/update/${post.id}`} className="btn btn-default btn-sm">Edit</Link>
                                <btn onClick={() => this.deleteHandler(i)} className="btn btn-danger btn-sm">Delete</btn>
                            </td>
                        </tr>
                    );

                })}

The Link syntax is the same as previously.

However, this time we can make use of ES6's template string syntax to save us from having to use 'this' + ' ' + 'that' sort of syntax.

If you'd like to have a play around with this, I strongly recommend ES6 Katas, and here is the direct link for the Template Strings : Basics kata. A really nice way to improve your ES6 is to do one of these Katas every single day until you can do them without thinking.

Wrapping Up

This concludes the Twig, API, React, and Angular CRUD series.

I hope you have found this course useful, and I hope it has inspired you to try out the various frameworks with Symfony 3 as your back end / API. It is a really powerful combination, in my opinion.

One of the nicest parts of using Symfony as your back end is you can take full advantage of all your PHP skills, utilising Behat, PHPSpec, and all the nice things that Symfony provides (forms and validation, for example) to make a highly robust business system.

I plan to provide most of my content in this format moving forwards - as in, Symfony as the back end, and then how to use the functionality from the front end via React, Angular, or similar.

See you in the next series!

Code For This Episode

Get the code for this episode.

Share This Episode

If you have found this video helpful, please consider sharing. I really appreciate it.


Episodes in this series

# Title Duration
1 Intro with Twig CRUD - List 06:03
2 Twig CRUD - Create 03:25
3 Twig CRUD - Update (Edit) 02:43
4 Twig CRUD - Delete 02:36
5 Simple Symfony 3 RESTful API Setup 05:32
6 API - GET a Single BlogPost 04:51
7 API - GET a Collection of BlogPosts 02:20
8 API - POST to Create New Data 06:30
9 API - PUT and PATCH to Update 04:11
10 API - DELETE 03:34
11 Angular - Setup, Styling, and GET All 09:19
12 Angular - Refactoring 10:23
13 Angular - Create (POST) 06:54
14 Angular - Update (PUT) 08:41
15 Angular - Remove (DELETE) 06:44
16 React - Intro, Setup, and GET all 06:54
17 React - Refactoring 09:14
18 React Router 04:41
19 React - Create (POST) 13:13
20 React - Update (PUT / PATCH) 12:40
21 React - Delete 11:00
22 React - Tidy Up, and Finish 04:14