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

package/src/data/services/lms/fakeData/testUtils.js

@@ -0,0 +1,40 @@
+// import { StrictDict } from 'utils';
+import {
+  ErrorStatuses,
+  // RequestKeys,
+} from '../../../../data/constants/requests';
+import { actions } from '../../../../data/redux';
+
+export const errorData = (status, data = '') => ({
+  response: {
+    status,
+    data,
+  },
+});
+
+export const networkErrorData = errorData(ErrorStatuses.badRequest);
+
+export const genTestUtils = ({
+  dispatch,
+}) => {
+  /*
+  const mockStart = (requestKey) => () => {
+    dispatch(actions.requests.startRequest(requestKey));
+  };
+  */
+
+  const mockError = (requestKey, status, data) => () => {
+    dispatch(actions.requests.failRequest({
+      requestKey,
+      error: errorData(status, data),
+    }));
+  };
+  const mockNetworkError = (requestKey) => (
+    mockError(requestKey, ErrorStatuses.badRequest)
+  );
+  return {
+    mockNetworkError,
+  };
+};
+
+export default genTestUtils;

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

@@ -0,0 +1,8 @@
+import { StrictDict } from 'utils';
+import api from './api';
+import urls from './urls';
+
+export default StrictDict({
+  api,
+  urls,
+});

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

@@ -0,0 +1,43 @@
+import { appId } from '../../../constants';
+import { StrictDict } from '../../../utils';
+
+import { getAppConfig, getSiteConfig } from '@openedx/frontend-base';
+
+export const getEcommerceUrl = () => getAppConfig(appId).ECOMMERCE_BASE_URL;
+
+const getBaseUrl = () => getSiteConfig().lmsBaseUrl;
+
+export const getApiUrl = () => (`${getSiteConfig().lmsBaseUrl}/api`);
+
+const getInitApiUrl = () => (`${getApiUrl()}/learner_home/init`);
+
+const event = () => `${getBaseUrl()}/event`;
+const courseUnenroll = () => `${getBaseUrl()}/change_enrollment`;
+const updateEmailSettings = () => `${getApiUrl()}/change_email_settings`;
+const entitlementEnrollment = (uuid) => `${getApiUrl()}/entitlements/v1/entitlements/${uuid}/enrollments`;
+
+// if url is null or absolute, return it as is
+export const updateUrl = (base, url) => ((url == null || url.startsWith('http://') || url.startsWith('https://')) ? url : `${base}${url}`);
+
+export const baseAppUrl = (url) => updateUrl(getBaseUrl(), url);
+export const learningMfeUrl = (url) => updateUrl(getAppConfig(appId).LEARNING_BASE_URL, url);
+
+// static view url
+const programsUrl = () => baseAppUrl('/dashboard/programs');
+
+export const creditPurchaseUrl = (courseId) => `${getEcommerceUrl()}/credit/checkout/${courseId}/`;
+export const creditRequestUrl = (providerId) => `${getApiUrl()}/credit/v1/providers/${providerId}/request/`;
+
+export default StrictDict({
+  getApiUrl,
+  baseAppUrl,
+  courseUnenroll,
+  creditPurchaseUrl,
+  creditRequestUrl,
+  entitlementEnrollment,
+  event,
+  getInitApiUrl,
+  learningMfeUrl,
+  programsUrl,
+  updateEmailSettings,
+});

package/src/data/services/lms/urls.test.js

@@ -0,0 +1,51 @@
+import { getAppConfig, getSiteConfig } from '@openedx/frontend-base';
+import { appId } from '../../../constants';
+import * as urls from './urls';
+
+describe('urls', () => {
+  describe('baseAppUrl', () => {
+    it('returns the url if it is not relative', () => {
+      const url = 'http://edx.org';
+      expect(urls.baseAppUrl(url)).toEqual(url);
+    });
+    it('returns the url if it is relative', () => {
+      const url = '/edx.org';
+      expect(urls.baseAppUrl(url)).toEqual(
+        `${getSiteConfig().lmsBaseUrl}${url}`,
+      );
+    });
+    it('return null if url is null', () => {
+      expect(urls.baseAppUrl(null)).toEqual(null);
+    });
+  });
+  describe('learningMfeUrl', () => {
+    it('returns the url if it is not relative', () => {
+      const url = 'http://edx.org';
+      expect(urls.learningMfeUrl(url)).toEqual(url);
+    });
+    it('returns the url if it is relative', () => {
+      const url = '/edx.org';
+      expect(urls.learningMfeUrl(url)).toEqual(
+        `${getAppConfig(appId).LEARNING_BASE_URL}${url}`,
+      );
+    });
+    it('return null if url is null', () => {
+      expect(urls.learningMfeUrl(null)).toEqual(null);
+    });
+  });
+  describe('creditPurchaseUrl', () => {
+    it('builds from ecommerce url and loads courseId', () => {
+      const courseId = 'test-course-id';
+      const url = urls.creditPurchaseUrl(courseId);
+      expect(url).toEqual(expect.stringContaining(courseId));
+    });
+  });
+  describe('creditRequestUrl', () => {
+    it('builds from api url and loads providerId', () => {
+      const providerId = 'test-provider-id';
+      const url = urls.creditRequestUrl(providerId);
+      expect(url.startsWith(urls.getApiUrl())).toEqual(true);
+      expect(url).toEqual(expect.stringContaining(providerId));
+    });
+  });
+});

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

@@ -0,0 +1,60 @@
+import { getAuthenticatedHttpClient } from '@openedx/frontend-base';
+
+/**
+ * stringify(query, existingQuery)
+ * simple wrapper to convert an object to a query string
+ * @param {object} query - object to convert
+ * @param {string} existingQuery - existing query string
+ * @returns {string} - query string
+ */
+
+export const stringify = (query, existingQuery = '') => {
+  const searchParams = new URLSearchParams(existingQuery);
+
+  Object.entries(query).forEach(([key, value]) => {
+    if (value === undefined || value === null || value === '') {
+      searchParams.delete(key);
+    } else if (Array.isArray(value)) {
+      searchParams.delete(key);
+      value.forEach((val) => {
+        if (val !== undefined && val !== null && val !== '') {
+          searchParams.append(key, val);
+        }
+      });
+    } else {
+      searchParams.set(key, value);
+    }
+  });
+
+  return searchParams.toString();
+};
+
+/**
+ * get(url)
+ * simple wrapper providing an authenticated Http client get action
+ * @param {string} url - target url
+ */
+export const get = (...args) => getAuthenticatedHttpClient().get(...args);
+/**
+ * post(url, data)
+ * simple wrapper providing an authenticated Http client post action
+ * stringify is used to convert the object to query string with = and &
+ * @param {string} url - target url
+ * @param {object|string} body - post payload
+ */
+export const post = (url, body = {}) => getAuthenticatedHttpClient().post(url, stringify(body));
+
+export const client = getAuthenticatedHttpClient;
+
+/**
+ * stringifyUrl(url, query)
+ * simple wrapper to convert a url and query object to a full url
+ * @param {string} url - base url string
+ * @param {object} query - query parameters
+ * @returns {string} - full url
+ */
+export const stringifyUrl = (url, query) => {
+  const [baseUrl, existingQuery = ''] = url.split('?');
+  const queryString = stringify(query, existingQuery);
+  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+};

package/src/data/services/lms/utils.test.js

@@ -0,0 +1,40 @@
+import { getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import * as utils from './utils';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  getAuthenticatedHttpClient: jest.fn(),
+}));
+
+describe('lms service utils', () => {
+  describe('get', () => {
+    it('forwards arguments to authenticatedHttpClient().get', () => {
+      const get = jest.fn((...args) => ({ get: args }));
+      getAuthenticatedHttpClient.mockReturnValue({ get });
+      const args = ['some', 'args', 'for', 'the', 'test'];
+      expect(utils.get(...args)).toEqual(get(...args));
+    });
+  });
+  describe('post', () => {
+    it('forwards arguments to authenticatedHttpClient().post, removes undefined attributes and appends array values', () => {
+      const post = jest.fn((...args) => ({ post: args }));
+      getAuthenticatedHttpClient.mockReturnValue({ post });
+      const url = 'some url';
+      const body = {
+        some: 'body',
+        for: undefined,
+        test: 'yay',
+        array: ['one', 'two', undefined],
+      };
+      const expectedUrl = utils.post(url, body);
+      expect(expectedUrl).toEqual(post(url, 'some=body&test=yay&array=one&array=two'));
+    });
+  });
+  describe('stringifyUrl', () => {
+    it('forwards url and query to stringifyUrl skipping null and ""', () => {
+      const url = 'here.com';
+      const query = { some: 'set', of: 'queryParams' };
+      expect(utils.stringifyUrl(url, query)).toEqual('here.com?some=set&of=queryParams');
+    });
+  });
+});

package/src/data/services/segment/utils.js

@@ -0,0 +1,17 @@
+import { sendTrackEvent } from '@openedx/frontend-base';
+import { appName } from '../../../tracking/constants';
+
+export const LINK_TIMEOUT = 300;
+
+export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
+  name,
+  { ...options, app_name: appName },
+);
+
+export const createLinkTracker = (tracker, href) => (e) => {
+  e.preventDefault();
+  tracker();
+  return setTimeout(() => {
+    global.location.href = href;
+  }, LINK_TIMEOUT);
+};

package/src/data/services/segment/utils.test.js

@@ -0,0 +1,36 @@
+import { sendTrackEvent } from '@openedx/frontend-base';
+
+import { appName } from 'tracking/constants';
+
+import { createEventTracker, createLinkTracker, LINK_TIMEOUT } from './utils';
+
+jest.useFakeTimers();
+jest.spyOn(global, 'setTimeout');
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  sendTrackEvent: jest.fn(),
+}));
+
+describe('segment service utils', () => {
+  describe('createEventTracker', () => {
+    const name = 'aName';
+    const options = { field1: 'some data', field2: 'other data' };
+    it('call sendTrackEvent', () => {
+      createEventTracker(name, options)();
+      expect(sendTrackEvent).toHaveBeenCalledWith(name, { ...options, app_name: appName });
+    });
+  });
+
+  describe('createLinkTracker', () => {
+    const tracker = jest.fn();
+    const href = 'https://www.example.com';
+    const event = { preventDefault: jest.fn() };
+    it('call tracker', () => {
+      createLinkTracker(tracker, href)(event);
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(tracker).toHaveBeenCalled();
+      expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), LINK_TIMEOUT);
+    });
+  });
+});

package/src/data/store.js

@@ -0,0 +1,25 @@
+import * as redux from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import {
+  composeWithDevToolsLogOnlyInProduction,
+} from '@redux-devtools/extension';
+import { createLogger } from 'redux-logger';
+
+import reducer from './redux';
+
+export const createStore = () => {
+  const loggerMiddleware = createLogger();
+
+  const middleware = [thunkMiddleware, loggerMiddleware];
+
+  const store = redux.createStore(
+    reducer,
+    composeWithDevToolsLogOnlyInProduction(redux.applyMiddleware(...middleware)),
+  );
+
+  return store;
+};
+
+const store = createStore();
+
+export default store;

package/src/data/store.test.js

@@ -0,0 +1,47 @@
+import { applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import {
+  composeWithDevToolsLogOnlyInProduction,
+} from '@redux-devtools/extension';
+import { createLogger } from 'redux-logger';
+
+import rootReducer from 'data/redux';
+
+import exportedStore, { createStore } from './store';
+
+jest.mock('data/redux', () => ({
+  __esModule: true,
+  default: 'REDUCER',
+  actions: 'ACTIONS',
+  selectors: 'SELECTORS',
+}));
+
+jest.mock('redux-logger', () => ({
+  createLogger: () => 'logger',
+}));
+jest.mock('redux-thunk', () => 'thunkMiddleware');
+jest.mock('redux', () => ({
+  applyMiddleware: (...middleware) => ({ applied: middleware }),
+  createStore: (reducer, middleware) => ({ reducer, middleware }),
+}));
+jest.mock('@redux-devtools/extension', () => ({
+  composeWithDevToolsLogOnlyInProduction: (middleware) => ({ withDevTools: middleware }),
+}));
+
+describe('store aggregator module', () => {
+  describe('exported store', () => {
+    it('is generated by createStore', () => {
+      expect(exportedStore).toEqual(createStore());
+    });
+    it('creates store with connected reducers', () => {
+      expect(createStore().reducer).toEqual(rootReducer);
+    });
+    describe('middleware', () => {
+      it('exports thunk and logger middleware, composed and applied with dev tools', () => {
+        expect(createStore().middleware).toEqual(
+          composeWithDevToolsLogOnlyInProduction(applyMiddleware(thunkMiddleware, createLogger())),
+        );
+      });
+    });
+  });
+});

package/src/data/utils.js

@@ -0,0 +1,19 @@
+/**
+ * Simple selector factory.
+ * Takes a list of string keys, and returns a simple slector for each.
+ *
+ * @function
+ * @param {Object|string[]} keys - If passed as object, Object.keys(keys) is used.
+ * @return {Object} - object of `{[key]: ({key}) => key}`
+ */
+const simpleSelectorFactory = (transformer, keys) => {
+  const selKeys = Array.isArray(keys) ? keys : Object.keys(keys);
+  return selKeys.reduce(
+    (obj, key) => ({
+      ...obj, [key]: (state) => transformer(state)[key],
+    }),
+    { root: (state) => transformer(state) },
+  );
+};
+
+export default simpleSelectorFactory;

package/src/data/utils.test.js

@@ -0,0 +1,29 @@
+import simpleSelectorFactory from './utils';
+
+describe('Redux utilities - creators', () => {
+  describe('simpleSelectors', () => {
+    const data = { a: 1, b: 2, c: 3 };
+    const state = {
+      testGroup: data,
+      other: 'stuff',
+    };
+    const transformer = ({ testGroup }) => testGroup;
+
+    test('given a list of strings, returns a dict w/ a simple selector per string', () => {
+      const keys = ['a', 'b'];
+      const selectors = simpleSelectorFactory(transformer, keys);
+      expect(Object.keys(selectors)).toEqual(['root', ...keys]);
+      expect(selectors.root(state)).toEqual(data);
+      expect(selectors.a(state)).toEqual(data.a);
+      expect(selectors.b(state)).toEqual(data.b);
+    });
+    test('given an object for keys, returns a dict w/ simple selector per key', () => {
+      const selectors = simpleSelectorFactory(transformer, data);
+      expect(Object.keys(selectors)).toEqual(['root', ...Object.keys(data)]);
+      expect(selectors.root(state)).toEqual(data);
+      expect(selectors.a(state)).toEqual(data.a);
+      expect(selectors.b(state)).toEqual(data.b);
+      expect(selectors.c(state)).toEqual(data.c);
+    });
+  });
+});

package/src/hooks/api.js

@@ -0,0 +1,123 @@
+import { useContext } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { SiteContext } from '@openedx/frontend-base';
+
+import GlobalDataContext from '../data/contexts/GlobalDataContext';
+import MasqueradeUserContext from '../data/contexts/MasqueradeUserContext';
+
+import { RequestKeys } from '../data/constants/requests';
+import { post } from '../data/services/lms/utils';
+import api from '../data/services/lms/api';
+
+import * as reduxHooks from '../data/redux/hooks';
+import * as module from './api';
+
+const { useMakeNetworkRequest } = reduxHooks;
+
+export const useNetworkRequest = (action, args) => {
+  const makeNetworkRequest = useMakeNetworkRequest();
+  return (...actionsArgs) => makeNetworkRequest({
+    promise: action(...actionsArgs),
+    ...args,
+  });
+};
+
+/**
+ * initialize the app, loading ora and course metadata from the api, and loading the initial
+ * submission list data.
+ */
+export const useInitializeApp = () => {
+  const { masqueradeUser, setMasqueradeIsSuccess, setMasqueradeIsPending, setMasqueradeIsError, setMasqueradeError } = useContext(MasqueradeUserContext);
+  const { setEmailConfirmation, setPlatformSettings } = useContext(GlobalDataContext);
+  const loadData = reduxHooks.useLoadData();
+
+  const query = useQuery({
+    queryKey: [RequestKeys.initialize, masqueradeUser],
+    queryFn: async () => api.initializeList({ user: masqueradeUser }),
+    retry: false,
+  });
+
+  // Masquerade handles errors independenty.
+  if (masqueradeUser) {
+    setMasqueradeIsPending(query.isPending);
+    setMasqueradeIsError(query.isError);
+    setMasqueradeError(query.error);
+  }
+
+  if (!query.isPending && !query.isError && query.data?.data) {
+    if (masqueradeUser) {
+      setMasqueradeIsSuccess(true);
+    }
+    // Load data into React contexts.
+    const { emailConfirmation, platformSettings } = query.data.data;
+    setEmailConfirmation(emailConfirmation);
+    setPlatformSettings(platformSettings);
+
+    // Load data into Redux.
+    loadData(query.data.data);
+  }
+
+  return query;
+};
+
+export const useNewEntitlementEnrollment = (cardId) => {
+  const { uuid } = reduxHooks.useCardEntitlementData(cardId);
+  const queryClient = useQueryClient();
+  const onSuccess = () => queryClient.invalidateQueries({ queryKey: [RequestKeys.initialize] });
+
+  return module.useNetworkRequest(
+    (selection) => api.updateEntitlementEnrollment({ uuid, courseId: selection }),
+    { onSuccess, requestKey: RequestKeys.newEntitlementEnrollment },
+  );
+};
+
+export const useSwitchEntitlementEnrollment = (cardId) => {
+  const { uuid } = reduxHooks.useCardEntitlementData(cardId);
+  const queryClient = useQueryClient();
+  const onSuccess = () => queryClient.invalidateQueries({ queryKey: [RequestKeys.initialize] });
+  const action = (selection) => api.updateEntitlementEnrollment({ uuid, courseId: selection });
+  return module.useNetworkRequest(
+    action,
+    { onSuccess, requestKey: RequestKeys.switchEntitlementSession },
+  );
+};
+
+export const useLeaveEntitlementSession = (cardId) => {
+  const { uuid, isRefundable } = reduxHooks.useCardEntitlementData(cardId);
+  const queryClient = useQueryClient();
+  const onSuccess = () => queryClient.invalidateQueries({ queryKey: [RequestKeys.initialize] });
+  return module.useNetworkRequest(
+    () => api.deleteEntitlementEnrollment({ uuid, isRefundable }),
+    { onSuccess, requestKey: RequestKeys.leaveEntitlementSession },
+  );
+};
+
+export const useUnenrollFromCourse = (cardId) => {
+  const { courseId } = reduxHooks.useCardCourseRunData(cardId);
+  return module.useNetworkRequest(
+    () => api.unenrollFromCourse({ courseId }),
+    { requestKey: RequestKeys.unenrollFromCourse },
+  );
+};
+
+export const useUpdateEmailSettings = (cardId) => {
+  const { courseId } = reduxHooks.useCardCourseRunData(cardId);
+  return module.useNetworkRequest(
+    (enable) => api.updateEmailSettings({ courseId, enable }),
+    { requestKey: RequestKeys.updateEmailSettings },
+  );
+};
+
+export const useSendConfirmEmail = () => {
+  const { emailConfirmation } = useContext(GlobalDataContext);
+  const { sendEmailUrl } = emailConfirmation;
+  return () => post(sendEmailUrl);
+};
+
+export const useCreateCreditRequest = (cardId) => {
+  const { providerId } = reduxHooks.useCardCreditData(cardId);
+  const { authenticatedUser: { username } } = useContext(SiteContext);
+  const { courseId } = reduxHooks.useCardCourseRunData(cardId);
+  return () => api.createCreditRequest({ providerId, courseId, username });
+};