feat: use search manager

open-craft · Jun 25, 2024 · af011f4 · af011f4
1 parent 5687b76
commit af011f4
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 44 deletions.
diff --git a/src/library-authoring/LibraryAuthoringPage.jsx b/src/library-authoring/LibraryAuthoringPage.jsx
@@ -15,6 +15,12 @@ import Loading from '../generic/Loading';
 import SubHeader from '../generic/sub-header/SubHeader';
 import Header from '../header';
 import NotFoundAlert from '../generic/NotFoundAlert';
+import { SearchContextProvider } from '../search-modal/manager/SearchManager';
+import SearchKeywordsField from '../search-modal/SearchKeywordsField';
+import ClearFiltersButton from '../search-modal/ClearFiltersButton';
+import FilterByBlockType from '../search-modal/FilterByBlockType';
+import FilterByTags from '../search-modal/FilterByTags';
+import Stats from '../search-modal/Stats';
 import LibraryComponents from './components/LibraryComponents';
 import LibraryCollections from './LibraryCollections';
 import LibraryHome from './LibraryHome';
@@ -87,46 +93,52 @@ const LibraryAuthoringPage = () => {
         contentId={libraryId}
         isLibrary
       />
-      <Container size="xl" className="p-4 mt-3">
-        <SubHeader
-          title={<SubHeaderTitle title={libraryData.title} />}
-          subtitle={intl.formatMessage(messages.headingSubtitle)}
-        />
-        <SearchField
-          value={searchKeywords}
-          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-          onChange={(value) => setSearchKeywords(value)}
-          className="w-50"
-        />
-        <Tabs
-          variant="tabs"
-          activeKey={tabKey}
-          onSelect={handleTabChange}
-          className="my-3"
-        >
-          <Tab eventKey={TAB_LIST.home} title="Home" />
-          <Tab eventKey={TAB_LIST.components} title="Components" />
-          <Tab eventKey={TAB_LIST.collections} title="Collections" />
-        </Tabs>
-        <Routes>
-          <Route
-            path={TAB_LIST.home}
-            element={<LibraryHome libraryId={libraryId} filter={{ searchKeywords }} />}
+      <SearchContextProvider
+        extraFilter={`context_key = "${libraryId}"`}
+      >
+        <Container size="xl" className="p-4 mt-3">
+          <SubHeader
+            title={<SubHeaderTitle title={libraryData.title} />}
+            subtitle={intl.formatMessage(messages.headingSubtitle)}
           />
-          <Route
-            path={TAB_LIST.components}
-            element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} variant="full" />}
-          />
-          <Route
-            path={TAB_LIST.collections}
-            element={<LibraryCollections />}
-          />
-          <Route
-            path="*"
-            element={<NotFoundAlert />}
-          />
-        </Routes>
-      </Container>
+          <SearchKeywordsField className="w-50" />
+          <div className="d-flex mt-3 align-items-center">
+            <FilterByBlockType />
+            <FilterByTags />
+            <ClearFiltersButton />
+            <div className="flex-grow-1" />
+            <div className="text-muted x-small align-middle"><Stats /></div>
+          </div>
+          <Tabs
+            variant="tabs"
+            activeKey={tabKey}
+            onSelect={handleTabChange}
+            className="my-3"
+          >
+            <Tab eventKey={TAB_LIST.home} title="Home" />
+            <Tab eventKey={TAB_LIST.components} title="Components" />
+            <Tab eventKey={TAB_LIST.collections} title="Collections" />
+          </Tabs>
+          <Routes>
+            <Route
+              path={TAB_LIST.home}
+              element={<LibraryHome libraryId={libraryId} filter={{ searchKeywords }} />}
+            />
+            <Route
+              path={TAB_LIST.components}
+              element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} variant="full" />}
+            />
+            <Route
+              path={TAB_LIST.collections}
+              element={<LibraryCollections />}
+            />
+            <Route
+              path="*"
+              element={<NotFoundAlert />}
+            />
+          </Routes>
+        </Container>
+      </SearchContextProvider>
       <StudioFooter />
     </>
   );

diff --git a/src/library-authoring/LibraryHome.jsx b/src/library-authoring/LibraryHome.jsx
@@ -7,6 +7,7 @@ import {
 } from '@openedx/paragon';
 
 import { NoComponents, NoSearchResults } from './EmptyStates';
+import { useSearchContext } from '../search-modal/manager/SearchManager';
 import LibraryCollections from './LibraryCollections';
 import LibraryComponents from './components/LibraryComponents';
 import { useLibraryComponentCount } from './data/apiHook';
@@ -39,7 +40,12 @@ const Section = ({ title, children }) => (
  */
 const LibraryHome = ({ libraryId, filter }) => {
   const { searchKeywords } = filter;
-  const { componentCount, collectionCount } = useLibraryComponentCount(libraryId, searchKeywords);
+
+  const {
+    totalHits: componentCount,
+  } = useSearchContext();
+
+  const collectionCount = 0;
 
   if (componentCount === 0) {
     return searchKeywords === '' ? <NoComponents /> : <NoSearchResults />;

diff --git a/src/library-authoring/components/LibraryComponents.jsx b/src/library-authoring/components/LibraryComponents.jsx
@@ -1,10 +1,11 @@
 // @ts-check
 /* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
-
 import { CardGrid } from '@openedx/paragon';
+
+import { useSearchContext } from '../../search-modal/manager/SearchManager';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
-import { useLibraryBlockTypes, useLibraryComponentCount, useLibraryComponents } from '../data/apiHook';
+import { useLibraryBlockTypes } from '../data/apiHook';
 import { ComponentCard, ComponentCardLoading } from './ComponentCard';
 
 /**
@@ -27,14 +28,14 @@ const LibraryComponents = ({
   filter: { searchKeywords },
   variant,
 }) => {
-  const { componentCount } = useLibraryComponentCount(libraryId, searchKeywords);
   const {
     hits,
+    totalHists: componentCount,
     isFetching,
     isFetchingNextPage,
     hasNextPage,
     fetchNextPage,
-  } = useLibraryComponents(libraryId, searchKeywords);
+  } = useSearchContext();
 
   const { componentList, tagCounts } = useMemo(() => {
     const result = variant === 'preview' ? hits.slice(0, 4) : hits;