@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

package/src/containers/Dashboard/hooks.test.js

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { useIntl } from '@openedx/frontend-base';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+
+import { apiHooks } from 'hooks';
+import { MockUseState } from 'testUtils';
+
+import appMessages from 'messages';
+import * as hooks from './hooks';
+
+jest.mock('@openedx/paragon', () => ({
+  useWindowSize: jest.fn(),
+  breakpoints: {},
+}));
+
+jest.mock('hooks', () => ({
+  apiHooks: {
+    useInitializeApp: jest.fn(),
+  },
+}));
+
+const state = new MockUseState(hooks);
+
+const initializeApp = jest.fn();
+apiHooks.useInitializeApp.mockReturnValue(initializeApp);
+useWindowSize.mockReturnValue({ width: 20 });
+breakpoints.large = { maxWidth: 30 };
+describe('CourseCard hooks', () => {
+  const { formatMessage } = useIntl();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('state fields', () => {
+    state.testGetter(state.keys.sidebarShowing);
+  });
+
+  describe('useDashboardLayoutData', () => {
+    beforeEach(() => {
+      state.mock();
+    });
+    describe('behavior', () => {
+      it('initializes sidebarShowing to default true value', () => {
+        hooks.useDashboardLayoutData();
+        state.expectInitializedWith(state.keys.sidebarShowing, true);
+      });
+    });
+    describe('output', () => {
+      describe('isDashboardCollapsed', () => {
+        it('returns true iff windowSize width is below the xl breakpoint', () => {
+          expect(hooks.useDashboardLayoutData().isDashboardCollapsed).toEqual(true);
+          useWindowSize.mockReturnValueOnce({ width: 40 });
+          expect(hooks.useDashboardLayoutData().isDashboardCollapsed).toEqual(false);
+        });
+      });
+      it('forwards sidebarShowing and setSidebarShowing from state hook', () => {
+        const hook = hooks.useDashboardLayoutData();
+        const { sidebarShowing, setSidebarShowing } = hook;
+        expect(sidebarShowing).toEqual(state.stateVals.sidebarShowing);
+        expect(setSidebarShowing).toEqual(state.setState.sidebarShowing);
+      });
+    });
+  });
+  describe('useInitializeDashboard', () => {
+    it('dispatches initialize thunk action on component load', () => {
+      hooks.useInitializeDashboard();
+      const [cb, prereqs] = React.useEffect.mock.calls[0];
+      expect(prereqs).toEqual([]);
+      expect(initializeApp).not.toHaveBeenCalled();
+      cb();
+      expect(initializeApp).toHaveBeenCalledWith();
+    });
+  });
+  describe('useDashboardMessages', () => {
+    it('returns spinner screen reader text', () => {
+      expect(hooks.useDashboardMessages()['learner-dash.loadingSR']).toEqual(
+        formatMessage(appMessages['learner-dash.loadingSR']),
+      );
+    });
+    it('returns page title', () => {
+      expect(hooks.useDashboardMessages()['learner-dash.title']).toEqual(
+        formatMessage(appMessages['learner-dash.title']),
+      );
+    });
+  });
+});

package/src/containers/Dashboard/index.jsx

@@ -0,0 +1,43 @@
+import { apiHooks, reduxHooks } from '../../hooks';
+import SelectSessionModal from '../../containers/SelectSessionModal';
+import CoursesPanel from '../../containers/CoursesPanel';
+import DashboardModalSlot from '../../slots/DashboardModalSlot';
+
+import LoadingView from './LoadingView';
+import DashboardLayout from './DashboardLayout';
+import hooks from './hooks';
+import './index.scss';
+
+export const Dashboard = () => {
+  const { isPending } = apiHooks.useInitializeApp();
+  const { pageTitle } = hooks.useDashboardMessages();
+  const hasCourses = reduxHooks.useHasCourses();
+  const showSelectSessionModal = reduxHooks.useShowSelectSessionModal();
+
+  return (
+    <div id="learnerdashboardroot">
+      <main>
+        <div id="dashboard-container" className="d-flex flex-column p-2 pt-0">
+          <h1 className="sr-only">{pageTitle}</h1>
+          {!isPending && (
+            <>
+              <DashboardModalSlot />
+              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
+            </>
+          )}
+          <div id="dashboard-content" data-testid="dashboard-content">
+            {isPending
+              ? (<LoadingView />)
+              : (
+                <DashboardLayout>
+                  <CoursesPanel />
+                </DashboardLayout>
+              )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/containers/Dashboard/index.scss

@@ -0,0 +1,29 @@
+@import "@openedx/paragon/scss/core/core";
+
+.course-list-column {
+  padding: 0 map-get($spacers, 4);
+}
+
+.sidebar-column {
+  padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
+
+  &.not-collapsed {
+    padding-top: map-get($spacers, 2);
+
+    & >:first-child {
+      margin-top: map-get($spacers, 5\.5);
+    }
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .sidebar-column {
+    // grid are inheriting dir="ltr" from the body, so we need to override it
+    [dir=ltr] & {
+      padding: 0 map-get($spacers, 3);
+    }
+    [dir=rtl] & {
+      padding: 0 map-get($spacers, 3);
+    }
+  }
+}

package/src/containers/Dashboard/index.test.jsx

@@ -0,0 +1,122 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+
+import SelectSessionModal from 'containers/SelectSessionModal';
+import CoursesPanel from 'containers/CoursesPanel';
+
+import DashboardLayout from './DashboardLayout';
+import LoadingView from './LoadingView';
+import hooks from './hooks';
+import Dashboard from '.';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useHasCourses: jest.fn(),
+    useShowSelectSessionModal: jest.fn(),
+    useRequestIsPending: jest.fn(),
+  },
+}));
+
+jest.mock('slots/DashboardModalSlot', () => 'DashboardModalSlot');
+jest.mock('containers/CoursesPanel', () => 'CoursesPanel');
+jest.mock('./LoadingView', () => 'LoadingView');
+jest.mock('./DashboardLayout', () => 'DashboardLayout');
+
+jest.mock('./hooks', () => ({
+  useInitializeDashboard: jest.fn(),
+  useDashboardMessages: jest.fn(),
+}));
+
+const pageTitle = 'test-page-title';
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    hooks.useDashboardMessages.mockReturnValue({ pageTitle });
+  });
+  const createWrapper = ({
+    hasCourses,
+    initIsPending,
+    showSelectSessionModal,
+  }) => {
+    reduxHooks.useHasCourses.mockReturnValueOnce(hasCourses);
+    reduxHooks.useRequestIsPending.mockReturnValueOnce(initIsPending);
+    reduxHooks.useShowSelectSessionModal.mockReturnValueOnce(showSelectSessionModal);
+    return shallow(<Dashboard />);
+  };
+
+  let wrapper;
+  describe('snapshots', () => {
+    const testTitle = () => {
+      test('page title is displayed in sr-only h1 tag', () => {
+        const heading = wrapper.instance.findByType('h1')[0];
+        expect(heading.props.className).toEqual('sr-only');
+        expect(heading.children[0].el).toEqual(pageTitle);
+      });
+    };
+    const testSnapshot = () => {
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+    };
+    const testContent = (el) => {
+      expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el));
+    };
+
+    const renderString = (show) => (show ? 'renders' : 'does not render');
+    const testView = ({
+      props,
+      content: [contentName, contentEl],
+      showSelectSessionModal,
+    }) => {
+      beforeEach(() => { wrapper = createWrapper(props); });
+      testTitle();
+      testSnapshot();
+      it(`renders ${contentName}`, () => {
+        testContent(contentEl);
+      });
+      it(`${renderString(showSelectSessionModal)} select session modal`, () => {
+        expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
+      });
+    };
+    describe('courses still loading', () => {
+      testView({
+        props: {
+          hasCourses: false,
+          initIsPending: true,
+          showSelectSessionModal: false,
+        },
+        content: ['LoadingView', <LoadingView />],
+        showSelectSessionModal: false,
+      });
+    });
+
+    describe('courses loaded, show select session modal', () => {
+      testView({
+        props: {
+          hasCourses: true,
+          initIsPending: false,
+          showSelectSessionModal: true,
+        },
+        content: ['LoadedView', (
+          <DashboardLayout><CoursesPanel /></DashboardLayout>
+        )],
+        showSelectSessionModal: true,
+      });
+    });
+
+    describe('there are no courses', () => {
+      testView({
+        props: {
+          hasCourses: false,
+          initIsPending: false,
+          showSelectSessionModal: false,
+        },
+        content: ['Dashboard layout with no courses sidebar and content', (
+          <DashboardLayout><CoursesPanel /></DashboardLayout>
+        )],
+        showSelectSessionModal: false,
+      });
+    });
+  });
+});

package/src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmailSettingsModal render snapshot: emails disabled, show: false 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isOpen={false}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded shadow"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <h4>
+      Receive course emails?
+    </h4>
+    <Form.Switch
+      checked={false}
+      onChange={[MockFunction hooks.onToggle]}
+    >
+      Course emails are off
+    </Form.Switch>
+    <p>
+      Course emails include important information about your course from instructors.
+    </p>
+    <ActionRow>
+      <Button
+        onClick={[MockFunction closeModal]}
+        variant="tertiary"
+      >
+        Never mind
+      </Button>
+      <Button
+        onClick={[MockFunction hooks.save]}
+      >
+        Save settings
+      </Button>
+    </ActionRow>
+  </div>
+</ModalDialog>
+`;
+
+exports[`EmailSettingsModal render snapshot: emails disabled, show: true 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded shadow"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <h4>
+      Receive course emails?
+    </h4>
+    <Form.Switch
+      checked={false}
+      onChange={[MockFunction hooks.onToggle]}
+    >
+      Course emails are off
+    </Form.Switch>
+    <p>
+      Course emails include important information about your course from instructors.
+    </p>
+    <ActionRow>
+      <Button
+        onClick={[MockFunction closeModal]}
+        variant="tertiary"
+      >
+        Never mind
+      </Button>
+      <Button
+        onClick={[MockFunction hooks.save]}
+      >
+        Save settings
+      </Button>
+    </ActionRow>
+  </div>
+</ModalDialog>
+`;
+
+exports[`EmailSettingsModal render snapshot: emails enabled, show: true 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded shadow"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <h4>
+      Receive course emails?
+    </h4>
+    <Form.Switch
+      checked={true}
+      onChange={[MockFunction hooks.onToggle]}
+    >
+      Course emails are on
+    </Form.Switch>
+    <p>
+      Course emails include important information about your course from instructors.
+    </p>
+    <ActionRow>
+      <Button
+        onClick={[MockFunction closeModal]}
+        variant="tertiary"
+      >
+        Never mind
+      </Button>
+      <Button
+        onClick={[MockFunction hooks.save]}
+      >
+        Save settings
+      </Button>
+    </ActionRow>
+  </div>
+</ModalDialog>
+`;

package/src/containers/EmailSettingsModal/hooks.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { StrictDict } from '../../utils';
+import { reduxHooks, apiHooks } from '../../hooks';
+
+import * as module from './hooks';
+
+export const state = StrictDict({
+  toggle: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useEmailData = ({
+  closeModal,
+  cardId,
+}) => {
+  const { hasOptedOutOfEmail } = reduxHooks.useCardEnrollmentData(cardId);
+  const [isOptedOut, setIsOptedOut] = module.state.toggle(hasOptedOutOfEmail);
+  const updateEmailSettings = apiHooks.useUpdateEmailSettings(cardId);
+  const onToggle = () => setIsOptedOut(!isOptedOut);
+  const save = () => {
+    updateEmailSettings(!isOptedOut);
+    closeModal();
+  };
+
+  return {
+    onToggle,
+    save,
+    isOptedOut,
+  };
+};
+
+export default useEmailData;

package/src/containers/EmailSettingsModal/hooks.test.js

@@ -0,0 +1,71 @@
+import { MockUseState } from 'testUtils';
+import { reduxHooks, apiHooks } from 'hooks';
+
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardEnrollmentData: jest.fn(),
+  },
+  apiHooks: {
+    useUpdateEmailSettings: jest.fn(),
+  },
+}));
+
+const cardId = 'my-test-course-number';
+const closeModal = jest.fn();
+const updateEmailSettings = jest.fn();
+apiHooks.useUpdateEmailSettings.mockReturnValue(updateEmailSettings);
+
+const state = new MockUseState(hooks);
+
+describe('EmailSettingsModal hooks', () => {
+  let out;
+  describe('state values', () => {
+    state.testGetter(state.keys.toggle);
+  });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('useEmailData', () => {
+    beforeEach(() => {
+      state.mock();
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasOptedOutOfEmail: true });
+      out = hooks.useEmailData({ closeModal, cardId });
+    });
+    afterEach(state.restore);
+
+    it('loads enrollment data based on course number', () => {
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+    });
+
+    it('initializes toggle value to cardData.hasOptedOutOfEmail', () => {
+      state.expectInitializedWith(state.keys.toggle, true);
+      expect(out.isOptedOut).toEqual(true);
+
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasOptedOutOfEmail: false });
+      out = hooks.useEmailData({ closeModal, cardId });
+      state.expectInitializedWith(state.keys.toggle, false);
+      expect(out.isOptedOut).toEqual(false);
+    });
+    it('initializes email settings hok with cardId', () => {
+      expect(apiHooks.useUpdateEmailSettings).toHaveBeenCalledWith(cardId);
+    });
+    describe('onToggle - returned callback', () => {
+      it('sets toggle state value to opposite current value', () => {
+        out.onToggle();
+        expect(state.setState.toggle).toHaveBeenCalledWith(!out.isOptedOut);
+      });
+    });
+    describe('save', () => {
+      it('calls updateEmailSettings', () => {
+        out.save();
+        expect(updateEmailSettings).toHaveBeenCalledWith(!out.isOptedOut);
+      });
+      it('calls closeModal', () => {
+        out.save();
+        expect(closeModal).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/containers/EmailSettingsModal/index.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+import {
+  ActionRow,
+  Button,
+  Form,
+  ModalDialog,
+} from '@openedx/paragon';
+
+import { nullMethod } from '../../utils';
+
+import useEmailData from './hooks';
+import messages from './messages';
+
+export const EmailSettingsModal = ({
+  closeModal,
+  show,
+  cardId,
+}) => {
+  const {
+    isOptedOut,
+    onToggle,
+    save,
+  } = useEmailData({ closeModal, cardId });
+  const { formatMessage } = useIntl();
+
+  return (
+    <ModalDialog
+      isOpen={show}
+      onClose={nullMethod}
+      hasCloseButton={false}
+      title=""
+    >
+      <div className="bg-white p-3 rounded shadow" style={{ textAlign: 'start' }}>
+        <h4>{formatMessage(messages.header)}</h4>
+        <Form.Switch checked={!isOptedOut} onChange={onToggle}>
+          {formatMessage(isOptedOut ? messages.emailsOff : messages.emailsOn)}
+        </Form.Switch>
+        <p>{formatMessage(messages.description)}</p>
+        <ActionRow>
+          <Button variant="tertiary" onClick={closeModal}>
+            {formatMessage(messages.nevermind)}
+          </Button>
+          <Button onClick={save}>{formatMessage(messages.save)}</Button>
+        </ActionRow>
+      </div>
+    </ModalDialog>
+  );
+};
+EmailSettingsModal.propTypes = {
+  cardId: PropTypes.string.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+};
+
+export default EmailSettingsModal;

package/src/containers/EmailSettingsModal/index.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import hooks from './hooks';
+import EmailSettingsModal from '.';
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const hookProps = {
+  isOptedOut: true,
+  onToggle: jest.fn().mockName('hooks.onToggle'),
+  save: jest.fn().mockName('hooks.save'),
+};
+
+const props = {
+  closeModal: jest.fn().mockName('closeModal'),
+  show: true,
+  cardId: 'test-course-number',
+};
+
+describe('EmailSettingsModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('behavior', () => {
+    beforeEach(() => {
+      hooks.mockReturnValueOnce(hookProps);
+      shallow(<EmailSettingsModal {...props} />);
+    });
+    it('calls hook w/ closeModal and cardId from props', () => {
+      expect(hooks).toHaveBeenCalledWith({
+        closeModal: props.closeModal,
+        cardId: props.cardId,
+      });
+    });
+  });
+  describe('render', () => {
+    test('snapshot: emails disabled, show: false', () => {
+      hooks.mockReturnValueOnce(hookProps);
+      expect(shallow(<EmailSettingsModal {...props} show={false} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: emails disabled, show: true', () => {
+      hooks.mockReturnValueOnce(hookProps);
+      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: emails enabled, show: true', () => {
+      hooks.mockReturnValueOnce({
+        ...hookProps,
+        isOptedOut: false,
+      });
+      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/EmailSettingsModal/messages.js

@@ -0,0 +1,37 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  header: {
+    id: 'learner-dash.emailSettings.header',
+    description: 'Header for email settings modal',
+    defaultMessage: 'Receive course emails?',
+  },
+  emailsOff: {
+    id: 'learner-dash.emailSettings.emailsOff',
+    description: 'Toggle text for email settings modal when email is disabled',
+    defaultMessage: 'Course emails are off',
+  },
+  emailsOn: {
+    id: 'learner-dash.emailSettings.emailsOn',
+    description: 'Toggle text for email settings modal when email is enabled',
+    defaultMessage: 'Course emails are on',
+  },
+  description: {
+    id: 'learner-dash.emailSettings.description',
+    description: 'Description for email settings modal',
+    defaultMessage: 'Course emails include important information about your course from instructors.',
+  },
+  nevermind: {
+    id: 'learner-dash.emailSettings.nevermind',
+    description: 'Cancel action for email settings modal',
+    defaultMessage: 'Never mind',
+  },
+  save: {
+    id: 'learner-dash.emailSettings.save',
+    description: 'Save action for email settings modal',
+    defaultMessage: 'Save settings',
+  },
+
+});
+
+export default messages;