Fix ESLint

microsoft · Jul 31, 2020 · fd16b21 · fd16b21
1 parent 7bef695
commit fd16b21
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 27 deletions.
diff --git a/packages/component/src/BasicTranscript.js b/packages/component/src/BasicTranscript.js
@@ -4,7 +4,7 @@ import { css } from 'glamor';
 import { Panel as ScrollToBottomPanel, useAnimatingToEnd, useSticky } from 'react-scroll-to-bottom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import BasicTypingIndicator from './BasicTypingIndicator';
 import Fade from './Utils/Fade';
@@ -206,7 +206,7 @@ const BasicTranscript = ({ className }) => {
 
         return activityElementsWithMetadata;
       }),
-    [activities, memoizeRenderActivityElement]
+    [activities, activityElementsRef, memoizeRenderActivityElement]
   );
 
   // Activity ID of the last visible activity in the list.

diff --git a/packages/component/src/hooks/useObserveScrollPosition.js b/packages/component/src/hooks/useObserveScrollPosition.js
@@ -17,31 +17,34 @@ export default function useObserveScrollPosition(observer, deps) {
     );
   }
 
-  // This hook is very similar to useEffect, which internally use useCallback.
-  // The "deps" is treated as the dependencies for the useCallback.
-  /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const effectCallback = useCallback(({ scrollTop }) => {
-    const scrollable = getTranscriptScrollableElement();
-    const [{ height: offsetHeight } = {}] = scrollable.getClientRects();
-
-    // Find the activity just above scroll view bottom.
-    // If the scroll view is already on top, get the first activity.
-    const entry = scrollable.scrollTop
-      ? [...activityElementsRef.current].reverse().find(({ element }) => {
-          if (!element) {
-            return false;
-          }
-
-          const [{ y } = {}] = element.getClientRects();
-
-          return y < offsetHeight;
-        })
-      : activityElementsRef.current[0];
-
-    const { activityID } = entry || {};
-
-    observer && observer({ activityID, scrollTop });
-  }, deps);
+  const effectCallback = useCallback(
+    ({ scrollTop }) => {
+      const scrollable = getTranscriptScrollableElement();
+      const [{ height: offsetHeight } = {}] = scrollable.getClientRects();
+
+      // Find the activity just above scroll view bottom.
+      // If the scroll view is already on top, get the first activity.
+      const entry = scrollable.scrollTop
+        ? [...activityElementsRef.current].reverse().find(({ element }) => {
+            if (!element) {
+              return false;
+            }
+
+            const [{ y } = {}] = element.getClientRects();
+
+            return y < offsetHeight;
+          })
+        : activityElementsRef.current[0];
+
+      const { activityID } = entry || {};
+
+      observer && observer({ activityID, scrollTop });
+    },
+    // This hook is very similar to useEffect, which internally use useCallback.
+    // The "deps" is treated as the dependencies for the useCallback.
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [activityElementsRef, getTranscriptScrollableElement, ...deps]
+  );
 
   useScrollToBottomObserveScrollPosition(effectCallback);
 }