richie-education 2.25.0-b2.dev46 → 2.25.0-b2.dev49

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -53,6 +53,16 @@ const TeacherDashboardCourseList = ({
       {titleTranslated && (
         <h2 className="dashboard-course-list__title dashboard__page_title">{titleTranslated}</h2>
       )}
+      {courseAndProductList.length > 0 ? (
+        <CourseGlimpseList
+          courses={getCourseGlimpseListProps(courseAndProductList, intl, organizationId)}
+          context={context}
+          className="dashboard__course-glimpse-list"
+        />
+      ) : (
+        <FormattedMessage {...messages.emptyList} />
+      )}
+
       {isLoading && (
         <Spinner aria-labelledby="loading-courses-data">
           <span id="loading-courses-data">
@@ -60,28 +70,17 @@ const TeacherDashboardCourseList = ({
           </span>
         </Spinner>
       )}
-      {!isLoading &&
-        (courseAndProductList.length > 0 ? (
-          <>
-            <CourseGlimpseList
-              courses={getCourseGlimpseListProps(courseAndProductList, intl, organizationId)}
-              context={context}
-              className="dashboard__course-glimpse-list"
-            />
-            {hasMore && (
-              <Button
-                onClick={() => next()}
-                disabled={isLoading}
-                ref={loadMoreButtonRef}
-                color="tertiary"
-              >
-                <FormattedMessage {...messages.loadMore} />
-              </Button>
-            )}
-          </>
-        ) : (
-          <FormattedMessage {...messages.emptyList} />
-        ))}
+
+      {hasMore && (
+        <Button
+          onClick={() => next()}
+          disabled={isLoading}
+          ref={loadMoreButtonRef}
+          color="tertiary"
+        >
+          <FormattedMessage {...messages.loadMore} />
+        </Button>
+      )}
     </div>
   );
 };

package/js/types/Joanie.ts

@@ -1,4 +1,4 @@
-import type { CourseState } from 'types';
+import type { CourseState, OpenEdXEnrollment } from 'types';
 import type { Maybe, Nullable } from 'types/utils';
 import { Resource, ResourcesQuery } from 'hooks/useResources';
 import { OrderResourcesQuery } from 'hooks/useOrders';
@@ -190,8 +190,23 @@ export interface Enrollment {
   created_on: string;
   orders: OrderEnrollment[];
   product_relations: CourseProductRelation[];
-  certificate_id?: string;
-}
+  certificate_id: Nullable<string>;
+}
+export const isEnrollment = (obj: unknown | Enrollment | OpenEdXEnrollment): obj is Enrollment => {
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+  return (
+    'is_active' in obj &&
+    'state' in obj &&
+    'course_run' in obj &&
+    'was_created_by_order' in obj &&
+    'created_on' in obj &&
+    'orders' in obj &&
+    'product_relations' in obj &&
+    'certificate_id' in obj
+  );
+};
 
 export interface EnrollmentLight {
   id: string;

package/js/types/index.ts

@@ -69,4 +69,5 @@ export interface OpenEdXEnrollment {
  * Use an unknown type to make sure we do not depend on any LMS-specific fields
  * on enrollment objects, just use HTTP response codes.
  */
+// TODO(rlecellier): rename into UnknownEnrollment
 export type Enrollment = unknown;

package/js/utils/test/factories/joanie.ts

@@ -81,6 +81,7 @@ export const EnrollmentFactory = factory((): Enrollment => {
     was_created_by_order: false,
     created_on: faker.date.past({ years: 1 }).toISOString(),
     orders: [],
+    certificate_id: null,
   };
 });
 

package/js/widgets/Dashboard/components/DashboardItem/stories.mock.ts

@@ -26,4 +26,5 @@ export const enrollment: Enrollment = {
     languages: ['en'],
   },
   product_relations: [],
+  certificate_id: null,
 };

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx

@@ -3,7 +3,9 @@ import fetchMock from 'fetch-mock';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
 
+import { faker } from '@faker-js/faker';
 import { Deferred } from 'utils/test/deferred';
+import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -12,6 +14,7 @@ import {
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { Priority } from 'types';
 import CourseRunEnrollment from './index';
 
 jest.mock('utils/errors/handle');
@@ -96,10 +99,11 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
   it('shows an error message when enrollment get request failed', async () => {
     const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
-    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
+    const joanieEnrollmentId = faker.string.uuid();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollmentId}`;
 
     fetchMock.get(
-      `${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`,
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${joanieEnrollmentId}`,
       HttpStatusCode.INTERNAL_SERVER_ERROR,
     );
 
@@ -118,6 +122,45 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     await screen.findByText('Enrollment fetching failed');
   });
 
+  it('shows a link to the course if the user is already enrolled', async () => {
+    // Joanie session requests
+    let nbApiCalls = 3;
+    const user = UserFactory().one();
+    const joanieEnrollment = JoanieEnrollment({ is_active: true }).one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollment.course_run.id}/`;
+    courseRun.state.priority = Priority.ONGOING_OPEN;
+
+    fetchMock.get(
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${joanieEnrollment.course_run.id}`,
+      {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [joanieEnrollment],
+      },
+    );
+    nbApiCalls += 1;
+
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <CourseRunEnrollment courseRun={courseRun} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const $goToCourseButton = await screen.findByRole('link', { name: 'Go to course' });
+    expect($goToCourseButton).toBeInTheDocument();
+    expect($goToCourseButton).toHaveAttribute('href', joanieEnrollment.course_run.resource_link);
+    expect(screen.getByText('You are enrolled in this course run')).toBeInTheDocument();
+    expect(fetchMock.calls()).toHaveLength(nbApiCalls);
+  });
+
   it('shows an "Unenroll" text and allows the user to unenroll', async () => {
     const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useReducer } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import c from 'classnames';
 import { Button } from '@openfun/cunningham-react';
@@ -12,6 +12,7 @@ import { HttpError } from 'utils/errors/HttpError';
 import useCourseEnrollment from 'widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment';
 import { CourseRunUnenrollButton } from 'widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/CourseRunUnenrollmentButton';
 import useDateRelative from 'hooks/useDateRelative';
+import { isEnrollment as isJoanieEnrollment } from 'types/Joanie';
 
 const messages = defineMessages({
   enroll: {
@@ -181,9 +182,8 @@ const reducer = ({ step, context }: ReducerState, action: ReducerAction): Reduce
 
 const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
   const { user, login } = useSession();
-  const { enrollmentIsActive, setEnrollment, canUnenroll, states } = useCourseEnrollment(
-    props.courseRun.resource_link,
-  );
+  const { enrollment, enrollmentIsActive, setEnrollment, canUnenroll, states } =
+    useCourseEnrollment(props.courseRun.resource_link);
   const startDate = new Date(props.courseRun.start);
   const isStarted = new Date() > startDate;
   const relativeStartDate = useDateRelative(startDate);
@@ -226,6 +226,16 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
     [courseRun, currentUser, dispatch, enrollmentIsActive],
   );
 
+  const LmsCourseLink = useMemo(() => {
+    if (states.isLoading) {
+      return null;
+    }
+    if (isJoanieEnrollment(enrollment)) {
+      return enrollment.course_run.resource_link;
+    }
+    return courseRun.resource_link;
+  }, [courseRun, enrollment]);
+
   useEffect(() => {
     dispatch({
       payload: { currentUser: user, isEnrolled: enrollmentIsActive },
@@ -303,7 +313,8 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
       return isStarted ? (
         <div>
           <Button
-            href={courseRun.resource_link}
+            href={LmsCourseLink === null ? '#' : LmsCourseLink}
+            disabled={LmsCourseLink === null}
             className="course-run-enrollment__cta"
             fullWidth={true}
           >

package/js/widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index.ts

@@ -21,22 +21,18 @@ const useCourseEnrollment = (resourceLink: string) => {
   const queryClient = useQueryClient();
   const EnrollmentAPI = EnrollmentApiInterface(resourceLink);
 
-  const [{ data: enrollment, isError, isLoading }, queryKey] = useSessionQuery(
+  const [{ data: enrollment, isError, isLoading: isEnrollmentLoading }, queryKey] = useSessionQuery(
     ['enrollment', resourceLink],
     async () => {
       return EnrollmentAPI.get(resourceLink, user!);
     },
   );
 
-  const [{ data: isActive, refetch: refetchIsActive }] = useSessionQuery(
-    [...queryKey, 'is_active'],
-    async () => EnrollmentAPI.isEnrolled(enrollment),
-    {
+  const [{ data: isActive, refetch: refetchIsActive, isLoading: isActiveLoading }] =
+    useSessionQuery([...queryKey, 'is_active'], async () => EnrollmentAPI.isEnrolled(enrollment), {
       // Enrollment is null if it has been fetched
-      enabled: !!user && enrollment !== undefined && !isLoading,
-    },
-  );
-
+      enabled: !!user && enrollment !== undefined && !isEnrollmentLoading,
+    });
   const { mutateAsync } = useSessionMutation({
     mutationFn: (activeEnrollment: boolean = true) =>
       EnrollmentAPI.set(resourceLink, user!, enrollment, activeEnrollment),
@@ -61,6 +57,7 @@ const useCourseEnrollment = (resourceLink: string) => {
       errors: {
         get: isError,
       },
+      isLoading: isEnrollmentLoading || isActiveLoading,
     },
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev46",
+  "version": "2.25.0-b2.dev49",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {