Notes

import React, { useEffect, useState } from 'react'
import "./DocumentViewer.css"
import { noDocsvg, downloadsvg } from './Icon-svg';
import { useSelector } from 'react-redux';

export default function DocumentViewer(props) {
console.log(props)
const [documentUrl, setDocumentUrl] = useState(props.url);
const [selectedDocument, setSelectedDocument] = useState(props.doc);

useEffect(() => {
setDocumentUrl(props.url);
setSelectedDocument(props.doc)
})

//METHOD FOR DOWNLOADING THE BLOB
const downloadDocument = (url, filename) => {
fetch(url).then((res) => res.blob()).then((blob) => {
var bloburl = URL.createObjectURL(new Blob([blob]));
var link = document.createElement("a");
link.download = filename;
link.href = bloburl;
link.click();
})

}

return (
<>
{props.header === "Documents" ?
<div className='document-viewer-info'>
<div className='Document-title-div'>{selectedDocument}</div>
{props.doc !== null && props.doc !== "" && props.url !== null && props.url !== "" ?
<div className='document-download-icon' onClick={() => downloadDocument(props.url, props.doc)}>
{downloadsvg()}
</div>
: <div className='Document-title-div'>Select Document</div>}
</div>
:null}
{/* the above code is a patch work for the time being, will fix when core eval refactoring done */}
<div className='Document-viewer'>
{documentUrl === "" ?
<div className='default-info'>
<div className='default-img'>
{noDocsvg()}
</div>

<div className='default-text'>
{documentUrl === "" ? <>
<p className='default-text'>Select a File to continue</p>

</> :
selectedDocument?.toLowerCase().endsWith(".xlsx") || selectedDocument?.toLowerCase().endsWith(".docx") ?
<p className='default-text'>You cannot Preview the File</p>
: null
}

</div>
</div>
:
!selectedDocument?.toLowerCase().endsWith(".pdf") && !selectedDocument?.toLowerCase().endsWith(".txt") ?
<>
<div className="document-error">
<div className='error-heading'>
File preview is not supported for this file type.
</div>
<div >

<p className='error-msg'>At this time, we can't show a preview for this file type. At this time, we can't show a preview for this file type. To view the file, download it to your device.</p>




</div>
</div>
</>
: <div className='iframe-div'> <iframe src={documentUrl} className='doc'></iframe></div>}
</div>

</>

)
}