Merge pull request #81 from anyone-oslo/update-eslint

Update eslint

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

app/javascript/components/DateRangeSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import DateTimeSelect from "./DateTimeSelect";
 
@@ -50,13 +50,16 @@ export default function DateRangeSelect(props: Props) {
   const endsAt = parseDate(props.setEndsAt ? props.endsAt : uncontrolledEndsAt);
   const setEndsAt = props.setEndsAt || setUncontrolledEndsAt;
 
-  const setDates = (start: Date, end: Date) => {
-    if (end < start) {
-      end = start;
-    }
-    setStartsAt(start);
-    setEndsAt(end);
-  };
+  const setDates = useCallback(
+    (start: Date, end: Date) => {
+      if (end < start) {
+        end = start;
+      }
+      setStartsAt(start);
+      setEndsAt(end);
+    },
+    [setStartsAt, setEndsAt]
+  );
 
   const changeStartsAt = (newDate: Date) => {
     setDates(
@@ -73,7 +76,7 @@ export default function DateRangeSelect(props: Props) {
     if (!startsAt || !endsAt) {
       setDates(startsAt || defaultDate(), endsAt || defaultDate(60));
     }
-  }, [startsAt, endsAt]);
+  }, [startsAt, endsAt, setDates]);
 
   return (
     <div className="date-range-select">

app/javascript/components/ImageCropper/useCrop.ts

@@ -209,19 +209,19 @@ export default function useCrop(
 
   const [croppedImage, setCroppedImage] = useState<string | null>(null);
 
-  async function updateCroppedImage() {
-    const img: HTMLImageElement = new Image();
-    img.src = state.image.uncropped_url;
-    await img.decode();
-    const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
-    setCroppedImage(imageDataUrl(canvas, ctx));
-  }
-
   useEffect(() => {
+    async function updateCroppedImage() {
+      const img: HTMLImageElement = new Image();
+      img.src = state.image.uncropped_url;
+      await img.decode();
+      const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
+      setCroppedImage(imageDataUrl(canvas, ctx));
+    }
+
     if (!state.cropping) {
       void updateCroppedImage();
     }
-  }, [state.cropping]);
+  }, [state]);
 
   return [state, dispatch, croppedImage];
 }

app/javascript/components/ImageGrid/GridImage.tsx

@@ -45,7 +45,7 @@ export default function GridImage(props: Props) {
       reader.onload = () => setSrc(reader.result as string);
       reader.readAsDataURL(record.file);
     }
-  }, []);
+  }, [record]);
 
   const copyEmbed = (evt: MouseEvent) => {
     evt.preventDefault();

app/javascript/components/Modal.tsx

@@ -1,22 +1,19 @@
-import React, { MouseEvent, useEffect } from "react";
+import React, { useCallback, MouseEvent, useEffect } from "react";
 
 import useModalStore from "../stores/useModalStore";
 
 export default function Modal() {
   const component = useModalStore((state) => state.component);
   const close = useModalStore((state) => state.close);
 
-  const handleClose = (evt: KeyboardEvent | MouseEvent) => {
-    evt.stopPropagation();
-    evt.preventDefault();
-    close();
-  };
-
-  const handleKeypress = (evt: KeyboardEvent) => {
-    if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
-      handleClose(evt);
-    }
-  };
+  const handleClose = useCallback(
+    (evt: KeyboardEvent | MouseEvent) => {
+      evt.stopPropagation();
+      evt.preventDefault();
+      close();
+    },
+    [close]
+  );
 
   useEffect(() => {
     if (component) {
@@ -27,11 +24,17 @@ export default function Modal() {
   }, [component]);
 
   useEffect(() => {
+    const handleKeypress = (evt: KeyboardEvent) => {
+      if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
+        handleClose(evt);
+      }
+    };
+
     window.addEventListener("keypress", handleKeypress);
     return () => {
       window.removeEventListener("keypress", handleKeypress);
     };
-  }, []);
+  }, [component, handleClose]);
 
   if (component) {
     return (

app/javascript/components/PageForm.tsx

@@ -72,7 +72,7 @@ export default function PageForm(props: Props) {
     if (history) {
       history.replaceState(null, "", pageUrl);
     }
-  }, [page.id, locale, tab]);
+  }, [page.id, page.parent_page_id, locale, tab]);
 
   const handlePreview = (evt: React.MouseEvent) => {
     evt.preventDefault();