import React, { PropTypes } from 'react'; import Editor from '../components/Editor'; import Sidebar from '../components/Sidebar'; import PreviewFrame from '../components/PreviewFrame'; import Toolbar from '../components/Toolbar'; import Preferences from '../components/Preferences'; import NewFileModal from '../components/NewFileModal'; import Nav from '../../../components/Nav'; import Console from '../components/Console'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import * as FileActions from '../actions/files'; import * as IDEActions from '../actions/ide'; import * as ProjectActions from '../actions/project'; import * as PreferencesActions from '../actions/preferences'; import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files'; import SplitPane from 'react-split-pane'; class IDEView extends React.Component { constructor(props) { super(props); this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this); this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this); } componentDidMount() { if (this.props.params.project_id) { const id = this.props.params.project_id; this.props.getProject(id); // if autosave is on and the user is the owner of the project if (this.props.preferences.autosave && this.props.project.owner && this.props.project.owner.id === this.props.user.id) { this.autosaveInterval = setInterval(this.props.saveProject, 30000); } } this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29; this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20; this.forceUpdate(); } componentWillUpdate(nextProps) { if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) { this.consoleSize = nextProps.ide.consoleIsExpanded ? 180 : 29; } if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) { this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20; } } componentDidUpdate(prevProps) { // if user is the owner of the project if (this.props.project.owner && this.props.project.owner.id === this.props.user.id) { // if the user turns on autosave // or the user saves the project for the first time if (!this.autosaveInterval && ((this.props.preferences.autosave && !prevProps.preferences.autosave) || (this.props.project.id && !prevProps.project.id))) { this.autosaveInterval = setInterval(this.props.saveProject, 30000); // if user turns off autosave preference } else if (this.autosaveInterval && !this.props.preferences.autosave && prevProps.preferences.autosave) { clearInterval(this.autosaveInterval); this.autosaveInterval = null; } } if (this.autosaveInterval && !this.props.project.id) { clearInterval(this.autosaveInterval); this.autosaveInterval = null; } } componentWillUnmount() { clearInterval(this.autosaveInterval); this.autosaveInterval = null; this.consoleSize = undefined; this.sidebarSize = undefined; } _handleConsolePaneOnDragFinished() { this.consoleSize = this.refs.consolePane.state.draggedSize; this.refs.consolePane.setState({ resized: false, draggedSize: undefined, }); } _handleSidebarPaneOnDragFinished() { console.log('setting sidebar size'); this.sidebarSize = this.refs.sidebarPane.state.draggedSize; this.refs.sidebarPane.setState({ resized: false, draggedSize: undefined }); } render() { return (