Fix : Rotation Functionality in "Files" Section (#10799)

src/components/Common/FilePreviewDialog.tsx

@@ -27,7 +27,6 @@ import CircularProgress from "@/components/Common/CircularProgress";
 import { FileUploadModel } from "@/components/Patient/models";
 
 const PDFViewer = lazy(() => import("@/components/Common/PDFViewer"));
-
 export const zoom_values = [
   "scale-25",
   "scale-50",
@@ -38,7 +37,6 @@ export const zoom_values = [
   "scale-175",
   "scale-200",
 ];
-
 export interface StateInterface {
   open: boolean;
   isImage: boolean;
@@ -51,7 +49,6 @@ export interface StateInterface {
   id?: string;
   associating_id?: string;
 }
-
 type FilePreviewProps = {
   title?: ReactNode;
   description?: ReactNode;
@@ -68,7 +65,6 @@ type FilePreviewProps = {
   loadFile?: (file: FileUploadModel, associating_id: string) => void;
   currentIndex: number;
 };
-
 const previewExtensions = [
   ".html",
   ".htm",
@@ -81,7 +77,6 @@ const previewExtensions = [
   ".gif",
   ".webp",
 ];
-
 const FilePreviewDialog = (props: FilePreviewProps) => {
   const {
     show,
@@ -95,18 +90,15 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
     currentIndex,
   } = props;
   const { t } = useTranslation();
-
   const [page, setPage] = useState(1);
   const [numPages, setNumPages] = useState(1);
   const [index, setIndex] = useState<number>(currentIndex);
   const [scale, setScale] = useState(1.0);
-
   useEffect(() => {
     if (uploadedFiles && show) {
       setIndex(currentIndex);
     }
   }, [uploadedFiles, show, currentIndex]);
-
   const handleZoomIn = () => {
     const checkFull = file_state.zoom === zoom_values.length;
     setFileState({
@@ -115,7 +107,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
     });
     setScale((prevScale) => Math.min(prevScale + 0.25, 2));
   };
-
   const handleZoomOut = () => {
     const checkFull = file_state.zoom === 1;
     setFileState({
@@ -124,6 +115,29 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
     });
     setScale((prevScale) => Math.max(prevScale - 0.25, 0.5));
   };
+  const handleRotate = (angle: number) => {
+    setFileState((prev: any) => {
+      const newRotation = (prev.rotation + angle + 360) % 360;
+      return {
+        ...prev,
+        rotation: newRotation,
+      };
+    });
+  };
+
+  function getRotationClass(rotation: number) {
+    const normalizedRotation = rotation % 360;
+    switch (normalizedRotation) {
+      case 90:
+        return "rotate-90";
+      case 180:
+        return "rotate-180";
+      case 270:
+        return "-rotate-90";
+      default:
+        return "";
+    }
+  }
 
   const fileName = file_state?.name
     ? file_state.name + "." + file_state.extension
@@ -138,12 +152,11 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
       !loadFile ||
       newIndex < 0 ||
       newIndex >= uploadedFiles.length
-    )
+    ) {
       return;
-
+    }
     const nextFile = uploadedFiles[newIndex];
     if (!nextFile?.id) return;
-
     const associating_id = nextFile.associating_id || "";
     loadFile(nextFile, associating_id);
     setIndex(newIndex);
@@ -157,24 +170,8 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
     onClose?.();
   };
 
-  const handleRotate = (rotation: number) => {
-    setFileState((prev: any) => ({
-      ...prev,
-      rotation: prev.rotation + rotation,
-    }));
-  };
-
-  function getRotationClass(rotation: number) {
-    let normalizedRotation = ((rotation % 360) + 360) % 360;
-    if (normalizedRotation > 180) {
-      normalizedRotation -= 360;
-    }
-    return normalizedRotation === -90
-      ? "-rotate-90"
-      : `rotate-${normalizedRotation}`;
-  }
-
   useKeyboardShortcut(["ArrowLeft"], () => index > 0 && handleNext(index - 1));
+
   useKeyboardShortcut(
     ["ArrowRight"],
     () => index < (uploadedFiles?.length || 0) - 1 && handleNext(index + 1),
@@ -188,7 +185,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             {t("file_preview")}
           </DialogTitle>
         </DialogHeader>
-
         {fileUrl ? (
           <>
             <div className="mb-2 flex flex-col items-start justify-between md:flex-row">
@@ -289,7 +285,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                   </div>
                 )}
               </div>
-
               {uploadedFiles && uploadedFiles.length > 1 && (
                 <Button
                   variant="primary"
@@ -413,5 +408,4 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
     </Dialog>
   );
 };
-
 export default FilePreviewDialog;