preview ms office files

components/FileListing.tsx

@@ -20,6 +20,7 @@ import FourOhFour from './FourOhFour'
 import TextPreview from './previews/TextPreview'
 import MarkdownPreview from './previews/MarkdownPreview'
 import CodePreview from './previews/CodePreview'
+import OfficePreview from './previews/OfficePreview'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -235,6 +236,9 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         case preview.pdf:
           return <PDFPreview file={resp} />
 
+        case preview.office:
+          return <OfficePreview file={resp} />
+
         default:
           return <div className="bg-white shadow rounded">{fileName}</div>
       }

components/previews/OfficePreview.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import Preview from 'preview-office-docs'
+
+import DownloadBtn from '../DownloadBtn'
+
+const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  const docContainer = useRef<HTMLDivElement>(null)
+  const [docContainerWidth, setDocContainerWidth] = useState(600)
+
+  useEffect(() => {
+    setDocContainerWidth(docContainer.current ? docContainer.current.offsetWidth : 600)
+  }, [])
+
+  return (
+    <>
+      <div className="shadow overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
+        <Preview
+          url={file['@microsoft.graph.downloadUrl']}
+          width={docContainerWidth.toString()}
+          height="800"
+        />
+      </div>
+      <div className="mt-4">
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </div>
+    </>
+  )
+}
+
+export default OfficePreview

components/previews/PDFPreview.tsx

@@ -1,4 +1,4 @@
-import { createRef, FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useEffect, useRef, useState } from 'react'
 import { Document, Page, pdfjs } from 'react-pdf'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -31,7 +31,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
       >
         <div className="w-full flex-1 overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
           <Document
-            className="bg-gray-200"
+            className="bg-gray-100"
             file={file['@microsoft.graph.downloadUrl']}
             onLoadSuccess={onDocumentLoadSuccess}
             loading={<Loading loadingText={loadingText} />}