From b826fd1949d1a5eec4b8ad4be0c07ed3cee4a578 Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Mon, 16 Sep 2024 11:23:15 +0530 Subject: [PATCH] refactor: pass btn click handler to empty state component --- src/library-authoring/EmptyStates.tsx | 17 +++-------------- src/library-authoring/LibraryHome.tsx | 6 ++++-- .../collections/LibraryCollectionComponents.tsx | 4 ++++ .../collections/LibraryCollections.tsx | 6 +++++- src/library-authoring/common/context.tsx | 3 +-- .../components/LibraryComponents.tsx | 6 ++++-- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/library-authoring/EmptyStates.tsx b/src/library-authoring/EmptyStates.tsx index 25b1770b86..eea5ed732a 100644 --- a/src/library-authoring/EmptyStates.tsx +++ b/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 ( {canEditLibrary && ( - )} diff --git a/src/library-authoring/LibraryHome.tsx b/src/library-authoring/LibraryHome.tsx index 4b170b96fa..2ee1e5cb66 100644 --- a/src/library-authoring/LibraryHome.tsx +++ b/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 ? : ; + return isFiltered ? : ; } return null; }; diff --git a/src/library-authoring/collections/LibraryCollectionComponents.tsx b/src/library-authoring/collections/LibraryCollectionComponents.tsx index a44b39d2b6..1bafef00b7 100644 --- a/src/library-authoring/collections/LibraryCollectionComponents.tsx +++ b/src/library-authoring/collections/LibraryCollectionComponents.tsx @@ -1,11 +1,14 @@ +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 ? @@ -13,6 +16,7 @@ const LibraryCollectionComponents = ({ libraryId }: { libraryId: string }) => { : ; } diff --git a/src/library-authoring/collections/LibraryCollections.tsx b/src/library-authoring/collections/LibraryCollections.tsx index 5134a05552..917da2e6a8 100644 --- a/src/library-authoring/collections/LibraryCollections.tsx +++ b/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) => { : ; } diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx index 5b16a74f3e..b3811e6ddf 100644 --- a/src/library-authoring/common/context.tsx +++ b/src/library-authoring/common/context.tsx @@ -40,7 +40,6 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => { const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState(null); const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState(); const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false); - const [currentComponentKey, setCurrentComponentKey] = React.useState(); 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); }, []); diff --git a/src/library-authoring/components/LibraryComponents.tsx b/src/library-authoring/components/LibraryComponents.tsx index 4b6eb6c647..97a95655a7 100644 --- a/src/library-authoring/components/LibraryComponents.tsx +++ b/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 ? : ; + return isFiltered ? : ; } return (