Merge pull request #38 from Callhub-Connect/update-pdf

Implemented save pdf changes button

src/helper-components/pdf-manager-component/PdfManager-styles.jsx

@@ -37,7 +37,7 @@ export const PdfNavbar = styled.div`
 `;
 
 export const Button = styled.button`
-    width: 30%;
+    width: 25%;
     font-family: 'League Spartan', sans-serif;
     background-color: #0b9f43;
     border-width: 0;

src/helper-components/pdf-manager-component/PdfManager.jsx

@@ -7,7 +7,9 @@ import {
   FormControl,
   MenuItem,
   InputLabel,
-} from "@mui/material"
+  Alert,
+  Snackbar,
+} from "@mui/material";
 import { 
   FileManagerContainer,
   PdfContainer,
@@ -19,6 +21,10 @@ function PdfFileManager() {
   const [uploadedPdfs, setUploadedPdfs] = useState([]);
   const [selectedPdf, setSelectedPdf] = useState('');
   const fileInputRef = useRef(null);
+  const [pdfViewerInstance, setPdfViewerInstance] = useState(null);
+  const [alertOpen, setAlertOpen] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [alertSeverity, setAlertSeverity] = useState('success'); // 'success' or 'error'
 
   const handleButtonClick = () => {
     fileInputRef.current.click();
@@ -56,26 +62,78 @@ function PdfFileManager() {
         if (!uploadedPdfs.some(pdf => pdf.id === response.data)) {
           setUploadedPdfs([...uploadedPdfs, documentItem]);
         }
+        setAlertSeverity('success');
+        setAlertMessage('File uploaded successfully');
+        setAlertOpen(true);
+        setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds
       })
       .catch((error) => {
         // Handle any errors (e.g., show an error message)
         console.error('File upload failed:', error);
+        setAlertMessage('Error uploading file');
+        setAlertSeverity('error');
+        setAlertOpen(true);
+        setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds
       });
   };
 
   // Memoized iframe element
   const pdfViewer = useMemo(() => {
     if (selectedPdf) {
         return (
-          <PdfViewerComponent document={`http://localhost:8080/files/${selectedPdf.id}`}/>
+          <PdfViewerComponent
+            document={`http://localhost:8080/files/${selectedPdf.id}`}
+            onInstanceChange={instance => setPdfViewerInstance(instance)}
+          />
         );
       } else {
         return null;
       }
   }, [selectedPdf]);
 
+  const handleSave = () => {
+    if (pdfViewerInstance && selectedPdf) {
+      pdfViewerInstance.exportPdf().then((blob) => {
+        console.log(blob); // Check what is being returned here
+        if (!blob) {
+          console.error('No data returned from exportPdf');
+          return;
+        }
+        const formData = new FormData();
+        formData.append("file", blob, `updated_${selectedPdf.name}`); // Ensure blob is a Blob object
+
+        Axios.put(`http://localhost:8080/files/update/${selectedPdf.id}`, formData)
+        .then(response => {
+          console.log('PDF updated successfully:', response.data);
+          setAlertMessage("PDF changes saved successfully");
+          setAlertSeverity('success');
+          setAlertOpen(true);
+          setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds
+        })
+        .catch(error => {
+          console.error('PDF update failed:', error);
+          setAlertMessage("Error saving PDF changes");
+          setAlertSeverity('error');
+          setAlertOpen(true);
+          setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds
+        });
+      });
+    }
+  };  
+
   return (
     <FileManagerContainer>
+      <Snackbar
+        open={alertOpen}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert 
+          severity={alertSeverity} 
+          sx={{ fontSize: '1.5rem' }}
+        >
+          {alertMessage}
+        </Alert>
+      </Snackbar>
       <PdfNavbar>
         <input
           type="file"
@@ -86,6 +144,7 @@ function PdfFileManager() {
           ref={fileInputRef}
         />
         <Button onClick={handleButtonClick}>Upload PDF</Button>
+        <Button onClick={handleSave}>Save Changes</Button>
         <FormControl sx={{ width: "40%" }}>
         <InputLabel
           id="pdf-select-label"
@@ -154,4 +213,4 @@ function PdfFileManager() {
   );
 }
 
-export default PdfFileManager;
+export default PdfFileManager;

src/helper-components/pdf-manager-component/PdfViewerComponent.jsx

@@ -1,39 +1,65 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export default function PdfViewerComponent(props) {
 	const containerRef = useRef(null);
+	const [pdfInstance, setPdfInstance] = useState(null);
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => {
-		console.log("loeading new")
 		const container = containerRef.current;
-		// eslint-disable-next-line no-unused-vars
-		let instance, PSPDFKit;
+		let PSPDFKit;
 		(async function () {
 			PSPDFKit = await import('pspdfkit');
-
-			PSPDFKit.unload(container); // Ensure that there's only one PSPDFKit instance.
-
-			instance = await PSPDFKit.load({
-				// Container where PSPDFKit should be mounted.
+			PSPDFKit.unload(container); // Ensure there's only one instance
+
+			const instance = await PSPDFKit.load({
 				container,
-				// The document to open.
 				document: props.document,
-				// Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
 				baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`,
 			});
+
+			setPdfInstance(instance); // Set instance here inside async function
 		})();
+
+		return () => {
+			if (PSPDFKit && container) {
+				PSPDFKit.unload(container);
+			}
+		};
+	}, [props.document]); // Dependency array should contain props.document	
 
-		return () => PSPDFKit && PSPDFKit.unload(container);
-	}, [props]);
+	// eslint-disable-next-line no-unused-vars
+	const exportPdf = async () => {
+		if (pdfInstance) {
+		  const pdfData = await pdfInstance.exportPDF();
+		  return new Blob([pdfData], { type: "application/pdf" });
+		}
+	};
+
+	// Expose the exportPdf function to parent via props
+	useEffect(() => {
+	if (pdfInstance) {
+		const exportPdf = async () => {
+			const pdfData = await pdfInstance.exportPDF();
+			return new Blob([pdfData], { type: "application/pdf" });
+		};
+
+		props.onInstanceChange({
+			exportPdf,
+		});
+	}
+	// eslint-disable-next-line
+	}, [pdfInstance]);
 
 	// const instance = PSPDFKit.instance.default;
 	// instance.exportPDF().then(arrayBuffer => {
 	// const blob = new Blob ( [arrayBuffer], { type: "application/pdf" });
 	// });
+
 	return (
 		<div
 			ref={containerRef}
-			style={{ width: '99%', height: '100%' }}
+			style={{ width: '100%', height: '100%' }}
 		/>
 	);
 }