✨(frontend) add shared note widget

classroom dashboard widget to list session-shared notes

src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/index.tsx

@@ -11,6 +11,7 @@ import { Description } from './widgets/Description';
 import { Invite } from './widgets/Invite';
 import { Recordings } from './widgets/Recordings';
 import { Scheduling } from './widgets/Scheduling';
+import { SharedNotes } from './widgets/SharedNotes';
 import { SupportSharing } from './widgets/SupportSharing';
 import { ToolsAndApplications } from './widgets/ToolsAndApplications';
 
@@ -21,6 +22,7 @@ enum WidgetType {
  INVITE = 'INVITE',
  SUPPORT_SHARING = 'SUPPORT_SHARING',
  RECORDINGS = 'RECORDINGS',
+ SHARED_NOTES = 'SHARED_NOTES',
 }
 
 const widgetLoader: { [key in WidgetType]: WidgetProps } = {
@@ -48,6 +50,10 @@ const widgetLoader: { [key in WidgetType]: WidgetProps } = {
  component: <ToolsAndApplications />,
  size: WidgetSize.DEFAULT,
  },
+ [WidgetType.SHARED_NOTES]: {
+ component: <SharedNotes />,
+ size: WidgetSize.DEFAULT,
+ },
 };
 
 const classroomWidgets: WidgetType[] = [
@@ -57,6 +63,7 @@ const classroomWidgets: WidgetType[] = [
  WidgetType.SCHEDULING,
  WidgetType.SUPPORT_SHARING,
  WidgetType.RECORDINGS,
+ WidgetType.SHARED_NOTES,
 ];
 
 export const ClassroomWidgetProvider = () => {

src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Recordings/index.spec.tsx

@@ -17,14 +17,14 @@ describe('<Recordings />', () => {
  let classroom = classroomMockFactory({ id: '1', started: false });
  const classroomRecordings = [
  classroomRecordingMockFactory({
- started_at: DateTime.fromJSDate(
- new Date(2022, 1, 29, 11, 0, 0),
- ).toISO() as string,
+ started_at:
+ DateTime.fromJSDate(new Date(2022, 1, 29, 11, 0, 0)).toISO() ||
+  undefined,
  }),
  classroomRecordingMockFactory({
- started_at: DateTime.fromJSDate(
- new Date(2022, 1, 15, 11, 0, 0),
- ).toISO() as string,
+ started_at:
+ DateTime.fromJSDate(new Date(2022, 1, 15, 11, 0, 0)).toISO() ||
+  undefined,
  }),
  ];
 

src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SharedNotes/index.spec.tsx

@@ -0,0 +1,66 @@
+import { screen } from '@testing-library/react';
+import { InfoWidgetModalProvider } from 'lib-components';
+import { render } from 'lib-tests';
+import { DateTime } from 'luxon';
+import React from 'react';
+
+import {
+ classroomMockFactory,
+ classroomSharedNoteMockFactory,
+} from '@lib-classroom/utils/tests/factories';
+import { wrapInClassroom } from '@lib-classroom/utils/wrapInClassroom';
+
+import { SharedNotes } from '.';
+
+describe('<SharedNotes />', () => {
+ it('displays a list of available shared notes', () => {
+ let classroom = classroomMockFactory({ id: '1', started: false });
+ const classroomSharedNotes = [
+ classroomSharedNoteMockFactory({
+ updated_on:
+ DateTime.fromJSDate(new Date(2022, 1, 29, 11, 0, 0)).toISO() ||
+ undefined,
+ }),
+ classroomSharedNoteMockFactory({
+ updated_on:
+ DateTime.fromJSDate(new Date(2022, 1, 15, 11, 0, 0)).toISO() ||
+ undefined,
+ }),
+ ];
+
+ const { rerender } = render(
+ wrapInClassroom(
+ <InfoWidgetModalProvider value={null}>
+ <SharedNotes />,
+ </InfoWidgetModalProvider>,
+ classroom,
+ ),
+ );
+
+ expect(screen.getByText('Shared notes')).toBeInTheDocument();
+ expect(screen.getByText('No shared note available')).toBeInTheDocument();
+
+ // simulate updated classroom
+ classroom = {
+ ...classroom,
+ shared_notes: classroomSharedNotes,
+ };
+ rerender(
+ wrapInClassroom(
+ <InfoWidgetModalProvider value={null}>
+ <SharedNotes />,
+ </InfoWidgetModalProvider>,
+ classroom,
+ ),
+ );
+ expect(
+ screen.queryByText('No shared note available'),
+ ).not.toBeInTheDocument();
+ expect(
+ screen.getByText('Tuesday, March 1, 2022 - 11:00 AM'),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText('Tuesday, February 15, 2022 - 11:00 AM'),
+ ).toBeInTheDocument();
+ });
+});

src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SharedNotes/index.tsx

@@ -0,0 +1,78 @@
+import { Box } from 'grommet';
+import { ClassroomSharedNote, FoldableItem, ItemList } from 'lib-components';
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import { useCurrentClassroom } from '@lib-classroom/hooks/useCurrentClassroom';
+
+const messages = defineMessages({
+ title: {
+ defaultMessage: 'Shared notes',
+ description: 'Label for shared notes download in classroom form.',
+ id: 'component.SharedNotes.title',
+ },
+ info: {
+ defaultMessage: `All available shared notes can be downloaded here.`,
+ description: 'Helptext for the widget.',
+ id: 'component.SharedNotes.info',
+ },
+ noSharedNoteAvailable: {
+ defaultMessage: 'No shared note available',
+ description: 'Message when no recordings are available.',
+ id: 'component.SharedNotes.noSharedNoteAvailable',
+ },
+ downloadSharedNoteLabel: {
+ defaultMessage: 'Download shared note',
+ description: 'Label for download recording button.',
+ id: 'component.SharedNotes.downloadSharedNoteLabel',
+ },
+});
+
+export const SharedNotes = () => {
+ const classroom = useCurrentClassroom();
+ const intl = useIntl();
+
+ return (
+ <FoldableItem
+ infoText={intl.formatMessage(messages.info)}
+ initialOpenValue
+ title={intl.formatMessage(messages.title)}
+ >
+ <ItemList
+ itemList={classroom.shared_notes}
+ noItemsMessage={intl.formatMessage(messages.noSharedNoteAvailable)}
+ >
+ {(sharedNote: ClassroomSharedNote) => (
+ <Box
+ key={sharedNote.id}
+ direction="row"
+ align="center"
+ fill="horizontal"
+ height="60px"
+ gap="medium"
+ pad="small"
+ >
+ <a
+ title={intl.formatMessage(messages.downloadSharedNoteLabel)}
+ href={sharedNote.shared_note_url}
+ target="_blank"
+ rel="noreferrer noopener"
+ >
+ {intl.formatDate(sharedNote.updated_on, {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ weekday: 'long',
+ }) +
+ ' - ' +
+ intl.formatDate(sharedNote.updated_on, {
+ hour: 'numeric',
+ minute: 'numeric',
+ })}
+ </a>
+ </Box>
+ )}
+ </ItemList>
+ </FoldableItem>
+ );
+};

src/frontend/packages/lib_classroom/src/utils/tests/factories.ts

@@ -6,6 +6,7 @@ import {
  ClassroomDocument,
  ClassroomInfos,
  ClassroomRecording,
+ ClassroomSharedNote,
 } from 'lib-components';
 
 const { READY } = uploadState;
@@ -29,6 +30,7 @@ export const classroomMockFactory = <T extends Partial<Classroom>>(
  invite_token: null,
  instructor_token: null,
  recordings: [],
+ shared_notes: [],
  enable_waiting_room: false,
  enable_shared_notes: true,
  enable_chat: true,
@@ -98,3 +100,15 @@ export const classroomRecordingMockFactory = (
  ...classroomRecording,
  };
 };
+
+export const classroomSharedNoteMockFactory = (
+ classroomSharedNote: Partial<ClassroomSharedNote> = {},
+): ClassroomSharedNote => {
+ return {
+ classroom: faker.datatype.uuid(),
+ id: faker.datatype.uuid(),
+ updated_on: faker.date.recent().toISOString(),
+ shared_note_url: faker.internet.url(),
+ ...classroomSharedNote,
+ };
+};

src/frontend/packages/lib_components/src/types/apps/classroom/models.ts

@@ -17,6 +17,7 @@ export interface Classroom extends Resource {
  invite_token: Nullable<string>;
  instructor_token: Nullable<string>;
  recordings: ClassroomRecording[];
+ shared_notes: ClassroomSharedNote[];
  enable_waiting_room: boolean;
  enable_shared_notes: boolean;
  enable_chat: boolean;
@@ -132,3 +133,9 @@ export interface ClassroomRecording extends Resource {
  video_file_url: string;
  started_at: string;
 }
+
+export interface ClassroomSharedNote extends Resource {
+ classroom: string;
+ shared_note_url: string;
+ updated_on: string;
+}