diff --git a/src/library-authoring/components/LibraryComponents.jsx b/src/library-authoring/components/LibraryComponents.jsx
index e9a44fdc2e..8c6ca549e2 100644
--- a/src/library-authoring/components/LibraryComponents.jsx
+++ b/src/library-authoring/components/LibraryComponents.jsx
@@ -36,6 +36,25 @@ const LibraryComponents = ({
fetchNextPage,
} = useLibraryComponents(libraryId, searchKeywords);
+ const { componentList, tagCounts } = useMemo(() => {
+ const result = variant === 'preview' ? hits.slice(0, 4) : hits;
+ const tagsCountsResult = {};
+ result.forEach((component) => {
+ if (!component.tags) {
+ tagsCountsResult[component.id] = 0;
+ } else {
+ tagsCountsResult[component.id] = (component.tags.level0?.length || 0)
+ + (component.tags.level1?.length || 0)
+ + (component.tags.level2?.length || 0)
+ + (component.tags.level3?.length || 0);
+ }
+ });
+ return {
+ componentList: result,
+ tagCounts: tagsCountsResult,
+ };
+ }, [hits]);
+
// TODO add this to LibraryContext
const { data: blockTypesData } = useLibraryBlockTypes(libraryId);
const blockTypes = useMemo(() => {
@@ -96,11 +115,6 @@ const LibraryComponents = ({
return searchKeywords === '' ? : ;
}
- let componentList = hits;
- if (variant === 'preview') {
- componentList = componentList.slice(0, 4);
- }
-
return (
- { showContent ? componentList.map((component) => {
- const tagCount = component.tags?.implicitCount || 0;
-
- return (
-
- );
- }) : }
+ { showContent ? componentList.map((component) => (
+
+ )) : }
{ showLoading && }
);
diff --git a/src/search-modal/data/api.js b/src/search-modal/data/api.js
index 13c3afadb0..e526546e69 100644
--- a/src/search-modal/data/api.js
+++ b/src/search-modal/data/api.js
@@ -86,21 +86,11 @@ function formatTagsFilter(tagsFilter) {
* @property {[{displayName: string}, ...Array<{displayName: string, usageKey: string}>]} breadcrumbs
* First one is the name of the course/library itself.
* After that is the name and usage key of any parent Section/Subsection/Unit/etc.
- * @property {ContentHitTags} tags
+ * @property {Record<'taxonomy'|'level0'|'level1'|'level2'|'level3', string[]>} tags
* @property {ContentDetails} [content]
* @property {{displayName: string, content: ContentDetails}} formatted Same fields with ... highlights
*/
-/**
- * @typedef {Object} ContentHitTags
- * @property {string[]} taxonomy
- * @property {string[]} level0
- * @property {string[]} level1
- * @property {string[]} level2
- * @property {string[]} level3
- * @property {number} implicitCount
- */
-
/**
* Convert search hits to camelCase
* @param {Record} hit A search result directly from Meilisearch