Converting Console Input into a functional Component.

client/modules/IDE/components/ConsoleInput.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import CodeMirror from 'codemirror';
 import { Encode } from 'console-feed';
 
@@ -8,31 +8,29 @@ import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
 
 // heavily inspired by
 // https://github.com/codesandbox/codesandbox-client/blob/92a1131f4ded6f7d9c16945dc7c18aa97c8ada27/packages/app/src/app/components/Preview/DevTools/Console/Input/index.tsx
+const ConsoleInput = (props) => {
+  const commandHistory = useRef([]);
+  const commandCursor = useRef(-1);
 
-class ConsoleInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      commandHistory: [],
-      commandCursor: -1
-    };
-  }
-
-  componentDidMount() {
-    this._cm = CodeMirror(this.codemirrorContainer, {
+  // refs for codemirror
+  const cm = useRef(null);
+  // States and refs
+  const codemirrorContainer = useRef(null);
+  useEffect(() => {
+    cm.current = CodeMirror(codemirrorContainer.current, {
       // eslint-disable-line
-      theme: `p5-${this.props.theme}`,
+      theme: `p5-${props.theme}`,
       scrollbarStyle: null,
       keymap: 'sublime',
       mode: 'javascript',
       inputStyle: 'contenteditable'
     });
 
-    this._cm.on('keydown', (cm, e) => {
+    cm.current.on('keydown', (cmm, e) => {
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
         e.stopPropagation();
-        const value = cm.getValue();
+        const value = cmm.getValue();
         if (value.trim(' ') === '') {
           return false;
         }
@@ -47,92 +45,72 @@ class ConsoleInput extends React.Component {
             messages
           }
         });
-        this.props.dispatchConsoleEvent(consoleEvent);
-        cm.setValue('');
-        this.setState((state) => ({
-          commandCursor: -1,
-          commandHistory: [value, ...state.commandHistory]
-        }));
+        props.dispatchConsoleEvent(consoleEvent);
+        cm.current.setValue('');
+        commandCursor.current = -1;
+        commandHistory.current = [value, ...commandHistory.current];
       } else if (e.key === 'ArrowUp') {
-        const lineNumber = this._cm.getDoc().getCursor().line;
+        const lineNumber = cm.current.getDoc().getCursor().line;
         if (lineNumber !== 0) {
           return false;
         }
-
-        this.setState((state) => {
-          const newCursor = Math.min(
-            state.commandCursor + 1,
-            state.commandHistory.length - 1
-          );
-          this._cm.getDoc().setValue(state.commandHistory[newCursor] || '');
-          const cursorPos = this._cm.getDoc().getLine(0).length - 1;
-          this._cm.getDoc().setCursor({ line: 0, ch: cursorPos });
-          return { commandCursor: newCursor };
-        });
+        const newCursor = Math.min(
+          commandCursor.current + 1,
+          commandHistory.current.length - 1
+        );
+        cm.current.getDoc().setValue(commandHistory.current[newCursor] || '');
+        const cursorPos = cm.current.getDoc().getLine(0).length - 1;
+        cm.current.getDoc().setCursor({ line: 0, ch: cursorPos });
+        commandCursor.current = newCursor;
       } else if (e.key === 'ArrowDown') {
-        const lineNumber = this._cm.getDoc().getCursor().line;
-        const lineCount = this._cm.getValue().split('\n').length;
+        const lineNumber = cm.current.getDoc().getCursor().line;
+        const lineCount = cm.current.getValue().split('\n').length;
         if (lineNumber + 1 !== lineCount) {
           return false;
         }
-
-        this.setState((state) => {
-          const newCursor = Math.max(state.commandCursor - 1, -1);
-          this._cm.getDoc().setValue(state.commandHistory[newCursor] || '');
-          const newLineCount = this._cm.getValue().split('\n').length;
-          const newLine = this._cm.getDoc().getLine(newLineCount);
-          const cursorPos = newLine ? newLine.length - 1 : 1;
-          this._cm.getDoc().setCursor({ line: lineCount, ch: cursorPos });
-          return { commandCursor: newCursor };
-        });
+        const newCursor = Math.max(commandCursor.current - 1, -1);
+        cm.current.getDoc().setValue(commandHistory.current[newCursor] || '');
+        const newLineCount = cm.current.getValue().split('\n').length;
+        const newLine = cm.current.getDoc().getLine(newLineCount);
+        const cursorPos = newLine ? newLine.length - 1 : 1;
+        cm.current.getDoc().setCursor({ line: lineCount, ch: cursorPos });
+        commandCursor.current = newCursor;
       }
       return true;
     });
 
-    this._cm.getWrapperElement().style[
-      'font-size'
-    ] = `${this.props.fontSize}px`;
-  }
-
-  componentDidUpdate(prevProps) {
-    this._cm.setOption('theme', `p5-${this.props.theme}`);
-    this._cm.getWrapperElement().style[
-      'font-size'
-    ] = `${this.props.fontSize}px`;
-    this._cm.refresh();
-  }
+    cm.current.getWrapperElement().style['font-size'] = `${props.fontSize}px`;
+    return () => {
+      cm.current = null;
+    };
+  }, []);
 
-  componentWillUnmount() {
-    this._cm = null;
-  }
+  useEffect(() => {
+    cm.current.setOption('theme', `p5-${props.theme}`);
+    cm.current.getWrapperElement().style['font-size'] = `${props.fontSize}px`;
+    cm.current.refresh();
+  }, [props.theme, props.fontSize]);
 
-  render() {
-    return (
-      <div className="console__input">
-        <div
-          className="console-active__arrow-container"
-          style={{ height: `${this.props.fontSize * 1.3333}px` }}
-        >
-          <RightArrowIcon
-            className="console-active__arrow"
-            focusable="false"
-            aria-hidden="true"
-            style={{
-              width: `${this.props.fontSize}px`,
-              height: `${this.props.fontSize * 0.57}px`
-            }}
-          />
-        </div>
-        <div
-          ref={(element) => {
-            this.codemirrorContainer = element;
+  return (
+    <div className="console__input">
+      <div
+        className="console-active__arrow-container"
+        style={{ height: `${props.fontSize * 1.3333}px` }}
+      >
+        <RightArrowIcon
+          className="console-active__arrow"
+          focusable="false"
+          aria-hidden="true"
+          style={{
+            width: `${props.fontSize}px`,
+            height: `${props.fontSize * 0.57}px`
           }}
-          className="console__editor"
         />
       </div>
-    );
-  }
-}
+      <div ref={codemirrorContainer} className="console__editor" />
+    </div>
+  );
+};
 
 ConsoleInput.propTypes = {
   theme: PropTypes.string.isRequired,