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

feat: Add NotificationTray persistence by course (#772)

Browse Source 
REV-2424
This commit is contained in:
julianajlk
2021-12-21 13:50:07 -05:00
committed by GitHub
parent de49e8b271
commit 2bf4f2a0b5
6 changed files with 137 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/courseware/course/sequence/Sequence.jsx
View File

@@ -52,7 +52,7 @@ function Sequence({
const sequence = useModel('sequences', sequenceId);
const unit = useModel('units', unitId);
const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < responsiveBreakpoints.small.minWidth;
const handleNext = () => {
const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
@@ -156,7 +156,7 @@ function Sequence({
const defaultContent = (
<div className="sequence-container" style={{ display: 'inline-flex', flexDirection: 'row' }}>
<div className={classNames('sequence', { 'position-relative': shouldDisplayNotificationTrigger })} style={{ width: '100%' }}>
<div className={classNames('sequence', { 'position-relative': shouldDisplayNotificationTriggerInSequence })} style={{ width: '100%' }}>
<SequenceNavigation
sequenceId={sequenceId}
unitId={unitId}
@@ -180,7 +180,7 @@ function Sequence({
goToCourseExitPage={() => goToCourseExitPage()}
/>
{shouldDisplayNotificationTrigger ? (
{shouldDisplayNotificationTriggerInSequence ? (
<NotificationTrigger
courseId={courseId}
toggleNotificationTray={toggleNotificationTray}

15
src/courseware/course/sequence/Sequence.test.jsx
View File

@@ -31,6 +31,8 @@ describe('Sequence', () => {
unitNavigationHandler: () => {},
nextSequenceHandler: () => {},
previousSequenceHandler: () => {},
toggleNotificationTray: () => {},
setNotificationStatus: () => {},
};
});
@@ -390,6 +392,19 @@ describe('Sequence', () => {
expect(await screen.findByText('Notifications')).toBeInTheDocument();
});
it('handles click on notification tray close button', async () => {
const toggleNotificationTray = jest.fn();
const testData = {
...mockData,
toggleNotificationTray,
notificationTrayVisible: true,
};
render(<Sequence {...testData} />);
const notificationCloseIconButton = await screen.findByRole('button', { name: /Close notification tray/i });
fireEvent.click(notificationCloseIconButton);
expect(toggleNotificationTray).toHaveBeenCalledTimes(1);
});
it('does not render notification tray in sequence by default if in responsive view', async () => {
useWindowSize.mockReturnValue({ width: 991 });
const { container } = render(<Sequence {...mockData} />);

8
src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
View File

@@ -44,7 +44,7 @@ function SequenceNavigation({
sequence.gatedContent !== undefined && sequence.gatedContent.gated
) : undefined;
const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < responsiveBreakpoints.small.minWidth;
const renderUnitButtons = () => {
if (isLocked) {
@@ -76,7 +76,7 @@ function SequenceNavigation({
return (
<Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={nextArrow}>
{shouldDisplayNotificationTrigger ? null : buttonText}
{shouldDisplayNotificationTriggerInSequence ? null : buttonText}
</Button>
);
};
@@ -84,9 +84,9 @@ function SequenceNavigation({
const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
return sequenceStatus === LOADED && (
<nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTrigger ? '90%' : null }}>
<nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}>
<Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={prevArrow}>
{shouldDisplayNotificationTrigger ? null : intl.formatMessage(messages.previousButton)}
{shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
</Button>
{renderUnitButtons()}
{renderNextButton()}