added state var to track changes in js_console (#427)

Author: sadakchap

src/dashboard/Data/Playground/Playground.react.js

@@ -11,13 +11,15 @@ import Toolbar from 'components/Toolbar/Toolbar.react';
 
 import styles from './Playground.scss';
 
+const placeholderCode = "const myObj = new Parse.Object('MyClass');\nmyObj.set('myField', 'Hello World!');\nawait myObj.save();\nconsole.log(myObj);";
 export default class Playground extends Component {
   constructor() {
     super();
     this.section = 'API';
     this.subsection = 'JS Console';
     this.localKey = 'parse-dashboard-playground-code';
     this.state = {
+      code: '',
       results: [],
       running: false,
       saving: false,
@@ -90,7 +92,7 @@ export default class Playground extends Component {
         }
       })()`;
 
-      this.setState({ running: true, results: [] });
+      this.setState({ running: true, results: [], code: originalCode });
 
       await new Function('Parse', finalCode)(Parse);
     } catch (e) {
@@ -109,6 +111,7 @@ export default class Playground extends Component {
 
       window.localStorage.setItem(this.localKey, code);
       this.setState({
+        code,
         saving: false,
         savingState: SaveButton.States.SUCCEEDED
       });
@@ -134,9 +137,14 @@ export default class Playground extends Component {
   componentDidMount() {
     if (window.localStorage) {
       const initialCode = window.localStorage.getItem(this.localKey);
+      let code = '';
       if (initialCode) {
-        this.editor.value = initialCode;
+        code = initialCode;
+      } else {
+        code = placeholderCode;
       }
+      this.editor.value = code;
+      this.setState({ code });
     }
   }
 
@@ -148,10 +156,7 @@ export default class Playground extends Component {
         <Toolbar section={this.section} subsection={this.subsection} />
         <div style={{ height: 'calc(100vh - 96px)' }}>
           <CodeEditor
-            placeHolder={`const myObj = new Parse.Object('MyClass');
-myObj.set('myField', 'Hello World!')
-await myObj.save();
-console.log(myObj);`}
+            code={this.state.code}
             ref={editor => (this.editor = editor)}
           />
           <div className={styles['console-ctn']}>