fix: changes from feedback

Author: gagik

packages/compass-components/src/components/document-list/document.tsx

@@ -10,7 +10,7 @@ import {
   ElementEvents,
 } from 'hadron-document';
 import { AutoFocusContext } from './auto-focus-context';
-import { useForceUpdate } from './use-force-update';
+import { useForceUpdate } from '../../hooks/use-force-update';
 import { calculateShowMoreToggleOffset, HadronElement } from './element';
 import { usePrevious } from './use-previous';
 import VisibleFieldsToggle from './visible-field-toggle';

packages/compass-components/src/components/document-list/element.tsx

@@ -21,7 +21,7 @@ import { spacing } from '@leafygreen-ui/tokens';
 import { KeyEditor, ValueEditor, TypeEditor } from './element-editors';
 import { EditActions, AddFieldActions } from './element-actions';
 import { useAutoFocusContext } from './auto-focus-context';
-import { useForceUpdate } from './use-force-update';
+import { useForceUpdate } from '../../hooks/use-force-update';
 import { usePrevious } from './use-previous';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';

packages/compass-components/src/components/document-list/use-force-update.tsx renamed to packages/compass-components/src/hooks/use-force-update.tsx

@@ -213,3 +213,4 @@ export {
 export { SelectList } from './components/select-list';
 export { ParagraphSkeleton } from '@leafygreen-ui/skeleton-loader';
 export { InsightsChip } from './components/insights-chip';
+export { useForceUpdate } from './hooks/use-force-update';

packages/compass-components/src/index.ts

@@ -1,10 +1,4 @@
-import React, {
-  useMemo,
-  useCallback,
-  useEffect,
-  useReducer,
-  useState,
-} from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
 import {
   BSONValue,
   css,
@@ -13,6 +7,7 @@ import {
   LeafyGreenProvider,
   spacing,
   withDarkMode,
+  useForceUpdate,
 } from '@mongodb-js/compass-components';
 import { type Document, Element } from 'hadron-document';
 import type { ICellRendererParams } from 'ag-grid-community';
@@ -90,6 +85,21 @@ const decrypdedIconStyles = css({
   display: 'flex',
 });
 
+const getElementLength = (
+  element: Element | undefined | null
+): number | undefined => {
+  if (!element) {
+    return undefined;
+  }
+
+  if (element.currentType === 'Object') {
+    return Object.keys(element.generateObject() as object).length;
+  }
+  if (element.currentType === 'Array' && element.elements) {
+    return element.elements.size;
+  }
+};
+
 interface CellContentProps {
   element: Element | undefined | null;
   cellState:
@@ -110,7 +120,7 @@ const CellContent: React.FC<CellContentProps> = ({
   onUndo,
   onExpand,
 }) => {
-  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+  const forceUpdate = useForceUpdate();
   const isEmpty = element === undefined || element === null;
   const handleElementEvent = useCallback(() => {
     forceUpdate();
@@ -133,18 +143,7 @@ const CellContent: React.FC<CellContentProps> = ({
     }
   }, [isEmpty, element, handleElementEvent]);
 
-  const elementLength = useMemo((): number | undefined => {
-    if (!element) {
-      return undefined;
-    }
-
-    if (element.currentType === 'Object') {
-      return Object.keys(element.generateObject() as object).length;
-    }
-    if (element.currentType === 'Array' && element.elements) {
-      return element.elements.size;
-    }
-  }, [element]);
+  const elementLength = getElementLength(element);
 
   const renderContent = useCallback(() => {
     if (cellState === EMPTY || !element) {
@@ -183,7 +182,6 @@ const CellContent: React.FC<CellContentProps> = ({
       }
     } else {
       elementContent = (
-        //@ts-expect-error Types for this are currently not consistent
         <BSONValue type={element.currentType} value={element.currentValue} />
       );
     }
@@ -204,7 +202,14 @@ const CellContent: React.FC<CellContentProps> = ({
         </div>
       </div>
     );
-  }, [element, elementLength, cellState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    element,
+    element?.currentType,
+    element?.currentValue,
+    elementLength,
+    cellState,
+  ]);
 
   const canUndo =
     cellState === ADDED ||
@@ -355,22 +360,18 @@ const CellRenderer: React.FC<CellRendererProps> = ({
     // `ag-grid` renders this component outside of the context chain
     // so we re-supply the dark mode theme here.
     <LeafyGreenProvider darkMode={darkMode}>
-      <div>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus*/}
-        <div
-          className={
-            cellState === VALID ? BEM_BASE : `${BEM_BASE}-${cellState}`
-          }
-          onClick={handleClicked}
-          role="button"
-        >
-          <CellContent
-            element={element}
-            cellState={cellState}
-            onUndo={handleUndo}
-            onExpand={handleDrillDown}
-          />
-        </div>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus*/}
+      <div
+        className={cellState === VALID ? BEM_BASE : `${BEM_BASE}-${cellState}`}
+        onClick={handleClicked}
+        role="button"
+      >
+        <CellContent
+          element={element}
+          cellState={cellState}
+          onUndo={handleUndo}
+          onExpand={handleDrillDown}
+        />
       </div>
     </LeafyGreenProvider>
   );