Create CollectionControls component with reactjs

We’ll start with CollectionControls. Create the following ~/snapterest/source/components/CollectionControls.react.js file:

var React = require('react');
var Header = require('./Header.react');
var Button = require('./Button.react');
var CollectionRenameForm = require('./CollectionRenameForm.react');
var CollectionExportForm = require('./CollectionExportForm.react');

var CollectionControls = React.createClass({

  getInitialState: function () {
    return {
      name: 'new',
      isEditingName: false
    };
  },

  getHeaderText: function () {
    var numberOfTweetsInCollection = this.props.numberOfTweetsInCollection;
    var text = numberOfTweetsInCollection;

    if (numberOfTweetsInCollection === 1) {
      text = text + ' tweet in your';
    } else {
      text = text + ' tweets in your';
    }

    return (
      <span>
        {text} <strong>{this.state.name}</strong> collection
      </span>
    );
  },

  toggleEditCollectionName: function () {
    this.setState({
      isEditingName: !this.state.isEditingName
    });
  },

  setCollectionName: function (name) {
    this.setState({
      name: name,
      isEditingName: false
    });
  },

  render: function () {

    if (this.state.isEditingName) {
      return (
        <CollectionRenameForm
          name={this.state.name}
          onChangeCollectionName={this.setCollectionName}
          onCancelCollectionNameChange={this.toggleEditCollectionName} />
      );
    }

    return (
      <div>
        <Header text={this.getHeaderText()} />

        <Button
          label="Rename collection"
          handleClick={this.toggleEditCollectionName} />

        <Button
          label="Empty collection"
          handleClick={this.props.onRemoveAllTweetsFromCollection} />

        <CollectionExportForm htmlMarkup={this.props.htmlMarkup} />
      </div>
    );
  }
});

module.exports = CollectionControls;

The CollectionControls component, as the name suggests, renders a user interface to control a collection. These controls allow the user to:

  • Rename a collection
  • Empty a collection
  • Export a collection

A collection has a name. By default, this name is new and users can change it. A collection name is displayed in a header that is rendered by the CollectionControls component. This component is a perfect candidate for storing the collection’s name, and since changing a name will require a component re-render, we’ll store that name in the component’s state object:

getInitialState: function () {
  return {
    name: 'new',
    isEditingName: false
  };
},

About the author

Deven Rathore

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares