fixup! fixup! fixup! fixup! fixup! fixup! feat: Syllabus page for learner MFE

Author: xitij2000

src/components/BlockCollapsible.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Collapsible } from '@openedx/paragon';
-import { Block } from '../hooks';
+import { type Block } from '../types';
 import { HighlightMatch } from './HighlightMatch';
 
 interface BlockCollapsibleProps {

src/components/PrintSyllabus.tsx

@@ -3,11 +3,11 @@ import { useRef } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import messages from '../messages';
-import { BlockResponse } from '../hooks';
+import { type BlockResponse } from '../types';
 
 export const PrintSyllabus = ({ blockData }: { blockData: BlockResponse }) => {
   const intl = useIntl();
-  const iframeRef = useRef(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const blocks = blockData?.blocks;
   const rootBlock = blockData?.blocks[blockData.root];
   const makeList = (items: string[] | null) => {
@@ -43,29 +43,32 @@ export const PrintSyllabus = ({ blockData }: { blockData: BlockResponse }) => {
         }
 
         body > ul > li > ul {
-            break-inside: avoid;
             break-after: auto;
             list-style: none;
         }
+
         body ul ul ul ul li:before {
-            content: '\\01F517 ';
+            content: '\\01F517';
             margin-right: 0.5rem;
         }
+        
         body ul ul ul ul {
             list-style: none;
             padding-left: 0;
         }
-        body ul > li {
-            break-inside: avoid;
-            break-after: auto;
-        }
+
         body ul > li ul {
             break-after: auto;
         }
 
+        li {
+            break-inside: avoid;
+        }
+
         ul {
             margin: 0;
             padding-left: 1rem;
+            break-after: auto;
         }
     </style>
 </head>
@@ -82,11 +85,14 @@ ${syllabusList}
         className="d-none"
         title={intl.formatMessage(messages.syllabusTitle)}
       />
+      {iframeRef.current?.contentWindow && (
       <Button
         variant="outline-primary"
         onClick={() => iframeRef.current.contentWindow.print()}
-      >Print
+      >
+          {intl.formatMessage(messages.print)}
       </Button>
+      )}
     </div>
   );
 };

src/components/Syllabus.tsx

@@ -4,8 +4,9 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-  Block, BlockMap, UsageId, useBlockData, usePanels,
+  useBlockData, usePanels,
 } from '../hooks';
+import { type BlockMap, type UsageId } from '../types';
 import { BlockCollapsible } from './BlockCollapsible';
 import { HighlightMatch } from './HighlightMatch';
 import { PrintSyllabus } from './PrintSyllabus';

src/hooks.ts

@@ -1,33 +1,10 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useEffect, useMemo, useState } from 'react';
+import { type BlockResponse, type UsageId } from './types';
 
-export type UsageId = string;
-
-export type Block = {
-  id: UsageId;
-  type: string;
-  display_name: string;
-  children: UsageId[];
-  student_view_data: {
-    html: string;
-  }
-  links: {
-    text: string;
-    href: string;
-  }[]
-};
-
-export type BlockMap = {
-  [blockId: UsageId]: Block;
-};
-
-type BlockResponse = {
-  blocks: BlockMap;
-  root: UsageId;
-};
-
-const processData = (data: BlockResponse) => {
+const processBlockData = (blockData: BlockResponse) => {
+  const data = { ...blockData };
   const domParser = new DOMParser();
   const pruneBlocks: UsageId[] = [];
   Object.keys(data.blocks).forEach((blockId) => {
@@ -69,7 +46,7 @@ export const useBlockData = (courseId?: string) => {
     (async () => {
       if (courseId === undefined) { return; }
       const { data } = await getAuthenticatedHttpClient().get(getCourseBlocksUrl(courseId));
-      setBlockData(processData(data));
+      setBlockData(processBlockData(data));
     })();
   }, [courseId]);
   return blockData;

src/messages.ts

@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Expand all',
     description: 'Label for the button that expands the course syllabus.',
   },
+  print: {
+    id: 'plugins.syllabus.print',
+    defaultMessage: 'Print',
+    description: 'Label for the button that prints the course syllabus.',
+  },
 });
 
 export default messages;

src/types.d.ts

@@ -0,0 +1,24 @@
+export type UsageId = string;
+
+export type Block = {
+  id: UsageId;
+  type: string;
+  display_name: string;
+  children: UsageId[];
+  student_view_data: {
+    html: string;
+  }
+  links: {
+    text: string;
+    href: string;
+  }[]
+};
+
+export type BlockMap = {
+  [blockId: UsageId]: Block;
+};
+
+export type BlockResponse = {
+  blocks: BlockMap;
+  root: UsageId;
+};