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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/containers/CourseFilterControls/index.scss

@@ -0,0 +1,29 @@
+.pgn__sheet-component {
+  max-width: 75% !important;
+  width: 75% !important;
+
+  .filter-form-heading {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+#course-filter-controls-card {
+  width: 512px;
+  height: 288px;
+  &.no-enrollments {
+    height: 172px;
+  }
+  .filter-form-heading {
+    font-weight: bold;
+    font-size: 18px;
+  }
+  hr {
+    width: 1px;
+  };
+  .filter-form-col {
+    width: 256px;
+    display: inline-block;
+    text-align: left;
+  }
+}
+