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

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

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)