p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

74 lines
2.3 KiB
React
Raw Normal View History

2016-05-18 17:37:59 +00:00
import React from 'react'
2016-06-22 17:49:06 +00:00
import Editor from '../components/Editor'
import PreviewFrame from '../components/PreviewFrame'
import Toolbar from '../components/Toolbar'
import Preferences from '../components/Preferences'
import Nav from '../../../components/Nav'
2016-05-05 23:01:31 +00:00
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
2016-06-22 19:58:23 +00:00
import * as FileActions from '../actions/files'
import * as IDEActions from '../actions/ide'
import * as PreferencesActions from '../actions/preferences'
import * as ProjectActions from '../actions/project'
2016-05-05 23:01:31 +00:00
2016-05-18 17:37:59 +00:00
class IDEView extends React.Component {
2016-06-20 17:29:32 +00:00
componentDidMount() {
if (this.props.params.project_id) {
const id = this.props.params.project_id
this.props.getProject(id);
}
}
2016-05-05 23:01:31 +00:00
render() {
return (
2016-05-18 17:37:59 +00:00
<div className="ide">
2016-06-17 18:11:52 +00:00
<Nav user={this.props.user}
createProject={this.props.createProject}
saveProject={this.props.saveProject}/>
2016-05-18 17:37:59 +00:00
<Toolbar
className="Toolbar"
2016-05-11 20:13:17 +00:00
isPlaying={this.props.ide.isPlaying}
2016-06-17 17:37:29 +00:00
startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch}
projectName={this.props.project.name}
setProjectName={this.props.setProjectName}
2016-06-17 18:31:33 +00:00
openPreferences={this.props.openPreferences}
2016-06-17 17:37:29 +00:00
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
/>
<Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
2016-06-20 18:58:15 +00:00
closePreferences={this.props.closePreferences}
increaseFont={this.props.increaseFont}
decreaseFont={this.props.decreaseFont}
fontSize={this.props.preferences.fontSize}/>
2016-06-17 17:37:29 +00:00
<Editor
content={this.props.file.content}
2016-06-20 18:58:15 +00:00
updateFile={this.props.updateFile}
fontSize={this.props.preferences.fontSize} />
2016-06-17 17:37:29 +00:00
<PreviewFrame
content={this.props.file.content}
2016-05-11 02:22:32 +00:00
head={
2016-06-20 17:30:59 +00:00
<link type='text/css' rel='stylesheet' href='/preview-styles.css' />
2016-05-11 20:13:17 +00:00
}
isPlaying={this.props.ide.isPlaying}/>
</div>
2016-05-18 17:37:59 +00:00
)
2016-05-05 23:01:31 +00:00
}
}
function mapStateToProps(state) {
return {
2016-05-11 20:13:17 +00:00
file: state.file,
2016-06-17 17:37:29 +00:00
ide: state.ide,
2016-06-14 18:46:40 +00:00
preferences: state.preferences,
user: state.user,
project: state.project
2016-05-05 23:01:31 +00:00
}
}
function mapDispatchToProps(dispatch) {
2016-06-22 19:58:23 +00:00
return bindActionCreators(Object.assign({}, FileActions, ProjectActions, IDEActions, PreferencesActions), dispatch);
2016-05-05 23:01:31 +00:00
}
2016-05-18 17:37:59 +00:00
export default connect(mapStateToProps, mapDispatchToProps)(IDEView);