'use strict';

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

import SpaceTile_Information from './SpaceTile_Information';
import SpaceTile_Avatar from './SpaceTile_Avatar';
import SpaceSettingsModal from '../SpaceSettingsModal';

const SpaceTile = createReactClass({
  propTypes: {
    space: PropTypes.object.isRequired,
    avatar: PropTypes.string,
    context: PropTypes.string.isRequired,
    updateSpace: PropTypes.func.isRequired,
    deleteSpace: PropTypes.func.isRequired,
  },

  getInitialState() {
    return {
      modalIsOpen: false,
    };
  },

  openModal(e) {
    e.preventDefault();
    this.setState({
      modalIsOpen: true,
    });
  },

  closeModal() {
    this.setState({
      modalIsOpen: false,
    });
  },

  render() {
    const serverConfig = window.ENV.CANVAS_SPACES_CONFIG || {};
    const space_url = `/groups/${this.props.space.id}`;
    const space = this.props.space;
    return (
      <div>
        <div className="SpaceTile">
          <SpaceTile_Information
            name={space.name}
            description={space.description}
            is_leader={space.is_leader}
            editButtonHandler={this.openModal}
            space_url={space_url}
          />
          <SpaceTile_Avatar avatar={this.props.avatar} />
        </div>
        <SpaceSettingsModal
          space={this.props.space}
          className="ReactModal__Content--canvas"
          overlayClassName="ReactModal__Overlay--canvas"
          modalIsOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          serverConfig={serverConfig}
          contentLabel={space.name}
          updateSpace={this.props.updateSpace}
          deleteSpace={this.props.deleteSpace}
        />
      </div>
    );
  },
});

export default SpaceTile;

@@ -24,71 +24,35 @@
 eact
- from 'react';%0Aimport createReactClass from 'create-react-class
+, %7B Component %7D from 'react
 ';%0Ai
@@ -257,20 +257,20 @@
 dal';%0A%0Ac
-onst
+lass
  SpaceTi
@@ -276,322 +276,223 @@
 ile 
-= createReactClass(%7B%0A  propTypes: %7B%0A    space: PropTypes.object.isRequired,%0A    avatar: PropTypes.string,%0A    context: PropTypes.string.isRequired
+extends Component %7B%0A  constructor(props) %7B%0A    super(props);%0A    this.state = %7B%0A      modalIsOpen: false
 ,%0A   
+ 
- updateSpace: PropTypes.func.isRequired,%0A    deleteSpace: PropTypes.func.isRequired,%0A  %7D,%0A%0A  getInitialState() %7B%0A    return %7B%0A      modalIsOpen: false,%0A    %7D
+%7D;%0A%0A    this.openModal = this.openModal.bind(this);%0A    this.closeModal = this.closeModal.bind(this)
 ;%0A  %7D
-,
 %0A%0A  
@@ -582,25 +582,24 @@
 %0A    %7D);%0A  %7D
-,
 %0A%0A  closeMod
@@ -662,17 +662,16 @@
  %7D);%0A  %7D
-,
 %0A%0A  rend
@@ -1674,12 +1674,227 @@
 %0A  %7D
+%0A%7D%0A%0ASpaceTile.propTypes = %7B%0A  space: PropTypes.object.isRequired,%0A  avatar: PropTypes.string,%0A  context: PropTypes.string.isRequired,%0A  updateSpace: PropTypes.func.isRequired,%0A  deleteSpace: PropTypes.func.isRequired
 ,%0A%7D
-)
 ;%0A%0Ae

Convert SpaceTile to Class component