Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refactoring after review

Browse Source
This commit is contained in:
PKulkoRaccoonGang
2024-03-05 21:09:18 +02:00
committed by Adolfo R. Brandes
parent 423a3f3f72
commit 642b4e4052
11 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/course-unit/CourseUnit.jsx
View File

@@ -124,7 +124,7 @@ const CourseUnit = ({ courseId }) => {
<Layout.Element>
<Stack gap={3}>
<Sidebar blockId={blockId} data-testid="course-unit-sidebar" />
<Sidebar isDisplayUnitLocation data-testid="course-unit-location-sidebar" />
<Sidebar displayUnitLocation data-testid="course-unit-location-sidebar" />
</Stack>
</Layout.Element>
</Layout>

2
src/course-unit/CourseUnit.scss
View File

@@ -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";

4
src/course-unit/CourseUnit.test.jsx
View File

@@ -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('<CourseUnit />', () => {
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,

4
src/course-unit/__mocks__/courseVerticalChildren.js
View File

@@ -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',
},
],

2
src/course-unit/constants.js
View File

@@ -58,7 +58,7 @@ export const UNIT_VISIBILITY_STATES = {
ready: 'ready',
};
export const COLORS = {
export const ICON_COLOR_VARIANTS = {
BLACK: '#000',
GREEN: '#0D7D4D',
};

0
src/course-unit/course-xblock/CourseXblock.scss → src/course-unit/course-xblock/CourseXBlock.scss
View File

8
src/course-unit/sidebar/components/SidebarBody.jsx
View File

@@ -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 (
<Card.Body className="course-unit-sidebar-date">
<Stack>
{isDisplayUnitLocation ? (
{displayUnitLocation ? (
<span>
<h5 className="course-unit-sidebar-date-stage m-0">
{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,
};

10
src/course-unit/sidebar/components/SidebarHeader.jsx
View File

@@ -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 (
<Stack className="course-unit-sidebar-header" direction="horizontal">
{!isDisplayUnitLocation && (
{!displayUnitLocation && (
<Icon
className="course-unit-sidebar-header-icon"
svgAttrs={{ color: colorVariant }}
@@ -22,7 +22,7 @@ const SidebarHeader = ({ title, visibilityState, isDisplayUnitLocation }) => {
/>
)}
<h3 className="course-unit-sidebar-header-title m-0">
{isDisplayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title}
{displayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title}
</h3>
</Stack>
);
@@ -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;

8
src/course-unit/sidebar/components/sidebar-footer/index.jsx
View File

@@ -12,14 +12,14 @@ const SidebarFooter = ({
handlePublishing,
openDiscardModal,
visibleToStaffOnly,
isDisplayUnitLocation,
displayUnitLocation,
}) => {
const intl = useIntl();
return (
<Card.Footer className="course-unit-sidebar-footer" orientation="horizontal">
<Stack className="course-unit-sidebar-visibility">
{isDisplayUnitLocation ? (
{displayUnitLocation ? (
<small className="course-unit-sidebar-location-description">
{intl.formatMessage(messages.unitLocationDescription, { id: locationId })}
</small>
@@ -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,
};

20
src/course-unit/sidebar/index.jsx
View File

@@ -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 }) => {
<SidebarHeader
title={title}
visibilityState={visibilityState}
isDisplayUnitLocation={isDisplayUnitLocation}
displayUnitLocation={displayUnitLocation}
/>
<SidebarBody
locationId={locationId}
releaseLabel={releaseLabel}
isDisplayUnitLocation={isDisplayUnitLocation}
displayUnitLocation={displayUnitLocation}
/>
<SidebarFooter
locationId={locationId}
openDiscardModal={openDiscardModal}
openVisibleModal={openVisibleModal}
isDisplayUnitLocation={isDisplayUnitLocation}
displayUnitLocation={displayUnitLocation}
handlePublishing={handleCourseUnitPublish}
visibleToStaffOnly={visibleToStaffOnly}
/>
<ModalNotification
title={intl.formatMessage(messages.modalDiscardUnitChangesTitle)}
isOpen={isOpenDiscardModal}
isOpen={isDiscardModalOpen}
actionButtonText={intl.formatMessage(messages.modalDiscardUnitChangesActionButtonText)}
cancelButtonText={intl.formatMessage(messages.modalDiscardUnitChangesCancelButtonText)}
handleAction={handleCourseUnitDiscardChanges}
@@ -77,7 +77,7 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => {
/>
<ModalNotification
title={intl.formatMessage(messages.modalMakeVisibilityTitle)}
isOpen={isOpenVisibleModal}
isOpen={isVisibleModalOpen}
actionButtonText={intl.formatMessage(messages.modalMakeVisibilityActionButtonText)}
cancelButtonText={intl.formatMessage(messages.modalMakeVisibilityCancelButtonText)}
handleAction={handleCourseUnitVisibility}
@@ -91,12 +91,12 @@ 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;

12
src/course-unit/sidebar/utils.js
View File

@@ -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];