From faf8e07ed820c584a8b8b5f6e473e7609b59250e Mon Sep 17 00:00:00 2001
From: renoseHarsh <renoseharsh@gmail.com>
Date: Tue, 20 Aug 2024 18:31:31 +0530
Subject: [PATCH] Applied Required Changes

---
 src/Components/Common/FilePreviewDialog.tsx | 38 +++++++++------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index 153c68be397..7a8cdb27cfc 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -78,7 +78,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
       );
       setIndex(index);
     }
-  });
+  }, [uploadedFiles]);
 
   const handleZoomIn = () => {
     const checkFull = file_state.zoom === zoom_values.length;
@@ -158,16 +158,14 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
           </div>
           <div className="flex flex-1 items-center justify-center gap-2">
-            <ButtonV2
-              className={
-                uploadedFiles && index === 0
-                  ? "pointer-events-none invisible opacity-0"
-                  : ""
-              }
-              onClick={() => handleNext(index - 1)}
-            >
-              &lt;
-            </ButtonV2>
+            {uploadedFiles && (
+              <ButtonV2
+                disabled={index === 0}
+                onClick={() => handleNext(index - 1)}
+              >
+                &lt;
+              </ButtonV2>
+            )}
             <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
               {file_state.isImage ? (
                 <img
@@ -203,16 +201,14 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 </div>
               )}
             </div>
-            <ButtonV2
-              className={
-                uploadedFiles && index === uploadedFiles.length - 1
-                  ? "pointer-events-none invisible opacity-0"
-                  : ""
-              }
-              onClick={() => handleNext(index + 1)}
-            >
-              &gt;
-            </ButtonV2>
+            {uploadedFiles && (
+              <ButtonV2
+                disabled={index === uploadedFiles!.length - 1}
+                onClick={() => handleNext(index + 1)}
+              >
+                &gt;
+              </ButtonV2>
+            )}
           </div>
           <div className="flex items-center justify-between">
             <div className="mt-2 flex w-full flex-col justify-center gap-3 md:flex-row">