Skip to content

Commit

Permalink
✨(frontend) build page TeacherCourse
Browse files Browse the repository at this point in the history
  • Loading branch information
rlecellier committed Apr 18, 2023
1 parent 6ab4b4a commit 4a56a6d
Show file tree
Hide file tree
Showing 43 changed files with 1,157 additions and 133 deletions.
18 changes: 18 additions & 0 deletions src/frontend/js/api/joanie.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,9 @@ const getRoutes = () => {
courseRuns: {
get: `${baseUrl}/course-runs/:id/`,
},
courses: {
get: `${baseUrl}/courses/`,
},
};
};

Expand Down Expand Up @@ -329,6 +332,21 @@ const API = (): Joanie.API => {
url += '?' + queryString.stringify(queryParameters);
}

return fetchWithJWT(url).then(checkStatus);
},
},
courses: {
get: (filters?: Joanie.CourseFilters) => {
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_image: 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_image: { 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
4 changes: 2 additions & 2 deletions src/frontend/js/components/CourseGlimpse/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -11,6 +11,6 @@ type Story = StoryObj<typeof CourseGlimpse>;
export const RichieCourse: Story = {
args: {
context: RichieContextFactory().generate(),
course: CourseFactory.generate(),
course: CourseLightFactory.generate(),
},
};
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_image
? {
src: course.cover_image.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);
};
Loading

0 comments on commit 4a56a6d

Please sign in to comment.