Update production deps

frontend/.eslintrc.js

@@ -19,6 +19,8 @@ module.exports = {
         tsconfigRootDir: __dirname,
       },
       rules: {
+        // needs for using optional chaining
+        'no-undef': 0,
         'jsx-a11y/no-autofocus': 0,
         // disabling because typescipt uses it's own lint (see next rule)
         'no-unused-vars': 0,

frontend/app/@types/preact/index.d.ts → frontend/app/@types/preact.d.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 import * as preact from 'preact/src/jsx';
 
 declare module 'preact/src/jsx' {

frontend/app/components/auth/__email-login-form/auth__email-login-form.tsx

@@ -86,7 +86,9 @@ export class EmailLoginForm extends Component<Props, State> {
       this.usernameInputRef.current.focus();
       return;
     }
-    this.tokenRef.current && this.tokenRef.current.textareaRef && this.tokenRef.current.textareaRef.select();
+    if (this.tokenRef.current?.textareaRef?.current) {
+      this.tokenRef.current.textareaRef.current.select();
+    }
   };
 
   onVerificationSubmit = async (e: Event) => {

frontend/app/components/button/button.tsx

@@ -14,11 +14,11 @@ interface Props extends Omit<JSX.HTMLAttributes, 'size' | 'className'> {
 }
 
 export const Button = forwardRef<HTMLButtonElement, Props>(
-  ({ children, theme, mods, mix, kind, type = 'button', size, ...props }) => {
+  ({ children, theme, mods, mix, kind, type = 'button', size, ...props }, ref) => {
     const className = b('button', { mods: { kind, size }, mix }, { theme, ...mods });
 
     return (
-      <button className={className} type={type} {...props}>
+      <button className={className} type={type} {...props} ref={ref}>
         {children}
       </button>
     );

frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx

@@ -1,6 +1,6 @@
 /** @jsx createElement */
 import { createElement, FunctionComponent, Fragment } from 'preact';
-import { useState, useCallback, useEffect, useRef } from 'preact/hooks';
+import { useState, useCallback, useEffect, useRef, PropRef } from 'preact/hooks';
 import { useSelector, useDispatch } from 'react-redux';
 import b from 'bem-react-helper';
 
@@ -80,7 +80,7 @@ const renderEmailPart = (
   intl: IntlShape,
   emailAddress: string,
   handleChangeEmail: (e: Event) => void,
-  emailAddressRef: ReturnType<typeof useRef>
+  emailAddressRef: PropRef<HTMLInputElement>
 ) => (
   <Fragment>
     <div className="comment-form__subscribe-by-email__title">

frontend/app/components/comment-form/comment-form.tsx

@@ -327,6 +327,7 @@ export class CommentForm extends Component<Props, State> {
       buttonText: intl.formatMessage(messages.uploading),
     });
 
+    // TODO: remove legacy code, now we don't support IE
     // fallback for ie < 9
     if (!isSelectionSupported) {
       for (let i = 0; i < files.length; i++) {

frontend/app/components/comment-form/textarea-autosize.tsx

@@ -1,18 +1,14 @@
 /** @jsx createElement */
-import { createElement, JSX, Component } from 'preact';
+import { createElement, JSX, Component, createRef, RefObject } from 'preact';
 
-type Props = JSX.HTMLAttributes & {
+export interface Props extends Omit<JSX.HTMLAttributes, 'ref'> {
   autofocus: boolean;
-};
+  ref?: RefObject<TextareaAutosize>;
+}
 
+// TODO: rewrite it to functional component and add ref forwarding
 export default class TextareaAutosize extends Component<Props> {
-  textareaRef?: HTMLTextAreaElement;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.onRef = this.onRef.bind(this);
-  }
+  textareaRef = createRef<HTMLTextAreaElement>();
 
   componentDidMount() {
     this.autoResize();
@@ -28,46 +24,67 @@ export default class TextareaAutosize extends Component<Props> {
 
   focus(): void {
     setTimeout(() => {
-      if (this.textareaRef) {
-        this.textareaRef.focus();
-        this.textareaRef.selectionStart = this.textareaRef.selectionEnd = this.textareaRef.value.length;
+      const { current: textarea } = this.textareaRef;
+
+      if (textarea) {
+        textarea.focus();
+        textarea.selectionStart = textarea.value.length;
+        textarea.selectionEnd = textarea.value.length;
       }
     }, 100);
   }
 
   /** returns whether selectionStart api supported */
-  isSelectionSupported(): boolean {
-    if (!this.textareaRef) throw new Error('No textarea element reference exists');
-    return 'selectionStart' in this.textareaRef;
+  isSelectionSupported() {
+    const { current: textarea } = this.textareaRef;
+
+    if (textarea) {
+      return 'selectionStart' in textarea;
+    }
+
+    throw new Error('No textarea element reference exists');
   }
 
   /** returns selection range of a textarea */
   getSelection(): [number, number] {
-    if (!this.textareaRef) throw new Error('No textarea element reference exists');
+    const { current: textarea } = this.textareaRef;
+
+    if (textarea) {
+      return [textarea.selectionStart, textarea.selectionEnd];
+    }
 
-    return [this.textareaRef.selectionStart, this.textareaRef.selectionEnd];
+    throw new Error('No textarea element reference exists');
   }
 
   /** sets selection range of a textarea */
   setSelection(selection: [number, number]) {
-    if (!this.textareaRef) throw new Error('No textarea element reference exists');
-    this.textareaRef.selectionStart = selection[0];
-    this.textareaRef.selectionEnd = selection[1];
-  }
+    const { current: textarea } = this.textareaRef;
 
-  onRef(node: HTMLTextAreaElement) {
-    this.textareaRef = node;
+    if (textarea) {
+      textarea.selectionStart = selection[0];
+      textarea.selectionEnd = selection[1];
+      return;
+    }
+
+    throw new Error('No textarea element reference exists');
   }
+
   getValue() {
-    return this.textareaRef ? this.textareaRef.value : '';
+    const { current: textarea } = this.textareaRef;
+
+    return textarea ? textarea.value : '';
   }
+
   autoResize() {
-    if (this.textareaRef) {
-      this.textareaRef.style.height = '';
-      this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+    const { current: textarea } = this.textareaRef;
+
+    if (textarea) {
+      textarea.style.height = '';
+      textarea.style.height = `${textarea.scrollHeight}px`;
     }
   }
+
   render(props: Props) {
-    return <textarea {...props} ref={this.onRef} />;
+    return <textarea {...props} ref={this.textareaRef} />;
   }
 }

frontend/app/components/input/input.tsx

@@ -17,7 +17,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
     const className = b('input', { mix }, { theme, ...mods });
 
     return (
-      <input ref={ref} className={className} type={type} {...props}>
+      <input className={className} type={type} {...props} ref={ref}>
         {children}
       </input>
     );