From 642b4e40529cebc980b8c679e7bc66a6a69ac640 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Tue, 5 Mar 2024 21:09:18 +0200 Subject: [PATCH] refactor: refactoring after review --- src/course-unit/CourseUnit.jsx | 2 +- src/course-unit/CourseUnit.scss | 2 +- src/course-unit/CourseUnit.test.jsx | 4 ++-- .../__mocks__/courseVerticalChildren.js | 4 ++-- src/course-unit/constants.js | 2 +- .../{CourseXblock.scss => CourseXBlock.scss} | 0 .../sidebar/components/SidebarBody.jsx | 8 ++++---- .../sidebar/components/SidebarHeader.jsx | 10 +++++----- .../components/sidebar-footer/index.jsx | 8 ++++---- src/course-unit/sidebar/index.jsx | 20 +++++++++---------- src/course-unit/sidebar/utils.js | 12 +++++------ 11 files changed, 36 insertions(+), 36 deletions(-) rename src/course-unit/course-xblock/{CourseXblock.scss => CourseXBlock.scss} (100%) diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx index 48d91978a9..8a117abab3 100644 --- a/src/course-unit/CourseUnit.jsx +++ b/src/course-unit/CourseUnit.jsx @@ -124,7 +124,7 @@ const CourseUnit = ({ courseId }) => { - + diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss index 16d588f44e..270691ecae 100644 --- a/src/course-unit/CourseUnit.scss +++ b/src/course-unit/CourseUnit.scss @@ -1,5 +1,5 @@ @import "./breadcrumbs/Breadcrumbs"; @import "./course-sequence/CourseSequence"; @import "./add-component/AddComponent"; -@import "./course-xblock/CourseXblock"; +@import "./course-xblock/CourseXBlock"; @import "./sidebar/Sidebar"; diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx index d197e75e69..233bb63cc1 100644 --- a/src/course-unit/CourseUnit.test.jsx +++ b/src/course-unit/CourseUnit.test.jsx @@ -51,7 +51,7 @@ const courseId = '123'; const blockId = '567890'; const unitDisplayName = courseUnitIndexMock.metadata.display_name; const mockedUsedNavigate = jest.fn(); -const userName = 'edx'; +const userName = 'openedx'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -719,7 +719,7 @@ describe('', () => { expect(discardChangesBtn).not.toBeInTheDocument(); }); - it('checks whether xblock is removed when the corresponding delete button is clicked and sidebar is the updated', async () => { + it('checks whether xblock is removed when the corresponding delete button is clicked and the sidebar is the updated', async () => { const { getByText, getAllByLabelText, diff --git a/src/course-unit/__mocks__/courseVerticalChildren.js b/src/course-unit/__mocks__/courseVerticalChildren.js index 8c3651ba6c..d7cc9bf611 100644 --- a/src/course-unit/__mocks__/courseVerticalChildren.js +++ b/src/course-unit/__mocks__/courseVerticalChildren.js @@ -2,12 +2,12 @@ module.exports = { children: [ { name: 'Discussion', - block_id: 'block-v1:edX+L153+3T2023+type@discussion+block@fecd20842dd24f50bdc06643e791b013', + block_id: 'block-v1:OpenedX+L153+3T2023+type@discussion+block@fecd20842dd24f50bdc06643e791b013', block_type: 'discussion', }, { name: 'Drag and Drop', - block_id: 'block-v1:edX+L153+3T2023+type@drag-and-drop-v2+block@b33cf1f6df4c41639659bc91132eeb02', + block_id: 'block-v1:OpenedX+L153+3T2023+type@drag-and-drop-v2+block@b33cf1f6df4c41639659bc91132eeb02', block_type: 'drag-and-drop-v2', }, ], diff --git a/src/course-unit/constants.js b/src/course-unit/constants.js index c32d123796..1351689a36 100644 --- a/src/course-unit/constants.js +++ b/src/course-unit/constants.js @@ -58,7 +58,7 @@ export const UNIT_VISIBILITY_STATES = { ready: 'ready', }; -export const COLORS = { +export const ICON_COLOR_VARIANTS = { BLACK: '#000', GREEN: '#0D7D4D', }; diff --git a/src/course-unit/course-xblock/CourseXblock.scss b/src/course-unit/course-xblock/CourseXBlock.scss similarity index 100% rename from src/course-unit/course-xblock/CourseXblock.scss rename to src/course-unit/course-xblock/CourseXBlock.scss diff --git a/src/course-unit/sidebar/components/SidebarBody.jsx b/src/course-unit/sidebar/components/SidebarBody.jsx index 3b24fd5210..679384377d 100644 --- a/src/course-unit/sidebar/components/SidebarBody.jsx +++ b/src/course-unit/sidebar/components/SidebarBody.jsx @@ -8,7 +8,7 @@ import { getPublishInfo } from '../utils'; import messages from '../messages'; import ReleaseInfoComponent from './ReleaseInfoComponent'; -const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => { +const SidebarBody = ({ releaseLabel, displayUnitLocation, locationId }) => { const intl = useIntl(); const { editedOn, @@ -21,7 +21,7 @@ const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => { return ( - {isDisplayUnitLocation ? ( + {displayUnitLocation ? (
{intl.formatMessage(messages.unitLocationTitle)} @@ -53,12 +53,12 @@ const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => { SidebarBody.propTypes = { releaseLabel: PropTypes.string.isRequired, - isDisplayUnitLocation: PropTypes.bool, + displayUnitLocation: PropTypes.bool, locationId: PropTypes.string, }; SidebarBody.defaultProps = { - isDisplayUnitLocation: false, + displayUnitLocation: false, locationId: null, }; diff --git a/src/course-unit/sidebar/components/SidebarHeader.jsx b/src/course-unit/sidebar/components/SidebarHeader.jsx index 188ad15a0c..b6b6feda03 100644 --- a/src/course-unit/sidebar/components/SidebarHeader.jsx +++ b/src/course-unit/sidebar/components/SidebarHeader.jsx @@ -7,14 +7,14 @@ import { getCourseUnitData } from '../../data/selectors'; import { getIconVariant } from '../utils'; import messages from '../messages'; -const SidebarHeader = ({ title, visibilityState, isDisplayUnitLocation }) => { +const SidebarHeader = ({ title, visibilityState, displayUnitLocation }) => { const intl = useIntl(); const { hasChanges, published } = useSelector(getCourseUnitData); const { iconSrc, colorVariant } = getIconVariant(visibilityState, published, hasChanges); return ( - {!isDisplayUnitLocation && ( + {!displayUnitLocation && ( { /> )}

- {isDisplayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title} + {displayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title}

); @@ -31,11 +31,11 @@ const SidebarHeader = ({ title, visibilityState, isDisplayUnitLocation }) => { SidebarHeader.propTypes = { title: PropTypes.string.isRequired, visibilityState: PropTypes.string.isRequired, - isDisplayUnitLocation: PropTypes.bool, + displayUnitLocation: PropTypes.bool, }; SidebarHeader.defaultProps = { - isDisplayUnitLocation: false, + displayUnitLocation: false, }; export default SidebarHeader; diff --git a/src/course-unit/sidebar/components/sidebar-footer/index.jsx b/src/course-unit/sidebar/components/sidebar-footer/index.jsx index 36387a08e1..ee1e816bad 100644 --- a/src/course-unit/sidebar/components/sidebar-footer/index.jsx +++ b/src/course-unit/sidebar/components/sidebar-footer/index.jsx @@ -12,14 +12,14 @@ const SidebarFooter = ({ handlePublishing, openDiscardModal, visibleToStaffOnly, - isDisplayUnitLocation, + displayUnitLocation, }) => { const intl = useIntl(); return ( - {isDisplayUnitLocation ? ( + {displayUnitLocation ? ( {intl.formatMessage(messages.unitLocationDescription, { id: locationId })} @@ -42,7 +42,7 @@ const SidebarFooter = ({ SidebarFooter.propTypes = { locationId: PropTypes.string, - isDisplayUnitLocation: PropTypes.bool, + displayUnitLocation: PropTypes.bool, openDiscardModal: PropTypes.func.isRequired, openVisibleModal: PropTypes.func.isRequired, handlePublishing: PropTypes.func.isRequired, @@ -50,7 +50,7 @@ SidebarFooter.propTypes = { }; SidebarFooter.defaultProps = { - isDisplayUnitLocation: false, + displayUnitLocation: false, locationId: null, }; diff --git a/src/course-unit/sidebar/index.jsx b/src/course-unit/sidebar/index.jsx index cd35cd3e03..f2817639b2 100644 --- a/src/course-unit/sidebar/index.jsx +++ b/src/course-unit/sidebar/index.jsx @@ -13,7 +13,7 @@ import { SidebarBody, SidebarFooter, SidebarHeader } from './components'; import useCourseUnitData from './hooks'; import messages from './messages'; -const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => { +const Sidebar = ({ blockId, displayUnitLocation, ...props }) => { const { title, locationId, @@ -23,8 +23,8 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => { } = useCourseUnitData(useSelector(getCourseUnitData)); const intl = useIntl(); const dispatch = useDispatch(); - const [isOpenDiscardModal, openDiscardModal, closeDiscardModal] = useToggle(false); - const [isOpenVisibleModal, openVisibleModal, closeVisibleModal] = useToggle(false); + const [isDiscardModalOpen, openDiscardModal, closeDiscardModal] = useToggle(false); + const [isVisibleModalOpen, openVisibleModal, closeVisibleModal] = useToggle(false); const handleCourseUnitVisibility = () => { closeVisibleModal(); @@ -50,24 +50,24 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => { { /> { Sidebar.propTypes = { blockId: PropTypes.string, - isDisplayUnitLocation: PropTypes.bool, + displayUnitLocation: PropTypes.bool, }; Sidebar.defaultProps = { blockId: null, - isDisplayUnitLocation: false, + displayUnitLocation: false, }; export default Sidebar; diff --git a/src/course-unit/sidebar/utils.js b/src/course-unit/sidebar/utils.js index 9a36a35597..af3263861f 100644 --- a/src/course-unit/sidebar/utils.js +++ b/src/course-unit/sidebar/utils.js @@ -4,7 +4,7 @@ import { InfoOutline as InfoOutlineIcon, } from '@openedx/paragon/icons'; -import { COLORS, UNIT_VISIBILITY_STATES } from '../constants'; +import { ICON_COLOR_VARIANTS, UNIT_VISIBILITY_STATES } from '../constants'; import messages from './messages'; /** @@ -79,11 +79,11 @@ export const getVisibilityTitle = (intl, releasedToStudents, published, hasChang */ export const getIconVariant = (visibilityState, published, hasChanges) => { const iconVariants = { - [UNIT_VISIBILITY_STATES.staffOnly]: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK }, - [UNIT_VISIBILITY_STATES.live]: { iconSrc: CheckCircleIcon, colorVariant: COLORS.GREEN }, - publishedNoChanges: { iconSrc: CheckCircleOutlineIcon, colorVariant: COLORS.BLACK }, - publishedWithChanges: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK }, - default: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK }, + [UNIT_VISIBILITY_STATES.staffOnly]: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK }, + [UNIT_VISIBILITY_STATES.live]: { iconSrc: CheckCircleIcon, colorVariant: ICON_COLOR_VARIANTS.GREEN }, + publishedNoChanges: { iconSrc: CheckCircleOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK }, + publishedWithChanges: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK }, + default: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK }, }; if (visibilityState in iconVariants) { return iconVariants[visibilityState];