From da1c2e0bcf0268129b3f23b61d437014883020af Mon Sep 17 00:00:00 2001 From: XnpioChV Date: Thu, 20 Jun 2024 17:51:34 -0500 Subject: [PATCH] refactor: Create block-type-utils with block type constants --- .../add-component/AddComponent.jsx | 2 +- .../add-component-btn/AddComponentIcon.jsx | 2 +- src/course-unit/constants.js | 47 ------------- .../sequence-navigation/UnitIcon.jsx | 2 +- .../course-xblock/CourseXBlock.jsx | 2 +- src/generic/block-type-utils/constants.js | 68 +++++++++++++++++++ src/generic/block-type-utils/index.jsx | 19 ++++++ .../components/ComponentCard.jsx | 3 +- src/library-authoring/constants.js | 19 ------ src/library-authoring/utils.jsx | 7 -- src/search-modal/SearchResult.jsx | 2 +- src/search-modal/utils.jsx | 17 ----- 12 files changed, 93 insertions(+), 97 deletions(-) create mode 100644 src/generic/block-type-utils/constants.js create mode 100644 src/generic/block-type-utils/index.jsx delete mode 100644 src/library-authoring/constants.js delete mode 100644 src/library-authoring/utils.jsx delete mode 100644 src/search-modal/utils.jsx diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx index 78125366dc..9ef58df7bd 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_TYPES } from '../constants'; +import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants'; import ComponentModalView from './add-component-modals/ComponentModalView'; import AddComponentButton from './add-component-btn'; import messages from './messages'; 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 4ace3ea015..91cc5b09b1 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_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants'; +import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../../generic/block-type-utils/constants'; const AddComponentIcon = ({ type }) => { const icon = COMPONENT_TYPE_ICON_MAP[type] || EditNoteIcon; diff --git a/src/course-unit/constants.js b/src/course-unit/constants.js index b7e7bf5c6b..9ff040d63c 100644 --- a/src/course-unit/constants.js +++ b/src/course-unit/constants.js @@ -1,53 +1,6 @@ -import { - BackHand as BackHandIcon, - BookOpen as BookOpenIcon, - Edit as EditIcon, - EditNote as EditNoteIcon, - FormatListBulleted as FormatListBulletedIcon, - HelpOutline as HelpOutlineIcon, - LibraryAdd as LibraryIcon, - Lock as LockIcon, - QuestionAnswerOutline as QuestionAnswerOutlineIcon, - Science as ScienceIcon, - TextFields as TextFieldsIcon, - VideoCamera as VideoCameraIcon, -} from '@openedx/paragon/icons'; - import messages from './sidebar/messages'; import addComponentMessages from './add-component/messages'; -export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock']; - -export const COMPONENT_TYPES = { - advanced: 'advanced', - discussion: 'discussion', - library: 'library', - html: 'html', - openassessment: 'openassessment', - problem: 'problem', - video: 'video', - dragAndDrop: 'drag-and-drop-v2', -}; - -export const TYPE_ICONS_MAP = { - video: VideoCameraIcon, - other: BookOpenIcon, - vertical: FormatListBulletedIcon, - problem: EditIcon, - lock: LockIcon, -}; - -export const COMPONENT_TYPE_ICON_MAP = { - [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) => ({ release: intl.formatMessage(messages.releaseStatusTitle), released: intl.formatMessage(messages.releasedStatusTitle), diff --git a/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx b/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx index 69830e4bde..79cfc933b1 100644 --- a/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx +++ b/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import { Icon } from '@openedx/paragon'; import { BookOpen as BookOpenIcon } from '@openedx/paragon/icons'; -import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../constants'; +import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../../generic/block-type-utils/constants'; const UnitIcon = ({ type }) => { const icon = TYPE_ICONS_MAP[type] || BookOpenIcon; diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx index 88058ee5a5..8132812f54 100644 --- a/src/course-unit/course-xblock/CourseXBlock.jsx +++ b/src/course-unit/course-xblock/CourseXBlock.jsx @@ -16,7 +16,7 @@ import SortableItem from '../../generic/drag-helper/SortableItem'; import { scrollToElement } from '../../course-outline/utils'; import { COURSE_BLOCK_NAMES } from '../../constants'; import { copyToClipboard } from '../../generic/data/thunks'; -import { COMPONENT_TYPES } from '../constants'; +import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants'; import XBlockMessages from './xblock-messages/XBlockMessages'; import messages from './messages'; diff --git a/src/generic/block-type-utils/constants.js b/src/generic/block-type-utils/constants.js new file mode 100644 index 0000000000..6739470945 --- /dev/null +++ b/src/generic/block-type-utils/constants.js @@ -0,0 +1,68 @@ +import { + BackHand as BackHandIcon, + BookOpen as BookOpenIcon, + Edit as EditIcon, + EditNote as EditNoteIcon, + FormatListBulleted as FormatListBulletedIcon, + HelpOutline as HelpOutlineIcon, + LibraryAdd as LibraryIcon, + Lock as LockIcon, + QuestionAnswerOutline as QuestionAnswerOutlineIcon, + Science as ScienceIcon, + TextFields as TextFieldsIcon, + VideoCamera as VideoCameraIcon, + Folder, +} from '@openedx/paragon/icons'; + +export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock']; + +export const COMPONENT_TYPES = { + advanced: 'advanced', + discussion: 'discussion', + library: 'library', + html: 'html', + openassessment: 'openassessment', + problem: 'problem', + video: 'video', + dragAndDrop: 'drag-and-drop-v2', +}; + +export const TYPE_ICONS_MAP = { + video: VideoCameraIcon, + other: BookOpenIcon, + vertical: FormatListBulletedIcon, + problem: EditIcon, + lock: LockIcon, +}; + +export const COMPONENT_TYPE_ICON_MAP = { + [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 STRUCTURAL_TYPE_ICONS = { + vertical: TYPE_ICONS_MAP.vertical, + sequential: Folder, + chapter: Folder, +}; + +export const COMPONENT_TYPE_COLOR_MAP = { + [COMPONENT_TYPES.advanced]: 'bg-other', + [COMPONENT_TYPES.discussion]: 'bg-component', + [COMPONENT_TYPES.library]: 'bg-component', + [COMPONENT_TYPES.html]: 'bg-html', + [COMPONENT_TYPES.openassessment]: 'bg-component', + [COMPONENT_TYPES.problem]: 'bg-component', + [COMPONENT_TYPES.video]: 'bg-video', + [COMPONENT_TYPES.dragAndDrop]: 'bg-component', + vertical: 'bg-vertical', + sequential: 'bg-component', + chapter: 'bg-component', + collection: 'bg-collection', +}; diff --git a/src/generic/block-type-utils/index.jsx b/src/generic/block-type-utils/index.jsx new file mode 100644 index 0000000000..c5e2e3ca0b --- /dev/null +++ b/src/generic/block-type-utils/index.jsx @@ -0,0 +1,19 @@ +// @ts-check +import { + Article, +} from '@openedx/paragon/icons'; +import { + COMPONENT_TYPE_ICON_MAP, + STRUCTURAL_TYPE_ICONS, + COMPONENT_TYPE_COLOR_MAP +} from './constants' + +/** @param {string} blockType */ +export function getItemIcon(blockType) { + return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article; +} + +/** @param {string} blockType */ +export function getComponentColor(blockType) { + return COMPONENT_TYPE_COLOR_MAP[blockType] ?? 'bg-component'; +} diff --git a/src/library-authoring/components/ComponentCard.jsx b/src/library-authoring/components/ComponentCard.jsx index 7cc17bba4f..2529b1fd73 100644 --- a/src/library-authoring/components/ComponentCard.jsx +++ b/src/library-authoring/components/ComponentCard.jsx @@ -14,8 +14,7 @@ import { MoreVert } from '@openedx/paragon/icons'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; import messages from './messages'; import TagCount from '../../generic/tag-count'; -import getItemIcon from '../../search-modal/utils'; -import getComponentColor from '../utils'; +import { getItemIcon, getComponentColor } from '../../generic/block-type-utils'; const ComponentCardMenu = () => ( diff --git a/src/library-authoring/constants.js b/src/library-authoring/constants.js deleted file mode 100644 index c79996ca8c..0000000000 --- a/src/library-authoring/constants.js +++ /dev/null @@ -1,19 +0,0 @@ -// @ts-check -import { COMPONENT_TYPES } from '../course-unit/constants'; - -const COMPONENT_TYPE_COLOR_MAP = { - [COMPONENT_TYPES.advanced]: 'bg-other', - [COMPONENT_TYPES.discussion]: 'bg-component', - [COMPONENT_TYPES.library]: 'bg-component', - [COMPONENT_TYPES.html]: 'bg-html', - [COMPONENT_TYPES.openassessment]: 'bg-component', - [COMPONENT_TYPES.problem]: 'bg-component', - [COMPONENT_TYPES.video]: 'bg-video', - [COMPONENT_TYPES.dragAndDrop]: 'bg-component', - vertical: 'bg-vertical', - sequential: 'bg-component', - chapter: 'bg-component', - collection: 'bg-collection', -}; - -export default COMPONENT_TYPE_COLOR_MAP; diff --git a/src/library-authoring/utils.jsx b/src/library-authoring/utils.jsx deleted file mode 100644 index 7f3b83ccc3..0000000000 --- a/src/library-authoring/utils.jsx +++ /dev/null @@ -1,7 +0,0 @@ -// @ts-check -import COMPONENT_TYPE_COLOR_MAP from './constants'; - -/** @param {string} blockType */ -export default function getComponentColor(blockType) { - return COMPONENT_TYPE_COLOR_MAP[blockType] ?? 'bg-component'; -} diff --git a/src/search-modal/SearchResult.jsx b/src/search-modal/SearchResult.jsx index f7c287cbfb..1a3f4f9d8b 100644 --- a/src/search-modal/SearchResult.jsx +++ b/src/search-modal/SearchResult.jsx @@ -17,7 +17,7 @@ import { getStudioHomeData } from '../studio-home/data/selectors'; import { useSearchContext } from './manager/SearchManager'; import Highlight from './Highlight'; import messages from './messages'; -import getItemIcon from './utils'; +import { getItemIcon } from '../generic/block-type-utils'; /** * Returns the URL Suffix for library/library component hit diff --git a/src/search-modal/utils.jsx b/src/search-modal/utils.jsx deleted file mode 100644 index 82d2e22aea..0000000000 --- a/src/search-modal/utils.jsx +++ /dev/null @@ -1,17 +0,0 @@ -// @ts-check -import { - Article, - Folder, -} from '@openedx/paragon/icons'; -import { COMPONENT_TYPE_ICON_MAP, TYPE_ICONS_MAP } from '../course-unit/constants'; - -const STRUCTURAL_TYPE_ICONS = { - vertical: TYPE_ICONS_MAP.vertical, - sequential: Folder, - chapter: Folder, -}; - -/** @param {string} blockType */ -export default function getItemIcon(blockType) { - return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article; -}