completing eslint pass

5 files changed, 43 insertions, 50 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 95eb86720..b195654ce 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/img-redundant-alt */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -56,7 +57,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     // format: array of [image source, corresponding image Doc]
     const [edits, setEdits] = useState<(string | Doc)[][]>([]);
     const [edited, setEdited] = useState(false);
-    const [brushStyle, setBrushStyle] = useState<BrushStyle>(BrushStyle.ADD);
+    const [brushStyle] = useState<BrushStyle>(BrushStyle.ADD);
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [canvasDims, setCanvasDims] = useState<ImageDimensions>({
@@ -102,8 +103,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         if (!ctx || !currImg.current || !canvasRef.current) return;
 
         const target = redoStack.current[redoStack.current.length - 1];
-        if (!target) {
-        } else {
+        if (target) {
             undoStack.current = [...undoStack.current, canvasRef.current?.toDataURL()];
             const img = new Image();
             img.src = target;
@@ -139,7 +139,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     };
 
     // stop brushing, push to undo stack
-    const handlePointerUp = (e: React.PointerEvent) => {
+    const handlePointerUp = () => {
         const ctx = ImageUtility.getCanvasContext(canvasBackgroundRef);
         if (!ctx) return;
         if (!isBrushing) return;
@@ -148,11 +148,11 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // handles brushing on pointer movement
     useEffect(() => {
-        if (!isBrushing) return;
+        if (!isBrushing) return undefined;
         const canvas = canvasRef.current;
-        if (!canvas) return;
+        if (!canvas) return undefined;
         const ctx = ImageUtility.getCanvasContext(canvasRef);
-        if (!ctx) return;
+        if (!ctx) return undefined;
 
         const handlePointerMove = (e: PointerEvent) => {
             const currPoint = PointerHandler.getPointRelativeToElement(canvas, e, canvasScale);
@@ -300,6 +300,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                     CollectionDockingView.AddSplit(newCollectionRef.current, OpenWhereMod.right);
 
                     // add the doc to the main freeform
+                    // eslint-disable-next-line no-use-before-define
                     await createNewImgDoc(originalImg.current, true);
                 }
             } else {
@@ -313,12 +314,14 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                 const imgUrls = await Promise.all(urls.map(url => ImageUtility.convertImgToCanvasUrl(url, canvasDims.width, canvasDims.height)));
                 const imgRes = await Promise.all(
                     imgUrls.map(async url => {
+                        // eslint-disable-next-line no-use-before-define
                         const saveRes = await onSave(url);
                         return [url, saveRes as Doc];
                     })
                 );
                 setEdits(imgRes);
                 const image = new Image();
+                // eslint-disable-next-line prefer-destructuring
                 image.src = imgUrls[0];
                 ImageUtility.drawImgToCanvas(image, canvasRef, canvasDims.width, canvasDims.height);
                 currImg.current = image;
@@ -351,7 +354,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // creates a new image document and returns its reference
     const createNewImgDoc = async (img: HTMLImageElement, firstDoc: boolean): Promise<Doc | undefined> => {
-        if (!imageRootDoc) return;
+        if (!imageRootDoc) return undefined;
         const { src } = img;
         const [result] = await Networking.PostToServer('/uploadRemoteImage', { sources: [src] });
         const source = ClientUtils.prepend(result.accessPaths.agnostic.client);
@@ -375,7 +378,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             parentDoc.current = newImg;
             return newImg;
         }
-        if (!parentDoc.current) return;
+        if (!parentDoc.current) return undefined;
         const x = NumCast(parentDoc.current.x) + freeformRenderSize + offsetX;
         const initialY = 0;
 
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
index 185ba2280..d1f68ee0e 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
@@ -1,9 +1,9 @@
 import './GenerativeFillButtons.scss';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { activeColor } from './generativeFillUtils/generativeFillConstants';
 import { Button, IconButton, Type } from 'browndash-components';
 import { AiOutlineInfo } from 'react-icons/ai';
+import { activeColor } from './generativeFillUtils/generativeFillConstants';
 
 interface ButtonContainerProps {
     getEdit: () => Promise<void>;
@@ -11,7 +11,7 @@ interface ButtonContainerProps {
     onReset: () => void;
 }
 
-const Buttons = ({ loading, getEdit, onReset }: ButtonContainerProps) => {
+function Buttons({ loading, getEdit, onReset }: ButtonContainerProps) {
     return (
         <div className="generativeFillBtnContainer">
             <Button text="RESET" type={Type.PRIM} color={activeColor} onClick={onReset} />
@@ -20,7 +20,7 @@ const Buttons = ({ loading, getEdit, onReset }: ButtonContainerProps) => {
                     text="GET EDITS"
                     type={Type.TERT}
                     color={activeColor}
-                    icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
+                    icon={<ReactLoading type="spin" color="#ffffff" width={20} height={20} />}
                     iconPlacement="right"
                     onClick={() => {
                         if (!loading) getEdit();
@@ -36,9 +36,9 @@ const Buttons = ({ loading, getEdit, onReset }: ButtonContainerProps) => {
                     }}
                 />
             )}
-            <IconButton type={Type.SEC} color={activeColor} tooltip="Open Documentation" icon={<AiOutlineInfo size={'16px'} />} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/generativeai/#editing', '_blank')} />
+            <IconButton type={Type.SEC} color={activeColor} tooltip="Open Documentation" icon={<AiOutlineInfo size="16px" />} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/generativeai/#editing', '_blank')} />
         </div>
     );
-};
+}
 
 export default Buttons;
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts
index 97e03ff20..6da8c3da0 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts
@@ -1,10 +1,6 @@
 import { Point } from './generativeFillInterfaces';
 
 export class GenerativeFillMathHelpers {
-    static distanceBetween = (p1: Point, p2: Point) => {
-        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-    };
-    static angleBetween = (p1: Point, p2: Point) => {
-        return Math.atan2(p2.x - p1.x, p2.y - p1.y);
-    };
+    static distanceBetween = (p1: Point, p2: Point) => Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
+    static angleBetween = (p1: Point, p2: Point) => Math.atan2(p2.x - p1.x, p2.y - p1.y);
 }
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
index 47a14135f..24dba1778 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -17,15 +17,14 @@ export class ImageUtility {
      * @param canvas Canvas to convert
      * @returns Blob of canvas
      */
-    static canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
-        return new Promise(resolve => {
+    static canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> =>
+        new Promise(resolve => {
             canvas.toBlob(blob => {
                 if (blob) {
                     resolve(blob);
                 }
             }, 'image/png');
         });
-    };
 
     // given a square api image, get the cropped img
     static getCroppedImg = (img: HTMLImageElement, width: number, height: number): HTMLCanvasElement | undefined => {
@@ -48,11 +47,12 @@ export class ImageUtility {
             }
             return canvas;
         }
+        return undefined;
     };
 
     // converts an image to a canvas data url
-    static convertImgToCanvasUrl = async (imageSrc: string, width: number, height: number): Promise<string> => {
-        return new Promise<string>((resolve, reject) => {
+    static convertImgToCanvasUrl = async (imageSrc: string, width: number, height: number): Promise<string> =>
+        new Promise<string>((resolve, reject) => {
             const img = new Image();
             img.onload = () => {
                 const canvas = this.getCroppedImg(img, width, height);
@@ -66,7 +66,6 @@ export class ImageUtility {
             };
             img.src = imageSrc;
         });
-    };
 
     // calls the openai api to get image edits
     static getEdit = async (imgBlob: Blob, maskBlob: Blob, prompt: string, n?: number): Promise<APISuccess | APIError> => {
@@ -91,7 +90,7 @@ export class ImageUtility {
             console.log(data.data);
             return {
                 status: 'success',
-                urls: (data.data as { b64_json: string }[]).map(data => `data:image/png;base64,${data.b64_json}`),
+                urls: (data.data as { b64_json: string }[]).map(urlData => `data:image/png;base64,${urlData.b64_json}`),
             };
         } catch (err) {
             console.log(err);
@@ -100,12 +99,10 @@ export class ImageUtility {
     };
 
     // mock api call
-    static mockGetEdit = async (mockSrc: string): Promise<APISuccess | APIError> => {
-        return {
-            status: 'success',
-            urls: [mockSrc, mockSrc, mockSrc],
-        };
-    };
+    static mockGetEdit = async (mockSrc: string): Promise<APISuccess | APIError> => ({
+        status: 'success',
+        urls: [mockSrc, mockSrc, mockSrc],
+    });
 
     // Gets the canvas rendering context of a canvas
     static getCanvasContext = (canvasRef: RefObject<HTMLCanvasElement>): CanvasRenderingContext2D | null => {
@@ -150,12 +147,12 @@ export class ImageUtility {
 
     // Draws the image to the current canvas
     static drawImgToCanvas = (img: HTMLImageElement, canvasRef: React.RefObject<HTMLCanvasElement>, width: number, height: number) => {
-        const drawImg = (img: HTMLImageElement) => {
+        const drawImg = (htmlImg: HTMLImageElement) => {
             const ctx = this.getCanvasContext(canvasRef);
             if (!ctx) return;
             ctx.globalCompositeOperation = 'source-over';
             ctx.clearRect(0, 0, width, height);
-            ctx.drawImage(img, 0, 0, width, height);
+            ctx.drawImage(htmlImg, 0, 0, width, height);
         };
 
         if (img.complete) {
@@ -173,7 +170,7 @@ export class ImageUtility {
         canvas.width = canvasSize;
         canvas.height = canvasSize;
         const ctx = canvas.getContext('2d');
-        if (!ctx) return;
+        if (!ctx) return undefined;
         ctx?.clearRect(0, 0, canvasSize, canvasSize);
         ctx.drawImage(paddedCanvas, 0, 0);
 
@@ -195,7 +192,7 @@ export class ImageUtility {
     // Fills in the blank areas of the image with an image reflection (to fill in a square-shaped canvas)
     static drawHorizontalReflection = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, xOffset: number) => {
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const data = imageData.data;
+        const { data } = imageData;
         for (let i = 0; i < canvas.height; i++) {
             for (let j = 0; j < xOffset; j++) {
                 const targetIdx = 4 * (i * canvas.width + j);
@@ -224,7 +221,7 @@ export class ImageUtility {
     // Fills in the blank areas of the image with an image reflection (to fill in a square-shaped canvas)
     static drawVerticalReflection = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, yOffset: number) => {
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const data = imageData.data;
+        const { data } = imageData;
         for (let j = 0; j < canvas.width; j++) {
             for (let i = 0; i < yOffset; i++) {
                 const targetIdx = 4 * (i * canvas.width + j);
@@ -256,7 +253,7 @@ export class ImageUtility {
         canvas.width = canvasSize;
         canvas.height = canvasSize;
         const ctx = canvas.getContext('2d');
-        if (!ctx) return;
+        if (!ctx) return undefined;
         // fix scaling
         const scale = Math.min(canvasSize / img.width, canvasSize / img.height);
         const width = Math.floor(img.width * scale);
@@ -310,5 +307,6 @@ export class ImageUtility {
         } catch (err) {
             console.error(err);
         }
+        return undefined;
     };
 }
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts
index 9e620ad11..260923a64 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts
@@ -1,15 +1,11 @@
-import { Point } from "./generativeFillInterfaces";
+import { Point } from './generativeFillInterfaces';
 
 export class PointerHandler {
-  static getPointRelativeToElement = (
-    element: HTMLElement,
-    e: React.PointerEvent | PointerEvent,
-    scale: number
-  ): Point => {
-    const boundingBox = element.getBoundingClientRect();
-    return {
-      x: (e.clientX - boundingBox.x) / scale,
-      y: (e.clientY - boundingBox.y) / scale,
+    static getPointRelativeToElement = (element: HTMLElement, e: React.PointerEvent | PointerEvent, scale: number): Point => {
+        const boundingBox = element.getBoundingClientRect();
+        return {
+            x: (e.clientX - boundingBox.x) / scale,
+            y: (e.clientY - boundingBox.y) / scale,
+        };
     };
-  };
 }