fix: Linting

t3dotgg · Nov 10, 2024 · 8dd3f72 · 8dd3f72
1 parent 74c3167
commit 8dd3f72
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/src/app/(tools)/rounded-border/rounded-tool.tsx b/src/app/(tools)/rounded-border/rounded-tool.tsx
@@ -179,7 +179,7 @@ export function RoundedTool() {
 
   const { handleFileUpload } = useFileUpload({
     onFileProcess: processImage,
-    acceptedTypes: "image/*"
+    acceptedTypes: "image/*",
   });
 
   const handleCancel = () => {
@@ -267,4 +267,4 @@ export function RoundedTool() {
       </div>
     </>
   );
-}
+}
diff --git a/src/app/(tools)/square-image/square-tool.tsx b/src/app/(tools)/square-image/square-tool.tsx
@@ -7,10 +7,9 @@ import { useFileUpload } from "@/app/hooks/useFileUpload";
 
 export const SquareTool: React.FC = () => {
   const [imageFile, setImageFile] = useState<File | null>(null);
-  const [backgroundColor, setBackgroundColor] = useLocalStorage<"black" | "white">(
-    "squareTool_backgroundColor",
-    "white"
-  );
+  const [backgroundColor, setBackgroundColor] = useLocalStorage<
+    "black" | "white"
+  >("squareTool_backgroundColor", "white");
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [canvasDataUrl, setCanvasDataUrl] = useState<string | null>(null);
   const [imageMetadata, setImageMetadata] = useState<{
@@ -27,7 +26,7 @@ export const SquareTool: React.FC = () => {
 
   const { handleFileUpload } = useFileUpload({
     onFileProcess: processImage,
-    acceptedTypes: "image/*"
+    acceptedTypes: "image/*",
   });
 
   const handleBackgroundColorChange = (color: "black" | "white") => {
@@ -97,7 +96,7 @@ export const SquareTool: React.FC = () => {
                 0,
                 0,
                 previewSize,
-                previewSize
+                previewSize,
               );
               const previewDataUrl = previewCanvas.toDataURL("image/png");
               setPreviewUrl(previewDataUrl);
@@ -138,14 +137,16 @@ export const SquareTool: React.FC = () => {
           </>
         ) : (
           <div className="flex flex-col items-center justify-center gap-4 text-2xl">
-            {previewUrl && <img src={previewUrl} alt="Preview" className="mb-4" />}
+            {previewUrl && (
+              <img src={previewUrl} alt="Preview" className="mb-4" />
+            )}
             <p>{imageMetadata.name}</p>
             <p>
               Original size: {imageMetadata.width}px x {imageMetadata.height}px
             </p>
             <p>
-              Square size: {Math.max(imageMetadata.width, imageMetadata.height)}px x{" "}
-              {Math.max(imageMetadata.width, imageMetadata.height)}px
+              Square size: {Math.max(imageMetadata.width, imageMetadata.height)}
+              px x {Math.max(imageMetadata.width, imageMetadata.height)}px
             </p>
 
             <div className="flex gap-2">
@@ -193,4 +194,4 @@ export const SquareTool: React.FC = () => {
       </div>
     </>
   );
-};
+};
diff --git a/src/app/(tools)/svg-to-png/svg-tool.tsx b/src/app/(tools)/svg-to-png/svg-tool.tsx
@@ -101,7 +101,7 @@ function SaveAsPngButton({
   imageMetadata: { width: number; height: number; name: string };
 }) {
   const [canvasRef, setCanvasRef] = React.useState<HTMLCanvasElement | null>(
-    null
+    null,
   );
   const { convertToPng, canvasProps } = useSvgConverter({
     canvas: canvasRef,
@@ -155,7 +155,7 @@ export function SVGTool() {
 
   const { handleFileUpload } = useFileUpload({
     onFileProcess: processSvg,
-    acceptedTypes: ".svg"
+    acceptedTypes: ".svg",
   });
 
   const handleCancel = () => {
@@ -227,4 +227,4 @@ export function SVGTool() {
       </div>
     </>
   );
-}
+}
diff --git a/src/app/hooks/useFileUpload.ts b/src/app/hooks/useFileUpload.ts
@@ -1,28 +1,31 @@
-import { useState, useEffect, type ChangeEvent, type DragEvent } from 'react';
+import { useState, useEffect, type ChangeEvent } from "react";
 
 interface UseFileUploadProps {
   onFileProcess: (file: File) => void;
   acceptedTypes?: string;
 }
 
-export function useFileUpload({ onFileProcess, acceptedTypes = "image/*" }: UseFileUploadProps) {
+export function useFileUpload({
+  onFileProcess,
+  acceptedTypes = "image/*",
+}: UseFileUploadProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [dragCounter, setDragCounter] = useState(0);
 
   useEffect(() => {
     function handleDragIn(e: DragEvent) {
       e.preventDefault();
       e.stopPropagation();
-      setDragCounter(prev => prev + 1);
-      if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setDragCounter((prev) => prev + 1);
+      if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
         setIsDragging(true);
       }
     }
 
     function handleDragOut(e: DragEvent) {
       e.preventDefault();
       e.stopPropagation();
-      setDragCounter(prev => prev - 1);
+      setDragCounter((prev) => prev - 1);
       if (dragCounter - 1 === 0) {
         setIsDragging(false);
       }
@@ -39,13 +42,11 @@ export function useFileUpload({ onFileProcess, acceptedTypes = "image/*" }: UseF
       setIsDragging(false);
       setDragCounter(0);
 
-      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
         const file = e.dataTransfer.files[0];
         if (acceptedTypes === ".svg") {
           if (file?.name.toLowerCase().endsWith(".svg")) {
             onFileProcess(file);
-          } else {
-            alert("Please upload an SVG file");
           }
         } else if (file?.type.match(acceptedTypes)) {
           onFileProcess(file);
@@ -54,16 +55,21 @@ export function useFileUpload({ onFileProcess, acceptedTypes = "image/*" }: UseF
       }
     }
 
-    window.addEventListener('dragenter', handleDragIn as any);
-    window.addEventListener('dragleave', handleDragOut as any);
-    window.addEventListener('dragover', handleDragOver as any);
-    window.addEventListener('drop', handleDrop as any);
+    const handleDragInWrapper = (e: Event) => handleDragIn(e as DragEvent);
+    const handleDragOutWrapper = (e: Event) => handleDragOut(e as DragEvent);
+    const handleDragOverWrapper = (e: Event) => handleDragOver(e as DragEvent);
+    const handleDropWrapper = (e: Event) => handleDrop(e as DragEvent);
+
+    window.addEventListener("dragenter", handleDragInWrapper);
+    window.addEventListener("dragleave", handleDragOutWrapper);
+    window.addEventListener("dragover", handleDragOverWrapper);
+    window.addEventListener("drop", handleDropWrapper);
 
     return () => {
-      window.removeEventListener('dragenter', handleDragIn as any);
-      window.removeEventListener('dragleave', handleDragOut as any);
-      window.removeEventListener('dragover', handleDragOver as any);
-      window.removeEventListener('drop', handleDrop as any);
+      window.removeEventListener("dragenter", handleDragInWrapper);
+      window.removeEventListener("dragleave", handleDragOutWrapper);
+      window.removeEventListener("dragover", handleDragOverWrapper);
+      window.removeEventListener("drop", handleDropWrapper);
     };
   }, [dragCounter, onFileProcess, acceptedTypes]);
 
@@ -84,6 +90,6 @@ export function useFileUpload({ onFileProcess, acceptedTypes = "image/*" }: UseF
 
   return {
     isDragging,
-    handleFileUpload
+    handleFileUpload,
   };
 }