Guess layer of AddThing, open popup

src/components/MapDisplay/ThingEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Dialog, InputGroup, Button, NumericInput, Divider } from "@blueprintjs/core";
 import { useDispatch } from "react-redux";
 import { Thing } from "../../models";
@@ -11,6 +11,10 @@ interface ThingEditorProps {
 }
 
 const ThingEditor: React.FC<ThingEditorProps> = ({ thing, isOpen, onClose }) => {
+  useEffect(() => {
+    setEditedThing({ ...thing });
+  }, [thing]);
+
   const [editedThing, setEditedThing] = useState<Thing>({ ...thing });
   const dispatch = useDispatch();
 

src/components/RunMosaic/AddThing.tsx

@@ -2,10 +2,14 @@ import React, { useState } from "react";
 import { Thing } from "../../models";
 import { useDispatch } from "react-redux";
 import { addThing } from "../../store/routeSlice";
+import { Dialog, Button, InputGroup } from "@blueprintjs/core";
+import ThingEditor from "../MapDisplay/ThingEditor";
 
 export const AddThing: React.FC = () => {
   const [isModalOpen, setModalOpen] = useState(false);
   const [uid, setUid] = useState("");
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [newThing, setNewThing] = useState<Thing | null>(null);
   const dispatch = useDispatch();
 
   const handleButtonClick = () => {
@@ -20,34 +24,51 @@ export const AddThing: React.FC = () => {
     const response = await fetch(`https://radar-totk.zeldamods.org/obj_by_hash/${uid}`);
     const data = await response.json();
 
+    const adjusted_z = data.pos[1] - 105.499;
+
+    let estimated_layer = "surface";
+    if (adjusted_z < -200) estimated_layer = "depths";
+    if (adjusted_z > 850) estimated_layer = "sky";
+
     const newThing: Thing = {
       uid: data.hash_id,
       name: data.name,
       coordinates: {
         x: -data.pos[2],
         y: data.pos[0],
-        z: data.pos[1] - 105.499,
+        z: adjusted_z,
       },
-      layerId: "surface",
+      layerId: estimated_layer,
       dependencyIds: [],
       icon: "",
       type: "Thing",
       isNativeObject: true,
     };
 
     dispatch(addThing(newThing));
+    setNewThing(newThing);
+    setIsEditorOpen(true);
     setModalOpen(false);
   };
 
+  const closeEditor = () => {
+    setIsEditorOpen(false);
+  };
+
   return (
     <div>
-      <button onClick={handleButtonClick}>Add Thing</button>
-      {isModalOpen && (
-        <div className="modal">
-          <input type="text" value={uid} onChange={handleInputChange} placeholder="Enter UID" />
-          <button onClick={handleSubmit}>Submit</button>
+      <Button onClick={handleButtonClick}>Add Thing</Button>
+
+      <Dialog isOpen={isModalOpen} title="Add Thing" onClose={() => setModalOpen(false)}>
+        <div className="bp3-dialog-body">
+          <InputGroup value={uid} onChange={handleInputChange} placeholder="Enter UID" />
+        </div>
+        <div className="bp3-dialog-footer">
+          <Button onClick={handleSubmit}>Submit</Button>
         </div>
-      )}
+      </Dialog>
+
+      {newThing && <ThingEditor thing={newThing} isOpen={isEditorOpen} onClose={closeEditor} />}
     </div>
   );
 };