diff --git a/client/constants.js b/client/constants.js index b3d72210..d8dbac15 100644 --- a/client/constants.js +++ b/client/constants.js @@ -43,8 +43,10 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT'; export const EXPAND_CONSOLE = 'EXPAND_CONSOLE'; export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE'; - export const TOGGLE_BEEP = 'TOGGLE_BEEP'; +export const UPDATE_LINTMESSAGE = 'UPDATE_LINTMESSAGE'; +export const CLEAR_LINTMESSAGE = 'CLEAR_LINTMESSAGE'; +export const UPDATE_LINENUMBER = 'UPDATE_LINENUMBER'; export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS'; export const HIDE_FILE_OPTIONS = 'HIDE_FILE_OPTIONS'; diff --git a/client/modules/IDE/actions/editorHidden.js b/client/modules/IDE/actions/editorHidden.js index d5cc4a92..d88589bf 100644 --- a/client/modules/IDE/actions/editorHidden.js +++ b/client/modules/IDE/actions/editorHidden.js @@ -5,3 +5,25 @@ export function toggleBeep() { type: ActionTypes.TOGGLE_BEEP }; } + +export function updateLintMessage(severity, line, message) { + return { + type: ActionTypes.UPDATE_LINTMESSAGE, + severity, + line, + message + }; +} + +export function clearLintMessage() { + return { + type: ActionTypes.CLEAR_LINTMESSAGE + }; +} + +export function updateLineNumber(lineNo) { + return { + type: ActionTypes.UPDATE_LINENUMBER, + lineNo + }; +} diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index cff97ae5..17a7cf1d 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -36,15 +36,13 @@ class Editor extends React.Component { keyMap: 'sublime', lint: { onUpdateLinting: debounce(2000, (annotations) => { - let isVisible = false; - document.getElementById('editor-lintmessages').innerHTML = ''; + this.props.clearLintMessage(); annotations.forEach((x) => { if (x.from.line > -1) { - document.getElementById('editor-lintmessages').innerHTML += (x.severity + ' in line number ' + (x.from.line + 1) + ' : ' + x.message); // eslint-disable-line - isVisible = true; + this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message); } }); - if (isVisible && this.props.enableBeep) { + if (this.props.lintMessages.length > 0 && this.props.enableBeep) { this.beep.play(); } }) @@ -55,7 +53,7 @@ class Editor extends React.Component { this.props.updateFileContent(this.props.file.name, this._cm.getValue()); })); this._cm.on('keyup', () => { - document.getElementById('editor-linenumber').innerHTML = 'line ' + parseInt((this._cm.getCursor().line) + 1, 10); + this.props.updateLineNumber(parseInt((this._cm.getCursor().line) + 1, 10)); }); // this._cm.on('change', () => { // eslint-disable-line // // this.props.updateFileContent('sketch.js', this._cm.getValue()); @@ -68,8 +66,6 @@ class Editor extends React.Component { } componentDidUpdate(prevProps) { - const annotations = this._cm.state.lint.marked; - annotations.forEach(function (x) { console.log(x.__annotation.severity + ' in line number ' + (x.__annotation.from.line + 1) + ' : ' + x.__annotation.message); }); // eslint-disable-line if (this.props.file.content !== prevProps.file.content && this.props.file.content !== this._cm.getValue()) { this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle @@ -110,6 +106,10 @@ class Editor extends React.Component { Editor.propTypes = { enableBeep: PropTypes.bool.isRequired, + lintMessages: PropTypes.array.isRequired, + updateLintMessage: PropTypes.func.isRequired, + clearLintMessage: PropTypes.func.isRequired, + updateLineNumber: PropTypes.func.isRequired, indentationAmount: PropTypes.number.isRequired, isTabIndent: PropTypes.bool.isRequired, updateFileContent: PropTypes.func.isRequired, diff --git a/client/modules/IDE/components/EditorHidden.js b/client/modules/IDE/components/EditorHidden.js index e69de29b..518feab1 100644 --- a/client/modules/IDE/components/EditorHidden.js +++ b/client/modules/IDE/components/EditorHidden.js @@ -0,0 +1,36 @@ +import React, { PropTypes } from 'react'; + +class EditorHidden extends React.Component { + componentDidMount() { + + } + render() { + let messages = []; + for (let i = 0; i < this.props.lintMessages.length; i++) { + messages.push( +
  • + {this.props.lintMessages[i].severity} in line + {this.props.lintMessages[i].line} : + {this.props.lintMessages[i].message} +
    • + ); + } + return ( +
    +

    line - {this.props.lineNo}

    + + +
    + ); + } +} + +EditorHidden.propTypes = { + toggleBeep: PropTypes.func.isRequired, + lintMessages: PropTypes.array.isRequired, + lineNo: PropTypes.number.isRequired, +}; + +export default EditorHidden; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index d337b503..b3a43db2 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import Editor from '../components/Editor'; +import EditorHidden from '../components/EditorHidden'; import Sidebar from '../components/Sidebar'; import PreviewFrame from '../components/PreviewFrame'; import Toolbar from '../components/Toolbar'; @@ -103,11 +104,17 @@ class IDEView extends React.Component { updateFileName={this.props.updateFileName} />
    -
    -
    - + { switch (action.type) { case ActionTypes.TOGGLE_BEEP: - return Object.assign({}, state, { enableBeep: !state.enableBeep }); + return Object.assign({}, state, { enableBeep: !state.enableBeep }); + case ActionTypes.UPDATE_LINTMESSAGE: + return Object.assign({}, state, { + lintMessages: state.lintMessages.concat( + { severity: action.severity, line: action.line, message: action.message }) + }); + case ActionTypes.CLEAR_LINTMESSAGE: + return Object.assign({}, state, { lintMessages: [] }); + case ActionTypes.UPDATE_LINENUMBER: + return Object.assign({}, state, { lineNo: action.lineNo }); default: return state; } diff --git a/webpack.config.dev.js b/webpack.config.dev.js index e2d703f4..6a0a9fe8 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -41,4 +41,4 @@ module.exports = { } ], }, -}; \ No newline at end of file +};