Fixed inconsistency with attachment previews

package.json

@@ -127,6 +127,7 @@
     "re-resizable": "6.9.9",
     "react": "^18.2.0",
     "react-colorful": "5.6.1",
+    "react-doc-viewer": "^0.1.5",
     "react-dom": "^18.2.0",
     "react-file-icon": "^1.3.0",
     "react-helmet": "6.1.0",

src/components/Attachments/Attachment.jsx

@@ -19,7 +19,7 @@ import directUploadsApi from "apis/direct_uploads";
 
 import { ATTACHMENT_OPTIONS } from "./constants";
 import FileIcon from "./FileIcon";
-import { downloadFile } from "./utils";
+import { checkPreviewAvailability, downloadFile } from "./utils";
 
 const { Menu, MenuItem } = Dropdown;
 
@@ -113,6 +113,13 @@ const Attachment = ({
     }
   };
 
+  const handleAttachmentSelection = () => {
+    const contentType = attachment?.contentType;
+    const hasPreview = checkPreviewAvailability(contentType);
+
+    hasPreview ? setSelectedAttachment(attachment) : handleDownload();
+  };
+
   return (
     <>
       <div className="ne-attachments__preview">
@@ -146,16 +153,11 @@ const Attachment = ({
           <>
             <div
               className="ne-attachments__preview-wrapper"
-              onClick={() => setSelectedAttachment(attachment)}
+              onClick={handleAttachmentSelection}
             >
               <FileIcon fileName={attachment.filename} />
               <Tooltip content={attachment.filename} position="top">
-                <Typography
-                  style="body2"
-                  onClick={() => setSelectedAttachment(attachment)}
-                >
-                  {attachment.filename}
-                </Typography>
+                <Typography style="body2">{attachment.filename}</Typography>
               </Tooltip>
             </div>
             <Tooltip

src/components/Attachments/Preview.jsx

@@ -4,9 +4,10 @@ import { findIndexBy } from "neetocist";
 import { Download, Left, Right } from "neetoicons";
 import { Modal, Typography, Button } from "neetoui";
 import { isEmpty } from "ramda";
+import DocViewer, { PDFRenderer, TXTRenderer } from "react-doc-viewer";
 import { Trans, useTranslation } from "react-i18next";
 
-import { downloadFile } from "./utils";
+import { checkPreviewAvailability, downloadFile } from "./utils";
 
 const Preview = ({
   onClose,
@@ -50,30 +51,46 @@ const Preview = ({
   const handleDownload = () => downloadFile(url, filename);
 
   const setPreview = () => {
-    switch (contentType.split("/")[0]) {
-      case "image":
-        return <img src={url} />;
-      case "video":
-        return <video controls src={url} />;
-      case "application":
-        return <iframe src={url} />;
-      default:
-        return (
-          <Typography>
-            <Trans
-              i18nKey="attachments.noPreview"
-              components={{
-                span: (
-                  <span
-                    className="ne-attachments-preview__body-download"
-                    onClick={handleDownload}
-                  />
-                ),
+    const isPreviewAvailable = checkPreviewAvailability(contentType);
+
+    if (isPreviewAvailable) {
+      switch (contentType.split("/")[0]) {
+        case "image":
+          return <img src={url} />;
+        case "video":
+          return <video controls src={url} />;
+        case "application":
+        case "text":
+          return (
+            <DocViewer
+              className="h-full w-full"
+              documents={[{ uri: url }]}
+              pluginRenderers={[PDFRenderer, TXTRenderer]}
+              config={{
+                header: { disableHeader: true, disableFileName: true },
               }}
             />
-          </Typography>
-        );
+          );
+        default:
+          return null;
+      }
     }
+
+    return (
+      <Typography>
+        <Trans
+          i18nKey="attachments.noPreview"
+          components={{
+            span: (
+              <span
+                className="ne-attachments-preview__body-download"
+                onClick={handleDownload}
+              />
+            ),
+          }}
+        />
+      </Typography>
+    );
   };
 
   return (

src/components/Attachments/utils.js

@@ -80,3 +80,12 @@ export const downloadFile = async (fileUrl, filename) => {
     Toastr.error(error);
   }
 };
+
+export const checkPreviewAvailability = contentType =>
+  contentType.startsWith("video/") ||
+  contentType === "application/pdf" ||
+  contentType === "image/jpeg" ||
+  contentType === "image/gif" ||
+  contentType === "image/png" ||
+  contentType === "image/webp" ||
+  contentType === "text/plain";