Use forwardRef for the Pane components (#4053)

* Use forwardRef for the Pane components

* Update packages/insomnia-app/app/ui/containers/app.tsx

Co-authored-by: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>

packages/insomnia-app/app/ui/components/page-layout.tsx

@@ -1,16 +1,20 @@
 import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import classnames from 'classnames';
-import React, { FC, PureComponent, ReactNode } from 'react';
+import React, { forwardRef, PureComponent, ReactNode } from 'react';
 
 import { AUTOBIND_CFG } from '../../common/constants';
 import { ErrorBoundary } from './error-boundary';
 import { Sidebar } from './sidebar/sidebar';
 import type { WrapperProps } from './wrapper';
 
-const Pane: FC<{ position: string }> = ({ children, position }) => (
-  <section className={`pane-${position} theme--pane`}>
-    {children}
-  </section>
+const Pane = forwardRef<HTMLElement, { position: string; children: ReactNode }>(
+  function Pane({ children, position }, ref) {
+    return (
+      <section ref={ref} className={`pane-${position} theme--pane`}>
+        {children}
+      </section>
+    );
+  }
 );
 
 interface Props {
@@ -47,9 +51,9 @@ export class PageLayout extends PureComponent<Props> {
       handleInitializeEntities,
       handleResetDragSidebar,
       handleSetActiveEnvironment,
-      handleSetSidebarRef,
-      handleSetRequestPaneRef,
-      handleSetResponsePaneRef,
+      sidebarRef,
+      requestPaneRef,
+      responsePaneRef,
       handleStartDragPaneHorizontal,
       handleResetDragPaneHorizontal,
       handleStartDragPaneVertical,
@@ -113,9 +117,9 @@ export class PageLayout extends PureComponent<Props> {
         {renderPageSidebar && (
           <ErrorBoundary showAlert>
             <Sidebar
-              // @ts-expect-error -- TSCONVERSION
-              ref={handleSetSidebarRef}
+              ref={sidebarRef}
               activeEnvironment={activeEnvironment}
+              // @ts-expect-error -- TSCONVERSION
               activeGitRepository={activeGitRepository}
               environmentHighlightColorStyle={settings.environmentHighlightColorStyle}
               handleInitializeEntities={handleInitializeEntities}
@@ -149,8 +153,7 @@ export class PageLayout extends PureComponent<Props> {
               <ErrorBoundary showAlert>
                 <Pane
                   position="one"
-                  // @ts-expect-error -- TSCONVERSION
-                  ref={handleSetRequestPaneRef}
+                  ref={requestPaneRef}
                 >
                   {renderPaneOne()}
                 </Pane>
@@ -175,8 +178,7 @@ export class PageLayout extends PureComponent<Props> {
                 <ErrorBoundary showAlert>
                   <Pane
                     position="two"
-                    // @ts-expect-error -- TSCONVERSION
-                    ref={handleSetResponsePaneRef}
+                    ref={responsePaneRef}
                   >
                     {paneTwo}
                   </Pane>

packages/insomnia-app/app/ui/components/sidebar/sidebar.tsx

@@ -1,9 +1,7 @@
-import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import classnames from 'classnames';
-import React, { PureComponent, ReactNode } from 'react';
+import React, { forwardRef, memo, ReactNode } from 'react';
 
 import {
-  AUTOBIND_CFG,
   COLLAPSE_SIDEBAR_REMS,
   SIDEBAR_SKINNY_REMS,
 } from '../../../common/constants';
@@ -25,18 +23,19 @@ interface Props {
   workspaces: Workspace[];
 }
 
-@autoBindMethodsForReact(AUTOBIND_CFG)
-export class Sidebar extends PureComponent<Props> {
-  render() {
+export const Sidebar = memo(
+  forwardRef<HTMLElement, Props>((props, ref) => {
     const {
       activeEnvironment,
       children,
       environmentHighlightColorStyle,
       hidden,
       width,
-    } = this.props;
+    } = props;
+
     return (
       <aside
+        ref={ref}
         className={classnames('sidebar', 'theme--sidebar', {
           'sidebar--hidden': hidden,
           'sidebar--skinny': width < SIDEBAR_SKINNY_REMS,
@@ -54,5 +53,7 @@ export class Sidebar extends PureComponent<Props> {
         {children}
       </aside>
     );
-  }
-}
+  })
+);
+
+Sidebar.displayName = 'Sidebar';

packages/insomnia-app/app/ui/components/wrapper.tsx

@@ -1,6 +1,6 @@
 import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import * as importers from 'insomnia-importers';
-import React, { Fragment, PureComponent } from 'react';
+import React, { Fragment, PureComponent, Ref } from 'react';
 
 import { trackPageView } from '../../common/analytics';
 import type { GlobalActivity } from '../../common/constants';
@@ -102,14 +102,14 @@ export type WrapperProps = AppProps & {
   handleGenerateCode: Function;
   handleCopyAsCurl: Function;
   handleCreateRequestForWorkspace: () => void;
-  handleSetRequestPaneRef: Function;
-  handleSetResponsePaneRef: Function;
+  requestPaneRef: Ref<HTMLElement>;
+  responsePaneRef: Ref<HTMLElement>;
   handleSetResponsePreviewMode: Function;
   handleRender: HandleRender;
   handleGetRenderContext: HandleGetRenderContext;
   handleSetResponseFilter: Function;
   handleSetActiveResponse: Function;
-  handleSetSidebarRef: Function;
+  sidebarRef: Ref<HTMLElement>;
   handleSidebarSort: (sortOrder: SortOrder) => void;
   handleStartDragSidebar: React.MouseEventHandler;
   handleResetDragSidebar: React.MouseEventHandler;

packages/insomnia-app/app/ui/containers/app.tsx

@@ -4,8 +4,7 @@ import fs from 'fs';
 import HTTPSnippet from 'httpsnippet';
 import * as mime from 'mime-types';
 import * as path from 'path';
-import React, { PureComponent, RefObject } from 'react';
-import ReactDOM from 'react-dom';
+import React, { createRef, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { Action, bindActionCreators, Dispatch } from 'redux';
 import { parse as urlParse } from 'url';
@@ -150,9 +149,9 @@ class App extends PureComponent<AppProps, State> {
   private _saveSidebarWidth: (paneWidth: number) => void;
   private _globalKeyMap: any;
   private _updateVCSLock: any;
-  private _requestPane: RefObject<any>;
-  private _responsePane: RefObject<any>;
-  private _sidebar: RefObject<any>;
+  private _requestPaneRef = createRef<HTMLElement>();
+  private _responsePaneRef = createRef<HTMLElement>();
+  private _sidebarRef = createRef<HTMLElement>();
   private _wrapper: Wrapper | null = null;
   private _responseFilterHistorySaveTimeout: NodeJS.Timeout | null = null;
 
@@ -380,18 +379,6 @@ class App extends PureComponent<AppProps, State> {
     );
   }
 
-  _setRequestPaneRef(n: RefObject<any>) {
-    this._requestPane = n;
-  }
-
-  _setResponsePaneRef(n: RefObject<any>) {
-    this._responsePane = n;
-  }
-
-  _setSidebarRef(n: RefObject<any>) {
-    this._sidebar = n;
-  }
-
   _requestGroupCreate(parentId: string) {
     showPrompt({
       title: 'New Folder',
@@ -978,20 +965,19 @@ class App extends PureComponent<AppProps, State> {
         });
       }
 
-      // @ts-expect-error -- TSCONVERSION
-      const requestPane = ReactDOM.findDOMNode(this._requestPane);
-      // @ts-expect-error -- TSCONVERSION
-      const responsePane = ReactDOM.findDOMNode(this._responsePane);
-      // @ts-expect-error -- TSCONVERSION
-      const requestPaneWidth = requestPane.offsetWidth;
-      // @ts-expect-error -- TSCONVERSION
-      const responsePaneWidth = responsePane.offsetWidth;
-      // @ts-expect-error -- TSCONVERSION
-      const pixelOffset = e.clientX - requestPane.offsetLeft;
-      let paneWidth = pixelOffset / (requestPaneWidth + responsePaneWidth);
-      paneWidth = Math.min(Math.max(paneWidth, MIN_PANE_WIDTH), MAX_PANE_WIDTH);
+      const requestPane = this._requestPaneRef.current;
+      const responsePane = this._responsePaneRef.current;
 
-      this._handleSetPaneWidth(paneWidth);
+      if (requestPane && responsePane) {
+        const requestPaneWidth = requestPane.offsetWidth;
+        const responsePaneWidth = responsePane.offsetWidth;
+
+        const pixelOffset = e.clientX - requestPane.offsetLeft;
+        let paneWidth = pixelOffset / (requestPaneWidth + responsePaneWidth);
+        paneWidth = Math.min(Math.max(paneWidth, MIN_PANE_WIDTH), MAX_PANE_WIDTH);
+
+        this._handleSetPaneWidth(paneWidth);
+      }
     } else if (this.state.draggingPaneVertical) {
       // Only pop the overlay after we've moved it a bit (so we don't block doubleclick);
       const distance = this.props.paneHeight - this.state.paneHeight;
@@ -1006,20 +992,18 @@ class App extends PureComponent<AppProps, State> {
         });
       }
 
-      // @ts-expect-error -- TSCONVERSION
-      const requestPane = ReactDOM.findDOMNode(this._requestPane);
-      // @ts-expect-error -- TSCONVERSION
-      const responsePane = ReactDOM.findDOMNode(this._responsePane);
-      // @ts-expect-error -- TSCONVERSION
-      const requestPaneHeight = requestPane.offsetHeight;
-      // @ts-expect-error -- TSCONVERSION
-      const responsePaneHeight = responsePane.offsetHeight;
-      // @ts-expect-error -- TSCONVERSION
-      const pixelOffset = e.clientY - requestPane.offsetTop;
-      let paneHeight = pixelOffset / (requestPaneHeight + responsePaneHeight);
-      paneHeight = Math.min(Math.max(paneHeight, MIN_PANE_HEIGHT), MAX_PANE_HEIGHT);
+      const requestPane = this._requestPaneRef.current;
+      const responsePane = this._responsePaneRef.current;
 
-      this._handleSetPaneHeight(paneHeight);
+      if (requestPane && responsePane) {
+        const requestPaneHeight = requestPane.offsetHeight;
+        const responsePaneHeight = responsePane.offsetHeight;
+        const pixelOffset = e.clientY - requestPane.offsetTop;
+        let paneHeight = pixelOffset / (requestPaneHeight + responsePaneHeight);
+        paneHeight = Math.min(Math.max(paneHeight, MIN_PANE_HEIGHT), MAX_PANE_HEIGHT);
+
+        this._handleSetPaneHeight(paneHeight);
+      }
     } else if (this.state.draggingSidebar) {
       // Only pop the overlay after we've moved it a bit (so we don't block doubleclick);
       const distance = this.props.sidebarWidth - this.state.sidebarWidth;
@@ -1034,20 +1018,21 @@ class App extends PureComponent<AppProps, State> {
         });
       }
 
-      // @ts-expect-error -- TSCONVERSION
-      const sidebar = ReactDOM.findDOMNode(this._sidebar);
-      // @ts-expect-error -- TSCONVERSION
-      const currentPixelWidth = sidebar.offsetWidth;
-      // @ts-expect-error -- TSCONVERSION
-      const ratio = (e.clientX - sidebar.offsetLeft) / currentPixelWidth;
-      const width = this.state.sidebarWidth * ratio;
-      let sidebarWidth = Math.min(width, MAX_SIDEBAR_REMS);
+      const sidebar = this._sidebarRef.current;
 
-      if (sidebarWidth < COLLAPSE_SIDEBAR_REMS) {
-        sidebarWidth = MIN_SIDEBAR_REMS;
+      if (sidebar) {
+        const currentPixelWidth = sidebar.offsetWidth;
+
+        const ratio = (e.clientX - sidebar.offsetLeft) / currentPixelWidth;
+        const width = this.state.sidebarWidth * ratio;
+        let sidebarWidth = Math.min(width, MAX_SIDEBAR_REMS);
+
+        if (sidebarWidth < COLLAPSE_SIDEBAR_REMS) {
+          sidebarWidth = MIN_SIDEBAR_REMS;
+        }
+
+        this._handleSetSidebarWidth(sidebarWidth);
       }
-
-      this._handleSetSidebarWidth(sidebarWidth);
     }
   }
 
@@ -1532,9 +1517,9 @@ class App extends PureComponent<AppProps, State> {
                 handleSetRequestPinned={this._handleSetRequestPinned}
                 handleSetRequestGroupCollapsed={this._handleSetRequestGroupCollapsed}
                 handleActivateRequest={this._handleSetActiveRequest}
-                handleSetRequestPaneRef={this._setRequestPaneRef}
-                handleSetResponsePaneRef={this._setResponsePaneRef}
-                handleSetSidebarRef={this._setSidebarRef}
+                requestPaneRef={this._requestPaneRef}
+                responsePaneRef={this._responsePaneRef}
+                sidebarRef={this._sidebarRef}
                 handleStartDragSidebar={this._startDragSidebar}
                 handleResetDragSidebar={this._resetDragSidebar}
                 handleStartDragPaneHorizontal={this._startDragPaneHorizontal}