refactor: address review comments

Author: navinkarkera

src/hooks.js

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { history } from '@edx/frontend-platform';
+
+export const useScrollToHashElement = ({ isLoading }: { isLoading: boolean }) => {
+  const [elementWithHash, setElementWithHash] = useState<string | null>(null);
+
+  useEffect(() => {
+    const currentHash = window.location.hash.substring(1);
+
+    if (currentHash) {
+      const element = document.getElementById(currentHash);
+      if (element) {
+        element.scrollIntoView();
+        history.replace({ hash: '' });
+      }
+      setElementWithHash(currentHash);
+    }
+  }, [isLoading]);
+
+  return { elementWithHash };
+};
+
+export const useEscapeClick = ({ onEscape, dependency }: { onEscape: () => void, dependency: any }) => {
+  useEffect(() => {
+    const handleEscapeClick = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onEscape();
+      }
+    };
+
+    window.addEventListener('keydown', handleEscapeClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleEscapeClick);
+    };
+  }, [dependency]);
+};
+
+/**
+ * Hook which loads next page of items on scroll
+ */
+export const useLoadOnScroll = (
+  hasNextPage: boolean | undefined,
+  isFetchingNextPage: boolean,
+  fetchNextPage: () => void,
+  enabled: boolean,
+) => {
+  useEffect(() => {
+    if (enabled) {
+      const onscroll = () => {
+        // Verify the position of the scroll to implementa a infinite scroll.
+        // Used `loadLimit` to fetch next page before reach the end of the screen.
+        const loadLimit = 300;
+        const scrolledTo = window.scrollY + window.innerHeight;
+        const scrollDiff = document.body.scrollHeight - scrolledTo;
+        const isNearToBottom = scrollDiff <= loadLimit;
+        if (isNearToBottom && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      };
+      window.addEventListener('scroll', onscroll);
+      return () => {
+        window.removeEventListener('scroll', onscroll);
+      };
+    }
+    return () => { };
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+};

src/hooks.ts

@@ -1,6 +1,7 @@
 import { CardGrid } from '@openedx/paragon';
 
-import { useLoadOnScroll, useSearchContext } from '../search-manager';
+import { useLoadOnScroll } from '../hooks';
+import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
 import CollectionCard from './components/CollectionCard';
 import { LIBRARY_SECTION_PREVIEW_LIMIT } from './components/LibrarySection';

src/library-authoring/LibraryCollections.tsx

@@ -5,7 +5,6 @@ import {
   Icon,
   Stack,
 } from '@openedx/paragon';
-import { ReactNodeLike } from 'prop-types';
 
 import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
 import TagCount from '../../generic/tag-count';
@@ -16,7 +15,7 @@ type BaseComponentCardProps = {
   displayName: string,
   description: string,
   tags: ContentHitTags,
-  actions: ReactNodeLike,
+  actions: React.ReactNode,
   blockTypeDisplayName: string,
   openInfoSidebar: () => void
 };

src/library-authoring/components/BaseComponentCard.tsx

@@ -3,7 +3,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import type { Store } from 'redux';
 
@@ -66,9 +66,9 @@ describe('<CollectionCard />', () => {
   });
 
   it('should render the card with title and description', () => {
-    const { getByText } = render(<RootWrapper />);
+    render(<RootWrapper />);
 
-    expect(getByText('Collection Display Formated Name')).toBeInTheDocument();
-    expect(getByText('Collection description')).toBeInTheDocument();
+    expect(screen.getByText('Collection Display Formated Name')).toBeInTheDocument();
+    expect(screen.getByText('Collection description')).toBeInTheDocument();
   });
 });

src/library-authoring/components/CollectionCard.test.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import { CardGrid } from '@openedx/paragon';
 
-import { useLoadOnScroll, useSearchContext } from '../../search-manager';
+import { useLoadOnScroll } from '../../hooks';
+import { useSearchContext } from '../../search-manager';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useLibraryBlockTypes } from '../data/apiHooks';
 import ComponentCard from './ComponentCard';

src/library-authoring/components/LibraryComponents.tsx

@@ -185,34 +185,3 @@ export const useSearchContext = () => {
   }
   return ctx;
 };
-
-/**
- * Hook which loads next page of items on scroll
- */
-export const useLoadOnScroll = (
-  hasNextPage: boolean | undefined,
-  isFetchingNextPage: boolean,
-  fetchNextPage: () => void,
-  enabled: boolean,
-) => {
-  React.useEffect(() => {
-    if (enabled) {
-      const onscroll = () => {
-        // Verify the position of the scroll to implementa a infinite scroll.
-        // Used `loadLimit` to fetch next page before reach the end of the screen.
-        const loadLimit = 300;
-        const scrolledTo = window.scrollY + window.innerHeight;
-        const scrollDiff = document.body.scrollHeight - scrolledTo;
-        const isNearToBottom = scrollDiff <= loadLimit;
-        if (isNearToBottom && hasNextPage && !isFetchingNextPage) {
-          fetchNextPage();
-        }
-      };
-      window.addEventListener('scroll', onscroll);
-      return () => {
-        window.removeEventListener('scroll', onscroll);
-      };
-    }
-    return () => {};
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-};

src/search-manager/SearchManager.ts

@@ -1,4 +1,4 @@
-export { SearchContextProvider, useLoadOnScroll, useSearchContext } from './SearchManager';
+export { SearchContextProvider, useSearchContext } from './SearchManager';
 export { default as ClearFiltersButton } from './ClearFiltersButton';
 export { default as FilterByBlockType } from './FilterByBlockType';
 export { default as FilterByTags } from './FilterByTags';