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

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,81 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { useIsCollapsed } from './hooks';
-import CourseList from '.';
-
-jest.mock('./hooks', () => ({
-  useIsCollapsed: jest.fn(),
-}));
-
-jest.mock('../../CourseCard', () => jest.fn(() => <div>CourseCard</div>));
-jest.mock('../../CourseFilterControls', () => ({
-  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
-}));
-
-describe('CourseList', () => {
-  const defaultCourseListData = {
-    filterOptions: {},
-    numPages: 1,
-    setPageNumber: jest.fn().mockName('setPageNumber'),
-    showFilters: false,
-    visibleList: [],
-  };
-  useIsCollapsed.mockReturnValue(false);
-
-  const renderList = (courseListData = defaultCourseListData) => (
-    render(<CourseList courseListData={courseListData} />)
-  );
-
-  describe('no courses or filters', () => {
-    it('should not render related components', () => {
-      renderList();
-      const filterControls = screen.queryByText('ActiveCourseFilters');
-      const courseCard = screen.queryByText('CourseCard');
-      const prevButton = screen.queryByRole('button', { name: 'Previous' });
-      expect(filterControls).toBeNull();
-      expect(courseCard).toBeNull();
-      expect(prevButton).toBeNull();
-    });
-  });
-  describe('with filters', () => {
-    it('should render filter component', () => {
-      renderList({
-        ...defaultCourseListData,
-        showFilters: true,
-      });
-      const filterControls = screen.getByText('ActiveCourseFilters');
-      expect(filterControls).toBeInTheDocument();
-    });
-  });
-  describe('with multiple courses and pages', () => {
-    it('render Course Cards and pagination', () => {
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      const numPages = 3;
-      renderList({
-        ...defaultCourseListData,
-        visibleList,
-        numPages,
-      });
-      const courseCards = screen.getAllByText('CourseCard');
-      expect(courseCards.length).toEqual(visibleList.length);
-      const pageButtons = screen.getAllByRole('button', { name: /^Page/i });
-      expect(pageButtons.length).toBe(numPages);
-    });
-  });
-  describe('collapsed with multiple courses and pages', () => {
-    it('should render correct components', () => {
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      useIsCollapsed.mockReturnValueOnce(true);
-      renderList({
-        ...defaultCourseListData,
-        visibleList,
-        numPages: 3,
-        showFilters: true,
-      });
-      const courseCards = screen.getAllByText('CourseCard');
-      expect(courseCards.length).toEqual(visibleList.length);
-      const reducedPagination = screen.getByRole('button', { name: '1 of 3' });
-      expect(reducedPagination).toBeInTheDocument();
-    });
-  });
-});

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.test.jsx

@@ -1,38 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-import { baseAppUrl } from '@src/data/services/lms/urls';
-
-import EmptyCourse from '.';
-import messages from './messages';
-
-const courseSearchUrl = '/course-search-url';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl,
-    })),
-  },
-}));
-
-describe('NoCoursesView', () => {
-  it('should display image, heading and button', () => {
-    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
-    const image = screen.getByRole('img', { alt: formatMessage(messages.bannerAlt) });
-    expect(image).toBeInTheDocument();
-  });
-  it('should display heading and prompt', () => {
-    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
-    const heading = screen.getByText(formatMessage(messages.lookingForChallengePrompt));
-    const prompt = screen.getByText(formatMessage(messages.exploreCoursesPrompt));
-    expect(heading).toBeInTheDocument();
-    expect(prompt).toBeInTheDocument();
-  });
-  it('should display button', () => {
-    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
-    const button = screen.getByRole('link', { name: formatMessage(messages.exploreCoursesButton) });
-    expect(button).toBeInTheDocument();
-    expect(button.href).toBe(baseAppUrl(courseSearchUrl));
-  });
-});

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/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;

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

@@ -1,115 +0,0 @@
-import { MockUseState } from '@src/testUtils';
-import { reduxHooks } from '@src/hooks';
-import { ListPageSize, SortKeys } from '@src/data/constants/app';
-import * as hooks from './hooks';
-
-jest.mock('@src/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

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

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

@@ -1,92 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { MemoryRouter } from 'react-router-dom';
-import { FilterKeys } from '@src/data/constants/app';
-import { reduxHooks } from '@src/hooks';
-
-import messagesNoCourses from '@src/containers/CoursesPanel/NoCoursesView/messages';
-import { useCourseListData } from './hooks';
-import CoursesPanel from '.';
-import messages from './messages';
-
-const courseSearchUrl = '/course-search-url';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useHasCourses: jest.fn(),
-    usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl,
-    })),
-  },
-}));
-
-jest.mock('./hooks', () => ({
-  useCourseListData: jest.fn(),
-}));
-
-jest.mock('@src/containers/CourseCard', () => jest.fn(() => <div>CourseCard</div>));
-jest.mock('@src/containers/CourseFilterControls', () => ({
-  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
-  CourseFilterControls: jest.fn(() => <div>CourseFilterControls</div>),
-}));
-
-const filters = Object.values(FilterKeys);
-
-reduxHooks.useHasCourses.mockReturnValue(true);
-
-describe('CoursesPanel', () => {
-  const defaultCourseListData = {
-    filterOptions: { filters, handleRemoveFilter: jest.fn() },
-    numPages: 1,
-    setPageNumber: jest.fn().mockName('setPageNumber'),
-    showFilters: false,
-    visibleList: [],
-  };
-
-  const createWrapper = (courseListData) => {
-    useCourseListData.mockReturnValue({
-      ...defaultCourseListData,
-      ...courseListData,
-    });
-    return render(
-      <MemoryRouter>
-        <IntlProvider locale="en">
-          <CoursesPanel />
-        </IntlProvider>
-      </MemoryRouter>
-    );
-  };
-
-  describe('no courses', () => {
-    it('should render no courses view slot', () => {
-      reduxHooks.useHasCourses.mockReturnValue(false);
-      createWrapper();
-      const imgNoCourses = screen.getByRole('img', { name: messagesNoCourses.bannerAlt.defaultMessage });
-      expect(imgNoCourses).toBeInTheDocument();
-      const courseCard = screen.queryByText('CourseCard');
-      expect(courseCard).toBeNull();
-    });
-  });
-  describe('with courses', () => {
-    it('should render courselist', () => {
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      createWrapper({ visibleList });
-      const courseCards = screen.getAllByText('CourseCard');
-      expect(courseCards.length).toEqual(visibleList.length);
-    });
-    it('displays course filter controls', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      createWrapper();
-      expect(screen.getByText('CourseFilterControls')).toBeInTheDocument();
-    });
-
-    it('displays course list slot when courses exist', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      createWrapper({ visibleList });
-      const heading = screen.getByText(messages.myCourses.defaultMessage);
-      expect(heading).toBeInTheDocument();
-    });
-  });
-});

package/src/containers/CoursesPanel/messages.js

@@ -1,11 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  myCourses: {
-    id: 'dashboard.mycourses',
-    defaultMessage: 'My Courses',
-    description: 'Course list heading',
-  },
-});
-
-export default messages;

package/src/containers/Dashboard/DashboardLayout.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Container, Col, Row } from '@openedx/paragon';
-
-import WidgetSidebarSlot from '../../slots/WidgetSidebarSlot';
-
-import hooks from './hooks';
-
-export const columnConfig = {
-  courseList: {
-    withSidebar: {
-      lg: { span: 12, offset: 0 },
-      xl: { span: 8, offset: 0 },
-    },
-    noSidebar: {
-      lg: { span: 12, offset: 0 },
-      xl: { span: 12, offset: 0 },
-    },
-  },
-  sidebar: {
-    lg: { span: 12, offset: 0 },
-    xl: { span: 4, offset: 0 },
-  },
-};
-
-export const DashboardLayout = ({ children }) => {
-  const {
-    isCollapsed,
-    sidebarShowing,
-  } = hooks.useDashboardLayoutData();
-
-  const courseListColumnProps = sidebarShowing
-    ? columnConfig.courseList.withSidebar
-    : columnConfig.courseList.noSidebar;
-
-  return (
-    <Container fluid size="xl">
-      <Row>
-        <Col {...courseListColumnProps} className="course-list-column">
-          {children}
-        </Col>
-        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>
-          <WidgetSidebarSlot />
-        </Col>
-      </Row>
-    </Container>
-  );
-};
-DashboardLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default DashboardLayout;