From 2ab3e43c086b9eab47305acc3e56a499129b4d2f Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Thu, 11 Jul 2024 11:31:56 +0200
Subject: [PATCH] feat: Use intl library section titles

---
 src/library-authoring/LibraryHome.tsx          |  7 +++++--
 .../LibraryRecentlyModified.tsx                |  5 ++++-
 src/library-authoring/messages.ts              | 18 ++++++++++++++----
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/library-authoring/LibraryHome.tsx b/src/library-authoring/LibraryHome.tsx
index da9a955f5d..11abf861a8 100644
--- a/src/library-authoring/LibraryHome.tsx
+++ b/src/library-authoring/LibraryHome.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Stack } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { NoComponents, NoSearchResults } from './EmptyStates';
 import { useSearchContext } from '../search-manager';
@@ -7,6 +8,7 @@ import LibraryCollections from './LibraryCollections';
 import LibraryComponents from './components/LibraryComponents';
 import LibrarySection from './components/LibrarySection';
 import LibraryRecentlyModified from './LibraryRecentlyModified';
+import messages from './messages';
 
 type LibraryHomeProps = {
   libraryId: string,
@@ -15,6 +17,7 @@ type LibraryHomeProps = {
 };
 
 const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps) => {
+  const intl = useIntl();
   const {
     totalHits: componentCount,
     searchKeywords,
@@ -37,14 +40,14 @@ const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps)
         || (
           <>
             <LibrarySection
-              title={`Collections (${collectionCount})`}
+              title={intl.formatMessage(messages.collectionsSectionTitle, { collectionCount })}
               contentCount={collectionCount}
               // TODO: add viewAllAction here once collections implemented
             >
               <LibraryCollections />
             </LibrarySection>
             <LibrarySection
-              title={`Components (${componentCount})`}
+              title={intl.formatMessage(messages.componentsSectionTitle, { componentCount })}
               contentCount={componentCount}
               viewAllAction={() => handleTabChange(tabList.components)}
             >
diff --git a/src/library-authoring/LibraryRecentlyModified.tsx b/src/library-authoring/LibraryRecentlyModified.tsx
index d719975a94..56fd16b269 100644
--- a/src/library-authoring/LibraryRecentlyModified.tsx
+++ b/src/library-authoring/LibraryRecentlyModified.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { SearchContextProvider, useSearchContext } from '../search-manager';
 import { SearchSortOption } from '../search-manager/data/api';
 import LibraryComponents from './components/LibraryComponents';
 import LibrarySection from './components/LibrarySection';
+import messages from './messages';
 
 const RecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => {
+  const intl = useIntl();
   const { totalHits: componentCount } = useSearchContext();
 
   return componentCount > 0
     ? (
       <LibrarySection
-        title="Recently Modified"
+        title={intl.formatMessage(messages.recentlyModifiedSectionTitle)}
         contentCount={componentCount}
       >
         <LibraryComponents libraryId={libraryId} variant="preview" />
diff --git a/src/library-authoring/messages.ts b/src/library-authoring/messages.ts
index 8e59f078f5..613e0b9e3c 100644
--- a/src/library-authoring/messages.ts
+++ b/src/library-authoring/messages.ts
@@ -70,10 +70,20 @@ const messages = defineMessages({
     defaultMessage: 'This is a placeholder for the create library form. This will be replaced with the actual form.',
     description: 'Temp placeholder for the create library container. This will be replaced with the new library form.',
   },
-  recentComponentsTempPlaceholder: {
-    id: 'course-authoring.library-authoring.recent-components-temp-placeholder',
-    defaultMessage: 'Recently modified components and collections will be displayed here.',
-    description: 'Temp placeholder for the recent components container. This will be replaced with the actual list.',
+  recentlyModifiedSectionTitle: {
+    id: 'course-authoring.library-authoring.recently-modified-section-title',
+    defaultMessage: 'Recently Modified',
+    description: 'Title for the Recently Modified section in library home',
+  },
+  collectionsSectionTitle: {
+    id: 'course-authoring.library-authoring.collections-section-title',
+    defaultMessage: 'Collections ({collectionCount})',
+    description: 'Title for the Recently Modified section in library home',
+  },
+  componentsSectionTitle: {
+    id: 'course-authoring.library-authoring.recently-modified-section-title',
+    defaultMessage: 'Components ({componentCount})',
+    description: 'Title for the Recently Modified section in library home',
   },
 });