{"ast":null,"code":"import { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/sonia/VisualStudioCode/Poryecto-Propio/Proyecto-React-Firebase/src/pages/auth/Links.js\",\n    _s = $RefreshSig$();\n\nimport React, { useEffect, useState } from \"react\";\nimport LinksForm from \"./LinkForm\";\nimport Firebase from \"../../config/firebase\"; //Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify)\n\nimport { toast } from \"react-toastify\";\n\nconst Links = () => {\n  _s();\n\n  //Creamos el useState con su estado inicial de los (links) y su cambio posterior (setLinks):\n  const [links, setLinks] = useState([]); //Creamos el useState con su estado inicial de los (currentId) y su cambio posterior (setCurrentId):\n\n  const [currentId, setCurrentId] = useState(\"\"); //Hacemos la consulta para traernos todos los links de firebase. Es de manera asincrona asi que tenemos que usar async.\n  //Con onSnapshot hacemos que al renderizar aparaezca al instate.\n\n  const getLinks = async () => {\n    Firebase.firestore.collection(\"links\").onSnapshot(querySnapshot => {\n      const docs = [];\n      querySnapshot.forEach(doc => {\n        docs.push({ ...doc.data(),\n          id: doc.id\n        });\n      });\n      setLinks(docs);\n    });\n  }; //Borramos los datos facilmente con el delete() Mandamos un mensaje de si esta seguro de borrar los datos.\n  // Y creamos un toast para mandar un mensaje dimamico diciendo que lo hemos borrado\n\n\n  const onDeleteLink = async id => {\n    if (window.confirm(\"are you sure you want to delete this link?\")) {\n      await Firebase.collection(\"links\").doc(id).delete();\n      toast(\"Link Removed Successfully\", {\n        type: \"error\",\n        // error => color rojo\n        autoClose: 2000 // El mensaje se autocierra pasado 2 segundos \n\n      });\n    }\n  }; //Con el useEffect cada vez que renderice la página llamará al getLinks() y este traerá los datos.\n\n\n  useEffect(() => {\n    getLinks();\n  }, []); // 2 OPCIONES:\n  // 1. Añadimos los datos a la colección de firbase seteando el linkObject y creamos otro mensaje dimamico para que se vea.\n  // 2. Actualizamos los datos a la colección de firbase haciendo un update el linkObject y creamos otro mensaje dimamico para que se vea.\n\n  const addOrEditLink = async linkObject => {\n    try {\n      if (currentId === \"\") {\n        await Firebase.collection(\"links\").doc().set(linkObject);\n        toast(\"New Link Added\", {\n          type: \"success\",\n          // success => color verde\n          autoClose: 2000 // El mensaje se autocierra pasado 2 segundos \n\n        });\n      } else {\n        await Firebase.collection(\"links\").doc(currentId).update(linkObject);\n        toast(\"Link Updated Successfully\", {\n          type: \"info\",\n          // info => color azul\n          autoClose: 2000 // El mensaje se autocierra pasado 2 segundos \n\n        });\n        setCurrentId(\"\");\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  };\n\n  return /*#__PURE__*/_jsxDEV(_Fragment, {\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"col-md-4 p-2\",\n      children: /*#__PURE__*/_jsxDEV(LinksForm, { ...{\n          addOrEditLink,\n          currentId,\n          links\n        }\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 70,\n        columnNumber: 7\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 69,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"col-md-8 p-2\",\n      children: links.map(link => /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"card mb-1\",\n        children: /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"card-body\",\n          children: [/*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"d-flex justify-content-between\",\n            children: [/*#__PURE__*/_jsxDEV(\"h4\", {\n              children: link.name\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 77,\n              columnNumber: 17\n            }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n              children: [/*#__PURE__*/_jsxDEV(\"i\", {\n                className: \"material-icons text-danger\",\n                style: {\n                  cursor: \"pointer\"\n                },\n                onClick: () => onDeleteLink(link.id),\n                children: \"close\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 79,\n                columnNumber: 19\n              }, this), /*#__PURE__*/_jsxDEV(\"i\", {\n                className: \"material-icons \",\n                style: {\n                  cursor: \"pointer\"\n                },\n                onClick: () => setCurrentId(link.id),\n                children: \"create\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 85,\n                columnNumber: 19\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 78,\n              columnNumber: 17\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 76,\n            columnNumber: 15\n          }, this), /*#__PURE__*/_jsxDEV(\"p\", {\n            children: link.description\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 93,\n            columnNumber: 15\n          }, this), /*#__PURE__*/_jsxDEV(\"a\", {\n            href: link.url,\n            target: \"_blank\",\n            rel: \"noopener noreferrer\",\n            children: \"Go to Website\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 94,\n            columnNumber: 15\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 75,\n          columnNumber: 13\n        }, this)\n      }, link.id, false, {\n        fileName: _jsxFileName,\n        lineNumber: 74,\n        columnNumber: 11\n      }, this))\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 72,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true);\n};\n\n_s(Links, \"+lLoHK8BvHdOyQvMz6FgXWKqDYE=\");\n\n_c = Links;\nexport default Links;\n\nvar _c;\n\n$RefreshReg$(_c, \"Links\");","map":{"version":3,"sources":["/home/sonia/VisualStudioCode/Poryecto-Propio/Proyecto-React-Firebase/src/pages/auth/Links.js"],"names":["React","useEffect","useState","LinksForm","Firebase","toast","Links","links","setLinks","currentId","setCurrentId","getLinks","firestore","collection","onSnapshot","querySnapshot","docs","forEach","doc","push","data","id","onDeleteLink","window","confirm","delete","type","autoClose","addOrEditLink","linkObject","set","update","error","console","map","link","name","cursor","description","url"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport LinksForm from \"./LinkForm\";\n\nimport Firebase  from \"../../config/firebase\";\n//Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify)\nimport { toast } from \"react-toastify\";\n\nconst Links = () => {\n//Creamos el useState con su estado inicial de los (links) y su cambio posterior (setLinks):\n  const [links, setLinks] = useState([]);\n  //Creamos el useState con su estado inicial de los (currentId) y su cambio posterior (setCurrentId):\n  const [currentId, setCurrentId] = useState(\"\");\n\n  //Hacemos la consulta para traernos todos los links de firebase. Es de manera asincrona asi que tenemos que usar async.\n  //Con onSnapshot hacemos que al renderizar aparaezca al instate.\n  const getLinks = async () => {\n    Firebase.firestore.collection(\"links\").onSnapshot((querySnapshot) => {\n      const docs = [];\n      querySnapshot.forEach((doc) => {\n        docs.push({ ...doc.data(), id: doc.id });\n      });\n      setLinks(docs);\n    });\n  };\n\n  //Borramos los datos facilmente con el delete() Mandamos un mensaje de si esta seguro de borrar los datos.\n  // Y creamos un toast para mandar un mensaje dimamico diciendo que lo hemos borrado\n  const onDeleteLink = async (id) => {\n    if (window.confirm(\"are you sure you want to delete this link?\")) {\n      await Firebase.collection(\"links\").doc(id).delete();\n      toast(\"Link Removed Successfully\", {\n        type: \"error\", // error => color rojo\n        autoClose: 2000 // El mensaje se autocierra pasado 2 segundos \n      });\n    }\n  };\n\n  //Con el useEffect cada vez que renderice la página llamará al getLinks() y este traerá los datos.\n  useEffect(() => {\n    getLinks();\n  }, []);\n\n  // 2 OPCIONES:\n  // 1. Añadimos los datos a la colección de firbase seteando el linkObject y creamos otro mensaje dimamico para que se vea.\n  // 2. Actualizamos los datos a la colección de firbase haciendo un update el linkObject y creamos otro mensaje dimamico para que se vea.\n  const addOrEditLink = async (linkObject) => {\n    try {\n      if (currentId === \"\") {\n        await Firebase.collection(\"links\").doc().set(linkObject);\n        toast(\"New Link Added\", {\n          type: \"success\", // success => color verde\n          autoClose: 2000 // El mensaje se autocierra pasado 2 segundos \n        });\n      } else {\n        await Firebase.collection(\"links\").doc(currentId).update(linkObject);\n        toast(\"Link Updated Successfully\", {\n          type: \"info\", // info => color azul\n          autoClose: 2000 // El mensaje se autocierra pasado 2 segundos \n        });\n        setCurrentId(\"\");\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"col-md-4 p-2\">\n      <LinksForm {...{ addOrEditLink, currentId, links }} />\n      </div>\n      <div className=\"col-md-8 p-2\">\n        {links.map((link) => (\n          <div className=\"card mb-1\" key={link.id}>\n            <div className=\"card-body\">\n              <div className=\"d-flex justify-content-between\">\n                <h4>{link.name}</h4>\n                <div>\n                  <i\n                    className=\"material-icons text-danger\" style={{ cursor: \"pointer\" }}\n                    onClick={() => onDeleteLink(link.id)}\n                  >\n                    close\n                  </i>\n                  <i\n                    className=\"material-icons \" style={{ cursor: \"pointer\" }}\n                    onClick={() => setCurrentId(link.id)}\n                  >\n                    create\n                  </i>\n                </div>\n              </div>\n              <p>{link.description}</p>\n              <a href={link.url} target=\"_blank\" rel=\"noopener noreferrer\">Go to Website</a>\n            </div>\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n\nexport default Links;"]},"metadata":{},"sourceType":"module"}