fix: hide video banner if no videos are available

openedx · Jan 27, 2025 · 5e776c8 · 5e776c8
1 parent cf26017
commit 5e776c8
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 11 deletions.
diff --git a/src/components/microlearning/VideoBanner.jsx b/src/components/microlearning/VideoBanner.jsx
@@ -6,6 +6,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import BetaBadge from './BetaBadge';
 import { useEnterpriseCustomer } from '../app/data';
 import './styles/VideoDetailPage.scss';
+import { SEARCH_INDEX_IDS } from '../../constants';
 
 const VideoBanner = () => {
   const { data: enterpriseCustomer } = useEnterpriseCustomer();
@@ -55,7 +56,7 @@ const VideoBanner = () => {
         <Card.Footer className="col-3 justify-content-end">
           <Button
             as={Link}
-            to="#videos-section"
+            to={`#${SEARCH_INDEX_IDS.VIDEOS}`}
             variant="outline-primary"
             onClick={sendPushEvent}
           >

diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
@@ -1,4 +1,6 @@
-import { useContext, useEffect } from 'react';
+import {
+  useCallback, useContext, useEffect, useState,
+} from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { Configure, InstantSearch } from 'react-instantsearch-dom';
@@ -79,12 +81,18 @@ const Search = () => {
     closePathwayModal,
   } = useSearchPathwayModal();
 
+  const [shouldShowVideosBanner, setShouldShowVideosBanner] = useState(false);
+
   const enableVideos = (
     canOnlyViewHighlightSets === false
     && features.FEATURE_ENABLE_VIDEO_CATALOG
     && hasValidLicenseOrSubRequest
   );
 
+  const showVideosBanner = useCallback(() => {
+    setShouldShowVideosBanner(true);
+  }, []);
+
   const PAGE_TITLE = intl.formatMessage({
     id: 'enterprise.search.page.title',
     defaultMessage: 'Search Courses and Programs - {enterpriseName}',
@@ -153,13 +161,13 @@ const Search = () => {
         {/* No content type refinement  */}
         {(contentType === undefined || contentType.length === 0) && (
           <Stack className="my-5" gap={5}>
-            {enableVideos && <VideoBanner />}
+            {shouldShowVideosBanner && <VideoBanner />}
             {!hasRefinements && <ContentHighlights />}
             {canOnlyViewHighlightSets === false && enterpriseCustomer.enableAcademies && <SearchAcademy />}
             {features.ENABLE_PATHWAYS && (canOnlyViewHighlightSets === false) && <SearchPathway filter={filters} />}
             {features.ENABLE_PROGRAMS && (canOnlyViewHighlightSets === false) && <SearchProgram filter={filters} />}
             {canOnlyViewHighlightSets === false && <SearchCourse filter={filters} />}
-            {enableVideos && <SearchVideo filter={filters} />}
+            {enableVideos && <SearchVideo filter={filters} showVideosBanner={showVideosBanner} />}
           </Stack>
         )}
         {/* render a single contentType if the refinement exist and is either a course, program or learnerpathway */}

diff --git a/src/components/search/SearchCourse.jsx b/src/components/search/SearchCourse.jsx
@@ -3,6 +3,7 @@ import { Configure, Index } from 'react-instantsearch-dom';
 import { getConfig } from '@edx/frontend-platform/config';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { NUM_RESULTS_COURSE, CONTENT_TYPE_COURSE, COURSE_TITLE } from './constants';
+import { SEARCH_INDEX_IDS } from '../../constants';
 import SearchResults from './SearchResults';
 import SearchCourseCard from './SearchCourseCard';
 
@@ -11,7 +12,7 @@ const SearchCourse = ({ filter }) => {
   const config = getConfig();
   const intl = useIntl();
   return (
-    <Index indexName={config.ALGOLIA_INDEX_NAME} indexId="search-courses">
+    <Index indexName={config.ALGOLIA_INDEX_NAME} indexId={SEARCH_INDEX_IDS.COURSE}>
       <Configure
         hitsPerPage={NUM_RESULTS_COURSE}
         filters={defaultFilter}
@@ -27,6 +28,7 @@ const SearchCourse = ({ filter }) => {
             description: 'Translated title for the enterprise search page course section.',
           })
         }
+        componentId={SEARCH_INDEX_IDS.COURSE}
       />
     </Index>
   );

diff --git a/src/components/search/SearchPathway.jsx b/src/components/search/SearchPathway.jsx
@@ -4,6 +4,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { NUM_RESULTS_PATHWAY, CONTENT_TYPE_PATHWAY, PATHWAY_TITLE } from './constants';
+import { SEARCH_INDEX_IDS } from '../../constants';
 import SearchResults from './SearchResults';
 import SearchPathwayCard from '../pathway/SearchPathwayCard';
 
@@ -12,7 +13,7 @@ const SearchPathway = ({ filter }) => {
   const config = getConfig();
   const intl = useIntl();
   return (
-    <Index indexName={config.ALGOLIA_INDEX_NAME} indexId="search-pathways">
+    <Index indexName={config.ALGOLIA_INDEX_NAME} indexId={SEARCH_INDEX_IDS.PATHWAYS}>
       <Configure
         hitsPerPage={NUM_RESULTS_PATHWAY}
         filters={defaultFilter}
@@ -29,6 +30,7 @@ const SearchPathway = ({ filter }) => {
           })
         }
         isPathwaySearchResults
+        componentId={SEARCH_INDEX_IDS.PATHWAYS}
       />
     </Index>
   );

diff --git a/src/components/search/SearchProgram.jsx b/src/components/search/SearchProgram.jsx
@@ -4,6 +4,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { NUM_RESULTS_PROGRAM, CONTENT_TYPE_PROGRAM, PROGRAM_TITLE } from './constants';
+import { SEARCH_INDEX_IDS } from '../../constants';
 import SearchResults from './SearchResults';
 import SearchProgramCard from './SearchProgramCard';
 
@@ -12,7 +13,7 @@ const SearchProgram = ({ filter }) => {
   const config = getConfig();
   const intl = useIntl();
   return (
-    <Index indexName={config.ALGOLIA_INDEX_NAME} indexId="search-programs">
+    <Index indexName={config.ALGOLIA_INDEX_NAME} indexId={SEARCH_INDEX_IDS.PROGRAMS}>
       <Configure
         hitsPerPage={NUM_RESULTS_PROGRAM}
         filters={defaultFilter}
@@ -28,6 +29,7 @@ const SearchProgram = ({ filter }) => {
             description: 'Translated title for the enterprise search page program section.',
           })
         }
+        componentId={SEARCH_INDEX_IDS.PROGRAMS}
       />
     </Index>
   );

diff --git a/src/components/search/SearchResults.jsx b/src/components/search/SearchResults.jsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connectStateResults } from 'react-instantsearch-dom';
@@ -19,6 +19,7 @@ import {
   PROGRAM_TITLE,
   CARDGRID_COLUMN_SIZES,
 } from './constants';
+import { SEARCH_INDEX_IDS } from '../../constants';
 import { getContentTypeFromTitle, getNoOfResultsFromTitle, getSkeletonCardFromTitle } from '../utils/search';
 import BetaBadge from '../microlearning/BetaBadge';
 
@@ -34,6 +35,8 @@ const SearchResults = ({
   translatedTitle,
   isPathwaySearchResults,
   showBetaBadge,
+  componentId,
+  showVideosBanner,
 }) => {
   const { refinements, dispatch } = useContext(SearchContext);
   const nbHits = useNbHitsFromSearchResults(searchResults);
@@ -102,7 +105,7 @@ const SearchResults = ({
       //  Theses changes are temporary and will be removed once the BetaBadge component is removed from
       // the SearchResults component
       return (
-        <div className="d-flex align-items-center" id={showBetaBadge ? 'videos-section' : 'some-other-section'}>
+        <div className="d-flex align-items-center" id={componentId}>
           {translatedTitle || title} ({nbHits} {resultsLabel}) {showBetaBadge && <BetaBadge />}
           {query && <>{' '}for &quot;{query}&quot;</>}
         </div>
@@ -112,6 +115,12 @@ const SearchResults = ({
     [nbHits, query, title],
   );
 
+  useEffect(() => {
+    if (nbHits > 0 && componentId === SEARCH_INDEX_IDS.VIDEOS) {
+      showVideosBanner();
+    }
+  }, [nbHits, componentId, showVideosBanner]);
+
   const SkeletonCard = getSkeletonCardFromTitle(title);
 
   const mappedHitsCards = useMemo(
@@ -202,6 +211,8 @@ SearchResults.propTypes = {
   translatedTitle: PropTypes.string,
   isPathwaySearchResults: PropTypes.bool,
   showBetaBadge: PropTypes.bool,
+  componentId: PropTypes.string.isRequired,
+  showVideosBanner: PropTypes.func,
 };
 
 SearchResults.defaultProps = {
@@ -213,6 +224,7 @@ SearchResults.defaultProps = {
   translatedTitle: undefined,
   isPathwaySearchResults: false,
   showBetaBadge: false,
+  showVideosBanner: () => {},
 };
 
 export default connectStateResults(SearchResults);
diff --git a/src/components/search/SearchVideo.jsx b/src/components/search/SearchVideo.jsx
@@ -3,16 +3,17 @@ import { Configure, Index } from 'react-instantsearch-dom';
 import { getConfig } from '@edx/frontend-platform/config';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { VIDEO_TITLE, NUM_RESULTS_VIDEO, CONTENT_TYPE_VIDEO } from './constants';
+import { SEARCH_INDEX_IDS } from '../../constants';
 import SearchResults from './SearchResults';
 import SearchVideoCard from './SearchVideoCard';
 
-const SearchVideo = ({ filter }) => {
+const SearchVideo = ({ filter, showVideosBanner }) => {
   const defaultFilter = `content_type:${CONTENT_TYPE_VIDEO} AND ${filter}`;
   const config = getConfig();
   const intl = useIntl();
 
   return (
-    <Index indexName={config.ALGOLIA_REPLICA_INDEX_NAME} indexId="search-videos">
+    <Index indexName={config.ALGOLIA_REPLICA_INDEX_NAME} indexId={SEARCH_INDEX_IDS.VIDEOS}>
       <Configure
         hitsPerPage={NUM_RESULTS_VIDEO}
         filters={defaultFilter}
@@ -28,6 +29,8 @@ const SearchVideo = ({ filter }) => {
             description: 'Translated title for the enterprise search page videos section.',
           })
         }
+        componentId={SEARCH_INDEX_IDS.VIDEOS}
+        showVideosBanner={showVideosBanner}
         showBetaBadge
       />
     </Index>
@@ -36,6 +39,11 @@ const SearchVideo = ({ filter }) => {
 
 SearchVideo.propTypes = {
   filter: PropTypes.string.isRequired,
+  showVideosBanner: PropTypes.func,
+};
+
+SearchVideo.defaultProps = {
+  showVideosBanner: () => {},
 };
 
 export default SearchVideo;
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -1,2 +1,3 @@
 export * from './course';
 export * from './subsidies';
+export * from './search';
diff --git a/src/constants/search.js b/src/constants/search.js
@@ -0,0 +1,6 @@
+export const SEARCH_INDEX_IDS = {
+  COURSE: 'search-courses',
+  PATHWAYS: 'search-pathways',
+  PROGRAMS: 'search-programs',
+  VIDEOS: 'search-videos',
+};