942243: Updated comments index.js

Author: SF4524LogeshKumar

How to/Download PDF based on confirmation in the toolbar click/React-Client/src/index.js

@@ -17,6 +17,7 @@ import {
   FormDesigner,
   Inject,
 } from '@syncfusion/ej2-react-pdfviewer';
+
 import {
   createSpinner,
   showSpinner,
@@ -26,64 +27,79 @@ import {
 function Default() {
   let viewer;
 
+  // Create spinner once component mounts
   React.useEffect(() => {
     createSpinner({
       target: document.getElementById('PDfviewProgress'),
     });
   }, []);
 
+  // Show spinner during download validation
   const show = () => {
     showSpinner(document.getElementById('PDfviewProgress'));
   };
 
+  // Hide spinner after validation completes
   const hide = () => {
     hideSpinner(document.getElementById('PDfviewProgress'));
   };
 
+  // Called when download starts
   const downloadStart = () => {
     show();
   };
 
+  // Called when download ends
   const downloadEnd = () => {
     hide();
   };
 
+  // Custom toolbar button configuration
   var downloadOption = {
-    prefixIcon: 'e-pv-download-document-icon e-pv-icon',
-    id: 'download_pdf',
-    tooltipText: 'Download file',
-    align: 'right',
+    prefixIcon: 'e-pv-download-document-icon e-pv-icon', // Syncfusion icon class
+    id: 'download_pdf', // Unique ID for custom button
+    tooltipText: 'Download file', // Tooltip shown on hover
+    align: 'right', // Aligns button to the right of toolbar
   };
 
+  // Handles toolbar button click events
   const toolbarClick = async (args) => {
-  if (args.item && args.item.id === 'download_pdf') {
-    const userConfirmed = window.confirm('Do you want to download this PDF?');
-    if (!userConfirmed) return;
-
-    const requestParams = { canDownload: true };
-    try {
-      const response = await fetch('https://localhost:5001/pdfviewer/CheckDownload', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(requestParams),
-      });
-
-      if (!response.ok) throw new Error('Error validating download');
-
-      const result = await response.json();
-      if (result) {
-        const viewerInstance = document.getElementById('container').ej2_instances[0];
-        viewerInstance.download();
+    // Check if the clicked item is our custom download button
+    if (args.item && args.item.id === 'download_pdf') {
+      // Prompt user for confirmation
+      const userConfirmed = window.confirm('Do you want to download this PDF?');
+      if (!userConfirmed) return;
+
+      // Prepare request payload
+      const requestParams = { canDownload: true };
+
+      try {
+        // Send request to server to validate download permission
+        const response = await fetch('https://localhost:5001/pdfviewer/CheckDownload', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(requestParams),
+        });
+
+        // Handle server error
+        if (!response.ok) throw new Error('Error validating download');
+
+        // Parse server response
+        const result = await response.json();
+
+        // If server allows download, trigger viewer's download method
+        if (result) {
+          const viewerInstance = document.getElementById('container').ej2_instances[0];
+          viewerInstance.download();
+        }
+      } catch (error) {
+        console.error('Download validation failed:', error);
       }
-    } catch (error) {
-      console.error('Download validation failed:', error);
     }
-  }
-};
+  };
 
   return (
     <div>
-      {/* PDF Viewer Component */}
       <div className="control-section">
         <PdfViewerComponent
           ref={(scope) => {
@@ -104,7 +120,7 @@ function Default() {
               'SelectionTool',
               'SearchOption',
               'PrintOption',
-              downloadOption,
+              downloadOption, // Inject custom download button
               'UndoRedoTool',
               'AnnotationEditTool',
               'FormDesignerEditTool',
@@ -134,13 +150,14 @@ function Default() {
         </PdfViewerComponent>
       </div>
 
-      {/* Spinner container below the PDF Viewer */}
+      {/* Spinner container */}
       <div id="PDfviewProgress"></div>
     </div>
   );
 }
 
 export default Default;
 
+// Render the component
 const root = createRoot(document.getElementById('sample'));
 root.render(<Default />);