From dd3312b7f56dba0036d8d416a29c32a0e91aaef5 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Mon, 17 Mar 2025 23:39:22 -0300
Subject: [PATCH] =?UTF-8?q?a=C3=B1adida=20funcionalidad=20de=20compartir?=
 =?UTF-8?q?=20y=20modificar=20las=20coords?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditarModal.jsx | 97 ++++++++++++++++++++++++++++++++++
 src/components/TimedToast.jsx  | 35 ++++++++++++
 src/components/coordkeeper.jsx | 39 +++++++++++---
 3 files changed, 164 insertions(+), 7 deletions(-)
 create mode 100644 src/components/EditarModal.jsx
 create mode 100644 src/components/TimedToast.jsx

diff --git a/src/components/EditarModal.jsx b/src/components/EditarModal.jsx
new file mode 100644
index 0000000..cf79479
--- /dev/null
+++ b/src/components/EditarModal.jsx
@@ -0,0 +1,97 @@
+export default function EditarModal({ tipo, coord, show, close, setCoords }) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target);
+    const x = formData.get("x");
+    const y = formData.get("y");
+    const z = formData.get("z");
+
+    let storedTipo = localStorage.getItem(tipo);
+    if (storedTipo) {
+      let arr = JSON.parse(storedTipo);
+      const index = arr.findIndex((item) => item.num === coord.num);
+      if (index !== -1) {
+        arr[index] = {
+          ...coord,
+          x: Number(x),
+          y: y ? Number(y) : null,
+          z: Number(z),
+        };
+        localStorage.setItem(tipo, JSON.stringify(arr));
+        setCoords(arr);
+      }
+    }
+    close();
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <div
+      className="modal"
+      id="formModal"
+      tabIndex="-1"
+      style={{ display: "block" }}
+    >
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Update Coord</h5>
+            <button
+              type="button"
+              className="btn-close"
+              onClick={close}
+            ></button>
+          </div>
+          <div className="modal-body">
+            <form onSubmit={handleSubmit}>
+              <div className="mb-3">
+                <label className="form-label">Coordenada X</label>
+                <input
+                  type="number"
+                  name="x"
+                  className="form-control"
+                  defaultValue={coord.x}
+                />
+              </div>
+              {coord.y != null && (
+                <div className="mb-3">
+                  <label className="form-label">Coordenada Y</label>
+                  <input
+                    type="number"
+                    name="y"
+                    className="form-control"
+                    defaultValue={coord.y}
+                  />
+                </div>
+              )}
+              <div className="mb-3">
+                <label className="form-label">Coordenada Z</label>
+                <input
+                  type="number"
+                  name="z"
+                  className="form-control"
+                  defaultValue={coord.z}
+                />
+              </div>
+              <hr />
+              <button type="submit" className="btn btn-primary m-2">
+                Actualizar
+              </button>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={close}
+              >
+                Cancelar
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TimedToast.jsx b/src/components/TimedToast.jsx
new file mode 100644
index 0000000..8009425
--- /dev/null
+++ b/src/components/TimedToast.jsx
@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+
+export default function TimedToast({ message, durationMs, show, setShow }) {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShow(false);
+    }, durationMs);
+
+    return () => clearTimeout(timer);
+  }, [durationMs]);
+
+  if (!show) return null;
+
+  return (
+    <div className="position-fixed bottom-0 end-0 p-3" style={{ zIndex: 11 }}>
+      <div
+        className="toast show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div className="toast-header">
+          <strong className="me-auto">Notification</strong>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setShow(false)}
+            aria-label="Close"
+          ></button>
+        </div>
+        <div className="toast-body">{message}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/coordkeeper.jsx b/src/components/coordkeeper.jsx
index 400214b..4d3002b 100644
--- a/src/components/coordkeeper.jsx
+++ b/src/components/coordkeeper.jsx
@@ -4,6 +4,8 @@ import EditarIcon from "./EditarIcon";
 import ShareIcon from "./ShareIcon";
 import RemoveIcon from "./RemoveIcon";
 import StaticModal from "./StaticModal";
+import EditarModal from "./EditarModal";
+import TimedToast from "./TimedToast";
 
 function Modall({ show, CloseModal, Coord, Coords, EliminarCoord, tipo }) {
   if (show === true && Coord !== null) {
@@ -26,10 +28,13 @@ export default function Keeper({ tipo }) {
   const [coords, setCoords] = useState(
     JSON.parse(localStorage.getItem(tipo) || "[]"),
   );
+
   const collapseRef = useRef(null);
   const [showModal, setModal] = useState(false);
-  //const [showShareToast, setShowShareToast] = useState(false);
+  const [showEditar, setEditar] = useState(false);
+  const [showToast, setShowToast] = useState(false);
   const [selCoord, setCoord] = useState(null);
+
   useEffect(() => {
     const storedCoords = JSON.parse(localStorage.getItem(tipo) || "[]");
 
@@ -39,12 +44,16 @@ export default function Keeper({ tipo }) {
     }
   }, [tipo]);
 
-  const Editar = () => {
-    //wip
+  const Editar = (coord) => {
+    setCoord(coord);
+    setEditar(true);
   };
 
-  const Compartir = () => {
-    //wip
+  const Compartir = (coord) => {
+    setCoord(coord);
+    const textToCopy = `X: ${coord.x}${coord.y ? ` Y: ${coord.y}` : ""} Z: ${coord.z}`;
+    navigator.clipboard.writeText(textToCopy);
+    setShowToast(true);
   };
 
   const Remover = (coord) => {
@@ -69,6 +78,22 @@ export default function Keeper({ tipo }) {
         EliminarCoord={setCoords}
         tipo={tipo}
       />
+
+      <EditarModal
+        show={showEditar}
+        close={() => setEditar(false)}
+        tipo={tipo}
+        coord={selCoord}
+        setCoords={setCoords}
+      />
+
+      <TimedToast
+        durationMs={5000}
+        setShow={setShowToast}
+        show={showToast}
+        message={`Copiada Coordenada ${selCoord?.num}`}
+      />
+
       <div className="accordion" id="accordionNuevaCoord">
         <div className="accordion-item">
           <h2 className="accordion-header" id="headingNuevaCoord">
@@ -134,13 +159,13 @@ export default function Keeper({ tipo }) {
                 <td>
                   <button
                     class="ms-2  btn btn-outline-warning btn-sm"
-                    onClick={() => Editar()}
+                    onClick={() => Editar(x)}
                   >
                     <EditarIcon />
                   </button>
                   <button
                     className="btn btn-sm btn-outline-info ms-2"
-                    onClick={() => Compartir()}
+                    onClick={() => Compartir(x)}
                   >
                     <ShareIcon />
                   </button>