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

package/src/containers/CourseFilterControls/messages.js

@@ -0,0 +1,61 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  courseStatus: {
+    id: 'learner-dash.courseListFilters.courseStatus',
+    description: 'course status filter form heading',
+    defaultMessage: 'Course Status',
+  },
+  inProgress: {
+    id: 'learner-dash.courseListFilters.inProgress',
+    description: 'in-progress filter checkbox label for course list filters',
+    defaultMessage: 'In-Progress',
+  },
+  notStarted: {
+    id: 'learner-dash.courseListFilters.notStarted',
+    description: 'Not-Started filter checkbox label for course list filters',
+    defaultMessage: 'Not Started',
+  },
+  done: {
+    id: 'learner-dash.courseListFilters.done',
+    description: 'done filter checkbox label for course list filters',
+    defaultMessage: 'Done',
+  },
+  notEnrolled: {
+    id: 'learner-dash.courseListFilters.notEnrolled',
+    description: 'not-enrolled filter checkbox label for course list filters',
+    defaultMessage: 'Not Enrolled',
+  },
+  upgraded: {
+    id: 'learner-dash.courseListFilters.upgraded',
+    description: 'upgraded filter checkbox label for course list filters',
+    defaultMessage: 'Upgraded',
+  },
+  clearAll: {
+    id: 'learner-dash.courseListFilters.clearAll',
+    description: 'clear all filters button text',
+    defaultMessage: 'Clear all',
+  },
+  sort: {
+    id: 'learner-dash.courseListFilters.sort',
+    description: 'Sort radio form heading',
+    defaultMessage: 'Sort',
+  },
+  sortLastEnrolled: {
+    id: 'learner-dash.courseListFilters.sortLastEnrolled',
+    description: 'Last enrolled sort option text',
+    defaultMessage: 'Last enrolled',
+  },
+  sortTitle: {
+    id: 'learner-dash.courseListFilters.sortTitle',
+    description: 'Title sort option text',
+    defaultMessage: 'Title (A-Z)',
+  },
+  refine: {
+    id: 'learner-dash.courseListFilters.refine',
+    description: 'Filter button container text',
+    defaultMessage: 'Refine',
+  },
+});
+
+export default messages;

package/src/containers/CoursesPanel/CourseList/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseList collapsed with multiple courses and pages snapshot 1`] = `
+<Fragment>
+  <div
+    id="course-list-active-filters-container"
+  >
+    <ActiveCourseFilters />
+  </div>
+  <div
+    className="d-flex flex-column flex-grow-1"
+  >
+    <CourseCard
+      cardId="foo"
+      key="foo"
+    />
+    <CourseCard
+      cardId="bar"
+      key="bar"
+    />
+    <CourseCard
+      cardId="baz"
+      key="baz"
+    />
+    <Pagination
+      className="mx-auto mb-2"
+      pageCount={3}
+      paginationLabel="Course List"
+      variant="reduced"
+    />
+  </div>
+</Fragment>
+`;
+
+exports[`CourseList no courses or filters snapshot 1`] = `
+<Fragment>
+  <div
+    className="d-flex flex-column flex-grow-1"
+  />
+</Fragment>
+`;
+
+exports[`CourseList with filters snapshot 1`] = `undefined`;
+
+exports[`CourseList with multiple courses and pages snapshot 1`] = `
+<Fragment>
+  <div
+    className="d-flex flex-column flex-grow-1"
+  >
+    <CourseCard
+      cardId="foo"
+      key="foo"
+    />
+    <CourseCard
+      cardId="bar"
+      key="bar"
+    />
+    <CourseCard
+      cardId="baz"
+      key="baz"
+    />
+    <Pagination
+      className="mx-auto mb-2"
+      pageCount={3}
+      paginationLabel="Course List"
+      variant="secondary"
+    />
+  </div>
+</Fragment>
+`;

package/src/containers/CoursesPanel/CourseList/hooks.js

@@ -0,0 +1,8 @@
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+
+export const useIsCollapsed = () => {
+  const { width } = useWindowSize();
+  return width < breakpoints.medium.maxWidth;
+};
+
+export default useIsCollapsed;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Pagination } from '@openedx/paragon';
+import {
+  ActiveCourseFilters,
+} from '../../../containers/CourseFilterControls';
+import CourseCard from '../../../containers/CourseCard';
+
+import { useIsCollapsed } from './hooks';
+
+export const CourseList = ({ courseListData }) => {
+  const {
+    filterOptions, setPageNumber, numPages, showFilters, visibleList,
+  } = courseListData;
+  const isCollapsed = useIsCollapsed();
+  return (
+    <>
+      {showFilters && (
+        <div id="course-list-active-filters-container">
+          <ActiveCourseFilters {...filterOptions} />
+        </div>
+      )}
+      <div className="d-flex flex-column flex-grow-1">
+        {visibleList.map(({ cardId }) => (
+          <CourseCard key={cardId} cardId={cardId} />
+        ))}
+        {numPages > 1 && (
+          <Pagination
+            variant={isCollapsed ? 'reduced' : 'secondary'}
+            paginationLabel="Course List"
+            className="mx-auto mb-2"
+            pageCount={numPages}
+            onPageSelect={setPageNumber}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export const courseListDataShape = PropTypes.shape({
+  showFilters: PropTypes.bool.isRequired,
+  visibleList: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  filterOptions: PropTypes.shape().isRequired,
+  numPages: PropTypes.number.isRequired,
+  setPageNumber: PropTypes.func.isRequired,
+});
+
+CourseList.propTypes = {
+  courseListData: courseListDataShape,
+};
+
+export default CourseList;

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

@@ -0,0 +1,64 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { useIsCollapsed } from './hooks';
+import CourseList from '.';
+
+jest.mock('./hooks', () => ({
+  useIsCollapsed: jest.fn(),
+}));
+
+jest.mock('containers/CourseCard', () => 'CourseCard');
+jest.mock('containers/CourseFilterControls', () => ({
+  ActiveCourseFilters: 'ActiveCourseFilters',
+}));
+
+describe('CourseList', () => {
+  const defaultCourseListData = {
+    filterOptions: {},
+    numPages: 1,
+    setPageNumber: jest.fn().mockName('setPageNumber'),
+    showFilters: false,
+    visibleList: [],
+  };
+  useIsCollapsed.mockReturnValue(false);
+
+  const createWrapper = (courseListData = defaultCourseListData) => (
+    shallow(<CourseList courseListData={courseListData} />)
+  );
+
+  describe('no courses or filters', () => {
+    test('snapshot', () => {
+      const wrapper = createWrapper();
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('with filters', () => {
+    test('snapshot', () => {
+      const wrapper = createWrapper({
+        filterOptions: { abitary: 'filter' },
+        showFilters: true,
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('with multiple courses and pages', () => {
+    test('snapshot', () => {
+      const wrapper = createWrapper({
+        visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }],
+        numPages: 3,
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('collapsed with multiple courses and pages', () => {
+    test('snapshot', () => {
+      useIsCollapsed.mockReturnValueOnce(true);
+      const wrapper = createWrapper({
+        visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }],
+        numPages: 3,
+        showFilters: true,
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/CoursesPanel/NoCoursesView/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoCoursesView snapshot 1`] = `
+<div
+  className="d-flex align-items-center justify-content-center mb-4.5"
+  id="no-courses-content-view"
+>
+  <Image
+    alt="No Courses view banner"
+    src="icon/mock/path"
+  />
+  <h3
+    className="h1"
+  >
+    Looking for a new challenge?
+  </h3>
+  <p>
+    Explore our courses to add them to your dashboard.
+  </p>
+  <Button
+    as="a"
+    href="http://localhost:18000/course-search-url"
+    iconBefore={[MockFunction icons.Search]}
+    variant="brand"
+  >
+    Explore courses
+  </Button>
+</div>
+`;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Image } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
+import { baseAppUrl } from '../../../data/services/lms/urls';
+import emptyCourseSVG from '../../../assets/empty-course.svg';
+import { reduxHooks } from '../../../hooks';
+
+import messages from './messages';
+import './index.scss';
+
+export const NoCoursesView = () => {
+  const { formatMessage } = useIntl();
+  const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+  return (
+    <div
+      id="no-courses-content-view"
+      className="d-flex align-items-center justify-content-center mb-4.5"
+    >
+      <Image src={emptyCourseSVG} alt={formatMessage(messages.bannerAlt)} />
+      <h3 className="h1">
+        {formatMessage(messages.lookingForChallengePrompt)}
+      </h3>
+      <p>
+        {formatMessage(messages.exploreCoursesPrompt)}
+      </p>
+      <Button
+        variant="brand"
+        as="a"
+        href={baseAppUrl(courseSearchUrl)}
+        iconBefore={Search}
+      >
+        {formatMessage(messages.exploreCoursesButton)}
+      </Button>
+    </div>
+  );
+};
+
+export default NoCoursesView;

package/src/containers/CoursesPanel/NoCoursesView/index.scss

@@ -0,0 +1,15 @@
+@import "@openedx/paragon/scss/core/core";
+
+#no-courses-content-view {
+  border: 2px solid $light-400;
+  flex-direction: column;
+  padding-bottom: map-get($spacers, 5);
+  padding-top: map-get($spacers, 5);
+  height: 100%;
+
+  & > * {
+    margin-top: map-get($spacers, 3);
+    margin-bottom: map-get($spacers, 3);
+  }
+}
+

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import EmptyCourse from '.';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    usePlatformSettingsData: jest.fn(() => ({
+      courseSearchUrl: '/course-search-url',
+    })),
+  },
+}));
+
+describe('NoCoursesView', () => {
+  test('snapshot', () => {
+    expect(shallow(<EmptyCourse />).snapshot).toMatchSnapshot();
+  });
+});

package/src/containers/CoursesPanel/NoCoursesView/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  lookingForChallengePrompt: {
+    id: 'Dashboard.NoCoursesView.lookingForChallengePrompt',
+    defaultMessage: 'Looking for a new challenge?',
+    description: 'Prompt user for new challenge',
+  },
+  exploreCoursesPrompt: {
+    id: 'Dashboard.NoCoursesView.exploreCoursesPrompt',
+    defaultMessage: 'Explore our courses to add them to your dashboard.',
+    description: 'Prompt user to explore more courses',
+  },
+  exploreCoursesButton: {
+    id: 'Dashboard.NoCoursesView.exploreCoursesButton',
+    defaultMessage: 'Explore courses',
+    description: 'Button to explore more courses',
+  },
+  bannerAlt: {
+    id: 'Dashboard.NoCoursesView.bannerAlt',
+    defaultMessage: 'No Courses view banner',
+    description: 'No Courses view basnner',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesPanel no courses snapshot 1`] = `
+<div
+  className="course-list-container"
+>
+  <div
+    className="course-list-heading-container"
+  >
+    <h2
+      className="course-list-title"
+    >
+      My Courses
+    </h2>
+    <div
+      className="course-filter-controls-container"
+    >
+      <CourseFilterControls />
+    </div>
+  </div>
+  <NoCoursesViewSlot />
+</div>
+`;
+
+exports[`CoursesPanel with courses snapshot 1`] = `
+<div
+  className="course-list-container"
+>
+  <div
+    className="course-list-heading-container"
+  >
+    <h2
+      className="course-list-title"
+    >
+      My Courses
+    </h2>
+    <div
+      className="course-filter-controls-container"
+    >
+      <CourseFilterControls />
+    </div>
+  </div>
+  <CourseListSlot
+    courseListData={
+      {
+        "filterOptions": {},
+        "numPages": 1,
+        "setPageNumber": [MockFunction setPageNumber],
+        "showFilters": false,
+        "visibleList": [],
+      }
+    }
+  />
+</div>
+`;

package/src/containers/CoursesPanel/hooks.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { ListPageSize, SortKeys } from '../../data/constants/app';
+import { reduxHooks } from '../../hooks';
+import { StrictDict } from '../../utils';
+
+import * as module from './hooks';
+
+export const state = StrictDict({
+  sortBy: (val) => React.useState(val), // eslint-disable-line
+});
+
+/**
+ * Filters are fetched from the store and used to generate a list of "visible" courses.
+ * Other values returned and used for the layout of the CoursesPanel component are:
+ * the current page number, the sorting method, and whether or not to enable filters and pagination.
+ *
+ * @returns data for the CoursesPanel component
+ */
+export const useCourseListData = () => {
+  const filters = reduxHooks.useFilters();
+  const removeFilter = reduxHooks.useRemoveFilter();
+  const pageNumber = reduxHooks.usePageNumber();
+  const setPageNumber = reduxHooks.useSetPageNumber();
+
+  const [sortBy, setSortBy] = module.state.sortBy(SortKeys.enrolled);
+
+  const querySearch = new URLSearchParams(window.location.search);
+  const disablePagination = querySearch.get('disable_pagination');
+
+  const { numPages, visibleList } = reduxHooks.useCurrentCourseList({
+    sortBy,
+    filters,
+    pageSize: Number(disablePagination) === 1 ? 0 : ListPageSize,
+  });
+
+  const handleRemoveFilter = (filter) => () => removeFilter(filter);
+
+  return {
+    pageNumber,
+    numPages,
+    setPageNumber,
+    visibleList,
+    filterOptions: {
+      sortBy,
+      setSortBy,
+      filters,
+      handleRemoveFilter,
+    },
+    showFilters: filters.length > 0,
+  };
+};
+
+export default useCourseListData;

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

@@ -0,0 +1,115 @@
+import { MockUseState } from 'testUtils';
+import { reduxHooks } from 'hooks';
+import { ListPageSize, SortKeys } from 'data/constants/app';
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCurrentCourseList: jest.fn(),
+    usePageNumber: jest.fn(() => 23),
+    useSetPageNumber: jest.fn(),
+    useFilters: jest.fn(),
+    useRemoveFilter: jest.fn(),
+  },
+}));
+
+const mockGet = jest.fn(() => ({}));
+
+global.URLSearchParams = jest.fn().mockImplementation(() => ({
+  get: mockGet,
+}));
+
+const state = new MockUseState(hooks);
+
+const testList = ['a', 'b'];
+const testListData = {
+  numPages: 52,
+  visibleList: testList,
+};
+const testSortBy = 'fake sort option';
+const testFilters = ['some', 'fake', 'filters'];
+
+const setPageNumber = jest.fn(val => ({ setPageNumber: val }));
+reduxHooks.useSetPageNumber.mockReturnValue(setPageNumber);
+
+const removeFilter = jest.fn();
+reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
+reduxHooks.useFilters.mockReturnValue(['some', 'fake', 'filters']);
+
+describe('CourseList hooks', () => {
+  let out;
+
+  reduxHooks.useCurrentCourseList.mockReturnValue(testListData);
+
+  describe('state values', () => {
+    state.testGetter(state.keys.sortBy);
+    jest.clearAllMocks();
+  });
+
+  describe('useCourseListData', () => {
+    afterEach(state.restore);
+    beforeEach(() => {
+      state.mock();
+      state.mockVal(state.keys.sortBy, testSortBy);
+      out = hooks.useCourseListData();
+    });
+    describe('behavior', () => {
+      it('initializes sort with enrollment date', () => {
+        state.expectInitializedWith(state.keys.sortBy, SortKeys.enrolled);
+      });
+      it('loads current course list with sortBy, filters, and page size', () => {
+        expect(reduxHooks.useCurrentCourseList).toHaveBeenCalledWith({
+          sortBy: testSortBy,
+          filters: testFilters,
+          pageSize: ListPageSize,
+        });
+      });
+      it('loads current course list with page size 0 if/when there is query param disable_pagination=1', () => {
+        state.mock();
+        state.mockVal(state.keys.sortBy, testSortBy);
+        mockGet.mockReturnValueOnce('1');
+        out = hooks.useCourseListData();
+        expect(reduxHooks.useCurrentCourseList).toHaveBeenCalledWith({
+          sortBy: testSortBy,
+          filters: testFilters,
+          pageSize: 0,
+        });
+      });
+    });
+    describe('output', () => {
+      test('pageNumber loads from usePageNumber hook', () => {
+        expect(out.pageNumber).toEqual(reduxHooks.usePageNumber());
+      });
+      test('numPages and visible list load from useCurrentCourseList hook', () => {
+        expect(out.numPages).toEqual(testListData.numPages);
+        expect(out.visibleList).toEqual(testListData.visibleList);
+      });
+      test('showFilters is true iff filters is not empty', () => {
+        expect(out.showFilters).toEqual(true);
+        state.mockVal(state.keys.sortBy, testSortBy);
+        reduxHooks.useFilters.mockReturnValueOnce([]);
+        out = hooks.useCourseListData();
+        // don't show filter when list is empty.
+        expect(out.showFilters).toEqual(false);
+      });
+      describe('filterOptions', () => {
+        test('sortBy and setSortBy are connected to the state value', () => {
+          expect(out.filterOptions.sortBy).toEqual(testSortBy);
+          expect(out.filterOptions.setSortBy).toEqual(state.setState.sortBy);
+        });
+        test('filters passed by useFilters hook', () => {
+          expect(out.filterOptions.filters).toEqual(testFilters);
+        });
+        test('handleRemoveFilter creates callback to call setFilter.remove', () => {
+          const cb = out.filterOptions.handleRemoveFilter(testFilters[0]);
+          expect(removeFilter).not.toHaveBeenCalled();
+          cb();
+          expect(removeFilter).toHaveBeenCalledWith(testFilters[0]);
+        });
+        test('setPageNumber dispatches setPageNumber action with passed value', () => {
+          expect(out.setPageNumber(2)).toEqual(setPageNumber(2));
+        });
+      });
+    });
+  });
+});

package/src/containers/CoursesPanel/index.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import { reduxHooks } from '../../hooks';
+import {
+  CourseFilterControls,
+} from '../../containers/CourseFilterControls';
+import CourseListSlot from '../../slots/CourseListSlot';
+import NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';
+
+import { useCourseListData } from './hooks';
+import messages from './messages';
+import './index.scss';
+
+/**
+ * Renders the list of CourseCards, as well as the controls (CourseFilterControls) for modifying the list.
+ * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.
+ * @returns List of courses as CourseCards or empty state
+*/
+export const CoursesPanel = () => {
+  const { formatMessage } = useIntl();
+  const hasCourses = reduxHooks.useHasCourses();
+  const courseListData = useCourseListData();
+  return (
+    <div className="course-list-container">
+      <div className="course-list-heading-container">
+        <h2 className="course-list-title">{formatMessage(messages.myCourses)}</h2>
+        <div className="course-filter-controls-container">
+          <CourseFilterControls {...courseListData.filterOptions} />
+        </div>
+      </div>
+      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}
+    </div>
+  );
+};
+
+CoursesPanel.propTypes = {};
+
+export default CoursesPanel;