✨(frontend) dashboard teacher: page profile courses

CHANGELOG.md

@@ -13,9 +13,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Added
 
 - Add head_js block into base html template
-- list teacher's organizations in the teacher dashboard sidebar.
+- List teacher's courses in the teacher courses dashboard page.
 - Added Certificates in the dashboard
 - Dashboard infinite scroll of orders and enrollments
+- list teacher's courses in the teacher courses dashboard page.
 
 ### Fixed
 

src/frontend/js/api/joanie.ts

@@ -151,6 +151,9 @@ const getRoutes = () => {
     courseRuns: {
       get: `${baseUrl}/course-runs/:id/`,
     },
+    courses: {
+      get: `${baseUrl}/courses/`,
+    },
   };
 };
 
@@ -343,6 +346,21 @@ const API = (): Joanie.API => {
           url += '?' + queryString.stringify(queryParameters);
         }
 
+        return fetchWithJWT(url).then(checkStatus);
+      },
+    },
+    courses: {
+      get: (filters) => {
+        const { id, ...queryParameters } = filters || {};
+        let url;
+
+        if (id) url = ROUTES.courses.get.replace(':id', id);
+        else url = ROUTES.courses.get.replace(':id/', '');
+
+        if (!ObjectHelper.isEmpty(queryParameters)) {
+          url += '?' + queryString.stringify(queryParameters);
+        }
+
         return fetchWithJWT(url).then(checkStatus);
       },
     },

src/frontend/js/api/mocks/joanie/courses.ts

@@ -0,0 +1,48 @@
+import { rest } from 'msw';
+import type { CourseRun } from 'types/Joanie';
+import { getAPIEndpoint } from 'api/joanie';
+import { CourseFactory } from 'utils/test/factories/joanie';
+import { Nullable } from 'types/utils';
+import { CourseState } from 'types';
+import { Resource } from 'types/Resource';
+import { OrganizationMock } from './organizations';
+
+export interface CourseListItemMock extends Resource {
+  id: string;
+  title: string;
+  code: string;
+  organization: OrganizationMock;
+  course_runs: CourseRun['id'][];
+  cover: Nullable<{
+    filename: string;
+    url: string;
+    height: number;
+    width: number;
+  }>;
+  state: CourseState;
+}
+
+export const listCourses = rest.get<CourseListItemMock[]>(
+  `${getAPIEndpoint()}/courses/`,
+  (req, res, ctx) => {
+    const queryPerPage = req.url.searchParams.get('per_page');
+    const perPage = queryPerPage === null ? 6 : parseInt(queryPerPage, 10);
+
+    const organizationCover001 = require('./assets/organization_cover_001.jpg');
+    const courseCover001 = require('./assets/course_cover_001.jpg');
+    const courses: CourseListItemMock[] = CourseFactory.generate(perPage).map(
+      (course: CourseListItemMock) => ({
+        ...course,
+        organization: {
+          title: 'Awesome university',
+          logo: {
+            url: organizationCover001.default,
+          },
+        },
+        cover: { url: courseCover001.default },
+      }),
+    );
+
+    return res(ctx.status(200), ctx.json(courses));
+  },
+);

src/frontend/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -2,7 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from 'components/Icon';
 import { CommonDataProps } from 'types/commonDataProps';
-import { Course } from 'types/Course';
+import { CourseState } from 'types';
 
 const messages = defineMessages({
   dateIconAlt: {
@@ -16,16 +16,18 @@ const messages = defineMessages({
  * <CourseGlimpseFooter />.
  * This is spun off from <CourseGlimpse /> to allow easier override through webpack.
  */
-export const CourseGlimpseFooter: React.FC<{ course: Course } & CommonDataProps> = ({ course }) => {
+export const CourseGlimpseFooter: React.FC<{ courseState: CourseState } & CommonDataProps> = ({
+  courseState,
+}) => {
   const intl = useIntl();
   return (
     <div className="course-glimpse-footer">
       <div className="course-glimpse-footer__date">
         <Icon name="icon-calendar" title={intl.formatMessage(messages.dateIconAlt)} />
-        {course.state.text.charAt(0).toUpperCase() +
-          course.state.text.substr(1) +
-          (course.state.datetime
-            ? ` ${intl.formatDate(new Date(course.state.datetime!), {
+        {courseState.text.charAt(0).toUpperCase() +
+          courseState.text.substr(1) +
+          (courseState.datetime
+            ? ` ${intl.formatDate(new Date(courseState.datetime!), {
                 year: 'numeric',
                 month: 'short',
                 day: 'numeric',

src/frontend/js/components/CourseGlimpse/index.spec.tsx

@@ -3,40 +3,37 @@ import { IntlProvider } from 'react-intl';
 import { CommonDataProps } from 'types/commonDataProps';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 
-import { CourseGlimpse } from '.';
+import { CourseGlimpse, CourseGlimpseCourse } from '.';
 
 describe('widgets/Search/components/CourseGlimpse', () => {
-  const course = {
-    absolute_url: 'https://example/com/courses/42/',
-    categories: ['24', '42'],
+  const course: CourseGlimpseCourse = {
+    course_url: 'https://example/com/courses/42/',
     code: '123abc',
     cover_image: {
       sizes: '330px',
       src: '/thumbs/small.png',
       srcset: 'some srcset',
     },
-    duration: '3 months',
-    effort: '3 hours',
     icon: {
       sizes: '60px',
       src: '/thumbs/icon_small.png',
       srcset: 'some srcset',
       title: 'Some icon',
-      color: 'red',
     },
     id: '742',
-    organization_highlighted: 'Some Organization',
-    organization_highlighted_cover_image: {
-      sizes: '330px',
-      src: '/thumbs/org_small.png',
-      srcset: 'some srcset',
+    organization: {
+      title: 'Some Organization',
+      image: {
+        sizes: '330px',
+        src: '/thumbs/org_small.png',
+        srcset: 'some srcset',
+      },
     },
-    organizations: ['36', '63'],
     state: {
-      call_to_action: 'Enroll now',
+      call_to_action: 'enroll now',
       datetime: '2019-03-14T10:35:47.823Z',
       priority: 0,
-      text: 'starts on',
+      text: 'starting on',
     },
     title: 'Course 42',
   };
@@ -46,14 +43,7 @@ describe('widgets/Search/components/CourseGlimpse', () => {
   it('renders a course glimpse with its data', () => {
     const { container } = render(
       <IntlProvider locale="en">
-        <CourseGlimpse
-          context={contextProps}
-          course={{
-            ...course,
-            duration: '3 months',
-            effort: '3 hours',
-          }}
-        />
+        <CourseGlimpse context={contextProps} course={course} />
       </IntlProvider>,
     );
 
@@ -70,9 +60,9 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     screen.getByLabelText('Organization');
     screen.getByText('Some Organization');
     screen.getByText('Category');
-    // Matches on 'Starts on Mar 14, 2019', date is wrapped with intl <span>
+    // Matches on 'Starting on Mar 14, 2019', date is wrapped with intl <span>
     screen.getByLabelText('Course date');
-    screen.getByText('Starts on Mar 14, 2019');
+    screen.getByText('Starting on Mar 14, 2019');
 
     // Check course logo
     const courseGlipseMedia = container.getElementsByClassName('course-glimpse__media');

src/frontend/js/components/CourseGlimpse/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { RichieContextFactory, CourseFactory } from 'utils/test/factories/richie';
+import { RichieContextFactory, CourseLightFactory } from 'utils/test/factories/richie';
 import { CourseGlimpse } from '.';
 
 export default {
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof CourseGlimpse>;
 export const RichieCourse: Story = {
   args: {
     context: RichieContextFactory().generate(),
-    course: CourseFactory.generate(),
+    course: CourseLightFactory.generate(),
   },
 };

src/frontend/js/components/CourseGlimpse/index.tsx

@@ -1,13 +1,41 @@
 import React, { memo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { Nullable } from 'types/utils';
 import { CommonDataProps } from 'types/commonDataProps';
-import { Course } from 'types/Course';
 import { Icon } from 'components/Icon';
+import { CourseState } from 'types';
 import { CourseGlimpseFooter } from './CourseGlimpseFooter';
 
+export interface CourseGlimpseCourse {
+  id: string;
+  code: Nullable<string>;
+  course_url?: string;
+  cover_image?: Nullable<{
+    src: string;
+    sizes?: string;
+    srcset?: string;
+  }>;
+  title: string;
+  organization: {
+    title: string;
+    image?: Nullable<{
+      src: string;
+      sizes?: string;
+      srcset?: string;
+    }>;
+  };
+  icon?: Nullable<{
+    title: string;
+    src: string;
+    sizes?: string;
+    srcset?: string;
+  }>;
+  state: CourseState;
+}
+
 export interface CourseGlimpseProps {
-  course: Course;
+  course: CourseGlimpseCourse;
 }
 
 const messages = defineMessages({
@@ -40,7 +68,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
       {/* the media link is only here for mouse users, so hide it for keyboard/screen reader users.
       Keyboard/sr will focus the link on the title */}
       <div aria-hidden="true" className="course-glimpse__media">
-        <a tabIndex={-1} href={course.absolute_url}>
+        <a tabIndex={-1} href={course.course_url}>
           {/* alt forced to empty string because it's a decorative image */}
           {course.cover_image ? (
             <img
@@ -59,18 +87,18 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
       <div className="course-glimpse__content">
         <div className="course-glimpse__wrapper">
           <h3 className="course-glimpse__title">
-            <a className="course-glimpse__link" href={course.absolute_url}>
+            <a className="course-glimpse__link" href={course.course_url}>
               <span className="course-glimpse__title-text">{course.title}</span>
             </a>
           </h3>
-          {course.organization_highlighted_cover_image ? (
+          {course.organization.image ? (
             <div className="course-glimpse__organization-logo">
               {/* alt forced to empty string because the organization name is rendered after */}
               <img
                 alt=""
-                sizes={course.organization_highlighted_cover_image.sizes}
-                src={course.organization_highlighted_cover_image.src}
-                srcSet={course.organization_highlighted_cover_image.srcset}
+                sizes={course.organization.image.sizes}
+                src={course.organization.image.src}
+                srcSet={course.organization.image.srcset}
               />
             </div>
           ) : null}
@@ -80,7 +108,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
               title={intl.formatMessage(messages.organizationIconAlt)}
               size="small"
             />
-            <span className="title">{course.organization_highlighted}</span>
+            <span className="title">{course.organization.title}</span>
           </div>
           <div className="course-glimpse__metadata course-glimpse__metadata--code">
             <Icon
@@ -109,7 +137,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
             </span>
           </div>
         ) : null}
-        <CourseGlimpseFooter context={context} course={course} />
+        <CourseGlimpseFooter context={context} courseState={course.state} />
       </div>
     </div>
   );
@@ -122,3 +150,4 @@ const areEqual: (
   prevProps.context === newProps.context && prevProps.course.id === newProps.course.id;
 
 export const CourseGlimpse = memo(CourseGlimpseBase, areEqual);
+export { getCourseGlimpsProps } from './utils';

src/frontend/js/components/CourseGlimpse/utils.ts

@@ -0,0 +1,43 @@
+import { Course as RichieCourse, isRichieCourse } from 'types/Course';
+import { CourseListItemMock as JoanieCourse } from 'api/mocks/joanie/courses';
+import { CourseGlimpseCourse } from '.';
+
+const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlimpseCourse => ({
+  id: course.id,
+  code: course.code,
+  course_url: course.absolute_url,
+  cover_image: course.cover_image,
+  title: course.title,
+  organization: {
+    title: course.organization_highlighted,
+    image: course.organization_highlighted_cover_image,
+  },
+  icon: course.icon,
+  state: course.state,
+});
+
+const getCourseGlimpsePropsFromJoanieCourse = (course: JoanieCourse): CourseGlimpseCourse => ({
+  id: course.id,
+  code: course.code,
+  cover_image: course.cover
+    ? {
+        src: course.cover.url,
+      }
+    : null,
+  title: course.title,
+  organization: {
+    title: course.organization.title,
+    image: course.organization.logo
+      ? {
+          src: course.organization.logo.url,
+        }
+      : null,
+  },
+  state: course.state,
+});
+
+export const getCourseGlimpsProps = (course: JoanieCourse | RichieCourse): CourseGlimpseCourse => {
+  return isRichieCourse(course)
+    ? getCourseGlimpsePropsFromRichieCourse(course)
+    : getCourseGlimpsePropsFromJoanieCourse(course);
+};