Quickstart

A quick dive into getting started with Lore

Step 1: Add Filter Component

In this step we'll add a Filter component to our interface.

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

Add Filter Component

Create a component called Filter. We'll be using this component to display a list of links the user can click to filter the data being displayed.

lore generate component Filter

Update the code to look like this:

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';

export default createReactClass({
  displayName: 'Filter',

  contextTypes: {
    user: PropTypes.object.isRequired
  },

  render() {
    const { user } = this.context;

    return (
      <div className="filter">
        <ul className="list-group">
          <IndexLink className="list-group-item" activeClassName="active" to="/">
            Feed
          </IndexLink>
          <Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
            My Tweets
          </Link>
        </ul>
      </div>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';

class Filter extends React.Component {

  render() {
    const { user } = this.context;

    return (
      <div className="filter">
        <ul className="list-group">
          <IndexLink className="list-group-item" activeClassName="active" to="/">
            Feed
          </IndexLink>
          <Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
            My Tweets
          </Link>
        </ul>
      </div>
    );
  }

}

Filter.contextTypes = {
  user: PropTypes.object.isRequired
};

export default Filter;

import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';

class Filter extends React.Component {

  static contextTypes = {
    user: PropTypes.object.isRequired
  };

  render() {
    const { user } = this.context;

    return (
      <div className="filter">
        <ul className="list-group">
          <IndexLink className="list-group-item" activeClassName="active" to="/">
            Feed
          </IndexLink>
          <Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
            My Tweets
          </Link>
        </ul>
      </div>
    );
  }

}

export default Filter;

In the code above, we've added two links; one to display all tweets (the Feed) and one to display only the tweets belonging to a specific user. In this case, we're going to call that link "My Tweets" and use it to display the current user's tweets.

Update Layout

With our Filter component created, import it into the Layout component and insert it right below the Profile:

// src/components/Layout.js
...
import Filter from './Filter';

export default createReactClass({
  displayName: 'Layout',

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
              <Filter />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

});

// src/components/Layout.js
...
import Filter from './Filter';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
              <Filter />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

}
...

// src/components/Layout.js
...
import Filter from './Filter';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
              <Filter />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

}
...

If you refresh the page you should now see the Filter displayed right below the Profile. Clicking on a link will generate a console error however, as the /users/:userId route doesn't exist yet. We'll fix that next.

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/Filter.js

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';

export default createReactClass({
  displayName: 'Filter',

  contextTypes: {
    user: PropTypes.object.isRequired
  },

  render() {
    const { user } = this.context;

    return (
      <div className="filter">
        <ul className="list-group">
          <IndexLink className="list-group-item" activeClassName="active" to="/">
            Feed
          </IndexLink>
          <Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
            My Tweets
          </Link>
        </ul>
      </div>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';

class Filter extends React.Component {

  render() {
    const { user } = this.context;

    return (
      <div className="filter">
        <ul className="list-group">
          <IndexLink className="list-group-item" activeClassName="active" to="/">
            Feed
          </IndexLink>
          <Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
            My Tweets
          </Link>
        </ul>
      </div>
    );
  }

}

Filter.contextTypes = {
  user: PropTypes.object.isRequired
};

export default Filter;

import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';

class Filter extends React.Component {

  static contextTypes = {
    user: PropTypes.object.isRequired
  };

  render() {
    const { user } = this.context;

    return (
      <div className="filter">
        <ul className="list-group">
          <IndexLink className="list-group-item" activeClassName="active" to="/">
            Feed
          </IndexLink>
          <Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
            My Tweets
          </Link>
        </ul>
      </div>
    );
  }

}

export default Filter;

src/components/Layout.js

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Header from './Header';
import Profile from './Profile';
import Filter from './Filter';

export default createReactClass({
  displayName: 'Layout',

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
              <Filter />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';
import Header from './Header';
import Profile from './Profile';
import Filter from './Filter';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
              <Filter />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default Layout;

import React from 'react';
import PropTypes from 'prop-types';
import Header from './Header';
import Profile from './Profile';
import Filter from './Filter';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
              <Filter />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default Layout;

Next Steps

In the next section we'll add the ability to view just the user's tweets.