From 0ec25b40f0a01577e6105f04fc95d1e87d832bf0 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Tue, 24 Sep 2024 22:18:34 -0500
Subject: [PATCH] refactor: Use useContentTaxonomyTagsData to get tagsCount

---
 .../component-info/ComponentManagement.tsx    | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/library-authoring/component-info/ComponentManagement.tsx b/src/library-authoring/component-info/ComponentManagement.tsx
index 8ca3c92fa3..042e0d2c18 100644
--- a/src/library-authoring/component-info/ComponentManagement.tsx
+++ b/src/library-authoring/component-info/ComponentManagement.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, Stack } from '@openedx/paragon';
@@ -7,6 +8,7 @@ import { useLibraryBlockMetadata } from '../data/apiHooks';
 import StatusWidget from '../generic/status-widget';
 import messages from './messages';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
+import { useContentTaxonomyTagsData } from '../../content-tags-drawer/data/apiHooks';
 
 interface ComponentManagementProps {
   usageKey: string;
@@ -14,6 +16,26 @@ interface ComponentManagementProps {
 const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
   const intl = useIntl();
   const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+  const { data: componentTags } = useContentTaxonomyTagsData(usageKey);
+
+  const tagsCount = React.useMemo(() => {
+    if (!componentTags) {
+      return 0;
+    }
+    let result = 0;
+    componentTags.taxonomies.forEach((taxonomy) => {
+      const countedTags : string[] = [];
+      taxonomy.tags.forEach((tagData) => {
+        tagData.lineage.forEach((tag) => {
+          if (!countedTags.includes(tag)) {
+            result += 1;
+            countedTags.push(tag);
+          }
+        });
+      });
+    });
+    return result;
+  }, [componentTags]);
 
   if (!componentMetadata) {
     return null;
@@ -31,7 +53,7 @@ const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
           title={(
             <Stack gap={1} direction="horizontal">
               <Icon src={Tag} />
-              {intl.formatMessage(messages.manageTabTagsTitle, { count: componentMetadata.tagsCount })}
+              {intl.formatMessage(messages.manageTabTagsTitle, { count: tagsCount })}
             </Stack>
           )}
           className="border-0"