add dot url file preview support, close #221

components/FileListing.tsx

@@ -32,6 +32,7 @@ import AudioPreview from './previews/AudioPreview'
 import VideoPreview from './previews/VideoPreview'
 import DownloadButtonGroup from './DownloadBtnGtoup'
 import PDFPreview from './previews/PDFPreview'
+import URLPreview from './previews/URLPreview'
 import { DownloadBtnContainer, PreviewContainer } from './previews/Containers'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
@@ -595,6 +596,9 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
         case preview.epub:
           return <EPUBPreview file={file} />
 
+        case preview.url:
+          return <URLPreview file={file} />
+
         default:
           return <PreviewContainer>{fileName}</PreviewContainer>
       }

components/previews/URLPreview.tsx

@@ -0,0 +1,60 @@
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
+import { DownloadButton } from '../DownloadBtnGtoup'
+import useFileContent from '../../utils/fetchOnMount'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+
+const parseDotUrl = (content: string): string | undefined => {
+  return content
+    .split('\n')
+    .find(line => line.startsWith('URL='))
+    ?.split('=')[1]
+}
+
+const TextPreview = ({ file }) => {
+  const { content, error, validating } = useFileContent(file['@microsoft.graph.downloadUrl'])
+  if (error) {
+    return (
+      <PreviewContainer>
+        <FourOhFour errorMsg={error} />
+      </PreviewContainer>
+    )
+  }
+
+  if (validating) {
+    return (
+      <PreviewContainer>
+        <Loading loadingText="Loading file content..." />
+      </PreviewContainer>
+    )
+  }
+
+  if (!content) {
+    return (
+      <PreviewContainer>
+        <FourOhFour errorMsg="File is empty." />
+      </PreviewContainer>
+    )
+  }
+
+  return (
+    <div>
+      <PreviewContainer>
+        <pre className="md:p-3 p-0 overflow-x-scroll text-sm">{content}</pre>
+      </PreviewContainer>
+      <DownloadBtnContainer>
+        <div className="flex justify-center">
+          <DownloadButton
+            onClickCallback={() => window.open(parseDotUrl(content) || '')}
+            btnColor="blue"
+            btnText="Open URL"
+            btnIcon="external-link-alt"
+            btnTitle={`Open URL ${parseDotUrl(content) || ''}`}
+          />
+        </div>
+      </DownloadBtnContainer>
+    </div>
+  )
+}
+
+export default TextPreview