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

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

@@ -0,0 +1,81 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { StrictDict } from '../../../utils';
+
+const initialState = {
+  pageNumber: 1,
+  courseData: {},
+  entitlement: [],
+  emailConfirmation: {},
+  enterpriseDashboard: {},
+  platformSettings: {},
+  suggestedCourses: [],
+  selectSessionModal: {},
+  filters: [],
+};
+
+export const cardId = (val) => `card-${val}`;
+
+export const today = Date.now();
+
+/**
+ * Creates a redux slice with actions to load dashboard data and manage visual layout
+ */
+const app = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    loadCourses: (state, { payload: { courses } }) => ({
+      ...state,
+      courseData: courses.reduce(
+        (obj, curr, index) => {
+          const out = { ...curr, cardId: cardId(index) };
+          if (out.enrollment.lastEnrolled === null) {
+            out.enrollment.lastEnrolled = today;
+          }
+          return { ...obj, [cardId(index)]: out };
+        },
+        {},
+      ),
+    }),
+    loadGlobalData: (state, { payload }) => ({
+      ...state,
+      emailConfirmation: payload.emailConfirmation,
+      enterpriseDashboard: payload.enterpriseDashboard,
+      platformSettings: payload.platformSettings,
+      suggestedCourses: payload.suggestedCourses,
+      socialShareSettings: payload.socialShareSettings,
+    }),
+    updateSelectSessionModal: (state, { payload }) => ({
+      ...state,
+      selectSessionModal: { cardId: payload },
+    }),
+    setPageNumber: (state, { payload }) => ({ ...state, pageNumber: payload }),
+    setFilters: (state, { payload }) => ({
+      ...state,
+      filters: payload,
+    }),
+    addFilter: (state, { payload }) => ({
+      ...state,
+      filters: [...state.filters, payload],
+    }),
+    removeFilter: (state, { payload }) => ({
+      ...state,
+      filters: state.filters.filter(item => item !== payload),
+    }),
+    clearFilters: (state) => ({
+      ...state,
+      filters: [],
+    }),
+  },
+});
+
+const actions = StrictDict(app.actions);
+
+const { reducer } = app;
+
+export {
+  actions,
+  initialState,
+  reducer,
+};

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

@@ -0,0 +1,124 @@
+import {
+  cardId,
+  initialState,
+  reducer,
+  actions,
+  today,
+} from './reducer';
+
+describe('app reducer', () => {
+  describe('reducers', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    it('returns initial state', () => {
+      expect(reducer(undefined, {})).toEqual(initialState);
+    });
+    const initialFilter = 'initial filter';
+    const testState = {
+      ...initialState,
+      enrollments: [],
+      courseData: {
+      },
+      entitlement: [],
+      filters: [initialFilter],
+    };
+    describe('action handlers', () => {
+      describe('loadCourses', () => {
+        const courseIds = [
+          'course-1',
+          'course-2',
+          'course-3',
+        ];
+        const entitlementIds = [
+          'entitlement-course-1',
+          'entitlement-course-2',
+        ];
+        const enrollmentData = [
+          {
+            courseRun: { cardId: courseIds[0] },
+            course: 1,
+            some: 'data',
+            enrollment: { lastEnrolled: 'test-last-enrolled' },
+          },
+          {
+            courseRun: { cardId: courseIds[1] },
+            course: 2,
+            some: 'other data',
+            enrollment: { lastEnrolled: 'test-last-enrolled' },
+          },
+          {
+            courseRun: { cardId: courseIds[2] },
+            course: 3,
+            some: 'still different data',
+            enrollment: { lastEnrolled: 'test-last-enrolled' },
+          },
+        ];
+        const entitlementData = [
+          {
+            courseRun: { cardId: entitlementIds[0] },
+            course: 4,
+            some: 'STILL different data',
+            enrollment: { lastEnrolled: null },
+          },
+          {
+            courseRun: { cardId: entitlementIds[1] },
+            course: 5,
+            some: 'still DIFFERENT data',
+            enrollment: { lastEnrolled: null },
+          },
+        ];
+        let out;
+        beforeEach(() => {
+          out = reducer(testState, actions.loadCourses({
+            courses: [...enrollmentData, ...entitlementData],
+          }));
+        });
+        it('loads object keyed by courseRun ids into courseData field', () => {
+          expect(out.courseData).toEqual({
+            [cardId(0)]: { ...enrollmentData[0], cardId: cardId(0) },
+            [cardId(1)]: { ...enrollmentData[1], cardId: cardId(1) },
+            [cardId(2)]: {
+              ...enrollmentData[2],
+              cardId: cardId(2),
+            },
+            [cardId(3)]: {
+              ...entitlementData[0],
+              cardId: cardId(3),
+              enrollment: { lastEnrolled: today },
+            },
+            [cardId(4)]: {
+              ...entitlementData[1],
+              cardId: cardId(4),
+              enrollment: { lastEnrolled: today },
+            },
+          });
+        });
+      });
+      describe('filters', () => {
+        const newFilter = 'new filter';
+        let out;
+        beforeEach(() => {
+          out = reducer(testState, {});
+        });
+        it('overwrites the filters object when using setFilters', () => {
+          expect(out.filters).toEqual([initialFilter]);
+          out = reducer(testState, actions.setFilters([newFilter]));
+          expect(out.filters).toEqual([newFilter]);
+        });
+        it('adds a filter when using addFilter', () => {
+          out = reducer(testState, actions.addFilter(newFilter));
+          expect(out.filters).toEqual([initialFilter, newFilter]);
+        });
+        it('removes a filter when using removeFilter', () => {
+          out = reducer(testState, actions.removeFilter(initialFilter));
+          expect(out.filters).toEqual([]);
+        });
+        it('clears the filters when using clearFilters', () => {
+          out = reducer(testState, actions.clearFilters());
+          expect(out.filters).toEqual([]);
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,23 @@
+import { createSelector } from 'reselect';
+
+import { StrictDict } from '../../../../utils';
+
+import simpleSelectors from './simpleSelectors';
+import * as module from './appSelectors';
+
+export const numCourses = createSelector(
+  [simpleSelectors.courseData],
+  (courseData) => Object.keys(courseData).length,
+);
+export const hasCourses = createSelector([module.numCourses], (num) => num > 0);
+
+export const showSelectSessionModal = createSelector(
+  [simpleSelectors.selectSessionModal],
+  (data) => data.cardId != null,
+);
+
+export default StrictDict({
+  numCourses,
+  hasCourses,
+  showSelectSessionModal,
+});

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

@@ -0,0 +1,28 @@
+import simpleSelectors from './simpleSelectors';
+import * as appSelectors from './appSelectors';
+
+describe('basic app selectors', () => {
+  describe('numCourses', () => {
+    it('returns the number of courses in the courseData object', () => {
+      const { preSelectors, cb } = appSelectors.numCourses;
+      expect(preSelectors).toEqual([simpleSelectors.courseData]);
+      expect(cb({ course1: 'data', course2: 'data', course3: 'data' })).toEqual(3);
+    });
+  });
+  describe('hasCourses', () => {
+    it('returns true iff numCourses is greater than 0', () => {
+      const { preSelectors, cb } = appSelectors.hasCourses;
+      expect(preSelectors).toEqual([appSelectors.numCourses]);
+      expect(cb(3)).toEqual(true);
+      expect(cb(0)).toEqual(false);
+    });
+  });
+  describe('showSelectSessionModal', () => {
+    it('returns true if the selectSessionModal cardId is not null', () => {
+      const { preSelectors, cb } = appSelectors.showSelectSessionModal;
+      expect(preSelectors).toEqual([simpleSelectors.selectSessionModal]);
+      expect(cb({ cardId: 'test' })).toEqual(true);
+      expect(cb({ data: 'test' })).toEqual(false);
+    });
+  });
+});

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

@@ -0,0 +1,155 @@
+import { StrictDict } from '../../../../utils';
+import { baseAppUrl } from '../../../../data/services/lms/urls';
+import { EXECUTIVE_EDUCATION_COURSE_MODES } from '../../../../data/constants/course';
+
+import * as module from './courseCard';
+import * as simpleSelectors from './simpleSelectors';
+
+const { cardSimpleSelectors, mkCardSelector } = simpleSelectors;
+
+const today = new Date();
+const dateSixMonthsFromNow = new Date();
+dateSixMonthsFromNow.setDate(dateSixMonthsFromNow.getDate() + 180);
+
+export const loadDateVal = (date) => (date ? new Date(date) : null);
+
+export const courseCard = StrictDict({
+  certificate: mkCardSelector(
+    cardSimpleSelectors.certificate,
+    (certificate) => (certificate === null ? {} : ({
+      availableDate: new Date(certificate.availableDate),
+      certPreviewUrl: baseAppUrl(certificate.certPreviewUrl),
+      isDownloadable: certificate.isDownloadable,
+      isEarnedButUnavailable: certificate.isEarned && new Date(certificate.availableDate) > new Date(),
+      isRestricted: certificate.isRestricted,
+      isEarned: certificate.isEarned,
+    })),
+  ),
+  course: mkCardSelector(
+    cardSimpleSelectors.course,
+    (course) => ({
+      bannerImgSrc: baseAppUrl(course.bannerImgSrc),
+      courseNumber: course.courseNumber,
+      courseName: course.courseName,
+      socialShareUrl: course.socialShareUrl,
+    }),
+  ),
+  courseProvider: mkCardSelector(
+    cardSimpleSelectors.courseProvider,
+    (courseProvider) => ({ name: courseProvider?.name }),
+  ),
+  courseRun: mkCardSelector(
+    cardSimpleSelectors.courseRun,
+    (courseRun) => (courseRun === null ? {} : {
+      endDate: module.loadDateVal(courseRun.endDate),
+      startDate: module.loadDateVal(courseRun.startDate),
+      advertisedStart: courseRun.advertisedStart,
+
+      courseId: courseRun.courseId,
+      isArchived: courseRun.isArchived,
+      isStarted: courseRun.isStarted,
+
+      minPassingGrade: Math.floor(courseRun.minPassingGrade * 100),
+
+      homeUrl: courseRun.homeUrl,
+      marketingUrl: courseRun.marketingUrl,
+
+      progressUrl: baseAppUrl(courseRun.progressUrl),
+      resumeUrl: baseAppUrl(courseRun.resumeUrl), // resume will route this to learning mfe.
+      unenrollUrl: baseAppUrl(courseRun.unenrollUrl),
+    }),
+  ),
+  credit: mkCardSelector(
+    cardSimpleSelectors.credit,
+    (credit) => {
+      if (!credit || Object.keys(credit).length === 0) {
+        return { isEligible: false };
+      }
+      return {
+        isEligible: true,
+        providerStatusUrl: credit.providerStatusUrl,
+        providerName: credit.providerName,
+        providerId: credit.providerId,
+        error: credit.error,
+        purchased: credit.purchased,
+        requestStatus: credit.requestStatus,
+      };
+    },
+  ),
+  enrollment: mkCardSelector(
+    cardSimpleSelectors.enrollment,
+    (enrollment) => {
+      if (enrollment == null) {
+        return { isEnrolled: false };
+      }
+      const { isStaff, hasUnmetPrereqs, isTooEarly } = enrollment.coursewareAccess;
+      return {
+        coursewareAccess: enrollment.coursewareAccess,
+        hasAccess: isStaff || !(hasUnmetPrereqs || isTooEarly),
+        isEnrolled: enrollment.isEnrolled,
+        lastEnrolled: enrollment.lastEnrolled,
+        hasStarted: enrollment.hasStarted,
+
+        accessExpirationDate: module.loadDateVal(enrollment.accessExpirationDate),
+        canUpgrade: enrollment.canUpgrade,
+        isAudit: enrollment.isAudit,
+        isAuditAccessExpired: enrollment.isAuditAccessExpired,
+        isVerified: enrollment.isVerified,
+
+        isEmailEnabled: enrollment.isEmailEnabled,
+        hasOptedOutOfEmail: enrollment.hasOptedOutOfEmail,
+        mode: enrollment.mode,
+        isExecEd2UCourse: EXECUTIVE_EDUCATION_COURSE_MODES.includes(enrollment.mode),
+      };
+    },
+  ),
+  entitlement: mkCardSelector(
+    cardSimpleSelectors.entitlement,
+    (entitlement) => {
+      if (!entitlement || Object.keys(entitlement).length === 0) {
+        return { isEntitlement: false };
+      }
+      const deadline = new Date(entitlement.changeDeadline);
+      const deadlinePassed = deadline < today;
+      const showExpirationWarning = (
+        !entitlement.isFulfilled
+        && !deadlinePassed
+        && deadline <= dateSixMonthsFromNow
+      );
+      return {
+        isEntitlement: true,
+
+        availableSessions: entitlement.availableSessions,
+        changeDeadline: deadline,
+        isExpired: entitlement.isExpired,
+        isFulfilled: entitlement.isFulfilled,
+        uuid: entitlement.uuid,
+
+        hasSessions: entitlement.availableSessions?.length > 0,
+        canChange: !deadlinePassed,
+        showExpirationWarning,
+      };
+    },
+  ),
+  gradeData: mkCardSelector(
+    cardSimpleSelectors.gradeData,
+    (gradeData) => ({ isPassing: gradeData.isPassing }),
+  ),
+  relatedPrograms: mkCardSelector(
+    cardSimpleSelectors.relatedPrograms,
+    (relatedPrograms) => ({
+      list: relatedPrograms.map(program => ({
+        bannerImgSrc: program.bannerImgSrc,
+        logoImgSrc: program.logoImgSrc,
+        numberOfCourses: program.numberOfCourses,
+        programType: program.programType,
+        programUrl: program.programUrl,
+        provider: program.provider,
+        title: program.title,
+      })),
+      length: relatedPrograms.length,
+    }),
+  ),
+});
+
+export default courseCard;