sidebar children class->fc (#4966)

* transform

* nest components to remove drills

* sort props

* rename overloaded children prop

* check for the length of children in request-group-row

Co-authored-by: gatzjames <jamesgatzos@gmail.com>

packages/insomnia/src/ui/components/sidebar/sidebar-children.tsx

@@ -1,15 +1,12 @@
-import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import { HotKeyRegistry } from 'insomnia-common';
-import React, { Fragment, PureComponent } from 'react';
+import React, { FC, Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
-import { AUTOBIND_CFG } from '../../../common/constants';
 import { GrpcRequest, isGrpcRequest } from '../../../models/grpc-request';
 import { isRequest, Request } from '../../../models/request';
 import type { RequestGroup } from '../../../models/request-group';
-import { RootState } from '../../redux/modules';
-import { selectActiveRequest, selectActiveWorkspace } from '../../redux/selectors';
+import { selectActiveRequest } from '../../redux/selectors';
 import { SidebarCreateDropdown } from './sidebar-create-dropdown';
 import { SidebarRequestGroupRow } from './sidebar-request-group-row';
 import { SidebarRequestRow } from './sidebar-request-row';
@@ -26,134 +23,98 @@ export interface SidebarChildObjects {
   all: Child[];
 }
 
-type ReduxProps = ReturnType<typeof mapStateToProps>;
+function hasActiveChild(children: Child[], activeRequestId: string): boolean {
+  return !!children.find(c => c.doc._id === activeRequestId || hasActiveChild(c.children || [], activeRequestId));
+}
+interface RecursiveSidebarRowsProps {
+  rows: Child[];
+  isInPinnedList: boolean;
+}
 
-const mapStateToProps = (state: RootState) => ({
-  activeRequest: selectActiveRequest(state),
-  workspace: selectActiveWorkspace(state),
-});
-
-interface Props extends ReduxProps {
+interface Props {
+  childObjects: SidebarChildObjects;
+  filter: string;
   handleActivateRequest: Function;
-  handleSetRequestPinned: Function;
-  handleSetRequestGroupCollapsed: Function;
+  handleCopyAsCurl: Function;
   handleDuplicateRequest: Function;
   handleDuplicateRequestGroup: (requestGroup: RequestGroup) => any;
   handleGenerateCode: Function;
-  handleCopyAsCurl: Function;
-  childObjects: SidebarChildObjects;
-  filter: string;
+  handleSetRequestGroupCollapsed: Function;
+  handleSetRequestPinned: Function;
   hotKeyRegistry: HotKeyRegistry;
 }
-
-@autoBindMethodsForReact(AUTOBIND_CFG)
-class UnconnectedSidebarChildren extends PureComponent<Props> {
-  _renderChildren(children: Child[], isInPinnedList: boolean) {
-    const {
-      filter,
-      handleSetRequestPinned,
-      handleSetRequestGroupCollapsed,
-      handleDuplicateRequest,
-      handleDuplicateRequestGroup,
-      handleGenerateCode,
-      handleCopyAsCurl,
-      handleActivateRequest,
-      activeRequest,
-      hotKeyRegistry,
-    } = this.props;
+export const SidebarChildren: FC<Props> = ({
+  childObjects,
+  filter,
+  handleActivateRequest,
+  handleCopyAsCurl,
+  handleDuplicateRequest,
+  handleDuplicateRequestGroup,
+  handleGenerateCode,
+  handleSetRequestGroupCollapsed,
+  handleSetRequestPinned,
+  hotKeyRegistry,
+}) => {
+  const RecursiveSidebarRows: FC<RecursiveSidebarRowsProps> = ({ rows, isInPinnedList }) => {
+    const activeRequest = useSelector(selectActiveRequest);
     const activeRequestId = activeRequest ? activeRequest._id : 'n/a';
-    return children.map(child => {
-      if (!isInPinnedList && child.hidden) {
-        return null;
-      }
-
-      if (isRequest(child.doc) || isGrpcRequest(child.doc)) {
-        return (
-          <SidebarRequestRow
-            key={child.doc._id}
-            filter={isInPinnedList ? '' : filter || ''}
-            handleActivateRequest={handleActivateRequest}
-            handleSetRequestPinned={handleSetRequestPinned}
-            handleDuplicateRequest={handleDuplicateRequest}
-            handleGenerateCode={handleGenerateCode}
-            handleCopyAsCurl={handleCopyAsCurl}
-            isActive={child.doc._id === activeRequestId}
-            isPinned={child.pinned}
-            disableDragAndDrop={isInPinnedList}
-            request={child.doc}
-            hotKeyRegistry={hotKeyRegistry} // Necessary for plugin actions on requests
-          />
-        );
-      }
-
-      // We have a RequestGroup!
-      const requestGroup = child.doc;
-
-      function hasActiveChild(children: Child[]) {
-        for (const c of children) {
-          if (hasActiveChild(c.children || [])) {
-            return true;
-          } else if (c.doc._id === activeRequestId) {
-            return true;
-          }
-        }
-
-        // Didn't find anything, so return
-        return false;
-      }
-
-      const isActive = hasActiveChild(child.children);
-
-      const children = this._renderChildren(child.children, isInPinnedList);
-
-      return (
-        <SidebarRequestGroupRow
-          key={requestGroup._id}
-          filter={filter || ''}
-          isActive={isActive}
-          handleActivateRequest={handleActivateRequest}
-          handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
-          handleDuplicateRequestGroup={handleDuplicateRequestGroup}
-          isCollapsed={child.collapsed}
-          requestGroup={requestGroup}
-          hotKeyRegistry={hotKeyRegistry}
-        >
-          {children}
-        </SidebarRequestGroupRow>
-      );
-    });
-  }
-
-  _renderList(children: Child[], pinnedList: boolean) {
     return (
-      <ul
-        className="sidebar__list sidebar__list-root theme--sidebar__list"
-      >
-        {this._renderChildren(children, pinnedList)}
+      <>
+        {rows.map(row => (!isInPinnedList && row.hidden)
+          ? null
+          : (isRequest(row.doc) || isGrpcRequest(row.doc))
+            ? (
+              <SidebarRequestRow
+                key={row.doc._id}
+                filter={isInPinnedList ? '' : filter || ''}
+                handleActivateRequest={handleActivateRequest}
+                handleSetRequestPinned={handleSetRequestPinned}
+                handleDuplicateRequest={handleDuplicateRequest}
+                handleGenerateCode={handleGenerateCode}
+                handleCopyAsCurl={handleCopyAsCurl}
+                isActive={row.doc._id === activeRequestId}
+                isPinned={row.pinned}
+                disableDragAndDrop={isInPinnedList}
+                request={row.doc}
+                hotKeyRegistry={hotKeyRegistry} // Necessary for plugin actions on requests
+              />
+            ) : (
+              <SidebarRequestGroupRow
+                key={row.doc._id}
+                filter={filter || ''}
+                isActive={hasActiveChild(row.children, activeRequestId)}
+                handleActivateRequest={handleActivateRequest}
+                handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
+                handleDuplicateRequestGroup={handleDuplicateRequestGroup}
+                isCollapsed={row.collapsed}
+                requestGroup={row.doc}
+                hotKeyRegistry={hotKeyRegistry}
+              >
+                {row.children.filter(Boolean).length > 0 ? <RecursiveSidebarRows isInPinnedList={isInPinnedList} rows={row.children} /> : null}
+              </SidebarRequestGroupRow>
+            ))}
+      </>);
+  };
+  const { all, pinned } = childObjects;
+  const showSeparator = childObjects.pinned.length > 0;
+  const contextMenuPortal = ReactDOM.createPortal(
+    <div className="hide">
+      <SidebarCreateDropdown
+        hotKeyRegistry={hotKeyRegistry}
+      />
+    </div>,
+    document.querySelector('#dropdowns-container') as any,
+  );
+  return (
+    <Fragment>
+      <ul className="sidebar__list sidebar__list-root theme--sidebar__list">
+        <RecursiveSidebarRows isInPinnedList={true} rows={pinned} />
       </ul>
-    );
-  }
-
-  render() {
-    const { childObjects, hotKeyRegistry } = this.props;
-    const showSeparator = childObjects.pinned.length > 0;
-    const contextMenuPortal = ReactDOM.createPortal(
-      <div className="hide">
-        <SidebarCreateDropdown
-          hotKeyRegistry={hotKeyRegistry}
-        />
-      </div>,
-      document.querySelector('#dropdowns-container') as any,
-    );
-    return (
-      <Fragment>
-        {this._renderList(childObjects.pinned, true)}
-        <div className={`sidebar__list-separator${showSeparator ? '' : '--invisible'}`} />
-        {this._renderList(childObjects.all, false)}
-        {contextMenuPortal}
-      </Fragment>
-    );
-  }
-}
-
-export const SidebarChildren = connect(mapStateToProps)(UnconnectedSidebarChildren);
+      <div className={`sidebar__list-separator${showSeparator ? '' : '--invisible'}`} />
+      <ul className="sidebar__list sidebar__list-root theme--sidebar__list"  >
+        <RecursiveSidebarRows isInPinnedList={false} rows={all} />
+      </ul>
+      {contextMenuPortal}
+    </Fragment>
+  );
+};