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

package/src/data/redux/app/selectors/simpleSelectors.js

@@ -0,0 +1,38 @@
+import { createSelector } from 'reselect';
+import { StrictDict } from '../../../../utils';
+
+import * as module from './simpleSelectors';
+
+export const appSelector = (state) => state.app;
+const mkSimpleSelector = (cb) => createSelector([module.appSelector], cb);
+
+// top-level app data selectors
+export const simpleSelectors = StrictDict({
+  courseData: mkSimpleSelector(app => app.courseData),
+  platformSettings: mkSimpleSelector(app => app.platformSettings),
+  suggestedCourses: mkSimpleSelector(app => app.suggestedCourses),
+  emailConfirmation: mkSimpleSelector(app => app.emailConfirmation),
+  enterpriseDashboard: mkSimpleSelector(app => app.enterpriseDashboard || {}),
+  selectSessionModal: mkSimpleSelector(app => app.selectSessionModal),
+  pageNumber: mkSimpleSelector(app => app.pageNumber),
+  filters: mkSimpleSelector(app => app.filters),
+  socialShareSettings: mkSimpleSelector(app => app.socialShareSettings),
+});
+
+export const cardSimpleSelectors = StrictDict({
+  certificate: ({ certificate }) => certificate,
+  course: ({ course }) => course,
+  courseProvider: ({ courseProvider }) => courseProvider,
+  courseRun: ({ courseRun }) => courseRun,
+  credit: ({ credit }) => credit,
+  enrollment: ({ enrollment }) => enrollment,
+  entitlement: ({ entitlement }) => entitlement,
+  gradeData: ({ gradeData }) => gradeData,
+  relatedPrograms: ({ programs: { relatedPrograms } }) => relatedPrograms,
+});
+
+export const mkCardSelector = (simpleSelector, selector) => (state, cardId) => (
+  selector(simpleSelector(module.simpleSelectors.courseData(state)[cardId]))
+);
+
+export default simpleSelectors;

package/src/data/redux/app/selectors/simpleSelectors.test.js

@@ -0,0 +1,75 @@
+import { keyStore } from 'utils';
+import * as module from './simpleSelectors';
+
+const {
+  appSelector,
+  simpleSelectors,
+  cardSimpleSelectors,
+  mkCardSelector,
+} = module;
+
+let keys;
+let testData;
+
+let testState;
+const testString = 'test-STRING';
+const testCardId = 'testCARD-id';
+
+describe('app simple selectors', () => {
+  describe('base app selector', () => {
+  });
+  describe('simple selectors', () => {
+    keys = keyStore(simpleSelectors);
+    test.each([
+      keys.courseData,
+      keys.platformSettings,
+      keys.suggestedCourses,
+      keys.emailConfirmation,
+      keys.enterpriseDashboard,
+      keys.selectSessionModal,
+      keys.pageNumber,
+      keys.socialShareSettings,
+      keys.filters,
+    ])('%s app simple selector forwards corresponding data from app store', (key) => {
+      testState = { app: { [key]: testString, otherField: 'fake string' } };
+      const { preSelectors, cb } = simpleSelectors[key];
+      expect(preSelectors).toEqual([appSelector]);
+      expect(cb(testState.app)).toEqual(testString);
+    });
+    describe('cardSimpleSelectors', () => {
+      keys = keyStore(cardSimpleSelectors);
+      test.each([
+        keys.certificate,
+        keys.course,
+        keys.courseProvider,
+        keys.courseRun,
+        keys.credit,
+        keys.enrollment,
+        keys.entitlement,
+        keys.gradeData,
+      ])('%s card simple selector forwards corresponding data from passed object', (key) => {
+        testState = { [key]: testString };
+        expect(cardSimpleSelectors[key](testState)).toEqual(testString);
+      });
+      test('relatedPrograms simple selector forwards relatedPrograms from programs obj', () => {
+        expect(
+          cardSimpleSelectors.relatedPrograms({ programs: { relatedPrograms: testString } }),
+        ).toEqual(testString);
+      });
+    });
+    describe('mkCardSelector util', () => {
+      it('takes [card simpleSelector, selector] and creates card selector from cardData', () => {
+        const selector = (data) => ({ selector: data });
+        const simpleSelector = (data) => ({ simpleSelector: data });
+        testData = { some: 'test data' };
+        const oldCourseData = simpleSelectors.courseData;
+        simpleSelectors.courseData = jest.fn().mockReturnValueOnce({ [testCardId]: testData });
+        expect(mkCardSelector(simpleSelector, selector)(testState, testCardId)).toEqual(
+          selector(simpleSelector(testData)),
+        );
+        expect(simpleSelectors.courseData).toHaveBeenCalledWith(testState);
+        simpleSelectors.courseData = oldCourseData;
+      });
+    });
+  });
+});

package/src/data/redux/hooks/app.js

@@ -0,0 +1,106 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useSelector, useDispatch } from 'react-redux';
+
+import * as redux from '../../../data/redux';
+import * as module from './app';
+
+const selectors = redux.selectors.app;
+const actions = redux.actions.app;
+
+/** Simple Selectors **/
+export const usePageNumber = () => useSelector(selectors.pageNumber);
+export const useFilters = () => useSelector(selectors.filters);
+export const useEmailConfirmationData = () => useSelector(selectors.emailConfirmation);
+export const useEnterpriseDashboardData = () => useSelector(selectors.enterpriseDashboard);
+export const usePlatformSettingsData = () => useSelector(selectors.platformSettings);
+export const useSelectSessionModalData = () => useSelector(selectors.selectSessionModal);
+export const useSocialShareSettings = () => useSelector(selectors.socialShareSettings);
+
+/** global-level meta-selectors **/
+export const useHasCourses = () => useSelector(selectors.hasCourses);
+export const useCurrentCourseList = (opts) => useSelector(
+  state => selectors.currentList(state, opts),
+);
+export const useShowSelectSessionModal = () => useSelector(selectors.showSelectSessionModal);
+
+export const useCourseCardData = (selector) => (cardId) => useSelector(
+  (state) => selector(state, cardId),
+);
+/** Course Card selectors **/
+const { courseCard } = selectors;
+export const useCardCertificateData = useCourseCardData(courseCard.certificate);
+export const useCardCourseData = useCourseCardData(courseCard.course);
+export const useCardCourseRunData = useCourseCardData(courseCard.courseRun);
+export const useCardCreditData = useCourseCardData(courseCard.credit);
+export const useCardEnrollmentData = useCourseCardData(courseCard.enrollment);
+export const useCardEntitlementData = useCourseCardData(courseCard.entitlement);
+export const useCardGradeData = useCourseCardData(courseCard.gradeData);
+export const useCardProviderData = useCourseCardData(courseCard.courseProvider);
+export const useCardRelatedProgramsData = useCourseCardData(courseCard.relatedPrograms);
+
+export const useCardSocialSettingsData = (cardId) => {
+  const socialShareSettings = module.useSocialShareSettings();
+  const { socialShareUrl } = module.useCardCourseData(cardId);
+  const defaultSettings = { isEnabled: false, shareUrl: '' };
+
+  if (!socialShareSettings) {
+    return { facebook: defaultSettings, twitter: defaultSettings };
+  }
+  const { facebook, twitter } = socialShareSettings;
+  const loadSettings = (target) => ({
+    isEnabled: target.isEnabled,
+    shareUrl: `${socialShareUrl}?${target.utmParams}`,
+  });
+  return { facebook: loadSettings(facebook), twitter: loadSettings(twitter) };
+};
+
+export const useCardExecEdTrackingParam = (cardId) => {
+  const { isExecEd2UCourse } = module.useCardEnrollmentData(cardId);
+  const { authOrgId } = module.useEnterpriseDashboardData(cardId);
+  return isExecEd2UCourse ? `?org_id=${authOrgId}` : '';
+};
+
+/** Events **/
+export const useUpdateSelectSessionModalCallback = (cardId) => {
+  const dispatch = useDispatch();
+  return () => dispatch(actions.updateSelectSessionModal(cardId));
+};
+
+export const useTrackCourseEvent = (tracker, cardId, ...args) => {
+  const { courseId } = module.useCardCourseRunData(cardId);
+  return (e) => tracker(courseId, ...args)(e);
+};
+
+export const useSetPageNumber = () => {
+  const dispatch = useDispatch();
+  return (value) => dispatch(actions.setPageNumber(value));
+};
+
+export const useSetFilters = () => {
+  const dispatch = useDispatch();
+  return (value) => dispatch(actions.setFilters(value));
+};
+
+export const useAddFilter = () => {
+  const dispatch = useDispatch();
+  return (value) => dispatch(actions.addFilter(value));
+};
+
+export const useRemoveFilter = () => {
+  const dispatch = useDispatch();
+  return (value) => dispatch(actions.removeFilter(value));
+};
+
+export const useClearFilters = () => {
+  const dispatch = useDispatch();
+  return (value) => dispatch(actions.clearFilters(value));
+};
+
+export const useLoadData = () => {
+  const dispatch = useDispatch();
+  return ({ courses, ...globalData }) => {
+    dispatch(actions.setPageNumber(1));
+    dispatch(actions.loadGlobalData(globalData));
+    dispatch(actions.loadCourses({ courses }));
+  };
+};

package/src/data/redux/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './app';
+export * from './requests';

package/src/data/redux/hooks/requests.js

@@ -0,0 +1,47 @@
+import { useSelector, useDispatch } from 'react-redux';
+
+import * as redux from '../../../data/redux';
+import * as module from './requests';
+
+const selectors = redux.selectors.requests;
+const actions = redux.actions.requests;
+
+export const statusSelector = selector => (requestName) => useSelector(selector(requestName));
+export const useRequestIsPending = module.statusSelector(selectors.isPending);
+export const useRequestIsFailed = module.statusSelector(selectors.isFailed);
+export const useRequestIsCompleted = module.statusSelector(selectors.isCompleted);
+export const useRequestIsInactive = module.statusSelector(selectors.isInactive);
+export const useRequestError = module.statusSelector(selectors.error);
+export const useRequestErrorCode = module.statusSelector(selectors.errorCode);
+export const useRequestErrorStatus = module.statusSelector(selectors.errorStatus);
+export const useRequestData = module.statusSelector(selectors.data);
+
+export const useMakeNetworkRequest = () => {
+  const dispatch = useDispatch();
+  return ({
+    requestKey,
+    promise,
+    onSuccess,
+    onFailure,
+  }) => {
+    dispatch(actions.startRequest({ requestKey }));
+    return promise.then((response) => {
+      if (onSuccess) {
+        onSuccess(response);
+      }
+      dispatch(actions.completeRequest({ requestKey, response }));
+    }).catch((error) => {
+      if (onFailure) {
+        onFailure(error);
+      }
+      dispatch(actions.failRequest({ requestKey, error }));
+    });
+  };
+};
+
+export const useClearRequest = () => {
+  const dispatch = useDispatch();
+  return (requestKey) => {
+    dispatch(actions.clearRequest({ requestKey }));
+  };
+};

package/src/data/redux/index.js

@@ -0,0 +1,37 @@
+import { combineReducers } from 'redux';
+
+import { StrictDict } from '../../utils';
+
+import * as app from './app';
+import * as requests from './requests';
+
+const modules = {
+  app,
+  requests,
+};
+
+/**
+ * Extracts keys from the modules object and the provided propName parameter to locate the
+ * corresponding object for that propName.
+ * Example: moduleProps('reducer') will return an aggregated object containing the reducer for each module
+ *
+ * @param {string} propName Used to locate the prop in each module
+ * @returns {object} Aggregated values for the provided propName
+ */
+const moduleProps = (propName) => Object.keys(modules).reduce(
+  (obj, moduleKey) => {
+    const value = modules[moduleKey][propName];
+    return value ? { ...obj, [moduleKey]: value } : obj;
+  },
+  {},
+);
+
+const rootReducer = combineReducers(moduleProps('reducer'));
+
+const actions = StrictDict(moduleProps('actions'));
+
+const selectors = StrictDict(moduleProps('selectors'));
+
+export { actions, selectors };
+
+export default rootReducer;

package/src/data/redux/requests/index.js

@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducer';
+export { default as selectors } from './selectors';

package/src/data/redux/requests/reducer.js

@@ -0,0 +1,53 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { StrictDict } from '../../../utils';
+
+import { RequestStates, RequestKeys } from '../../../data/constants/requests';
+
+const initialState = {
+  [RequestKeys.initialize]: { status: RequestStates.inactive },
+  [RequestKeys.refreshList]: { status: RequestStates.inactive },
+  [RequestKeys.enrollEntitlementSession]: { status: RequestStates.inactive },
+  [RequestKeys.leaveEntitlementSession]: { status: RequestStates.inactive },
+  [RequestKeys.masquerade]: { status: RequestStates.inactive },
+};
+
+const requests = createSlice({
+  name: 'requests',
+  initialState,
+  reducers: {
+    startRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {
+        status: RequestStates.pending,
+      },
+    }),
+    completeRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {
+        status: RequestStates.completed,
+        response: payload.response,
+      },
+    }),
+    failRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {
+        status: RequestStates.failed,
+        error: payload.error,
+      },
+    }),
+    clearRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {},
+    }),
+  },
+});
+
+const actions = StrictDict(requests.actions);
+const { reducer } = requests;
+
+export {
+  actions,
+  reducer,
+  initialState,
+};

package/src/data/redux/requests/reducer.test.js

@@ -0,0 +1,62 @@
+import { RequestStates } from 'data/constants/requests';
+import { initialState, actions, reducer } from './reducer';
+
+const testingState = {
+  ...initialState,
+  arbitraryField: 'arbitrary',
+};
+
+describe('requests reducer', () => {
+  it('has initial state', () => {
+    expect(reducer(undefined, {})).toEqual(initialState);
+  });
+
+  const testValue = 'roll for initiative';
+  const testKey = 'test-key';
+  describe('handling actions', () => {
+    describe('startRequest', () => {
+      it('adds a pending status for the given key', () => {
+        expect(reducer(
+          testingState,
+          actions.startRequest({ requestKey: testKey }),
+        )).toEqual({
+          ...testingState,
+          [testKey]: { status: RequestStates.pending },
+        });
+      });
+    });
+    describe('completeRequest', () => {
+      it('adds a completed status with passed response', () => {
+        expect(reducer(
+          testingState,
+          actions.completeRequest({ requestKey: testKey, response: testValue }),
+        )).toEqual({
+          ...testingState,
+          [testKey]: { status: RequestStates.completed, response: testValue },
+        });
+      });
+    });
+    describe('failRequest', () => {
+      it('adds a failed status with passed error', () => {
+        expect(reducer(
+          testingState,
+          actions.failRequest({ requestKey: testKey, error: testValue }),
+        )).toEqual({
+          ...testingState,
+          [testKey]: { status: RequestStates.failed, error: testValue },
+        });
+      });
+    });
+    describe('clearRequest', () => {
+      it('cleanup status and error', () => {
+        expect(reducer(
+          testingState,
+          actions.clearRequest({ requestKey: testKey, error: testValue }),
+        )).toEqual({
+          ...testingState,
+          [testKey]: {},
+        });
+      });
+    });
+  });
+});

package/src/data/redux/requests/selectors.js

@@ -0,0 +1,29 @@
+import { StrictDict } from '../../../utils';
+import { RequestStates, RequestKeys } from '../../../data/constants/requests';
+// import * as module from './selectors';
+
+export const requestStatus = (state, { requestKey }) => state.requests[requestKey];
+
+const statusSelector = (fn) => (requestKey) => (state) => fn(state.requests[requestKey]);
+
+export const isInactive = ({ status }) => status === RequestStates.inactive;
+export const isPending = ({ status }) => status === RequestStates.pending;
+export const isCompleted = ({ status }) => status === RequestStates.completed;
+export const isFailed = ({ status }) => status === RequestStates.failed;
+export const error = (request) => request.error;
+export const errorStatus = (request) => request.error?.response?.status;
+export const errorCode = (request) => request.error?.response?.data;
+
+export const data = (request) => request.data;
+
+export default StrictDict({
+  requestStatus,
+  isInactive: statusSelector(isInactive),
+  isPending: statusSelector(isPending),
+  isCompleted: statusSelector(isCompleted),
+  isFailed: statusSelector(isFailed),
+  error: statusSelector(error),
+  errorCode: statusSelector(errorCode),
+  errorStatus: statusSelector(errorStatus),
+  data: statusSelector(data),
+});

package/src/data/redux/requests/selectors.test.js

@@ -0,0 +1,110 @@
+import { RequestStates, RequestKeys } from 'data/constants/requests';
+
+import selectors from './selectors';
+
+const requestKey = 'my-test-request-key';
+const requestData = { some: 'request-data' };
+const inactiveRequest = { status: RequestStates.inactive, some: 'request-data' };
+const pendingRequest = { status: RequestStates.pending, some: 'request-data' };
+const completedRequest = { status: RequestStates.completed, some: 'request-data' };
+const failedRequest = { status: RequestStates.failed, some: 'request-data' };
+
+const testValue = 'my-test-value';
+
+const testErrorValue = {
+  response: {
+    status: 500,
+    data: 'my-test-error',
+  },
+};
+
+const testState = {
+  requests: {
+    [requestKey]: requestData,
+  },
+};
+const mockUseSelector = (selector, state) => selector(state);
+const genRequests = (request) => ({
+  requests: { [requestKey]: request },
+});
+const select = (selector, request) => (
+  mockUseSelector(selector(requestKey), genRequests(request))
+);
+describe('requests selectors unit tests', () => {
+  test('requestStatus returns data associated with given key', () => {
+    expect(selectors.requestStatus(testState, { requestKey })).toEqual(requestData);
+  });
+  const testStatusSelector = (selector, matchingRequest) => {
+    expect(mockUseSelector(selector(requestKey), testState)).toEqual(false);
+    expect(mockUseSelector(
+      selector(requestKey),
+      { requests: { [requestKey]: matchingRequest } },
+    )).toEqual(true);
+  };
+  test('isInactive returns true iff the given request is inactive', () => {
+    testStatusSelector(selectors.isInactive, inactiveRequest);
+  });
+  test('isPending returns true iff the given request is pending', () => {
+    testStatusSelector(selectors.isPending, pendingRequest);
+  });
+  test('isCompleted returns true iff the given request is completed', () => {
+    testStatusSelector(selectors.isCompleted, completedRequest);
+  });
+  test('isFailed returns true iff the given request is failed', () => {
+    testStatusSelector(selectors.isFailed, failedRequest);
+  });
+  test('error returns the error from the request', () => {
+    expect(select(selectors.error, { error: testValue })).toEqual(testValue);
+  });
+  test('errorStatus returns the error response status', () => {
+    expect(select(selectors.errorStatus, {})).toEqual(undefined);
+    expect(select(selectors.errorStatus, { error: {} })).toEqual(undefined);
+    expect(select(selectors.errorStatus, { error: { response: {} } })).toEqual(undefined);
+    expect(select(selectors.errorStatus, { error: { response: { status: testValue } } }))
+      .toEqual(testValue);
+    expect(select(selectors.errorStatus, { error: testErrorValue })).toEqual(
+      testErrorValue.response.status,
+    );
+  });
+  test('errorCode returns the error response data', () => {
+    expect(select(selectors.errorCode, {})).toEqual(undefined);
+    expect(select(selectors.errorCode, { error: {} })).toEqual(undefined);
+    expect(select(selectors.errorCode, { error: { response: {} } })).toEqual(undefined);
+    expect(select(selectors.errorCode, { error: { response: { data: testValue } } }))
+      .toEqual(testValue);
+    expect(select(selectors.errorCode, { error: testErrorValue })).toEqual(
+      testErrorValue.response.data,
+    );
+  });
+  test('data reurns the request data', () => {
+    expect(select(selectors.data, { data: testValue })).toEqual(testValue);
+  });
+  test('masquerade returns the masquerade data', () => {
+    const mockResponse = (response) => ({
+      requests: {
+        [RequestKeys.masquerade]: response,
+      },
+    });
+    expect(selectors.masquerade(mockResponse(completedRequest))).toEqual({
+      isMasquerading: true,
+      isMasqueradingFailed: false,
+      isMasqueradingPending: false,
+      masqueradeErrorStatus: undefined,
+    });
+    expect(selectors.masquerade(mockResponse(pendingRequest))).toEqual({
+      isMasquerading: false,
+      isMasqueradingFailed: false,
+      isMasqueradingPending: true,
+      masqueradeErrorStatus: undefined,
+    });
+    expect(selectors.masquerade(mockResponse({
+      ...failedRequest,
+      error: testErrorValue,
+    }))).toEqual({
+      isMasquerading: false,
+      isMasqueradingFailed: true,
+      isMasqueradingPending: false,
+      masqueradeErrorStatus: testErrorValue.response.status,
+    });
+  });
+});

package/src/data/services/lms/api.js

@@ -0,0 +1,77 @@
+import eventNames from '../../../tracking/constants';
+import {
+  client,
+  get,
+  post,
+  stringifyUrl,
+} from './utils';
+import {
+  apiKeys,
+  unenrollmentAction,
+  enableEmailsAction,
+} from './constants';
+import urls from './urls';
+import * as module from './api';
+
+/*********************************************************************************
+ * GET Actions
+ *********************************************************************************/
+export const initializeList = ({ user } = {}) => get(
+  stringifyUrl(urls.getInitApiUrl(), { [apiKeys.user]: user }),
+);
+
+export const updateEntitlementEnrollment = ({ uuid, courseId }) => post(
+  urls.entitlementEnrollment(uuid),
+  { [apiKeys.courseRunId]: courseId },
+);
+
+export const deleteEntitlementEnrollment = ({ uuid, isRefundable }) => client()
+  .delete(
+    stringifyUrl(
+      urls.entitlementEnrollment(uuid),
+      { [apiKeys.isRefund]: isRefundable },
+    ),
+  );
+
+export const updateEmailSettings = ({ courseId, enable }) => post(
+  urls.updateEmailSettings(),
+  { [apiKeys.courseId]: courseId, ...(enable && enableEmailsAction) },
+);
+
+export const unenrollFromCourse = ({ courseId }) => post(
+  urls.courseUnenroll(),
+  { [apiKeys.courseId]: courseId, ...unenrollmentAction },
+);
+
+export const logEvent = ({ eventName, data, courseId }) => post(urls.event(), {
+  courserun_key: courseId,
+  event_type: eventName,
+  page: window.location.href,
+  event: JSON.stringify(data),
+});
+
+export const logShare = ({ courseId, site }) => module.logEvent({
+  eventName: eventNames.shareClicked,
+  courseId,
+  data: {
+    course_id: courseId,
+    social_media_site: site,
+    location: 'dashboard',
+  },
+});
+
+export const createCreditRequest = ({ providerId, courseId, username }) => post(
+  urls.creditRequestUrl(providerId),
+  { course_key: courseId, username },
+);
+
+export default {
+  initializeList,
+  unenrollFromCourse,
+  updateEmailSettings,
+  updateEntitlementEnrollment,
+  deleteEntitlementEnrollment,
+  logEvent,
+  logShare,
+  createCreditRequest,
+};