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

package/src/containers/CourseFilterControls/CourseFilterControls.test.jsx

@@ -1,60 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { breakpoints, useWindowSize } from '@openedx/paragon';
-
-import { reduxHooks } from 'hooks';
-
-import CourseFilterControls from './CourseFilterControls';
-import useCourseFilterControlsData from './hooks';
-
-jest.mock('hooks', () => ({
-  reduxHooks: { useHasCourses: jest.fn() },
-}));
-
-jest.mock('./hooks', () => jest.fn().mockName('useCourseFilterControlsData'));
-
-jest.mock('./components/FilterForm', () => 'FilterForm');
-jest.mock('./components/SortForm', () => 'SortForm');
-
-reduxHooks.useHasCourses.mockReturnValue(true);
-
-describe('CourseFilterControls', () => {
-  const props = {
-    sortBy: 'test-sort-by',
-    setSortBy: jest.fn().mockName('setSortBy'),
-    filters: ['test-filter'],
-  };
-
-  useCourseFilterControlsData.mockReturnValue({
-    isOpen: false,
-    open: jest.fn().mockName('open'),
-    close: jest.fn().mockName('close'),
-    target: 'test-target',
-    setTarget: jest.fn().mockName('setTarget'),
-    handleFilterChange: jest.fn().mockName('handleFilterChange'),
-    handleSortChange: jest.fn().mockName('handleSortChange'),
-  });
-
-  describe('no courses', () => {
-    test('snapshot', () => {
-      reduxHooks.useHasCourses.mockReturnValueOnce(false);
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-  describe('mobile', () => {
-    test('snapshot', () => {
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-  describe('is not mobile', () => {
-    test('snapshot', () => {
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-});

package/src/containers/CourseFilterControls/__snapshots__/ActiveCourseFilters.test.jsx.snap

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ActiveCourseFilters snapshot renders 1`] = `
-<div
-  id="course-list-active-filters"
->
-  <Chip
-    key="inProgress"
-  >
-    In-Progress
-  </Chip>
-  <Chip
-    key="notStarted"
-  >
-    Not Started
-  </Chip>
-  <Chip
-    key="done"
-  >
-    Done
-  </Chip>
-  <Chip
-    key="notEnrolled"
-  >
-    Not Enrolled
-  </Chip>
-  <Chip
-    key="upgraded"
-  >
-    Upgraded
-  </Chip>
-  <Button
-    onClick={[Function]}
-    variant="link"
-  >
-    Clear all
-  </Button>
-</div>
-`;

package/src/containers/CourseFilterControls/__snapshots__/CourseFilterControls.test.jsx.snap

@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseFilterControls is not mobile snapshot 1`] = `
-<div
-  id="course-filter-controls"
->
-  <Button
-    disabled={false}
-    iconBefore={[MockFunction icons.Tune]}
-    onClick={[MockFunction open]}
-    variant="outline-primary"
-  >
-    Refine
-  </Button>
-  <Form>
-    <ModalPopup
-      isOpen={false}
-      onClose={[MockFunction close]}
-      placement="bottom-end"
-      positionRef="test-target"
-    >
-      <div
-        className="bg-white p-3 rounded shadow d-flex flex-row"
-        id="course-filter-controls-card"
-      >
-        <div
-          className="filter-form-col"
-        >
-          <FilterForm
-            filters={
-              [
-                "test-filter",
-              ]
-            }
-            handleFilterChange={[MockFunction handleFilterChange]}
-          />
-        </div>
-        <hr
-          className="h-100 bg-primary-200 mx-3 my-0"
-        />
-        <div
-          className="filter-form-col text-left m-1"
-        >
-          <SortForm
-            handleSortChange={[MockFunction handleSortChange]}
-            sortBy="test-sort-by"
-          />
-        </div>
-      </div>
-    </ModalPopup>
-  </Form>
-</div>
-`;
-
-exports[`CourseFilterControls mobile snapshot 1`] = `
-<div
-  id="course-filter-controls"
->
-  <Button
-    disabled={false}
-    iconBefore={[MockFunction icons.Tune]}
-    onClick={[MockFunction open]}
-    variant="outline-primary"
-  >
-    Refine
-  </Button>
-  <Form>
-    <Sheet
-      className="w-75"
-      onClose={[MockFunction close]}
-      position="left"
-      show={false}
-    >
-      <div
-        className="p-1 mr-3"
-      >
-        <b>
-          Refine
-        </b>
-      </div>
-      <hr />
-      <div
-        className="filter-form-row"
-      >
-        <FilterForm
-          filters={
-            [
-              "test-filter",
-            ]
-          }
-          handleFilterChange={[MockFunction handleFilterChange]}
-        />
-      </div>
-      <div
-        className="filter-form-row text-left m-1"
-      >
-        <SortForm
-          handleSortChange={[MockFunction handleSortChange]}
-          sortBy="test-sort-by"
-        />
-      </div>
-      <div
-        className="pgn__modal-close-container"
-      >
-        <ModalCloseButton
-          onClick={[MockFunction close]}
-          variant="tertiary"
-        >
-          <Icon
-            src={[MockFunction icons.Close]}
-          />
-        </ModalCloseButton>
-      </div>
-    </Sheet>
-  </Form>
-</div>
-`;
-
-exports[`CourseFilterControls no courses snapshot 1`] = `
-<div
-  id="course-filter-controls"
->
-  <Button
-    disabled={true}
-    iconBefore={[MockFunction icons.Tune]}
-    onClick={[MockFunction open]}
-    variant="outline-primary"
-  >
-    Refine
-  </Button>
-  <Form>
-    <ModalPopup
-      isOpen={false}
-      onClose={[MockFunction close]}
-      placement="bottom-end"
-      positionRef="test-target"
-    >
-      <div
-        className="bg-white p-3 rounded shadow d-flex flex-row"
-        id="course-filter-controls-card"
-      >
-        <div
-          className="filter-form-col"
-        >
-          <FilterForm
-            filters={
-              [
-                "test-filter",
-              ]
-            }
-            handleFilterChange={[MockFunction handleFilterChange]}
-          />
-        </div>
-        <hr
-          className="h-100 bg-primary-200 mx-3 my-0"
-        />
-        <div
-          className="filter-form-col text-left m-1"
-        >
-          <SortForm
-            handleSortChange={[MockFunction handleSortChange]}
-            sortBy="test-sort-by"
-          />
-        </div>
-      </div>
-    </ModalPopup>
-  </Form>
-</div>
-`;

package/src/containers/CourseFilterControls/components/Checkbox.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@openedx/frontend-base';
-
-import { Form } from '@openedx/paragon';
-
-import messages from '../messages';
-
-export const Checkbox = ({ filterKey }) => {
-  const { formatMessage } = useIntl();
-  return (
-    <Form.Checkbox className="py-2" value={filterKey}>
-      {formatMessage(messages[filterKey])}
-    </Form.Checkbox>
-  );
-};
-Checkbox.propTypes = {
-  filterKey: PropTypes.string.isRequired,
-};
-
-export default Checkbox;

package/src/containers/CourseFilterControls/components/Checkbox.test.jsx

@@ -1,15 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { FilterKeys } from 'data/constants/app';
-import Checkbox from './Checkbox';
-
-describe('Checkbox', () => {
-  describe('snapshot', () => {
-    Object.keys(FilterKeys).forEach((filterKey) => {
-      it(`renders ${filterKey}`, () => {
-        const wrapper = shallow(<Checkbox filterKey={filterKey} />);
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
-    });
-  });
-});

package/src/containers/CourseFilterControls/components/FilterForm.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@openedx/frontend-base';
-
-import { FilterKeys } from '../../../data/constants/app';
-
-import { Form } from '@openedx/paragon';
-
-import Checkbox from './Checkbox';
-import messages from '../messages';
-
-export const filterOrder = [
-  FilterKeys.inProgress,
-  FilterKeys.notStarted,
-  FilterKeys.done,
-  FilterKeys.notEnrolled,
-  FilterKeys.upgraded,
-];
-
-export const FilterForm = ({
-  filters,
-  handleFilterChange,
-}) => {
-  const { formatMessage } = useIntl();
-  return (
-    <Form.Group>
-      <div className="filter-form-heading mb-1">{formatMessage(messages.courseStatus)}</div>
-      <Form.CheckboxSet
-        name="course-status-filters"
-        onChange={handleFilterChange}
-        value={filters}
-      >
-        {filterOrder.map(filterKey => (
-          <Checkbox filterKey={filterKey} key={filterKey} />
-        ))}
-      </Form.CheckboxSet>
-    </Form.Group>
-  );
-};
-FilterForm.propTypes = {
-  filters: PropTypes.arrayOf(PropTypes.string).isRequired,
-  handleFilterChange: PropTypes.func.isRequired,
-};
-
-export default FilterForm;

package/src/containers/CourseFilterControls/components/FilterForm.test.jsx

@@ -1,29 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { FilterKeys } from 'data/constants/app';
-import FilterForm, { filterOrder } from './FilterForm';
-
-jest.mock('./Checkbox', () => 'Checkbox');
-
-describe('FilterForm', () => {
-  const props = {
-    filters: ['test-filter'],
-    handleFilterChange: jest.fn().mockName('handleFilterChange'),
-  };
-  describe('snapshot', () => {
-    test('renders', () => {
-      const wrapper = shallow(<FilterForm {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-
-  test('filterOrder', () => {
-    expect(filterOrder).toEqual([
-      FilterKeys.inProgress,
-      FilterKeys.notStarted,
-      FilterKeys.done,
-      FilterKeys.notEnrolled,
-      FilterKeys.upgraded,
-    ]);
-  });
-});

package/src/containers/CourseFilterControls/components/SortForm.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@openedx/frontend-base';
-
-import { SortKeys } from '../../../data/constants/app';
-
-import { Form } from '@openedx/paragon';
-
-import messages from '../messages';
-
-export const SortForm = ({
-  handleSortChange,
-  sortBy,
-}) => {
-  const { formatMessage } = useIntl();
-  return (
-    <>
-      <div className="filter-form-heading mb-1">{formatMessage(messages.sort)}</div>
-      <Form.RadioSet
-        name="sort"
-        onChange={handleSortChange}
-        value={sortBy}
-      >
-        <Form.Radio className="py-2" value={SortKeys.enrolled}>
-          {formatMessage(messages.sortLastEnrolled)}
-        </Form.Radio>
-        <Form.Radio className="py-2" value={SortKeys.title}>
-          {formatMessage(messages.sortTitle)}
-        </Form.Radio>
-      </Form.RadioSet>
-    </>
-  );
-};
-SortForm.propTypes = {
-  handleSortChange: PropTypes.func.isRequired,
-  sortBy: PropTypes.string.isRequired,
-};
-
-export default SortForm;

package/src/containers/CourseFilterControls/components/SortForm.test.jsx

@@ -1,19 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { SortKeys } from 'data/constants/app';
-import SortForm from './SortForm';
-
-jest.mock('./Checkbox', () => 'Checkbox');
-
-describe('SortForm', () => {
-  const props = {
-    handleSortChange: jest.fn().mockName('handleSortChange'),
-    sortBy: SortKeys.enrolled,
-  };
-  describe('snapshot', () => {
-    test('renders', () => {
-      const wrapper = shallow(<SortForm {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-});

package/src/containers/CourseFilterControls/components/__snapshots__/Checkbox.test.jsx.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Checkbox snapshot renders done 1`] = `
-<Form.Checkbox
-  className="py-2"
-  value="done"
->
-  Done
-</Form.Checkbox>
-`;
-
-exports[`Checkbox snapshot renders inProgress 1`] = `
-<Form.Checkbox
-  className="py-2"
-  value="inProgress"
->
-  In-Progress
-</Form.Checkbox>
-`;
-
-exports[`Checkbox snapshot renders notEnrolled 1`] = `
-<Form.Checkbox
-  className="py-2"
-  value="notEnrolled"
->
-  Not Enrolled
-</Form.Checkbox>
-`;
-
-exports[`Checkbox snapshot renders notStarted 1`] = `
-<Form.Checkbox
-  className="py-2"
-  value="notStarted"
->
-  Not Started
-</Form.Checkbox>
-`;
-
-exports[`Checkbox snapshot renders upgraded 1`] = `
-<Form.Checkbox
-  className="py-2"
-  value="upgraded"
->
-  Upgraded
-</Form.Checkbox>
-`;

package/src/containers/CourseFilterControls/components/__snapshots__/FilterForm.test.jsx.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterForm snapshot renders 1`] = `
-<Form.Group>
-  <div
-    className="filter-form-heading mb-1"
-  >
-    Course Status
-  </div>
-  <Form.CheckboxSet
-    name="course-status-filters"
-    onChange={[MockFunction handleFilterChange]}
-    value={
-      [
-        "test-filter",
-      ]
-    }
-  >
-    <Checkbox
-      filterKey="inProgress"
-      key="inProgress"
-    />
-    <Checkbox
-      filterKey="notStarted"
-      key="notStarted"
-    />
-    <Checkbox
-      filterKey="done"
-      key="done"
-    />
-    <Checkbox
-      filterKey="notEnrolled"
-      key="notEnrolled"
-    />
-    <Checkbox
-      filterKey="upgraded"
-      key="upgraded"
-    />
-  </Form.CheckboxSet>
-</Form.Group>
-`;

package/src/containers/CourseFilterControls/components/__snapshots__/SortForm.test.jsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SortForm snapshot renders 1`] = `
-<Fragment>
-  <div
-    className="filter-form-heading mb-1"
-  >
-    Sort
-  </div>
-  <Form.RadioSet
-    name="sort"
-    onChange={[MockFunction handleSortChange]}
-    value="enrolled"
-  >
-    <Form.Radio
-      className="py-2"
-      value="enrolled"
-    >
-      Last enrolled
-    </Form.Radio>
-    <Form.Radio
-      className="py-2"
-      value="title"
-    >
-      Title (A-Z)
-    </Form.Radio>
-  </Form.RadioSet>
-</Fragment>
-`;

package/src/containers/CourseFilterControls/hooks.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { useToggle } from '@openedx/paragon';
-
-import { StrictDict } from '../../utils';
-import track from '../../tracking';
-import { reduxHooks } from '../../hooks';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  target: (val) => React.useState(val), // eslint-disable-line
-});
-
-/**
- * Sets up a toggle for the modal as well as helper functions for handling changes to the form controls.
- *
- * @param {array} filters Currently active course filters
- * @param {function} setSortBy Set function for sorting the course list
- * @returns {object} data and functions for managing the CourseFilterControls component
- */
-export const useCourseFilterControlsData = ({
-  filters,
-  setSortBy,
-}) => {
-  const [isOpen, toggleOpen, toggleClose] = useToggle(false);
-  const [target, setTarget] = module.state.target(null);
-
-  const addFilter = reduxHooks.useAddFilter();
-  const removeFilter = reduxHooks.useRemoveFilter();
-
-  const handleFilterChange = ({ target: { checked, value } }) => {
-    const update = checked ? addFilter : removeFilter;
-    update(value);
-  };
-  const handleSortChange = ({ target: { value } }) => {
-    setSortBy(value);
-  };
-
-  const open = () => {
-    track.filter.filterClicked();
-    toggleOpen();
-  };
-
-  const close = () => {
-    track.filter.filterOptionSelected(filters);
-    toggleClose();
-  };
-
-  return {
-    isOpen,
-    open,
-    close,
-    target,
-    setTarget,
-    handleFilterChange,
-    handleSortChange,
-  };
-};
-
-export default useCourseFilterControlsData;