Convert image drop to typescript

src/components/image/GlobalImageDrop.tsx

@@ -20,9 +20,23 @@ import { useTokenData } from "../../contexts/TokenDataContext";
 import { useAssets } from "../../contexts/AssetsContext";
 import { useMapStage } from "../../contexts/MapStageContext";
 
-import useImageDrop from "../../hooks/useImageDrop";
+import useImageDrop, { ImageDropEvent } from "../../hooks/useImageDrop";
 
-function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
+import { Map } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+import { TokenState } from "../../types/TokenState";
+
+type GlobalImageDropProps = {
+  children?: React.ReactNode;
+  onMapChange: (map: Map, mapState: MapState) => void;
+  onMapTokensStateCreate: (states: TokenState[]) => void;
+};
+
+function GlobalImageDrop({
+  children,
+  onMapChange,
+  onMapTokensStateCreate,
+}: GlobalImageDropProps) {
   const { addToast } = useToasts();
 
   const userId = useUserId();
@@ -32,17 +46,15 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
 
   const mapStageRef = useMapStage();
 
-  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
+  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] =
-    false
+    useState(false);
-  );
   const [isLoading, setIsLoading] = useState(false);
 
-  const droppedImagesRef = useRef();
+  const droppedImagesRef = useRef<File[]>();
-  const dropPositionRef = useRef();
+  const dropPositionRef = useRef<Vector2>();
-  // maps or tokens
+  const [droppingType, setDroppingType] = useState<"maps" | "tokens">("maps");
-  const [droppingType, setDroppingType] = useState("maps");
 
-  async function handleDrop(files, dropPosition) {
+  async function handleDrop({ files, dropPosition }: ImageDropEvent) {
     if (navigator.storage) {
       // Attempt to enable persistant storage
       await navigator.storage.persist();
@@ -87,6 +99,7 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
   }
 
   async function handleMaps() {
+    if (droppedImagesRef.current && userId) {
       setIsLoading(true);
       let maps = [];
       for (let file of droppedImagesRef.current) {
@@ -105,8 +118,10 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
       setIsLoading(false);
       droppedImagesRef.current = undefined;
     }
+  }
 
   async function handleTokens() {
+    if (droppedImagesRef.current && userId) {
       setIsLoading(true);
       // Keep track of tokens so we can add them to the map
       let tokens = [];
@@ -129,7 +144,11 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
           for (let token of tokens) {
             if (token) {
               tokenStates.push(
-              createTokenState(token, Vector2.add(mapPosition, offset), userId)
+                createTokenState(
+                  token,
+                  Vector2.add(mapPosition, offset),
+                  userId
+                )
               );
               offset = Vector2.add(offset, 0.01);
             }
@@ -140,6 +159,7 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
         }
       }
     }
+  }
 
   function handleMapsOver() {
     setDroppingType("maps");
@@ -149,9 +169,8 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
     setDroppingType("tokens");
   }
 
-  const { dragging, containerListeners, overlayListeners } = useImageDrop(
+  const { dragging, containerListeners, overlayListeners } =
-    handleDrop
+    useImageDrop(handleDrop);
-  );
 
   return (
     <Flex sx={{ height: "100%", flexGrow: 1 }} {...containerListeners}>

src/components/image/ImageDrop.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { Box, Flex, Text } from "theme-ui";
 
-import useImageDrop from "../../hooks/useImageDrop";
+import useImageDrop, { ImageDropEvent } from "../../hooks/useImageDrop";
 
-function ImageDrop({ onDrop, dropText, children }) {
+type ImageDropProps = {
-  const { dragging, containerListeners, overlayListeners } = useImageDrop(
+  onDrop: (event: ImageDropEvent) => void;
-    onDrop
+  dropText: string;
-  );
+  children?: React.ReactNode;
+};
+
+function ImageDrop({ onDrop, dropText, children }: ImageDropProps) {
+  const { dragging, containerListeners, overlayListeners } =
+    useImageDrop(onDrop);
   return (
     <Box {...containerListeners}>
       {children}

src/hooks/useImageDrop.tsx

@@ -3,41 +3,51 @@ import { useToasts } from "react-toast-notifications";
 
 import Vector2 from "../helpers/Vector2";
 
+export type ImageDropEvent = {
+  files: File[];
+  dropPosition: Vector2;
+};
+
 function useImageDrop(
-  onImageDrop,
+  onImageDrop: (event: ImageDropEvent) => void,
   supportFileTypes = ["image/jpeg", "image/gif", "image/png", "image/webp"]
 ) {
   const { addToast } = useToasts();
 
   const [dragging, setDragging] = useState(false);
-  function onDragEnter(event) {
+  function onDragEnter(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
     setDragging(true);
   }
 
-  function onDragLeave(event) {
+  function onDragLeave(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
     setDragging(false);
   }
 
-  function onDragOver(event) {
+  function onDragOver(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
+    if (event.dataTransfer) {
       event.dataTransfer.dropEffect = "copy";
     }
+  }
 
-  async function onDrop(event) {
+  async function onDrop(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
     let imageFiles = [];
 
     // Check if the dropped image is from a URL
-    const html = event.dataTransfer.getData("text/html");
+    const html = event.dataTransfer?.getData("text/html");
     if (html) {
       try {
         const urlMatch = html.match(/src="?([^"\s]+)"?\s*/);
+        if (!urlMatch) {
+          throw new Error("Unable to find image source");
+        }
         const url = urlMatch[1].replace("&amp;", "&"); // Reverse html encoding of url parameters
         let name = "";
         const altMatch = html.match(/alt="?([^"]+)"?\s*/);
@@ -46,8 +56,7 @@ function useImageDrop(
         }
         const response = await fetch(url);
         if (response.ok) {
-          const file = await response.blob();
+          const file = new File([await response.blob()], name);
-          file.name = name;
           if (supportFileTypes.includes(file.type)) {
             imageFiles.push(file);
           } else {
@@ -63,7 +72,7 @@ function useImageDrop(
       }
     }
 
-    const files = event.dataTransfer.files;
+    const files = event.dataTransfer?.files || [];
     for (let file of files) {
       if (supportFileTypes.includes(file.type)) {
         imageFiles.push(file);
@@ -72,7 +81,7 @@ function useImageDrop(
       }
     }
     const dropPosition = new Vector2(event.clientX, event.clientY);
-    onImageDrop(imageFiles, dropPosition);
+    onImageDrop({ files: imageFiles, dropPosition });
     setDragging(false);
   }