From 9ff7048b19637a97e9e3596ba3a165837513d8c1 Mon Sep 17 00:00:00 2001 From: ihor-romaniuk Date: Mon, 11 Mar 2024 11:33:08 +0100 Subject: [PATCH] refactor: constant name and replace hardcoded string with constant --- .../add-component/AddComponent.jsx | 24 +++++++------- .../add-component/AddComponent.test.jsx | 32 +++++++++---------- .../add-component-btn/AddComponentIcon.jsx | 4 +-- src/course-unit/constants.js | 18 +++++------ .../course-xblock/CourseXBlock.jsx | 8 ++--- .../course-xblock/CourseXBlock.test.jsx | 8 ++--- 6 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx index 57a94ce422..78125366dc 100644 --- a/src/course-unit/add-component/AddComponent.jsx +++ b/src/course-unit/add-component/AddComponent.jsx @@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import { useToggle } from '@openedx/paragon'; import { getCourseSectionVertical } from '../data/selectors'; -import { COMPONENT_ICON_TYPES } from '../constants'; +import { COMPONENT_TYPES } from '../constants'; import ComponentModalView from './add-component-modals/ComponentModalView'; import AddComponentButton from './add-component-btn'; import messages from './messages'; @@ -20,32 +20,32 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => { const handleCreateNewXBlock = (type, moduleName) => { switch (type) { - case COMPONENT_ICON_TYPES.discussion: - case COMPONENT_ICON_TYPES.dragAndDrop: + case COMPONENT_TYPES.discussion: + case COMPONENT_TYPES.dragAndDrop: handleCreateNewCourseXBlock({ type, parentLocator: blockId }); break; - case COMPONENT_ICON_TYPES.problem: - case COMPONENT_ICON_TYPES.video: + case COMPONENT_TYPES.problem: + case COMPONENT_TYPES.video: handleCreateNewCourseXBlock({ type, parentLocator: blockId }, ({ courseKey, locator }) => { navigate(`/course/${courseKey}/editor/${type}/${locator}`); }); break; // TODO: The library functional will be a bit different of current legacy (CMS) // behaviour and this ticket is on hold (blocked by other development team). - case COMPONENT_ICON_TYPES.library: + case COMPONENT_TYPES.library: handleCreateNewCourseXBlock({ type, category: 'library_content', parentLocator: blockId }); break; - case COMPONENT_ICON_TYPES.advanced: + case COMPONENT_TYPES.advanced: handleCreateNewCourseXBlock({ type: moduleName, category: moduleName, parentLocator: blockId, }); break; - case COMPONENT_ICON_TYPES.openassessment: + case COMPONENT_TYPES.openassessment: handleCreateNewCourseXBlock({ boilerplate: moduleName, category: type, parentLocator: blockId, }); break; - case COMPONENT_ICON_TYPES.html: + case COMPONENT_TYPES.html: handleCreateNewCourseXBlock({ type, boilerplate: moduleName, @@ -75,21 +75,21 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => { } switch (type) { - case COMPONENT_ICON_TYPES.advanced: + case COMPONENT_TYPES.advanced: modalParams = { open: openAdvanced, close: closeAdvanced, isOpen: isOpenAdvanced, }; break; - case COMPONENT_ICON_TYPES.html: + case COMPONENT_TYPES.html: modalParams = { open: openHtml, close: closeHtml, isOpen: isOpenHtml, }; break; - case COMPONENT_ICON_TYPES.openassessment: + case COMPONENT_TYPES.openassessment: modalParams = { open: openOpenAssessment, close: closeOpenAssessment, diff --git a/src/course-unit/add-component/AddComponent.test.jsx b/src/course-unit/add-component/AddComponent.test.jsx index b2e01a16ad..f603984895 100644 --- a/src/course-unit/add-component/AddComponent.test.jsx +++ b/src/course-unit/add-component/AddComponent.test.jsx @@ -14,7 +14,7 @@ import { executeThunk } from '../../utils'; import { fetchCourseSectionVerticalData } from '../data/thunk'; import { getCourseSectionVerticalApiUrl } from '../data/api'; import { courseSectionVerticalMock } from '../__mocks__'; -import { COMPONENT_ICON_TYPES } from '../constants'; +import { COMPONENT_TYPES } from '../constants'; import AddComponent from './AddComponent'; import messages from './messages'; @@ -88,7 +88,7 @@ describe('', () => { ...courseSectionVerticalMock, component_templates: [ ...courseSectionVerticalMock.component_templates.map((component) => { - if (component.type === 'discussion') { + if (component.type === COMPONENT_TYPES.discussion) { return { ...component, templates: [], @@ -104,7 +104,7 @@ describe('', () => { const { queryByRole, getByRole } = renderComponent(); Object.keys(componentTemplates).map((component) => { - if (componentTemplates[component].type === 'discussion') { + if (componentTemplates[component].type === COMPONENT_TYPES.discussion) { return expect(queryByRole('button', { name: new RegExp(`${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`, 'i'), })).not.toBeInTheDocument(); @@ -153,7 +153,7 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled(); expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', - type: 'discussion', + type: COMPONENT_TYPES.discussion, }); }); @@ -168,7 +168,7 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled(); expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', - type: 'drag-and-drop-v2', + type: COMPONENT_TYPES.dragAndDrop, }); }); @@ -183,7 +183,7 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled(); expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', - type: 'problem', + type: COMPONENT_TYPES.problem, }, expect.any(Function)); }); @@ -198,7 +198,7 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled(); expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', - type: 'video', + type: COMPONENT_TYPES.video, }, expect.any(Function)); }); @@ -214,7 +214,7 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', category: 'library_content', - type: 'library', + type: COMPONENT_TYPES.library, }); }); @@ -249,7 +249,7 @@ describe('', () => { await waitFor(() => { expect(getByText(/Add advanced component/i)).toBeInTheDocument(); componentTemplates.forEach((componentTemplate) => { - if (componentTemplate.type === COMPONENT_ICON_TYPES.advanced) { + if (componentTemplate.type === COMPONENT_TYPES.advanced) { componentTemplate.templates.forEach((template) => { expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument(); }); @@ -270,7 +270,7 @@ describe('', () => { await waitFor(() => { expect(getByText(/Add text component/i)).toBeInTheDocument(); componentTemplates.forEach((componentTemplate) => { - if (componentTemplate.type === COMPONENT_ICON_TYPES.html) { + if (componentTemplate.type === COMPONENT_TYPES.html) { componentTemplate.templates.forEach((template) => { expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument(); }); @@ -292,7 +292,7 @@ describe('', () => { await waitFor(() => { expect(getByText(/Add open response component/i)).toBeInTheDocument(); componentTemplates.forEach((componentTemplate) => { - if (componentTemplate.type === COMPONENT_ICON_TYPES.openassessment) { + if (componentTemplate.type === COMPONENT_TYPES.openassessment) { componentTemplate.templates.forEach((template) => { expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument(); }); @@ -348,8 +348,8 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled(); expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', - type: 'html', - boilerplate: 'html', + type: COMPONENT_TYPES.html, + boilerplate: COMPONENT_TYPES.html, }, expect.any(Function)); }); @@ -374,7 +374,7 @@ describe('', () => { expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled(); expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({ parentLocator: '123', - category: 'openassessment', + category: COMPONENT_TYPES.openassessment, boilerplate: 'peer-assessment', }); }); @@ -388,7 +388,7 @@ describe('', () => { ...courseSectionVerticalMock, component_templates: [ ...courseSectionVerticalMock.component_templates.map((component) => { - if (component.type === 'advanced') { + if (component.type === COMPONENT_TYPES.advanced) { return { ...component, support_legend: { show_legend: false }, @@ -431,7 +431,7 @@ describe('', () => { ...courseSectionVerticalMock, component_templates: [ ...courseSectionVerticalMock.component_templates.map((component) => { - if (component.type === 'advanced') { + if (component.type === COMPONENT_TYPES.advanced) { return { ...component, support_legend: { show_legend: true }, diff --git a/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx b/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx index 6d0f9c162f..4ace3ea015 100644 --- a/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx +++ b/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import { Icon } from '@openedx/paragon'; import { EditNote as EditNoteIcon } from '@openedx/paragon/icons'; -import { COMPONENT_ICON_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants'; +import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants'; const AddComponentIcon = ({ type }) => { const icon = COMPONENT_TYPE_ICON_MAP[type] || EditNoteIcon; @@ -11,7 +11,7 @@ const AddComponentIcon = ({ type }) => { }; AddComponentIcon.propTypes = { - type: PropTypes.oneOf(Object.values(COMPONENT_ICON_TYPES)).isRequired, + type: PropTypes.oneOf(Object.values(COMPONENT_TYPES)).isRequired, }; export default AddComponentIcon; diff --git a/src/course-unit/constants.js b/src/course-unit/constants.js index 2f9a12c0a1..b7d884e313 100644 --- a/src/course-unit/constants.js +++ b/src/course-unit/constants.js @@ -34,7 +34,7 @@ export const CLIPBOARD_STATUS = { error: 'error', }; -export const COMPONENT_ICON_TYPES = { +export const COMPONENT_TYPES = { advanced: 'advanced', discussion: 'discussion', library: 'library', @@ -54,14 +54,14 @@ export const TYPE_ICONS_MAP = { }; export const COMPONENT_TYPE_ICON_MAP = { - [COMPONENT_ICON_TYPES.advanced]: ScienceIcon, - [COMPONENT_ICON_TYPES.discussion]: QuestionAnswerOutlineIcon, - [COMPONENT_ICON_TYPES.library]: LibraryIcon, - [COMPONENT_ICON_TYPES.html]: TextFieldsIcon, - [COMPONENT_ICON_TYPES.openassessment]: EditNoteIcon, - [COMPONENT_ICON_TYPES.problem]: HelpOutlineIcon, - [COMPONENT_ICON_TYPES.video]: VideoCameraIcon, - [COMPONENT_ICON_TYPES.dragAndDrop]: BackHandIcon, + [COMPONENT_TYPES.advanced]: ScienceIcon, + [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon, + [COMPONENT_TYPES.library]: LibraryIcon, + [COMPONENT_TYPES.html]: TextFieldsIcon, + [COMPONENT_TYPES.openassessment]: EditNoteIcon, + [COMPONENT_TYPES.problem]: HelpOutlineIcon, + [COMPONENT_TYPES.video]: VideoCameraIcon, + [COMPONENT_TYPES.dragAndDrop]: BackHandIcon, }; export const getUnitReleaseStatus = (intl) => ({ diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx index 4bee69baf6..2503dfcbbd 100644 --- a/src/course-unit/course-xblock/CourseXBlock.jsx +++ b/src/course-unit/course-xblock/CourseXBlock.jsx @@ -15,7 +15,7 @@ import { scrollToElement } from '../../course-outline/utils'; import { COURSE_BLOCK_NAMES } from '../../constants'; import { getCanEdit, getCourseId } from '../data/selectors'; import { copyToClipboard } from '../data/thunk'; -import { COMPONENT_ICON_TYPES } from '../constants'; +import { COMPONENT_TYPES } from '../constants'; import XBlockContent from './xblock-content/XBlockContent'; import XBlockMessages from './xblock-messages/XBlockMessages'; import RenderErrorAlert from './render-error-alert'; @@ -54,9 +54,9 @@ const CourseXBlock = ({ const handleEdit = () => { switch (type) { - case COMPONENT_ICON_TYPES.html: - case COMPONENT_ICON_TYPES.problem: - case COMPONENT_ICON_TYPES.video: + case COMPONENT_TYPES.html: + case COMPONENT_TYPES.problem: + case COMPONENT_TYPES.video: navigate(`/course/${courseId}/editor/${type}/${id}`); break; default: diff --git a/src/course-unit/course-xblock/CourseXBlock.test.jsx b/src/course-unit/course-xblock/CourseXBlock.test.jsx index e473ee3b67..e588fc8701 100644 --- a/src/course-unit/course-xblock/CourseXBlock.test.jsx +++ b/src/course-unit/course-xblock/CourseXBlock.test.jsx @@ -16,7 +16,7 @@ import { getCourseSectionVerticalApiUrl, getXBlockBaseApiUrl } from '../data/api import { fetchCourseSectionVerticalData } from '../data/thunk'; import { executeThunk } from '../../utils'; import { getCourseId } from '../data/selectors'; -import { COMPONENT_ICON_TYPES, PUBLISH_TYPES } from '../constants'; +import { COMPONENT_TYPES, PUBLISH_TYPES } from '../constants'; import { courseSectionVerticalMock, courseVerticalChildrenMock } from '../__mocks__'; import renderErrorAlertMessages from './render-error-alert/messages'; import CourseXBlock from './CourseXBlock'; @@ -253,7 +253,7 @@ describe('', () => { describe('edit', () => { it('navigates to editor page on edit HTML xblock', () => { const { getByText, getByRole } = renderComponent({ - type: COMPONENT_ICON_TYPES.html, + type: COMPONENT_TYPES.html, }); const editButton = getByRole('button', { name: messages.blockAltButtonEdit.defaultMessage }); @@ -267,7 +267,7 @@ describe('', () => { it('navigates to editor page on edit Video xblock', () => { const { getByText, getByRole } = renderComponent({ - type: COMPONENT_ICON_TYPES.video, + type: COMPONENT_TYPES.video, }); const editButton = getByRole('button', { name: messages.blockAltButtonEdit.defaultMessage }); @@ -281,7 +281,7 @@ describe('', () => { it('navigates to editor page on edit Problem xblock', () => { const { getByText, getByRole } = renderComponent({ - type: COMPONENT_ICON_TYPES.problem, + type: COMPONENT_TYPES.problem, }); const editButton = getByRole('button', { name: messages.blockAltButtonEdit.defaultMessage });