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

package/src/containers/CoursesPanel/index.scss

@@ -0,0 +1,42 @@
+@import "@openedx/paragon/scss/core/core";
+
+.course-list-heading-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.course-list-title {
+  font-size: $h2-font-size;
+  margin: map-get($spacers, 3) 0;
+}
+
+.course-list-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.course-filter-controls-container {
+  text-align: right;
+  align-self: center;
+}
+
+@include media-breakpoint-down(md) {
+  .course-list-heading-container {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+
+  .course-filter-controls-container {
+    text-align: left;
+    align-self: flex-start;
+  }
+
+  .course-list-title {
+    font-size: $h3-font-size;
+    margin: map-get($spacers, 2) 0;
+  }
+}

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

@@ -0,0 +1,58 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import { useCourseListData } from './hooks';
+import CoursesPanel from '.';
+
+jest.mock('hooks', () => ({
+  reduxHooks: { useHasCourses: jest.fn() },
+}));
+
+jest.mock('./hooks', () => ({
+  useCourseListData: jest.fn(),
+}));
+
+jest.mock('containers/CourseCard', () => 'CourseCard');
+jest.mock('containers/CourseFilterControls', () => ({
+  ActiveCourseFilters: 'ActiveCourseFilters',
+  CourseFilterControls: 'CourseFilterControls',
+}));
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: 'PluginSlot',
+}));
+jest.mock('./CourseList', () => 'CourseList');
+
+reduxHooks.useHasCourses.mockReturnValue(true);
+
+describe('CoursesPanel', () => {
+  const defaultCourseListData = {
+    filterOptions: {},
+    numPages: 1,
+    setPageNumber: jest.fn().mockName('setPageNumber'),
+    showFilters: false,
+    visibleList: [],
+  };
+
+  const createWrapper = (courseListData) => {
+    useCourseListData.mockReturnValueOnce({
+      ...defaultCourseListData,
+      ...courseListData,
+    });
+    return shallow(<CoursesPanel />);
+  };
+
+  describe('no courses', () => {
+    test('snapshot', () => {
+      reduxHooks.useHasCourses.mockReturnValue(false);
+      const wrapper = createWrapper();
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('with courses', () => {
+    test('snapshot', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      const wrapper = createWrapper();
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/CoursesPanel/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  myCourses: {
+    id: 'dashboard.mycourses',
+    defaultMessage: 'My Courses',
+    description: 'Course list heading',
+  },
+});
+
+export default messages;

package/src/containers/Dashboard/DashboardLayout.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Container, Col, Row } from '@openedx/paragon';
+
+import WidgetSidebarSlot from '../../slots/WidgetSidebarSlot';
+
+import hooks from './hooks';
+
+export const columnConfig = {
+  courseList: {
+    withSidebar: {
+      lg: { span: 12, offset: 0 },
+      xl: { span: 8, offset: 0 },
+    },
+    noSidebar: {
+      lg: { span: 12, offset: 0 },
+      xl: { span: 12, offset: 0 },
+    },
+  },
+  sidebar: {
+    lg: { span: 12, offset: 0 },
+    xl: { span: 4, offset: 0 },
+  },
+};
+
+export const DashboardLayout = ({ children }) => {
+  const {
+    isCollapsed,
+    sidebarShowing,
+  } = hooks.useDashboardLayoutData();
+
+  const courseListColumnProps = sidebarShowing
+    ? columnConfig.courseList.withSidebar
+    : columnConfig.courseList.noSidebar;
+
+  return (
+    <Container fluid size="xl">
+      <Row>
+        <Col {...courseListColumnProps} className="course-list-column">
+          {children}
+        </Col>
+        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>
+          <WidgetSidebarSlot />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+DashboardLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default DashboardLayout;

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Col, Row } from '@openedx/paragon';
+
+import hooks from './hooks';
+import DashboardLayout, { columnConfig } from './DashboardLayout';
+
+jest.mock('./hooks', () => ({
+  useDashboardLayoutData: jest.fn(),
+}));
+
+const hookProps = {
+  isCollapsed: true,
+  sidebarShowing: false,
+  setSidebarShowing: jest.fn().mockName('hooks.setSidebarShowing'),
+};
+hooks.useDashboardLayoutData.mockReturnValue(hookProps);
+
+const children = 'test-children';
+
+let el;
+describe('DashboardLayout', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<DashboardLayout>{children}</DashboardLayout>);
+  });
+
+  const testColumns = () => {
+    it('loads courseList and sidebar column layout', () => {
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
+      Object.keys(columnConfig.sidebar).forEach(size => {
+        expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]);
+      });
+    });
+    it('displays children in first column', () => {
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
+      expect(columns[0].children).not.toHaveLength(0);
+    });
+    it('displays WidgetSidebarSlot in second column', () => {
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
+      expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1);
+    });
+  };
+  const testSidebarLayout = () => {
+    it('displays withSidebar width for course list column', () => {
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
+      Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
+        expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
+      });
+    });
+  };
+  const testNoSidebarLayout = () => {
+    it('displays noSidebar width for course list column', () => {
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
+      Object.keys(columnConfig.courseList.noSidebar).forEach(size => {
+        expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]);
+      });
+    });
+  };
+  const testSnapshot = () => {
+    test('snapshot', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+  };
+  describe('collapsed', () => {
+    describe('sidebar showing', () => {
+      beforeEach(() => {
+        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, sidebarShowing: true });
+      });
+      testColumns();
+      testSnapshot();
+      testSidebarLayout();
+    });
+    describe('sidebar not showing', () => {
+      testColumns();
+      testSnapshot();
+      testNoSidebarLayout();
+    });
+    it('does not show spacer component above widget sidebar', () => {
+      const columns = el.instance.findByType(Col);
+      expect(columns[1].findByType('h2').length).toEqual(0);
+    });
+  });
+
+  describe('not collapsed', () => {
+    const testWidgetSpacing = () => {
+      it('shows not-collapsed class on widget sidebar', () => {
+        const columns = el.instance.findByType(Col);
+        expect(columns[1].props.className).toContain('not-collapsed');
+      });
+    };
+    describe('sidebar showing', () => {
+      beforeEach(() => {
+        hooks.useDashboardLayoutData.mockReturnValueOnce({
+          ...hookProps,
+          isCollapsed: false,
+          sidebarShowing: true,
+        });
+      });
+      testColumns();
+      testSnapshot();
+      testSidebarLayout();
+      testWidgetSpacing();
+    });
+    describe('sidebar not showing', () => {
+      beforeEach(() => {
+        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, isCollapsed: false });
+      });
+      testColumns();
+      testSnapshot();
+      testNoSidebarLayout();
+      testWidgetSpacing();
+    });
+  });
+});

package/src/containers/Dashboard/LoadingView.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Spinner } from '@openedx/paragon';
+
+import hooks from './hooks';
+
+export const LoadingView = () => {
+  const { spinnerScreenReaderText } = hooks.useDashboardMessages();
+
+  return (
+    <div className="course-list-loading">
+      <Spinner
+        animation="border"
+        className="mie-3"
+        screenReaderText={spinnerScreenReaderText}
+      />
+    </div>
+  );
+};
+
+export default LoadingView;

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

@@ -0,0 +1,23 @@
+import { shallow } from '@edx/react-unit-test-utils';
+import { Spinner } from '@openedx/paragon';
+
+import hooks from './hooks';
+import LoadingView from './LoadingView';
+
+jest.mock('./hooks', () => ({
+  useDashboardMessages: jest.fn(),
+}));
+
+const spinnerScreenReaderText = 'test-sr-text';
+describe('LoadingView', () => {
+  beforeEach(() => {
+    hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
+  });
+  test('snapshot', () => {
+    expect(shallow(<LoadingView />).snapshot).toMatchSnapshot();
+  });
+  it('renders spinner component with associated screen reader text', () => {
+    const wrapper = shallow(<LoadingView />);
+    expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText);
+  });
+});

package/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap

@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
+<Container
+  fluid={true}
+  size="xl"
+>
+  <Row>
+    <Col
+      className="course-list-column"
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+    >
+      test-children
+    </Col>
+    <Col
+      className={
+        [
+          "sidebar-column",
+          false,
+        ]
+      }
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 4,
+        }
+      }
+    >
+      <WidgetSidebarSlot />
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
+<Container
+  fluid={true}
+  size="xl"
+>
+  <Row>
+    <Col
+      className="course-list-column"
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 8,
+        }
+      }
+    >
+      test-children
+    </Col>
+    <Col
+      className={
+        [
+          "sidebar-column",
+          false,
+        ]
+      }
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 4,
+        }
+      }
+    >
+      <WidgetSidebarSlot />
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
+<Container
+  fluid={true}
+  size="xl"
+>
+  <Row>
+    <Col
+      className="course-list-column"
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+    >
+      test-children
+    </Col>
+    <Col
+      className={
+        [
+          "sidebar-column",
+          "not-collapsed",
+        ]
+      }
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 4,
+        }
+      }
+    >
+      <WidgetSidebarSlot />
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
+<Container
+  fluid={true}
+  size="xl"
+>
+  <Row>
+    <Col
+      className="course-list-column"
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 8,
+        }
+      }
+    >
+      test-children
+    </Col>
+    <Col
+      className={
+        [
+          "sidebar-column",
+          "not-collapsed",
+        ]
+      }
+      lg={
+        {
+          "offset": 0,
+          "span": 12,
+        }
+      }
+      xl={
+        {
+          "offset": 0,
+          "span": 4,
+        }
+      }
+    >
+      <WidgetSidebarSlot />
+    </Col>
+  </Row>
+</Container>
+`;

package/src/containers/Dashboard/__snapshots__/LoadingView.test.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingView snapshot 1`] = `
+<div
+  className="course-list-loading"
+>
+  <Spinner
+    animation="border"
+    className="mie-3"
+    screenReaderText="test-sr-text"
+  />
+</div>
+`;

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

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard snapshots courses loaded, show select session modal snapshot 1`] = `
+<div
+  className="d-flex flex-column p-2 pt-0"
+  id="dashboard-container"
+>
+  <h1
+    className="sr-only"
+  >
+    test-page-title
+  </h1>
+  <Fragment>
+    <DashboardModalSlot />
+    <SelectSessionModal />
+  </Fragment>
+  <div
+    data-testid="dashboard-content"
+    id="dashboard-content"
+  >
+    <DashboardLayout>
+      <CoursesPanel />
+    </DashboardLayout>
+  </div>
+</div>
+`;
+
+exports[`Dashboard snapshots courses still loading snapshot 1`] = `
+<div
+  className="d-flex flex-column p-2 pt-0"
+  id="dashboard-container"
+>
+  <h1
+    className="sr-only"
+  >
+    test-page-title
+  </h1>
+  <div
+    data-testid="dashboard-content"
+    id="dashboard-content"
+  >
+    <LoadingView />
+  </div>
+</div>
+`;
+
+exports[`Dashboard snapshots there are no courses snapshot 1`] = `
+<div
+  className="d-flex flex-column p-2 pt-0"
+  id="dashboard-container"
+>
+  <h1
+    className="sr-only"
+  >
+    test-page-title
+  </h1>
+  <Fragment>
+    <DashboardModalSlot />
+  </Fragment>
+  <div
+    data-testid="dashboard-content"
+    id="dashboard-content"
+  >
+    <DashboardLayout>
+      <CoursesPanel />
+    </DashboardLayout>
+  </div>
+</div>
+`;

package/src/containers/Dashboard/hooks.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { StrictDict } from '../../utils';
+import appMessages from '../../messages';
+import * as module from './hooks';
+
+export const state = StrictDict({
+  sidebarShowing: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useDashboardMessages = () => {
+  const { formatMessage } = useIntl();
+  return {
+    spinnerScreenReaderText: formatMessage(appMessages['learner-dash.loadingSR']),
+    pageTitle: formatMessage(appMessages['learner-dash.title']),
+  };
+};
+
+export const useDashboardLayoutData = () => {
+  const { width } = useWindowSize();
+
+  const [sidebarShowing, setSidebarShowing] = module.state.sidebarShowing(true);
+  return {
+    isDashboardCollapsed: width < breakpoints.large.maxWidth,
+    sidebarShowing,
+    setSidebarShowing,
+  };
+};
+
+export default {
+  useDashboardLayoutData,
+  useDashboardMessages,
+};