feat: use translation file

edx · Jul 18, 2023 · 52d31fc · 52d31fc
1 parent dcb2a6a
commit 52d31fc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/src/pages/ExamsPage/components/ExamSelection.jsx b/src/pages/ExamsPage/components/ExamSelection.jsx
@@ -6,23 +6,19 @@ import {
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
+import messages from '../messages';
+
 const ExamSelection = ({ exams, onSelect }) => {
   const { formatMessage } = useIntl();
   const [searchText, setSearchText] = useState('');
 
-  const placeholderMessage = formatMessage({
-    id: 'ExamSelection.select_exam_placeholder',
-    defaultMessage: 'Search for an exam...',
-    description: 'Placeholder message for the exam selection dropdown',
-  });
-
   const getMenuItems = () => {
     const menuItems = [
       <MenuItem
         key={0}
         as={SearchField}
         onChange={setSearchText}
-        placeholder={placeholderMessage}
+        placeholder={formatMessage(messages.examSelectPlaceholder)}
         onSubmit={() => {}}
       />,
     ];
@@ -36,11 +32,7 @@ const ExamSelection = ({ exams, onSelect }) => {
   return (
     <div data-testid="exam_selection">
       <SelectMenu
-        defaultMessage={formatMessage({
-          id: 'ExamSelection.select_exam',
-          defaultMessage: 'Select an exam',
-          description: 'Default message for the exam selection dropdown',
-        })}
+        defaultMessage={formatMessage(messages.examSelectDropdownLabel)}
       >
         { getMenuItems() }
       </SelectMenu>

diff --git a/src/pages/ExamsPage/index.scss b/src/pages/ExamsPage/index.scss
@@ -11,4 +11,4 @@
 .pgn__searchfield.has-focus:not(.pgn__searchfield--external)::after {
   border: none;
   width: 0px;
-}
+}
diff --git a/src/pages/ExamsPage/messages.js b/src/pages/ExamsPage/messages.js
@@ -11,6 +11,16 @@ const messages = defineMessages({
     defaultMessage: 'Review Dashboard',
     description: 'Title for the review dashboard tab',
   },
+  examSelectPlaceholder: {
+    id: 'ExamSelection.select_exam_placeholder',
+    defaultMessage: 'Search for an exam...',
+    description: 'Placeholder message for the exam selection dropdown',
+  },
+  examSelectDropdownLabel: {
+    id: 'ExamSelection.select_exam',
+    defaultMessage: 'Select an exam',
+    description: 'Default message for the exam selection dropdown',
+  },
 });
 
 export default messages;