✨(frontend) add shared note widget

classroom dashboard widget to list session-shared notes

Author: alfredpichard

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;
+}