feat: Use intl library section titles

openedx · Jul 11, 2024 · 2ab3e43 · 2ab3e43
1 parent 9173cf5
commit 2ab3e43
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/library-authoring/LibraryHome.tsx b/src/library-authoring/LibraryHome.tsx
@@ -1,12 +1,14 @@
 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';
 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
@@ -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
@@ -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',
   },
 });