Skip to content

Commit

Permalink
✨(frontend) build page TeacherCourse
Browse files Browse the repository at this point in the history
    Part of teacher dashboard development, list teacher courses.
  • Loading branch information
rlecellier committed Apr 27, 2023
1 parent beda2ff commit a56f322
Show file tree
Hide file tree
Showing 34 changed files with 1,167 additions and 109 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
18 changes: 18 additions & 0 deletions src/frontend/js/api/joanie.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,9 @@ const getRoutes = () => {
courseRuns: {
get: `${baseUrl}/course-runs/:id/`,
},
courses: {
get: `${baseUrl}/courses/`,
},
};
};

Expand Down Expand Up @@ -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);
},
},
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions src/frontend/js/api/mocks/joanie/courses.ts
Original file line number Diff line number Diff line change
@@ -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));
},
);
14 changes: 8 additions & 6 deletions src/frontend/js/components/CourseGlimpse/CourseGlimpseFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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',
Expand Down
40 changes: 15 additions & 25 deletions src/frontend/js/components/CourseGlimpse/index.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};
Expand All @@ -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>,
);

Expand All @@ -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');
Expand Down
49 changes: 39 additions & 10 deletions src/frontend/js/components/CourseGlimpse/index.tsx
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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
Expand Down Expand Up @@ -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>
);
Expand All @@ -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';
43 changes: 43 additions & 0 deletions src/frontend/js/components/CourseGlimpse/utils.ts
Original file line number Diff line number Diff line change
@@ -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);
};
27 changes: 23 additions & 4 deletions src/frontend/js/components/CourseGlimpseList/index.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { IntlProvider } from 'react-intl';

import { RichieContextFactory } from 'utils/test/factories/richie';
import { CommonDataProps } from 'types/commonDataProps';
import { Course } from 'types/Course';
import { CourseGlimpseCourse } from 'components/CourseGlimpse';
import { Priority } from 'types';
import { CourseGlimpseList } from '.';

describe('widgets/Search/components/CourseGlimpseList', () => {
Expand All @@ -13,15 +14,33 @@ describe('widgets/Search/components/CourseGlimpseList', () => {
const courses = [
{
id: '44',
state: { datetime: '2019-03-14T10:35:47.823Z', text: '' },
code: 'AAA',
organization: {
title: "Awesome univ'",
},
state: {
datetime: '2019-03-14T10:35:47.823Z',
text: 'archived',
call_to_action: null,
priority: Priority.ARCHIVED_CLOSED,
},
title: 'Course 44',
},
{
id: '45',
state: { datetime: '2019-03-14T10:35:47.823Z', text: '' },
code: 'BBB',
organization: {
title: "Bad univ'",
},
state: {
datetime: '2019-03-14T10:35:47.823Z',
text: 'archived',
call_to_action: null,
priority: Priority.ARCHIVED_CLOSED,
},
title: 'Course 45',
},
] as Course[];
] as CourseGlimpseCourse[];
const { container } = render(
<IntlProvider locale="en">
<CourseGlimpseList
Expand Down
Loading

0 comments on commit a56f322

Please sign in to comment.