From d5d6f8d7e7f68c9f47fa7315d61983526d500298 Mon Sep 17 00:00:00 2001 From: catarak Date: Thu, 5 May 2016 17:48:26 -0400 Subject: [PATCH] add full redux/react flow to editor --- client/index.js | 15 ++++++++--- package.json | 4 ++- shared/components/App/App.jsx | 16 ++++++++++++ shared/components/Editor/Editor.jsx | 37 +++++++++++++++++++-------- shared/components/Preview/Preview.jsx | 11 ++++++++ shared/redux/actions/index.js | 9 +++++++ shared/redux/constants/constants.js | 2 ++ shared/redux/reducers/files.js | 34 ++++++++++++++++++++++++ shared/redux/reducers/ide.js | 1 + shared/redux/reducers/index.js | 8 ++++++ shared/redux/store/configureStore.js | 20 +++++++++++++++ 11 files changed, 141 insertions(+), 16 deletions(-) create mode 100644 shared/components/App/App.jsx create mode 100644 shared/components/Preview/Preview.jsx create mode 100644 shared/redux/actions/index.js create mode 100644 shared/redux/constants/constants.js create mode 100644 shared/redux/reducers/files.js create mode 100644 shared/redux/reducers/ide.js create mode 100644 shared/redux/reducers/index.js create mode 100644 shared/redux/store/configureStore.js diff --git a/client/index.js b/client/index.js index 1874933d..148556fc 100644 --- a/client/index.js +++ b/client/index.js @@ -1,8 +1,15 @@ -import React from 'react'; -import { render } from 'react-dom'; -import Editor from '../shared/components/Editor/Editor' +import React from 'react' +import { render } from 'react-dom' +import { Provider } from 'react-redux' +import configureStore from '../shared/redux/store/configureStore' +import App from '../shared/components/App/App' + +const initialState = window.__INITIAL_STATE__ +const store = configureStore(initialState) render( - , + + + , document.getElementById('root') ) \ No newline at end of file diff --git a/package.json b/package.json index f4a24ffe..05e3c57b 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,8 @@ "babel-core": "^6.8.0", "react": "^15.0.2", "react-css-modules": "^3.7.6", - "react-dom": "^15.0.2" + "react-dom": "^15.0.2", + "react-redux": "^4.4.5", + "redux": "^3.5.2" } } diff --git a/shared/components/App/App.jsx b/shared/components/App/App.jsx new file mode 100644 index 00000000..9aaf3f41 --- /dev/null +++ b/shared/components/App/App.jsx @@ -0,0 +1,16 @@ +import Editor from '../Editor/Editor' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import * as FileActions from '../../redux/actions' + +function mapStateToProps(state) { + return { + file: state.file + } +} + +function mapDispatchToProps(dispatch) { + return bindActionCreators(FileActions, dispatch); +} + +export default connect(mapStateToProps, mapDispatchToProps)(Editor); \ No newline at end of file diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx index 812da37e..3fc34a06 100644 --- a/shared/components/Editor/Editor.jsx +++ b/shared/components/Editor/Editor.jsx @@ -3,24 +3,39 @@ import CSSModules from 'react-css-modules'; import CodeMirror from 'codemirror'; import 'codemirror/mode/javascript/javascript'; -import '../../..//node_modules/codemirror/lib/codemirror.css'; +import '../../../node_modules/codemirror/lib/codemirror.css'; import './p5-widget-codemirror-theme.css'; -export default React.createClass({ - _cm: CodeMirror.Editor, - componentDidMount: function() { +class Editor extends React.Component { + _cm: CodeMirror.Editor + + componentDidMount() { this._cm = CodeMirror(this.refs.container, { theme: 'p5-widget', - // value: this.props.content, - value: 'var a = "Hello World!"', + value: this.props.file.content, + // value: "var a = 'Hello World!';", lineNumbers: true, mode: 'javascript' }); - }, - componentWillUnmount: function() { + this._cm.on('change', () => { + this.props.updateFile("sketch.js", this._cm.getValue()); + }); + } + + componentDidUpdate(prevProps) { + if (this.props.file.content !== prevProps.file.content && + this.props.file.content !== this._cm.getValue()) { + this._cm.setValue(this.props.file.content); + } + } + + componentWillUnmount() { this._cm = null; - }, - render: function() { + } + + render() { return
; } -}); \ No newline at end of file +} + +export default Editor; \ No newline at end of file diff --git a/shared/components/Preview/Preview.jsx b/shared/components/Preview/Preview.jsx new file mode 100644 index 00000000..c7bf9acb --- /dev/null +++ b/shared/components/Preview/Preview.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +class Preview extends React.Component { + _iframe: HTMLIFrameElement + + render() { + return
; + } +} + +export default Preview; \ No newline at end of file diff --git a/shared/redux/actions/index.js b/shared/redux/actions/index.js new file mode 100644 index 00000000..315a46ef --- /dev/null +++ b/shared/redux/actions/index.js @@ -0,0 +1,9 @@ +import * as ActionTypes from '../constants/constants'; + +export function updateFile(name, content) { + return { + type: ActionTypes.CHANGE_SELECTED_FILE, + name: name, + content: content + } +} \ No newline at end of file diff --git a/shared/redux/constants/constants.js b/shared/redux/constants/constants.js new file mode 100644 index 00000000..4670f1ff --- /dev/null +++ b/shared/redux/constants/constants.js @@ -0,0 +1,2 @@ +export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE'; +export const TOGGLE_SKETCH = 'TOGGLE_SKETCH'; \ No newline at end of file diff --git a/shared/redux/reducers/files.js b/shared/redux/reducers/files.js new file mode 100644 index 00000000..63f2fe3f --- /dev/null +++ b/shared/redux/reducers/files.js @@ -0,0 +1,34 @@ +import * as ActionTypes from '../constants/constants'; + +const initialState = { + name: "sketch.js", + content: "setup() { } draw() { }" +} + +const file = (state = initialState, action) => { + switch (action.type) { + case ActionTypes.CHANGE_SELECTED_FILE: + return { + name: action.name, + content: action.content + } + default: + return state + } +} + +export default file; + +//i'll add this in when there are multiple files +// const files = (state = [], action) => { +// switch (action.type) { +// case ActionTypes.CHANGE_SELECTED_FILE: +// //find the file with the name +// //update it +// //put in into the new array of files +// default: +// return state +// } +// } + +// export default files \ No newline at end of file diff --git a/shared/redux/reducers/ide.js b/shared/redux/reducers/ide.js new file mode 100644 index 00000000..e14ca741 --- /dev/null +++ b/shared/redux/reducers/ide.js @@ -0,0 +1 @@ +import * as ActionTypes from '../constants/constants'; \ No newline at end of file diff --git a/shared/redux/reducers/index.js b/shared/redux/reducers/index.js new file mode 100644 index 00000000..2b1b8d38 --- /dev/null +++ b/shared/redux/reducers/index.js @@ -0,0 +1,8 @@ +import { combineReducers } from 'redux' +import file from './files' + +const rootReducer = combineReducers({ + file +}) + +export default rootReducer \ No newline at end of file diff --git a/shared/redux/store/configureStore.js b/shared/redux/store/configureStore.js new file mode 100644 index 00000000..b6aad8d9 --- /dev/null +++ b/shared/redux/store/configureStore.js @@ -0,0 +1,20 @@ +import { createStore, applyMiddleware } from 'redux' +import rootReducer from '../reducers' + +export default function configureStore(initialState) { + const store = createStore( + rootReducer, + initialState + // applyMiddleware(thunk) + ) + + if (module.hot) { + // Enable Webpack hot module replacement for reducers + module.hot.accept('../reducers', () => { + const nextRootReducer = require('../reducers').default + store.replaceReducer(nextRootReducer) + }) + } + + return store +} \ No newline at end of file