refactor: pass btn click handler to empty state component

Author: navinkarkera

src/library-authoring/EmptyStates.tsx

@@ -1,4 +1,3 @@
-import React, { useContext, useCallback } from 'react';
 import { useParams } from 'react-router';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import type { MessageDescriptor } from 'react-intl';
@@ -8,36 +7,26 @@ import {
 import { Add } from '@openedx/paragon/icons';
 import { ClearFiltersButton } from '../search-manager';
 import messages from './messages';
-import { LibraryContext } from './common/context';
 import { useContentLibrary } from './data/apiHooks';
 
 export const NoComponents = ({
   infoText = messages.noComponents,
   addBtnText = messages.addComponent,
-  searchType = "component",
+  handleBtnClick,
 }: {
   infoText?: MessageDescriptor;
   addBtnText?: MessageDescriptor;
-  searchType?: "collection" | "component";
+  handleBtnClick: () => void;
 }) => {
-  const { openAddContentSidebar, openCreateCollectionModal } = useContext(LibraryContext);
   const { libraryId } = useParams();
   const { data: libraryData } = useContentLibrary(libraryId);
   const canEditLibrary = libraryData?.canEditLibrary ?? false;
 
-  const handleOnClickButton = useCallback(() => {
-    if (searchType === 'collection') {
-      openCreateCollectionModal();
-    } else {
-      openAddContentSidebar();
-    }
-  }, [searchType]);
-
   return (
     <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
       <FormattedMessage {...infoText} />
       {canEditLibrary && (
-        <Button iconBefore={Add} onClick={handleOnClickButton}>
+        <Button iconBefore={Add} onClick={handleBtnClick}>
           <FormattedMessage {...addBtnText} />
         </Button>
       )}

src/library-authoring/LibraryHome.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Stack } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
@@ -9,6 +9,7 @@ import { LibraryComponents } from './components';
 import LibrarySection from './components/LibrarySection';
 import LibraryRecentlyModified from './LibraryRecentlyModified';
 import messages from './messages';
+import { LibraryContext } from './common/context';
 
 type LibraryHomeProps = {
   libraryId: string,
@@ -23,10 +24,11 @@ const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps)
     totalCollectionHits: collectionCount,
     isFiltered,
   } = useSearchContext();
+  const { openAddContentSidebar } = useContext(LibraryContext);
 
   const renderEmptyState = () => {
     if (componentCount === 0 && collectionCount === 0) {
-      return isFiltered ? <NoSearchResults /> : <NoComponents />;
+      return isFiltered ? <NoSearchResults /> : <NoComponents handleBtnClick={openAddContentSidebar} />;
     }
     return null;
   };

src/library-authoring/collections/LibraryCollectionComponents.tsx

@@ -1,18 +1,22 @@
+import { useContext } from 'react';
 import { Stack } from '@openedx/paragon';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useSearchContext } from '../../search-manager';
 import { LibraryComponents } from '../components';
 import messages from './messages';
+import { LibraryContext } from '../common/context';
 
 const LibraryCollectionComponents = ({ libraryId }: { libraryId: string }) => {
   const { totalHits: componentCount, isFiltered } = useSearchContext();
+  const { openAddContentSidebar } = useContext(LibraryContext);
 
   if (componentCount === 0) {
     return isFiltered ?
       <NoSearchResults infoText={messages.noSearchResultsInCollection} />
       : <NoComponents
         infoText={messages.noComponentsInCollection}
         addBtnText={messages.addComponentsInCollection}
+        handleBtnClick={openAddContentSidebar}
       />;
   }
 

src/library-authoring/collections/LibraryCollections.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { CardGrid } from '@openedx/paragon';
 
 import { useLoadOnScroll } from '../../hooks';
@@ -6,6 +7,7 @@ import { NoComponents, NoSearchResults } from '../EmptyStates';
 import CollectionCard from '../components/CollectionCard';
 import { LIBRARY_SECTION_PREVIEW_LIMIT } from '../components/LibrarySection';
 import messages from '../messages';
+import { LibraryContext } from '../common/context';
 
 type LibraryCollectionsProps = {
   variant: 'full' | 'preview',
@@ -28,6 +30,8 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
     isFiltered,
   } = useSearchContext();
 
+  const { openCreateCollectionModal } = useContext(LibraryContext);
+
   const collectionList = variant === 'preview' ? collectionHits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT) : collectionHits;
 
   useLoadOnScroll(
@@ -43,7 +47,7 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
       : <NoComponents
         infoText={messages.noCollections}
         addBtnText={messages.addCollection}
-        searchType="collection"
+        handleBtnClick={openCreateCollectionModal}
       />;
   }
 

src/library-authoring/common/context.tsx

@@ -40,7 +40,6 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
   const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
-  const [currentComponentKey, setCurrentComponentKey] = React.useState<string>();
 
   const closeLibrarySidebar = React.useCallback(() => {
     setSidebarBodyComponent(null);
@@ -62,7 +61,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     [],
   );
   const openCollectionInfoSidebar = React.useCallback(() => {
-    setCurrentComponentKey(undefined);
+    setCurrentComponentUsageKey(undefined);
     setSidebarBodyComponent(SidebarBodyComponentId.CollectionInfo);
   }, []);
 

src/library-authoring/components/LibraryComponents.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { CardGrid } from '@openedx/paragon';
 
 import { useLoadOnScroll } from '../../hooks';
@@ -7,6 +7,7 @@ import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useLibraryBlockTypes } from '../data/apiHooks';
 import ComponentCard from './ComponentCard';
 import { LIBRARY_SECTION_PREVIEW_LIMIT } from './LibrarySection';
+import { LibraryContext } from '../common/context';
 
 type LibraryComponentsProps = {
   libraryId: string,
@@ -29,6 +30,7 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
     fetchNextPage,
     isFiltered,
   } = useSearchContext();
+  const { openAddContentSidebar } = useContext(LibraryContext);
 
   const componentList = variant === 'preview' ? hits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT) : hits;
 
@@ -52,7 +54,7 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
   );
 
   if (componentCount === 0) {
-    return isFiltered ? <NoSearchResults /> : <NoComponents />;
+    return isFiltered ? <NoSearchResults /> : <NoComponents handleBtnClick={openAddContentSidebar} />;
   }
 
   return (