add error page, download button

components/DownloadBtn.tsx

@@ -0,0 +1,20 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FunctionComponent } from 'react'
+
+const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
+  return (
+    <div>
+      <a
+        className="mx-auto w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600"
+        href={downloadUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FontAwesomeIcon icon="file-download" />
+        <span>Download</span>
+      </a>
+    </div>
+  )
+}
+
+export default DownloadBtn

components/FileListing.tsx

@@ -15,6 +15,8 @@ import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
+import FourOhFour from './FourOhFour'
+import TextPreview from './previews/TextPreview'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -86,10 +88,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
   const { data, error } = useSWR(`/api?path=${path}`, fetcher, {
     revalidateOnFocus: false,
-    revalidateOnReconnect: false,
   })
 
-  if (error) return <div>Failed to load</div>
+  if (error) {
+    return (
+      <div className="shadow bg-white rounded p-3">
+        <FourOhFour errorMsg={error.message} />
+      </div>
+    )
+  }
   if (!data) {
     return (
       <div className="shadow bg-white rounded p-3">
@@ -187,7 +194,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           )
 
         case preview.text:
-          return <div>text</div>
+          return <TextPreview file={resp} />
 
         case preview.code:
           return <div>code</div>
@@ -210,7 +217,11 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     }
   }
 
-  return <div>404</div>
+  return (
+    <div className="shadow bg-white rounded p-3">
+      <FourOhFour errorMsg={`Cannot preview ${resp.name}.`} />
+    </div>
+  )
 }
 
 export default FileListing

components/FourOhFour.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image'
+import { FunctionComponent } from 'react'
+
+const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => {
+  return (
+    <div className="text-center my-20">
+      <div className="mx-auto w-1/2 md:w-1/3">
+        <Image src={'/404.png'} alt="404" width={825} height={910} />
+      </div>
+      <div className="text-gray-500 mt-5">Error: {errorMsg}</div>
+    </div>
+  )
+}
+
+export default FourOhFour

components/previews/AudioPreview.tsx

@@ -2,6 +2,8 @@ import { FunctionComponent, useState } from 'react'
 import ReactPlayer from 'react-player'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
+import DownloadBtn from '../DownloadBtn'
+
 enum PlayerState {
   Loading,
   Ready,
@@ -13,57 +15,67 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading)
 
   return (
-    <div className="bg-white rounded shadow p-3 w-full">
+    <>
-      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
+      <div className="bg-white rounded shadow p-3 w-full">
-        <div className="flex items-center justify-center bg-gray-100 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
+        <div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
-          {playerStatus === PlayerState.Loading ? (
+          <div className="flex items-center justify-center bg-gray-100 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
-            <div>
+            {playerStatus === PlayerState.Loading ? (
-              <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <div>
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <svg
-                <path
+                  className="animate-spin h-5 w-5"
-                  className="opacity-75"
+                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
+                  fill="none"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  viewBox="0 0 24 24"
-                ></path>
+                >
-              </svg>
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              </div>
+            ) : (
+              <FontAwesomeIcon
+                className={`h-5 w-5 ${playerStatus === PlayerState.Playing ? 'animate-spin' : ''}`}
+                icon="music"
+                size="2x"
+              />
+            )}
+          </div>
+          <div className="flex flex-col w-full space-y-2">
+            <div>{file.name}</div>
+            <div className="text-gray-500 text-sm pb-4">
+              Last modified:{' '}
+              {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
+                dateStyle: 'short',
+                timeStyle: 'short',
+              })}
             </div>
-          ) : (
+            <ReactPlayer
-            <FontAwesomeIcon
+              url={file['@microsoft.graph.downloadUrl']}
-              className={`h-5 w-5 ${playerStatus === PlayerState.Playing ? 'animate-spin' : ''}`}
+              controls
-              icon="music"
+              width="100%"
-              size="2x"
+              height="48px"
+              config={{ file: { forceAudio: true } }}
+              onReady={() => {
+                setPlayerStatus(PlayerState.Ready)
+              }}
+              onPlay={() => {
+                setPlayerStatus(PlayerState.Playing)
+              }}
+              onPause={() => {
+                setPlayerStatus(PlayerState.Paused)
+              }}
+              onError={() => setPlayerStatus(PlayerState.Paused)}
+              onEnded={() => setPlayerStatus(PlayerState.Paused)}
             />
-          )}
-        </div>
-        <div className="flex flex-col w-full space-y-2">
-          <div>{file.name}</div>
-          <div className="text-gray-500 text-sm pb-4">
-            Last modified:{' '}
-            {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
-              dateStyle: 'short',
-              timeStyle: 'short',
-            })}
           </div>
-          <ReactPlayer
-            url={file['@microsoft.graph.downloadUrl']}
-            controls
-            width="100%"
-            height="48px"
-            config={{ file: { forceAudio: true } }}
-            onReady={() => {
-              setPlayerStatus(PlayerState.Ready)
-            }}
-            onPlay={() => {
-              setPlayerStatus(PlayerState.Playing)
-            }}
-            onPause={() => {
-              setPlayerStatus(PlayerState.Paused)
-            }}
-            onError={() => setPlayerStatus(PlayerState.Paused)}
-            onEnded={() => setPlayerStatus(PlayerState.Paused)}
-          />
         </div>
       </div>
-    </div>
+      <div className="mt-4">
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </div>
+    </>
   )
 }

components/previews/PDFPreview.tsx

@@ -3,6 +3,7 @@ import { Document, Page, pdfjs } from 'react-pdf'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import Loading from '../Loading'
+import DownloadBtn from '../DownloadBtn'
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`
 
@@ -17,7 +18,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <div className="bg-white rounded shadow md:p-3 w-full overflow-scroll" style={{ maxHeight: '90vh' }}>
-      <div className="w-full mx-auto border-2 md:shadow overflow-scroll" style={{ maxHeight: '60vh' }}>
+      <div className="w-full mx-auto overflow-scroll" style={{ maxHeight: '60vh' }}>
         <Document
           file={file['@microsoft.graph.downloadUrl']}
           onLoadSuccess={onDocumentLoadSuccess}
@@ -29,9 +30,9 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           <Page pageNumber={pageNumber} />
         </Document>
       </div>
-      <div className="flex space-x-2 my-4 md:mb-0 w-full items-center justify-center">
+      <div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center">
         <button
-          className="px-3 py-1 bg-red-500 text-white rounded cursor-pointer focus:ring-2 focus:ring-red-500 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+          className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
           onClick={() => {
             pageNumber > 1 && setPageNumber(pageNumber - 1)
           }}
@@ -39,11 +40,11 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         >
           <FontAwesomeIcon icon="arrow-left" />
         </button>
-        <div className="px-3 py-1">
+        <div className="px-4 py-2">
           Page{' '}
           <input
             value={pageNumber}
-            className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring-2 focus:ring-red-500 focus:outline-none"
+            className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring focus:ring-red-300 focus:outline-none"
             onChange={e => {
               const v = parseInt(e.target.value)
               if (v <= totalPages && v >= 0) {
@@ -54,7 +55,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           /<span className="ml-1 text-center">{totalPages}</span>
         </div>
         <button
-          className="px-3 py-1 bg-red-500 text-white rounded cursor-pointer focus:ring-2 focus:ring-red-500 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+          className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
           onClick={() => {
             pageNumber < totalPages && setPageNumber(pageNumber + 1)
           }}
@@ -62,6 +63,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         >
           <FontAwesomeIcon icon="arrow-right" />
         </button>
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
     </div>
   )

components/previews/TextPreview.tsx

@@ -0,0 +1,40 @@
+import axios from 'axios'
+import { FunctionComponent } from 'react'
+import useSWR from 'swr'
+
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
+import DownloadBtn from '../DownloadBtn'
+
+const fetcher = (url: string) => axios.get(url).then(res => res.data)
+
+const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
+  if (error) {
+    return (
+      <div className="shadow bg-white rounded p-3">
+        <FourOhFour errorMsg={error.message} />
+      </div>
+    )
+  }
+  if (!data) {
+    return (
+      <div className="shadow bg-white rounded p-3">
+        <Loading loadingText="Loading file content..." />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="shadow bg-white rounded p-3">
+        <pre className="p-0 md:p-3 overflow-scroll">{data}</pre>
+      </div>
+      <div className="mt-4">
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </div>
+    </>
+  )
+}
+
+export default TextPreview

components/previews/VideoPreview.tsx

@@ -1,19 +1,26 @@
 import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
 
+import DownloadBtn from '../DownloadBtn'
+
 export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
-    <div className="bg-white rounded shadow p-3">
+    <>
-      <div className="relative" style={{ paddingTop: '56.25%' }}>
+      <div className="bg-white rounded shadow p-3">
-        <ReactPlayer
+        <div className="relative" style={{ paddingTop: '56.25%' }}>
-          className="absolute top-0 left-0 w-full h-full"
+          <ReactPlayer
-          url={file['@microsoft.graph.downloadUrl']}
+            className="absolute top-0 left-0 w-full h-full"
-          controls
+            url={file['@microsoft.graph.downloadUrl']}
-          width="100%"
+            controls
-          height="100%"
+            width="100%"
-          config={{ file: { forceVideo: true } }}
+            height="100%"
-        />
+            config={{ file: { forceVideo: true } }}
+          />
+        </div>
       </div>
-    </div>
+      <div className="mt-4">
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </div>
+    </>
   )
 }

pages/_app.tsx

@@ -14,7 +14,7 @@ import {
   faFile,
   faFolder,
 } from '@fortawesome/free-regular-svg-icons'
-import { faMusic, faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
+import { faMusic, faArrowLeft, faArrowRight, faFileDownload } from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
 
 import type { AppProps } from 'next/app'
@@ -36,7 +36,8 @@ library.add(
   faMarkdown,
   faMusic,
   faArrowLeft,
-  faArrowRight
+  faArrowRight,
+  faFileDownload
 )
 
 function MyApp({ Component, pageProps }: AppProps) {