« Previous Tutorial Next Tutorial »

Ready to move one more fetch block into our authentication action file? This should be old hat by now, so let’s breeze through it. Open up /src/components/TemplateContainer.jsx and grab the whole async block from line 20 to line 48. Cut it, and then open /src/actions/authentication.js. Add a padding line below line 11, and then add the following:

// Check User Session

Below that, paste the code you just cut. Does this feel familiar? You can probably guess the next steps, but here they are. First, change line 14 to:

export function checkSession() {

And immediately below that, add the following:

  return async (dispatch) => {

Then jump down and add a semi-colon at the end of line 43, and add a line with a closing brace just below that. Next, remove line 16 entirely. No props needed here! After that, remove the word “Action” from the three functions that use it (eg: sessionCheckSuccessAction(json); becomes sessionCheckSuccess(json);), and wrap those same three functions in dispatches (eg: sessionCheckSuccess(json); becomes dispatch(sessionCheckSuccess(json));.

Now, the way this function happens to work, we don’t return a progress spinner decrement at the very end. For consistency, I like to instead return on each of the three dispatches. It’s not strictly necessary – Redux will continue on its merry way regardless, but it does allow us to trim a few lines, which is nice. So add return in front of each of the three dispatch functions.

You’ll see that this generates a couple of ESLint errors. In both cases, it’s because we’ve reduced the need for certain bits of the code. So change lines 33 to 37 from this:

      if (json.username) {
        return dispatch(sessionCheckSuccess(json));
      } else {
        return dispatch(sessionCheckFailure());
      }

To this:

      if (json.username) {
        return dispatch(sessionCheckSuccess(json));
      }
      return dispatch(sessionCheckFailure());

Now change lines 38 to 40 from this:

    .catch((error) => {
      return dispatch(sessionCheckFailure(error));
    });

To an ES6 implicit return, like this:

    .catch(error => dispatch(sessionCheckFailure(error)));

Remember: ES6 functions on one line with no brackets automatically return whatever follows the arrow. For a refresher on this, you can check out tutorial 41.

We’re done with this file. Save it and head back to /src/components/TemplateContainer.jsx. Let’s start by cleaning up our imports. Adjust the top of the file to look like this:

import React from 'react';
import { connect } from 'react-redux';
import { checkSession } from '../actions/authentication';

import Template from './Template';

Your class export should still begin on line 7. Skip down below that to mapDispatchToProps (should be lines 28 to 33), and get rid of that block entirely. Then change the final line of the file, now line 35, to this code:

export default connect(mapStateToProps)(TemplateContainer);

Last thing we need to do is call our checkSession action, which requires a small method in our class. Below componentWillMount, but above render, add the following lines:

  checkUserSession() {
    const { dispatch } = this.props;
    dispatch(checkSession());
  }

Now we need to clean up two lines. First, fix our binding on line 12 by changing it to this:

    this.checkUserSession = this.checkUserSession.bind(this);

And then change the call in componentWillMount, on line 17, appropriately:

    this.checkUserSession = this.checkUserSession.bind(this);

Save this file and you’re set. Your app will continue to check the session on a hard refresh and, if it exists, restore it. We’re now done with tutorials where you rewrite a bunch of code just to get back to the same point you’d already reached, and can venture forth to write new stuff using this superior approach. In fact, this one went by so quickly, we’ve got an extra minute or two, so let’s do something interesting. Let’s catch enter clicks on our log-in form.

Open /src/components/account/LoginPage.jsx. We need to add a function to handle keypresses, so let’s do that. In between handleEmailChange and handlePasswordChange, add this function:

  // catch enter clicks
  handleKeyPress(target) {
    if (target.charCode === 13) {
      this.compileFormData();
    }
  }

We need to bind this function, so in between these two lines:

    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);

Add this line:

    this.handleKeyPress = this.handleKeyPress.bind(this);

And last but not least, let’s put listeners on our form fields. It’s the same call for both of them, so just below line 57 and line 89, add this code:

                onKeyPress={this.handleKeyPress}

We’re good here, so save the file. You can jump over to a browser, and test your logging out and logging in (not to mention your session check) to your heart’s content.

Next up, we’re going to create a register page, which will use everything we’ve learned so far. See you there!

« Previous Tutorial Next Tutorial »