refactor: Calculate tagCount in LibraryComponents instead on serach i…

…ndex
open-craft · Jun 21, 2024 · 0843a1e · 0843a1e
1 parent c8bc5fc
commit 0843a1e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 30 deletions.
diff --git 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 === '' ? <NoComponents /> : <NoSearchResults />;
   }
 
-  let componentList = hits;
-  if (variant === 'preview') {
-    componentList = componentList.slice(0, 4);
-  }
-
   return (
     <CardGrid
       columnSizes={{
@@ -111,20 +125,16 @@ const LibraryComponents = ({
       }}
       hasEqualColumnHeights
     >
-      { showContent ? componentList.map((component) => {
-        const tagCount = component.tags?.implicitCount || 0;
-
-        return (
-          <ComponentCard
-            key={component.id}
-            title={component.displayName}
-            description={component.formatted.content?.htmlContent ?? ''}
-            tagCount={tagCount}
-            blockType={component.blockType}
-            blockTypeDisplayName={blockTypes[component.blockType]?.displayName ?? ''}
-          />
-        );
-      }) : <ComponentCardLoading />}
+      { showContent ? componentList.map((component) => (
+        <ComponentCard
+          key={component.id}
+          title={component.displayName}
+          description={component.formatted.content?.htmlContent ?? ''}
+          tagCount={tagCounts[component.id] || 0}
+          blockType={component.blockType}
+          blockTypeDisplayName={blockTypes[component.blockType]?.displayName ?? ''}
+        />
+      )) : <ComponentCardLoading />}
       { showLoading && <ComponentCardLoading /> }
     </CardGrid>
   );

diff --git 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 <mark>...</mark> 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<string, any>} hit A search result directly from Meilisearch