Quickstart

A quick dive into getting started with Lore

Step 3: Add Mock User Data

In this step we're going to add some mock user data to finish our Tweet component.

You can view the finished code for this step by checking out the data.3 branch of the completed project.

Add a Mock User

Our Tweet is looking pretty good, but we're still missing some data for the user's nickname and avatar. If you look at the data for our tweet, you'll notice it includes a property called userId that has a number for a value:

{
  id: 1,
  userId: 1,
  text: 'Nothing can beat science!',
  createdAt: '2018-04-24T05:10:49.382Z'
}

This number represents the id of the user who created the tweet. If we take a look at the API endpoint for /users (located at http://localhost:1337/users) we can see that a user resource looks like this:

{
  id: 1,
  nickname: "lucca",
  avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png",
  createdAt: "2016-10-25T04:24:46.207Z",
  updatedAt: "2016-10-25T04:24:46.207Z"
}

So just like we did with the mock tweet, we're going to create a mock user, using the data structure above.

Open the Tweet component and add a propType for user. Then add a getDefaultProps() method and populate it with some mock user data like this:

// src/components/Tweet.js
...
  propTypes: {
    tweet: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired
  },

  getDefaultProps() {
    return {
      user: {
        id: 1,
        data: {
          id: 1,
          nickname: "lucca",
          avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
        }
      }
    };
  },
...

// src/components/Tweet.js
class Tweet extends React.Component {
  ...
}

Tweet.propTypes = {
  tweet: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired
};

Tweet.defaultProps = {
  user: {
    id: 1,
    data: {
      id: 1,
      nickname: "lucca",
      avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
    }
  }
};

// src/components/Tweet.js
class Tweet extends React.Component {

  static propTypes = {
    tweet: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired
  };

  static defaultProps = {
    user: {
      id: 1,
      data: {
        id: 1,
        nickname: "lucca",
        avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
      }
    }
  };

  ...
}

Next, locate the render() method, and use our new user prop to populate the nickname and avatar properties:

// src/components/Tweet.js
...
  render() {
    const { tweet, user } = this.props;
    const timestamp = moment(tweet.data.createdAt).fromNow().split(' ago')[0];

    return (
      <li className="list-group-item tweet">
        <div className="image-container">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
        </div>
        <div className="content-container">
          <h4 className="list-group-item-heading title">
            {user.data.nickname}
          </h4>
          <h4 className="list-group-item-heading timestamp">
            {'- ' + timestamp}
          </h4>
          <p className="list-group-item-text text">
            {tweet.data.text}
          </p>
        </div>
      </li>
    );
  }
...

Visual Check-in

If everything went well, your application should now look like this.

Code Changes

Below is a list of files modified during this step.

src/components/Tweet.js

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import moment from 'moment';

export default createReactClass({
  displayName: 'Tweet',

  propTypes: {
    tweet: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired
  },

  getDefaultProps() {
    return {
      user: {
        id: 1,
        data: {
          id: 1,
          nickname: "lucca",
          avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
        }
      }
    };
  },

  render() {
    const { tweet, user } = this.props;
    const timestamp = moment(tweet.data.createdAt).fromNow().split(' ago')[0];

    return (
      <li className="list-group-item tweet">
        <div className="image-container">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
        </div>
        <div className="content-container">
          <h4 className="list-group-item-heading title">
            {user.data.nickname}
          </h4>
          <h4 className="list-group-item-heading timestamp">
            {'- ' + timestamp}
          </h4>
          <p className="list-group-item-text text">
            {tweet.data.text}
          </p>
        </div>
      </li>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

class Tweet extends React.Component {

  render() {
    const { tweet, user } = this.props;
    const timestamp = moment(tweet.data.createdAt).fromNow().split(' ago')[0];

    return (
      <li className="list-group-item tweet">
        <div className="image-container">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
        </div>
        <div className="content-container">
          <h4 className="list-group-item-heading title">
            {user.data.nickname}
          </h4>
          <h4 className="list-group-item-heading timestamp">
            {'- ' + timestamp}
          </h4>
          <p className="list-group-item-text text">
            {tweet.data.text}
          </p>
        </div>
      </li>
    );
  }

}

Tweet.propTypes = {
  tweet: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired
};

Tweet.defaultProps = {
  user: {
    id: 1,
    data: {
      id: 1,
      nickname: "lucca",
      avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
    }
  }
};

export default Tweet;

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

class Tweet extends React.Component {

  static propTypes = {
    tweet: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired
  };

  static defaultProps = {
    user: {
      id: 1,
      data: {
        id: 1,
        nickname: "lucca",
        avatar: "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
      }
    }
  };

  render() {
    const { tweet, user } = this.props;
    const timestamp = moment(tweet.data.createdAt).fromNow().split(' ago')[0];

    return (
      <li className="list-group-item tweet">
        <div className="image-container">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
        </div>
        <div className="content-container">
          <h4 className="list-group-item-heading title">
            {user.data.nickname}
          </h4>
          <h4 className="list-group-item-heading timestamp">
            {'- ' + timestamp}
          </h4>
          <p className="list-group-item-text text">
            {tweet.data.text}
          </p>
        </div>
      </li>
    );
  }

}

export default Tweet;

Next Steps

Next we're going to learn how to communicate with APIs and replace our mock data with real data.

About
  • Lore is a convention-driven framework for React, built with love by @_jchansen and @mikrofusion, to help you launch your ideas sooner and scale them into legend.
Links
Connect