From 71dc52b362987ce6f34c88784bd4725f513be750 Mon Sep 17 00:00:00 2001 From: Typicalcodes <100959820+Typicalcodes@users.noreply.github.com> Date: Sun, 17 Dec 2023 23:14:29 +0530 Subject: [PATCH] Converting ConsoleInput into Functional Component --- .../modules/IDE/components/ConsoleInput.jsx | 146 ++++++++---------- 1 file changed, 62 insertions(+), 84 deletions(-) diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx index 759ccdd10d..69ade11a65 100644 --- a/client/modules/IDE/components/ConsoleInput.jsx +++ b/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 ( -
-
-
-
{ - this.codemirrorContainer = element; + return ( +
+
+
- ); - } -} +
+
+ ); +}; ConsoleInput.propTypes = { theme: PropTypes.string.isRequired,