create useModalClose hook

Author: caspg

src/components/AddSourceDialog.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useModalClose } from "../hooks/useModalClose";
 
 interface AddSourceDialogProps {
   onAdd: (source: NewSourceFormData) => void;
@@ -44,6 +45,7 @@ const initialFormState: FormFields = {
 
 export function AddSourceDialog({ onAdd, onClose }: AddSourceDialogProps) {
   const [formState, setFormState] = useState<FormFields>(initialFormState);
+  const { handleOverlayClick } = useModalClose(onClose);
 
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -111,6 +113,7 @@ export function AddSourceDialog({ onAdd, onClose }: AddSourceDialogProps) {
     <div
       className="fixed inset-0 bg-black/50 flex items-center justify-center"
       style={{ zIndex: 9999 }}
+      onClick={handleOverlayClick}
     >
       <div className="bg-white rounded-lg p-6 w-full max-w-md">
         <h2 className="text-lg font-semibold mb-4">Add New Map Source</h2>

src/components/ApiKeysDialog.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useLocalStorage } from "../hooks/useLocalStorage";
+import { useModalClose } from "../hooks/useModalClose";
 
 interface ApiKeysDialogProps {
   onClose: () => void;
@@ -12,6 +13,7 @@ interface ApiKeys {
 export function ApiKeysDialog({ onClose }: ApiKeysDialogProps) {
   const [apiKeys, setApiKeys] = useLocalStorage<ApiKeys>("apiKeys", {});
   const [googleMapsKey, setGoogleMapsKey] = useState(apiKeys.googleMaps || "");
+  const { handleOverlayClick } = useModalClose(onClose);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -23,7 +25,10 @@ export function ApiKeysDialog({ onClose }: ApiKeysDialogProps) {
   };
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      onClick={handleOverlayClick}
+    >
       <div className="bg-white rounded-lg p-6 w-full max-w-md">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-lg font-semibold">API Keys Configuration</h2>

src/hooks/useModalClose.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+export function useModalClose(onClose: () => void) {
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+
+  const handleOverlayClick = (event: React.MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  return { handleOverlayClick };
+}