fix: issue attachment improvement (#730)

* fix: invalid file error state bug fix

* style: icons updated

apps/app/components/icons/attachment-icon.tsx

@@ -1,6 +1,8 @@
 import {
+  AudioIcon,
   CssIcon,
   CsvIcon,
+  DefaultIcon,
   DocIcon,
   FigmaIcon,
   HtmlIcon,
@@ -11,6 +13,7 @@ import {
   SheetIcon,
   SvgIcon,
   TxtIcon,
+  VideoIcon,
 } from "components/icons";
 
 export const getFileIcon = (fileType: string) => {
@@ -39,8 +42,18 @@ export const getFileIcon = (fileType: string) => {
       return <TxtIcon height={28} width={28} />;
     case "svg":
       return <SvgIcon height={28} width={28} />;
+    case "mp3":
+      return <AudioIcon height={28} width={28} />;
+    case "wav":
+      return <AudioIcon height={28} width={28} />;
+    case "mp4":
+      return <VideoIcon height={28} width={28} />;
+    case "wmv":
+      return <VideoIcon height={28} width={28} />;
+    case "mkv":
+      return <VideoIcon height={28} width={28} />;
 
     default:
-      return <DocIcon height={28} width={28}/>;
+      return <DefaultIcon height={28} width={28} />;
   }
 };

apps/app/components/icons/audio-file-icon.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import AudioFileIcon from "public/attachment/audio-icon.png";
+
+export const AudioIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
+);

apps/app/components/icons/default-file-icon.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import DefaultFileIcon from "public/attachment/default-icon.png";
+
+export const DefaultIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
+);

apps/app/components/icons/index.ts

@@ -69,4 +69,7 @@ export * from "./img-file-icon";
 export * from "./png-file-icon";
 export * from "./jpg-file-icon";
 export * from "./svg-file-icon";
-export * from "./txt-file-icon";
+export * from "./txt-file-icon";
+export * from "./default-file-icon";
+export * from "./video-file-icon";
+export * from "./audio-file-icon";

apps/app/components/icons/video-file-icon.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import VideoFileIcon from "public/attachment/video-icon.png";
+
+export const VideoIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
+);

apps/app/components/issues/attachment-upload.tsx

@@ -26,7 +26,6 @@ export const IssueAttachmentUpload = () => {
   const { setToastAlert } = useToast();
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
-    setIsLoading(true);
     if (!acceptedFiles[0] || !workspaceSlug) return;
 
     const formData = new FormData();
@@ -38,7 +37,7 @@ export const IssueAttachmentUpload = () => {
         size: acceptedFiles[0].size,
       })
     );
-
+    setIsLoading(true);
     issuesService
       .uploadIssueAttachment(
         workspaceSlug as string,
@@ -88,12 +87,13 @@ export const IssueAttachmentUpload = () => {
       <span className="flex items-center gap-2">
         {isDragActive ? (
           <p>Drop here...</p>
+        ) : fileError ? (
+          <p className="text-center text-red-500">{fileError}</p>
         ) : isLoading ? (
           <p className="text-center">Uploading....</p>
         ) : (
           <p className="text-center">Drag & Drop or Click to add new file</p>
         )}
-        {fileError && <p className="text-red-500 mt-2">{fileError}</p>}
       </span>
     </div>
   );