move Hyper container to function component

lib/containers/hyper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef, useEffect, useRef} from 'react';
 import type {MousetrapInstance} from 'mousetrap';
 import Mousetrap from 'mousetrap';
 
@@ -15,103 +15,98 @@ import type Terms from '../components/terms';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-class Hyper extends React.PureComponent<HyperProps> {
+const Hyper = forwardRef<HTMLDivElement, HyperProps>((props, ref) => {
-  mousetrap!: MousetrapInstance;
+  const mousetrap = useRef<MousetrapInstance | null>(null);
-  terms!: Terms;
+  const terms = useRef<Terms | null>(null);
-  constructor(props: HyperProps) {
-    super(props);
-  }
 
-  componentDidUpdate(prev: HyperProps) {
+  useEffect(() => {
-    const {lastConfigUpdate} = this.props;
+    void attachKeyListeners();
-    if (lastConfigUpdate && lastConfigUpdate !== prev.lastConfigUpdate) {
+  }, [props.lastConfigUpdate]);
-      void this.attachKeyListeners();
+  useEffect(() => {
-    }
+    handleFocusActive(props.activeSession);
-    if (prev.activeSession !== this.props.activeSession) {
+  }, [props.activeSession]);
-      this.handleFocusActive(this.props.activeSession);
-    }
-  }
 
-  handleFocusActive = (uid?: string | null) => {
+  const handleFocusActive = (uid?: string | null) => {
-    const term = uid && this.terms.getTermByUid(uid);
+    const term = uid && terms.current?.getTermByUid(uid);
     if (term) {
       term.focus();
     }
   };
 
-  handleSelectAll = () => {
+  const handleSelectAll = () => {
-    const term = this.terms.getActiveTerm();
+    const term = terms.current?.getActiveTerm();
     if (term) {
       term.selectAll();
     }
   };
 
-  async attachKeyListeners() {
+  const attachKeyListeners = async () => {
-    if (!this.mousetrap) {
+    if (!mousetrap.current) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      this.mousetrap = new (Mousetrap as any)(window, true);
+      mousetrap.current = new (Mousetrap as any)(window, true);
-      this.mousetrap.stopCallback = () => {
+      mousetrap.current!.stopCallback = () => {
         // All events should be intercepted even if focus is in an input/textarea
         return false;
       };
     } else {
-      this.mousetrap.reset();
+      mousetrap.current.reset();
     }
 
     const keys = await getRegisteredKeys();
     Object.keys(keys).forEach((commandKeys) => {
-      this.mousetrap.bind(
+      mousetrap.current?.bind(
         commandKeys,
         (e) => {
           const command = keys[commandKeys];
-          // We should tell to xterm that it should ignore this event.
+          // We should tell xterm to ignore this event.
           (e as any).catched = true;
-          this.props.execCommand(command, getCommandHandler(command), e);
+          props.execCommand(command, getCommandHandler(command), e);
           shouldPreventDefault(command) && e.preventDefault();
         },
         'keydown'
       );
     });
-  }
+  };
 
-  componentDidMount() {
+  useEffect(() => {
-    void this.attachKeyListeners();
+    void attachKeyListeners();
-    window.rpc.on('term selectAll', this.handleSelectAll);
+    window.rpc.on('term selectAll', handleSelectAll);
-  }
+  }, []);
 
-  onTermsRef = (terms: Terms) => {
+  const onTermsRef = (_terms: Terms) => {
-    this.terms = terms;
+    terms.current = _terms;
     window.focusActiveTerm = (uid?: string) => {
       if (uid) {
-        this.handleFocusActive(uid);
+        handleFocusActive(uid);
       } else {
-        this.terms.getActiveTerm().focus();
+        terms.current?.getActiveTerm()?.focus();
       }
     };
   };
 
-  componentWillUnmount() {
+  useEffect(() => {
-    this.mousetrap?.reset();
+    return () => {
-  }
+      mousetrap.current?.reset();
+    };
+  }, []);
 
-  render() {
+  const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = props;
-    const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = this.props;
   const borderWidth = isMac_ ? '' : `${maximized ? '0' : '1'}px`;
   stylis.set({prefix: false});
   return (
-      <div id="hyper">
+    <div id="hyper" ref={ref}>
       <div
         style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
         className={`hyper_main ${isMac_ && 'hyper_mainRounded'} ${fullScreen ? 'fullScreen' : ''}`}
       >
         <HeaderContainer />
-          <TermsContainer ref_={this.onTermsRef} />
+        <TermsContainer ref_={onTermsRef} />
-          {this.props.customInnerChildren}
+        {props.customInnerChildren}
       </div>
 
       <NotificationsContainer />
 
-        {this.props.customChildren}
+      {props.customChildren}
 
       <style jsx>
         {`
@@ -138,8 +133,9 @@ class Hyper extends React.PureComponent<HyperProps> {
       <style dangerouslySetInnerHTML={{__html: stylis('#hyper', customCSS)}} />
     </div>
   );
-  }
+});
-}
+
+Hyper.displayName = 'Hyper';
 
 const mapStateToProps = (state: HyperState) => {
   return {