@openedx/frontend-app-learner-dashboard 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/containers/CourseFilterControls/CourseFilterControls.jsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@openedx/frontend-base';
-
-import {
-  Button,
-  Form,
-  Icon,
-  ModalPopup,
-  Sheet,
-  breakpoints,
-  useWindowSize,
-  ModalCloseButton,
-} from '@openedx/paragon';
-import { Close, Tune } from '@openedx/paragon/icons';
-
-import { reduxHooks } from '../../hooks';
-
-import FilterForm from './components/FilterForm';
-import SortForm from './components/SortForm';
-import useCourseFilterControlsData from './hooks';
-import messages from './messages';
-
-import './index.scss';
-
-export const CourseFilterControls = ({
-  sortBy,
-  setSortBy,
-  filters,
-}) => {
-  const { formatMessage } = useIntl();
-  const hasCourses = reduxHooks.useHasCourses();
-  const {
-    isOpen,
-    open,
-    close,
-    target,
-    setTarget,
-    handleFilterChange,
-    handleSortChange,
-  } = useCourseFilterControlsData({
-    filters,
-    setSortBy,
-  });
-  const { width } = useWindowSize();
-  const isMobile = width < breakpoints.small.minWidth;
-
-  return (
-    <div id="course-filter-controls">
-      <Button
-        ref={setTarget}
-        variant="outline-primary"
-        iconBefore={Tune}
-        onClick={open}
-        disabled={!hasCourses}
-      >
-        {formatMessage(messages.refine)}
-      </Button>
-      <Form>
-        {isMobile
-          ? (
-            <Sheet
-              className="w-75"
-              position="left"
-              show={isOpen}
-              onClose={close}
-            >
-              <div className="p-1 mr-3">
-                <b>{formatMessage(messages.refine)}</b>
-              </div>
-              <hr />
-              <div className="filter-form-row">
-                <FilterForm {...{ filters, handleFilterChange }} />
-              </div>
-              <div className="filter-form-row text-left m-1">
-                <SortForm {...{ sortBy, handleSortChange }} />
-              </div>
-              <div className="pgn__modal-close-container">
-                <ModalCloseButton variant="tertiary" onClick={close}>
-                  <Icon src={Close} />
-                </ModalCloseButton>
-              </div>
-            </Sheet>
-          ) : (
-            <ModalPopup
-              positionRef={target}
-              isOpen={isOpen}
-              onClose={close}
-              placement="bottom-end"
-            >
-              <div
-                id="course-filter-controls-card"
-                className="bg-white p-3 rounded shadow d-flex flex-row"
-              >
-                <div className="filter-form-col">
-                  <FilterForm {...{ filters, handleFilterChange }} />
-                </div>
-                <hr className="h-100 bg-primary-200 mx-3 my-0" />
-                <div className="filter-form-col text-left m-1">
-                  <SortForm {...{ sortBy, handleSortChange }} />
-                </div>
-              </div>
-            </ModalPopup>
-          )}
-      </Form>
-    </div>
-  );
-};
-CourseFilterControls.propTypes = {
-  sortBy: PropTypes.string.isRequired,
-  setSortBy: PropTypes.func.isRequired,
-  filters: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-
-export default CourseFilterControls;

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

@@ -1,75 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { formatMessage } from '@src/testUtils';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
-import { reduxHooks } from '@src/hooks';
-import { IntlProvider } from '@openedx/frontend-base';
-import { FilterKeys, SortKeys } from '@src/data/constants/app';
-
-import messages from './messages';
-import CourseFilterControls from './CourseFilterControls';
-import useCourseFilterControlsData from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: { useHasCourses: jest.fn() },
-}));
-
-jest.mock('./hooks', () => jest.fn());
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  useWindowSize: jest.fn(),
-}));
-
-const filters = Object.values(FilterKeys);
-
-const mockControlsData = {
-  isOpen: false,
-  open: jest.fn().mockName('open'),
-  close: jest.fn().mockName('close'),
-  target: 'target-test',
-  setTarget: jest.fn(),
-  handleFilterChange: jest.fn().mockName('handleFilterChange'),
-  handleSortChange: jest.fn().mockName('handleSortChange'),
-};
-
-describe('CourseFilterControls', () => {
-  const props = {
-    sortBy: SortKeys.enrolled,
-    setSortBy: jest.fn().mockName('setSortBy'),
-    filters,
-  };
-
-  describe('mobile and open', () => {
-    it('should render sheet', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      useCourseFilterControlsData.mockReturnValue({ ...mockControlsData, isOpen: true });
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
-      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
-      const sheet = screen.getByRole('presentation', { hidden: true });
-      expect(sheet).toBeInTheDocument();
-      expect(sheet.parentElement).toHaveClass('sheet-container');
-    });
-  });
-  describe('is not mobile', () => {
-    it('should have button disabled', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      useCourseFilterControlsData.mockReturnValue({ ...mockControlsData, isOpen: true });
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
-      const filterForm = screen.getByText(messages.courseStatus.defaultMessage);
-      const modal = filterForm.closest('div.pgn__modal-popup__tooltip');
-      expect(modal).toBeInTheDocument();
-    });
-  });
-  describe('no courses', () => {
-    it('should have button disabled', () => {
-      reduxHooks.useHasCourses.mockReturnValue(false);
-      useCourseFilterControlsData.mockReturnValue(mockControlsData);
-      useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
-      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
-      const button = screen.getByRole('button', { name: formatMessage(messages.refine) });
-      expect(button).toBeInTheDocument();
-      expect(button).toBeDisabled();
-    });
-  });
-});

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,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { formatMessage } from '@src/testUtils';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import { FilterKeys } from '@src/data/constants/app';
-import Checkbox from './Checkbox';
-import messages from '../messages';
-
-describe('Checkbox', () => {
-  describe('renders correctly', () => {
-    Object.keys(FilterKeys).forEach((filterKey) => {
-      it(`renders ${filterKey}`, () => {
-        render(<IntlProvider locale="en"><Checkbox filterKey={filterKey} /></IntlProvider>);
-        expect(screen.getByText(formatMessage(messages[filterKey]))).toBeInTheDocument();
-      });
-    });
-  });
-});

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,54 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-import { FilterKeys } from '@src/data/constants/app';
-import { FilterForm, filterOrder } from './FilterForm';
-import messages from '../messages';
-
-const mockHandleFilterChange = jest.fn();
-
-const defaultProps = {
-  filters: [FilterKeys.inProgress],
-  handleFilterChange: mockHandleFilterChange,
-};
-
-const renderComponent = (props = defaultProps) => render(
-  <IntlProvider messages={{}}>
-    <FilterForm {...props} />
-  </IntlProvider>,
-);
-
-describe('FilterForm', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders all filter checkboxes in correct order', () => {
-    renderComponent();
-    const checkboxes = screen.getAllByRole('checkbox');
-    expect(checkboxes).toHaveLength(filterOrder.length);
-    checkboxes.forEach((checkbox, index) => {
-      expect(checkbox).toHaveAttribute('value', filterOrder[index]);
-    });
-  });
-
-  it('checks boxes based on filters prop', () => {
-    const filters = [FilterKeys.inProgress, FilterKeys.done];
-    renderComponent({ ...defaultProps, filters });
-    filters.forEach(filter => {
-      expect(screen.getByRole('checkbox', { name: formatMessage(messages[filter]) })).toBeChecked();
-    });
-  });
-
-  it('calls handleFilterChange when checkbox is clicked', () => {
-    renderComponent();
-    const checkbox = screen.getByRole('checkbox', { name: formatMessage(messages.notStarted) });
-    fireEvent.click(checkbox);
-    expect(mockHandleFilterChange).toHaveBeenCalled();
-  });
-
-  it('displays course status heading', () => {
-    renderComponent();
-    expect(screen.getByText(/course status/i)).toBeInTheDocument();
-  });
-});

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,29 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-
-import { SortKeys } from '@src/data/constants/app';
-import SortForm from './SortForm';
-import messages from '../messages';
-
-describe('SortForm', () => {
-  const props = {
-    handleSortChange: jest.fn().mockName('handleSortChange'),
-    sortBy: SortKeys.enrolled,
-  };
-  it('renders heading', () => {
-    render(<IntlProvider locale="en"><SortForm {...props} /></IntlProvider>);
-    const heading = screen.getByText(formatMessage(messages.sort));
-    expect(heading).toBeInTheDocument();
-  });
-  it('renders radio enrolled', () => {
-    render(<IntlProvider locale="en"><SortForm {...props} /></IntlProvider>);
-    const enrolled = screen.getByRole('radio', { name: formatMessage(messages.sortLastEnrolled) });
-    expect(enrolled).toBeInTheDocument();
-  });
-  it('renders radio title', () => {
-    render(<IntlProvider locale="en"><SortForm {...props} /></IntlProvider>);
-    const title = screen.getByRole('radio', { name: formatMessage(messages.sortTitle) });
-    expect(title).toBeInTheDocument();
-  });
-});

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;

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

@@ -1,125 +0,0 @@
-import { useToggle } from '@openedx/paragon';
-
-import { MockUseState } from '@src/testUtils';
-
-import track from '@src/tracking';
-import { reduxHooks } from '@src/hooks';
-
-import * as hooks from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useAddFilter: jest.fn(),
-    useRemoveFilter: jest.fn(),
-  },
-}));
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  useToggle: jest.fn().mockImplementation((val) => [
-    val,
-    jest.fn().mockName('useToggle.setTrue'),
-    jest.fn().mockName('useToggle.setFalse'),
-  ]),
-}));
-
-jest.mock('@src/tracking', () => ({
-  filter: {
-    filterClicked: jest.fn(),
-    filterOptionSelected: 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();
-  const addFilter = jest.fn();
-
-  beforeEach(() => {
-    reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
-    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/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;