DecodeAndCode fixes console input functional conversion

client/modules/IDE/components/ConsoleInput.jsx

@@ -1,39 +1,30 @@
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import CodeMirror from 'codemirror';
 import { Encode } from 'console-feed';
-
 import RightArrowIcon from '../../../images/right-arrow.svg';
 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
-
-class ConsoleInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      commandHistory: [],
-      commandCursor: -1
-    };
-  }
+function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) {
+  const [commandHistory, setCommandHistory] = useState([]);
+  const [commandCursor, setCommandCursor] = useState(-1);
+  const codemirrorContainer = useRef(null);
 
-  componentDidMount() {
-    this._cm = CodeMirror(this.codemirrorContainer, {
-      // eslint-disable-line
-      theme: `p5-${this.props.theme}`,
+  useEffect(() => {
+    let cm = CodeMirror(codemirrorContainer.current, {
+      theme: `p5-${theme}`,
       scrollbarStyle: null,
       keymap: 'sublime',
       mode: 'javascript',
       inputStyle: 'contenteditable'
     });
 
-    this._cm.on('keydown', (cm, e) => {
+    cm.on('keydown', (editor, e) => {
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
         e.stopPropagation();
-        const value = cm.getValue();
-        if (value.trim(' ') === '') {
+        const value = editor.getValue();
+        if (value.trim() === '') {
           return false;
         }
         const messages = [
@@ -47,91 +38,86 @@ class ConsoleInput extends React.Component {
             messages
           }
         });
-        this.props.dispatchConsoleEvent(consoleEvent);
-        cm.setValue('');
-        this.setState((state) => ({
-          commandCursor: -1,
-          commandHistory: [value, ...state.commandHistory]
-        }));
+        dispatchConsoleEvent(consoleEvent);
+        editor.setValue('');
+        setCommandCursor(-1);
+        setCommandHistory([value, ...commandHistory]);
       } else if (e.key === 'ArrowUp') {
-        const lineNumber = this._cm.getDoc().getCursor().line;
+        const lineNumber = editor.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 };
-        });
+        setCommandCursor((prevCursor) =>
+          Math.min(prevCursor + 1, commandHistory.length - 1)
+        );
+        editor.getDoc().setValue(commandHistory[commandCursor + 1] || '');
+        const cursorPos = editor.getDoc().getLine(0).length - 1;
+        editor.getDoc().setCursor({ line: 0, ch: cursorPos });
       } else if (e.key === 'ArrowDown') {
-        const lineNumber = this._cm.getDoc().getCursor().line;
-        const lineCount = this._cm.getValue().split('\n').length;
+        const lineNumber = editor.getDoc().getCursor().line;
+        const lineCount = editor.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 };
-        });
+        setCommandCursor((prevCursor) => Math.max(prevCursor - 1, -1));
+        editor.getDoc().setValue(commandHistory[commandCursor - 1] || '');
+        const newLineCount = editor.getValue().split('\n').length;
+        const newLine = editor.getDoc().getLine(newLineCount);
+        const cursorPos = newLine ? newLine.length - 1 : 1;
+        editor.getDoc().setCursor({ line: lineCount, ch: cursorPos });
       }
       return true;
     });
 
-    this._cm.getWrapperElement().style[
-      'font-size'
-    ] = `${this.props.fontSize}px`;
-  }
+    cm.getWrapperElement().style['font-size'] = `${fontSize}px`;
+
+    return () => {
+      cm = null;
+    };
+  }, [theme, dispatchConsoleEvent, fontSize, commandHistory, commandCursor]);
+
+  useEffect(() => {
+    if (codemirrorContainer.current) {
+      const cm = CodeMirror.fromTextArea(codemirrorContainer.current, {
+        theme: `p5-${theme}`,
+        scrollbarStyle: null,
+        keymap: 'sublime',
+        mode: 'javascript',
+        inputStyle: 'contenteditable'
+      });
 
-  componentDidUpdate(prevProps) {
-    this._cm.setOption('theme', `p5-${this.props.theme}`);
-    this._cm.getWrapperElement().style[
-      'font-size'
-    ] = `${this.props.fontSize}px`;
-    this._cm.refresh();
-  }
+      cm.setSize(null, `${fontSize}px`);
 
-  componentWillUnmount() {
-    this._cm = null;
-  }
+      return () => {
+        cm.toTextArea();
+      };
+    }
+    return null;
+  }, [theme, 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: `${fontSize * 1.3333}px` }}
+      >
+        <RightArrowIcon
+          className="console-active__arrow"
+          focusable="false"
+          aria-hidden="true"
+          style={{
+            width: `${fontSize}px`,
+            height: `${fontSize * 0.57}px`
           }}
-          className="console__editor"
         />
       </div>
-    );
-  }
+      <textarea
+        ref={codemirrorContainer}
+        className="console__editor"
+        rows="1"
+      />
+    </div>
+  );
 }
 
 ConsoleInput.propTypes = {

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,82 +1,78 @@
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { throttle } from 'lodash';
-import { withTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
-class Searchbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: this.props.searchTerm
-    };
-    this.throttledSearchChange = throttle(this.searchChange, 500);
-  }
+const Searchbar = ({
+  searchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel
+}) => {
+  const [searchValue, setSearchValue] = useState(searchTerm);
+  const { t } = useTranslation(); // Use useTranslation to access t
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
-
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
+  const searchChange = () => {
+    setSearchTerm(searchValue.trim());
   };
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const throttledSearchChange = useMemo(() => throttle(searchChange, 500), [
+    searchChange
+  ]);
+
+  useEffect(
+    () => () => {
+      resetSearchTerm();
+    },
+    [resetSearchTerm]
+  );
+
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
+  const handleSearchChange = (e) => {
+    const newValue = e.target.value;
+    setSearchValue(newValue);
+    throttledSearchChange(newValue.trim());
   };
 
-  render() {
-    const { searchValue } = this.state;
-    return (
-      <div
-        className={`searchbar ${
-          searchValue === '' ? 'searchbar--is-empty' : ''
-        }`}
-      >
-        <div className="searchbar__button">
-          <SearchIcon
-            className="searchbar__icon"
-            focusable="false"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          className="searchbar__input"
-          type="text"
-          value={searchValue}
-          placeholder={this.props.searchLabel}
-          onChange={this.handleSearchChange}
+  return (
+    <div
+      className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}
+    >
+      <div className="searchbar__button">
+        <SearchIcon
+          className="searchbar__icon"
+          focusable="false"
+          aria-hidden="true"
         />
-        <button
-          className="searchbar__clear-button"
-          onClick={this.handleResetSearch}
-        >
-          {this.props.t('Searchbar.ClearTerm')}
-        </button>
       </div>
-    );
-  }
-}
+      <input
+        className="searchbar__input"
+        type="text"
+        value={searchValue}
+        placeholder={searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
+};
 
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
   setSearchTerm: PropTypes.func.isRequired,
   resetSearchTerm: PropTypes.func.isRequired,
-  searchLabel: PropTypes.string,
-  t: PropTypes.func.isRequired
+  searchLabel: PropTypes.string
 };
 
 Searchbar.defaultProps = {
-  searchLabel: i18next.t('Searchbar.SearchSketch')
+  searchLabel: 'Default Search Label'
 };
 
-export default withTranslation()(Searchbar);
+export default Searchbar;