content: /**
   * Manapaho (https://github.com/manapaho/)
   *
   * Copyright © 2015 Manapaho. All rights reserved.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE.txt file in the root directory of this source tree.
   */
  
  import React from 'react';
  
  /**
   * Import Entities.
   */
  import {getEntities, getConnectionWithEntities} from '../../store';
  
  /**
   * Import Components.
   */
  
  /**
   * Import UX components.
   */
  import CommentPanel from '../commentPanel/commentPanel';
  
  /**
   * Import styles.
   */
  import style from './style';
  
  /**
   * Import Internationalization.
   */
  import {IntlProvider, FormattedMessage} from 'react-intl';
  
  /**
   * The component.
   */
  export default class PostPanel extends React.Component {
      // Expected properties.
      static propTypes = {
          post: React.PropTypes.object.isRequired
      };
  
      // Initialize the component.
      constructor(props) {
          super(props);
      }
  
      // Invoked before rendering when new props or state are being received.
      // This method is not called for the initial render or when forceUpdate is used.
      // Use this as an opportunity to return false
      // when you're certain that the transition to the new props and state will not require a component update.
      // If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change.
      // In addition, componentWillUpdate and componentDidUpdate will not be called.
      shouldComponentUpdate(nextProps, nextState) {
          // This is a pure component.
          return React.addons.shallowCompare(this, nextProps, nextState);
      }
  
      // Invoked before requesting data for this component.
      static getQuery(id, offset = 0, limit = 5) {
          return `title
                  comments (${id !== undefined ? 'id:' + id + ', ' : ""}offset: ${offset}, limit: ${limit}) {
                      offset
                      limit
                      nodes {
                          ${CommentPanel.getQuery()}
                      }
                      total
                  }`;
      }
  
      // Render the component.
      render() {
          // Get the properties.
          const {post, comments_range_update} = this.props;
          // Get the comments.
          var commentsConnection = getConnectionWithEntities('CommentConnection', post.comments);
          // Calculate the styles.
          let className = style.root;
          // Return the component UI.
          return (
              <div className={className}>
                  <div>{post.title}</div>
                  <label>Offset:</label>
                  <input type="text" defaultValue={commentsConnection.offset} onChange={(e) => comments_range_update(e.target.value, commentsConnection.limit)}/>
                  <label>Limit:</label>
                  <input type="text" defaultValue={commentsConnection.limit} onChange={(e) => comments_range_update(commentsConnection.offset, e.target.value)}/>
                  <label>Total:</label>
                  <span>{commentsConnection.total}</span>
                  <ul>
                      {commentsConnection.nodes.map(comment => {
                          return (
                              <li key={comment.id}>
                                  <CommentPanel comment={comment}/>
                              </li>
                          );
                      })}
                  </ul>
              </div>
          );
      }
  }
  