Index: imaps-frontend/src/components/Modals/Hooks/useConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,45 @@
+import {useState} from "react";
+
+export default function useConnections(map,shapeInfo,setShapeInfo){
+    const [connections,setConnections] = useState([])
+
+    const addConnection = () => {
+        console.log("TOSKA",shapeInfo)
+        if (!shapeInfo.selectedPin || connections.includes(shapeInfo.selectedPin)) return;
+
+        setConnections((prevConn) => {
+            const updatedConnections = [...prevConn, shapeInfo.selectedPin];
+
+
+            setShapeInfo((prevShapeInfo) => ({
+                ...prevShapeInfo,
+                ["selectedPin"]: "",
+                ["selectedPins"]: updatedConnections,
+            }));
+
+            console.log(shapeInfo.name,shapeInfo.selectedPin,"TEST")
+
+            map.drawConnection(shapeInfo.name,shapeInfo.selectedPin);
+            return updatedConnections;
+        });
+    };
+
+    const removeConnection = (connToRemove) => {
+        setConnections((prevConn) => {
+            const updatedPins = prevConn.filter((pin) => pin !== connToRemove);
+            setShapeInfo((prevFormData) => ({
+                ...prevFormData,
+                selectedPins: updatedPins,
+            }));
+            return updatedPins;
+        });
+        map.removeConnection(shapeInfo.name, connToRemove);
+    };
+
+
+    return {
+        connectionState: {connections,setConnections},
+        handlers: {addConnection,removeConnection}
+
+    }
+}
Index: imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,14 @@
+import {useEffect} from "react";
+
+export function useModalEvent(openModalHandler,eventName){
+    useEffect(() => {
+
+        if(eventName == null) return;
+
+        window.addEventListener(eventName, openModalHandler);
+
+        return () => {
+            window.removeEventListener(eventName, openModalHandler);
+        };
+    }, []);
+}
Index: imaps-frontend/src/components/Modals/Hooks/useModalState.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,40 @@
+import {useState} from "react";
+import triggerMapSave from "../../../scripts/util/triggerMapSave.js";
+
+export default function useModalState(map) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [shape, setShape] = useState(null);
+    const [shapeInfo,setShapeInfo] = useState({});
+
+
+    const toggleModal = () => {
+        if (isOpen) {
+            shape.setInfo(shapeInfo);
+            map.updateRoomNames();
+            triggerMapSave();
+            console.log("SHAPE BEF CLOSE:",shape.info)
+        }
+        setIsOpen(!isOpen);
+    };
+
+    const updateModalData = (e) => {
+        const {name, value, type, checked} = e.target;
+        setShapeInfo(prevShapeInfo => ({
+                ...prevShapeInfo,
+                [name]: type === "checkbox" ? checked : value
+            }
+        ))
+        console.log("SHAPE INFO UPDATE",shape.info)
+    };
+
+    const saveDetails = () => {
+        if (shape) {
+            toggleModal();
+        }
+    };
+
+    return {
+        modalState: {isOpen, shapeInfo,setIsOpen, shape, setShape,setShapeInfo},
+        handlers: {toggleModal, updateModalData, saveDetails}
+    };
+}
Index: imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,19 @@
+import {useEffect} from "react";
+
+export default function useRoomTypes(formData,setFormData,roomTypes,setRoomTypes,map){
+
+    const addRoomType = () => {
+        if (!formData.type || roomTypes.includes(formData.type)) return;
+        // setRoomTypes((prevTypes) => [...prevTypes, formData.type]);
+        setFormData({ ...formData, type: "" });
+        map.addRoomType(formData.type);
+        console.log("TYPES" + map.roomTypes);
+    };
+
+    const removeRoomType = (typeToRemove) => {
+        map.removeRoomType(typeToRemove);
+        setRoomTypes((prevTypes) => prevTypes.filter((type) => type !== typeToRemove));
+    };
+
+    return {addRoomType,removeRoomType}
+}
