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

xitij2000 · xitij2000 · commit f796a1dc235c · 2025-04-14T11:18:53.000+05:30
diff --git a/src/components/PrintSyllabus.tsx b/src/components/PrintSyllabus.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import messages from '../messages';
 import { type BlockResponse } from '../types';
 
-export const PrintSyllabus = ({ blockData }: { blockData: BlockResponse }) => {
-  const intl = useIntl();
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const blocks = blockData?.blocks;
-  const rootBlock = blockData?.blocks[blockData.root];
+const buildSyllabusForPrint = (intl, blocks, rootBlock) => {
   const makeList = (items: string[] | null) => {
     if (!items) {
       return '';
@@ -27,56 +23,71 @@ export const PrintSyllabus = ({ blockData }: { blockData: BlockResponse }) => {
         )))}`))}`))}`));
 
   const srcdoc = `<html>
-<head>
-    <title>${intl.formatMessage(messages.syllabusTitle)}</title>
-    <style>
-        body > ul {
-            padding: 0.125rem;
-            margin: 0;
-            list-style: none;
-        }
+  <head>
+      <title>${intl.formatMessage(messages.syllabusTitle)}</title>
+      <style>
+          body > ul {
+              padding: 0.125rem;
+              margin: 0;
+              list-style: none;
+          }
+
+          body > ul > li {
+              border: 1px solid black;
+              margin: 0.5rem 0;
+              padding: 0 0.5rem;
+          }
+
+          body > ul > li > ul {
+              break-after: auto;
+              list-style: none;
+          }
+
+          body ul ul ul ul li:before {
+              content: '\\01F517';
+              margin-right: 0.5rem;
+          }
 
-        body > ul > li {
-            border: 1px solid black;
-            margin: 0.5rem 0;
-            padding: 0 0.5rem;
-        }
+          body ul ul ul ul {
+              list-style: none;
+              padding-left: 0;
+          }
 
-        body > ul > li > ul {
-            break-after: auto;
-            list-style: none;
-        }
+          body ul > li ul {
+              break-after: auto;
+          }
 
-        body ul ul ul ul li:before {
-            content: '\\01F517';
-            margin-right: 0.5rem;
-        }
-        
-        body ul ul ul ul {
-            list-style: none;
-            padding-left: 0;
-        }
+          li {
+              break-inside: avoid;
+          }
 
-        body ul > li ul {
-            break-after: auto;
-        }
+          ul {
+              margin: 0;
+              padding-left: 1rem;
+              break-after: auto;
+          }
+      </style>
+  </head>
+  <body>
+  ${syllabusList}
+  </body>
+  </html>
+  `;
+  return srcdoc;
+};
+
+export const PrintSyllabus = ({ blockData }: { blockData: BlockResponse }) => {
+  const intl = useIntl();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [srcdoc, setSrcdoc] = useState('');
 
-        li {
-            break-inside: avoid;
-        }
+  const printSyllabus = () => {
+    const blocks = blockData?.blocks;
+    const rootBlock = blockData?.blocks[blockData.root];
+    setSrcdoc(buildSyllabusForPrint(intl, blocks, rootBlock));
+    iframeRef.current.contentWindow.print();
+  };
 
-        ul {
-            margin: 0;
-            padding-left: 1rem;
-            break-after: auto;
-        }
-    </style>
-</head>
-<body>
-${syllabusList}
-</body>
-</html>
-`;
   return (
     <div className="d-flex justify-content-end my-2">
       <iframe
@@ -88,7 +99,7 @@ ${syllabusList}
       {iframeRef.current?.contentWindow && (
       <Button
         variant="outline-primary"
-        onClick={() => iframeRef.current.contentWindow.print()}
+        onClick={() => printSyllabus()}
       >
           {intl.formatMessage(messages.print)}
       </Button>
