@openedx/frontend-app-learner-dashboard 1.0.0-alpha.4 → 1.0.0-alpha.6

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

@@ -1,113 +0,0 @@
-import { useToggle } from '@openedx/paragon';
-
-import { MockUseState } from 'testUtils';
-import { reduxHooks } from 'hooks';
-
-import track from 'tracking';
-
-import * as hooks from './hooks';
-
-jest.mock('tracking', () => ({
-  filter: {
-    filterClicked: jest.fn(),
-    filterOptionSelected: jest.fn(),
-  },
-}));
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useAddFilter: jest.fn(),
-    useRemoveFilter: jest.fn(),
-  },
-}));
-
-const state = new MockUseState(hooks);
-
-describe('CourseFilterControls hooks', () => {
-  let out;
-  const filters = ['a', 'b', 'c'];
-  const setSortBy = jest.fn();
-
-  const removeFilter = jest.fn();
-  reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
-  const addFilter = jest.fn();
-  reduxHooks.useAddFilter.mockReturnValue(addFilter);
-
-  const toggleOpen = jest.fn();
-  const toggleClose = jest.fn();
-
-  describe('state values', () => {
-    state.testGetter(state.keys.target);
-  });
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('useCourseFilterControlsData', () => {
-    beforeEach(() => {
-      useToggle.mockReturnValueOnce([false, toggleOpen, toggleClose]);
-      state.mock();
-      out = hooks.useCourseFilterControlsData({
-        filters,
-        setSortBy,
-      });
-    });
-    afterEach(state.restore);
-
-    test('default state', () => {
-      expect(out.isOpen).toEqual(false);
-      expect(out.target).toEqual(state.stateVals.target);
-    });
-
-    test('open calls toggleOpen and track.filter.filterClicked', () => {
-      out.open();
-      expect(toggleOpen).toHaveBeenCalled();
-      expect(track.filter.filterClicked).toHaveBeenCalled();
-    });
-
-    test('close calls toggleClose and track.filter.filterOptionSelected', () => {
-      out.close();
-      expect(toggleClose).toHaveBeenCalled();
-      expect(track.filter.filterOptionSelected).toHaveBeenCalledWith(filters);
-    });
-
-    test('isOpen is true when target is set', () => {
-      useToggle.mockReturnValueOnce([true, toggleOpen, toggleClose]);
-      expect(out.target).toEqual(null);
-      state.mockVal(state.keys.target, 'foo');
-      out = hooks.useCourseFilterControlsData({
-        filters,
-        setSortBy,
-      });
-      expect(out.isOpen).toEqual(true);
-      expect(out.target).toEqual('foo');
-    });
-
-    test('handle filter change', () => {
-      const value = 'a';
-      out.handleFilterChange({
-        target: {
-          checked: true,
-          value,
-        },
-      });
-      expect(addFilter).toHaveBeenCalledWith(value);
-      out.handleFilterChange({
-        target: {
-          checked: false,
-          value,
-        },
-      });
-      expect(removeFilter).toHaveBeenCalledWith(value);
-    });
-    test('handle sort change', () => {
-      const value = 'a';
-      out.handleSortChange({
-        target: {
-          value,
-        },
-      });
-      expect(setSortBy).toHaveBeenCalledWith(value);
-    });
-  });
-});

package/src/containers/CourseFilterControls/index.jsx

@@ -1,6 +0,0 @@
-import CourseFilterControls from './CourseFilterControls';
-
-export { default as ActiveCourseFilters } from './ActiveCourseFilters';
-
-export { CourseFilterControls };
-export default CourseFilterControls;

package/src/containers/CourseFilterControls/messages.js

@@ -1,61 +0,0 @@
-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

@@ -1,70 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,29 +0,0 @@
-// 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

@@ -1,40 +0,0 @@
-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

@@ -1,15 +0,0 @@
-@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

@@ -1,18 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,55 +0,0 @@
-// 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

@@ -1,54 +0,0 @@
-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;