syntax highlighting in forms and questions

package.json

@@ -1,7 +1,7 @@
 {
   "name": "questions-queue",
   "version": "0.0.1",
-  "description": "This is our greenfield project for out greenfield project at hackreactor",
+  "description": "A web application for students to submit questions to be answered during a later lecture.",
   "main": "src/server/server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -36,7 +36,6 @@
     "mongoose": "^4.9.6",
     "morgan": "^1.8.1",
     "passport": "^0.3.2",
-    "passport-github": "^1.1.0",
     "passport-github2": "^0.1.10",
     "path": "^0.12.7",
     "react": "^15.5.4",

src/client/app/CodeZone.jsx

@@ -22,30 +22,25 @@ class CodeZone extends React.Component {
   }
 
   componentDidMount() {
-    if (!this.state.codeEditor) {
-      this.state.codeEditor = CodeMirror.fromTextArea(this.refs.codeZone, {
-        lineNumbers: true,
-        mode: 'javascript',
-        viewportMargin: 50,
-        readOnly: this.state.readOnly,
-        // matchBrackets: true,
-      });
-      this.state.codeEditor.on('change', this.handleCodeChange);
-    }
+    // initialize CodeMirror
+    this.state.codeEditor = CodeMirror.fromTextArea(this.refs.codeZone, {
+      lineNumbers: true,
+      mode: 'javascript',
+      viewportMargin: 50,
+      readOnly: this.state.readOnly,
+      // matchBrackets: true,
+    });
+    this.state.codeEditor.on('change', this.handleCodeChange);
   }
 
   componentWillUnmount() {
+    // end CodeMirror instance so element can unmount
     this.state.codeEditor.toTextArea();
   }
 
   render() {
     return (
-      <textarea
-      name={this.props.name}
-      ref="codeZone"
-      rows={10}
-      value={this.props.codeSnippet} >
-      </textarea>
+      <textarea ref="codeZone" value={this.props.codeSnippet} />
     );
   }
 }

src/client/app/QuestionComponent.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import FlatButton from 'material-ui/FlatButton';
-import { Card, CardActions, CardText } from 'material-ui/Card';
+import { Card, CardActions, CardText, CardHeader } from 'material-ui/Card';
 import { grey200 } from 'material-ui/styles/colors';
 import TagArray from './TagArray.jsx';
-// import QuestionModifyComponent from './QuestionModifyComponent.jsx';
+import EditComponent from './EditComponent.jsx';
+import CodeZone from './CodeZone.jsx';
 
 const QuestionComponent = (props) => {
   const question = props.question;
@@ -19,7 +20,7 @@ const QuestionComponent = (props) => {
   );
   const answerBtn = <FlatButton onClick={() => props.handleAnswered(question)} label="Clear" />;
   const deleteBtn = <FlatButton onClick={() => props.handleDelete(question)} label="Delete" />;
-  const editBtn = <FlatButton onClick={() => props.handleEdit(question)} label="Edit" />;
+  const editBtn = <EditComponent question={question} handleEdit={props.handleEdit} />;
 
   const buttons = [
     !question.answered
@@ -44,21 +45,23 @@ const QuestionComponent = (props) => {
       question={question}
       />
   );
+
+  const snippet = question.codeSnippet ? (
+      <CodeZone codeSnippet={question.codeSnippet}
+      readOnly='nocursor' />
+    ) : null;
+
   const date = new Date(question.createdAt);
   return (
-      <Card className="question">
+      <Card className="question" initiallyExpanded={false}>
+
         <CardText className="question-card-content">
         <div className="question-body">
           {question.questionText.split('\n').map((line, idx) => (
             <span key={idx}>{line}<br/></span>
           ))}
         </div>
-        {question.codeSnippet ? (
-          <div className="question-snippet">
-          {question.codeSnippet.split('\n').map((line, idx) => (
-            <span key={idx}>{line}<br/></span>
-          ))}
-          </div>) : null}
+        {snippet}
         <div className="tag-bar">{tags}</div>
         <div className="question-info-bar">
           <span className="votes-span">Votes: {question.votes}</span>

src/client/app/QuestionFormComponent.jsx

@@ -22,6 +22,7 @@ class QuestionFormComponent extends React.Component {
       appliedTags: this.props.question ? this.props.question.tags : [],
       dialogOpen: false,
       showCode: false,
+      showButtonText: this.props.question ? 'Show Code' : 'Add some code',
     };
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -37,8 +38,6 @@ class QuestionFormComponent extends React.Component {
     const target = event.target;
     const value = target.value;
     const name = target.name;
-    console.log(`{${name}: ${value}}`);
-
     this.setState({
       [name]: value,
     });
@@ -53,9 +52,8 @@ class QuestionFormComponent extends React.Component {
       if (this.props.user.role === 'admin') {
         this.openDialog();
         return;
-      } else {
-        return;
       }
+      return;
     }
     this.confirmNewTag();
   }
@@ -94,6 +92,7 @@ class QuestionFormComponent extends React.Component {
       questionText: '',
       codeSnippet: '',
       appliedTags: [],
+      showCode: false,
     });
     this.refs.tagBar.setState({ searchText: '' });
   }
@@ -148,7 +147,7 @@ class QuestionFormComponent extends React.Component {
               floatingLabelText="Ask a question..."
               onChange={this.handleInputChange} />
             <FlatButton onClick={this.toggleCode}
-              label={this.state.showCode ? 'Hide code' : 'Add some code'}
+              label={this.state.showCode ? 'Hide code' : this.state.showButtonText}
               style={{ backgroundColor: '#e0e0e0' }}
               />
               {this.state.showCode ? codeZone : null}

src/client/codemirror.css

@@ -3,7 +3,12 @@
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
+<<<<<<< HEAD
   height: auto;
+=======
+  height: 100px;
+  height: 150px;
+>>>>>>> syntax highlighting in forms and questions
   color: black;
 }