{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/sonia/VisualStudioCode/Poryecto-Propio/Proyecto-React-Firebase/src/pages/auth/LinkForm.js\",\n    _s = $RefreshSig$();\n\nimport React, { useState, useEffect } from 'react';\nimport Firebase from \"../../config/firebase\"; //import IPageProps from '../../interfaces/page';\n//Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify)\n\nimport { toast } from \"react-toastify\";\n\nconst LinkForm = props => {\n  _s();\n\n  //Constantes iniciales \n  const initialStateValues = {\n    url: \"\",\n    name: \"\",\n    description: \"\"\n  }; //Creamos el useState con su estado inicial y su cambio posterior:\n\n  const [values, setValues] = useState(initialStateValues); //Funcion que maneja el cambio de cada input setea las initialStateValues: la propiedad e.target de cada onchange={} de los input\n\n  const handleInputChange = e => {\n    const {\n      name,\n      value\n    } = e.target;\n    setValues({ ...values,\n      [name]: value\n    });\n  }; //Para validar la URL por ejemplo: Buscar en google => validate url regex javascript\n\n\n  const validURL = str => {\n    var pattern = new RegExp(\"^(https?:\\\\/\\\\/)?\" + // protocol\n    \"((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.)+[a-z]{2,}|\" + // domain name\n    \"((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))\" + // OR ip (v4) address\n    \"(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*\" + // port and path\n    \"(\\\\?[;&a-z\\\\d%_.~+=-]*)?\" + // query string\n    \"(\\\\#[-a-z\\\\d_]*)?$\", \"i\"); // fragment locator\n\n    return !!pattern.test(str);\n  }; //Evento que escucha al enviar el formulario, simplemente para ver que en consola esta funcionando:\n\n\n  const handleSubmit = e => {\n    e.preventDefault(); //Utilizamos el validador de de la URL para que la gente ponga bien la URL:\n\n    if (!validURL(values.url)) {\n      return toast(\"invalid url\", {\n        type: \"warning\",\n        // warning => Color amarillo\n        autoClose: 1000 // Duración un segundo\n\n      });\n    } // Le pasamos las props al addOrEditLink que esta en el component Links y este lo guardara en la base de datos (FIN DEL ASUNTO....)\n\n\n    props.addOrEditLink(values); //Una vez guardados los datos procedemos a setearlos y de esta manera dejamos limpios los intput:\n\n    setValues({ ...initialStateValues\n    });\n  };\n\n  const getLinkById = async id => {\n    const doc = await Firebase.collection(\"links\").doc(id).get();\n    setValues({ ...doc.data()\n    });\n  };\n\n  useEffect(() => {\n    if (props.currentId === \"\") {\n      setValues({ ...initialStateValues\n      });\n    } else {\n      getLinkById(props.currentId);\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [props.currentId]);\n  return /*#__PURE__*/_jsxDEV(\"form\", {\n    onSubmit: handleSubmit,\n    className: \"card card-body border-primary\",\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"form-group input-group\",\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"input-group-text bg-light\",\n        children: /*#__PURE__*/_jsxDEV(\"i\", {\n          className: \"material-icons\",\n          children: \"insert_link\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 80,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 79,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n        style: {\n          color: \"white\"\n        },\n        type: \"text\",\n        className: \"form-control\",\n        placeholder: \"https://someurl.xyz\",\n        value: values.url,\n        name: \"url\",\n        onChange: handleInputChange\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 82,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 84,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"form-group input-group\",\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"input-group-text bg-light\",\n        children: /*#__PURE__*/_jsxDEV(\"i\", {\n          className: \"material-icons\",\n          children: \"create\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 87,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 86,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n        style: {\n          color: \"white\"\n        },\n        type: \"text\",\n        value: values.name,\n        name: \"name\",\n        placeholder: \"Website Name\",\n        className: \"form-control\",\n        onChange: handleInputChange\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 89,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 85,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 91,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"form-group\",\n      children: /*#__PURE__*/_jsxDEV(\"textarea\", {\n        style: {\n          color: \"white\"\n        },\n        rows: \"3\",\n        className: \"form-control\",\n        placeholder: \"Write a Description\",\n        name: \"description\",\n        value: values.description,\n        onChange: handleInputChange\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 93,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 92,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 95,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n      className: \"btn btn-primary btn-block\",\n      children: props.currentId === \"\" ? \"Save\" : \"Update\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 96,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 77,\n    columnNumber: 7\n  }, this);\n};\n\n_s(LinkForm, \"1BQPbhCmUzBHmedlQaPpAMp/RmE=\");\n\n_c = LinkForm;\nexport default LinkForm;\n\nvar _c;\n\n$RefreshReg$(_c, \"LinkForm\");","map":{"version":3,"sources":["/home/sonia/VisualStudioCode/Poryecto-Propio/Proyecto-React-Firebase/src/pages/auth/LinkForm.js"],"names":["React","useState","useEffect","Firebase","toast","LinkForm","props","initialStateValues","url","name","description","values","setValues","handleInputChange","e","value","target","validURL","str","pattern","RegExp","test","handleSubmit","preventDefault","type","autoClose","addOrEditLink","getLinkById","id","doc","collection","get","data","currentId","color"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport  Firebase  from \"../../config/firebase\";\n//import IPageProps from '../../interfaces/page';\n\n//Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify)\nimport { toast } from \"react-toastify\";\n\nconst LinkForm = (props) =>{\n\n  //Constantes iniciales \n  const initialStateValues = {\n      url:\"\",\n      name:\"\",\n      description:\"\",\n  }\n  //Creamos el useState con su estado inicial y su cambio posterior:\n const [values, setValues ] = useState(initialStateValues);\n\n //Funcion que maneja el cambio de cada input setea las initialStateValues: la propiedad e.target de cada onchange={} de los input\n const handleInputChange = e =>{\n  const {name, value} = e.target;\n  setValues({...values, [name]: value });\n } \n\n //Para validar la URL por ejemplo: Buscar en google => validate url regex javascript\n const validURL = (str) => {\n  var pattern = new RegExp(\n    \"^(https?:\\\\/\\\\/)?\" + // protocol\n    \"((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.)+[a-z]{2,}|\" + // domain name\n    \"((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))\" + // OR ip (v4) address\n    \"(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*\" + // port and path\n    \"(\\\\?[;&a-z\\\\d%_.~+=-]*)?\" + // query string\n      \"(\\\\#[-a-z\\\\d_]*)?$\",\n    \"i\"\n  ); // fragment locator\n  return !!pattern.test(str);\n};\n \n\n\n //Evento que escucha al enviar el formulario, simplemente para ver que en consola esta funcionando:\n  const handleSubmit = e => {\n      e.preventDefault();\n\n      //Utilizamos el validador de de la URL para que la gente ponga bien la URL:\n      if (!validURL(values.url)) {\n          return toast(\"invalid url\", { \n                      type: \"warning\", // warning => Color amarillo\n                      autoClose: 1000  // Duración un segundo\n                  });\n \n        }\n\n      // Le pasamos las props al addOrEditLink que esta en el component Links y este lo guardara en la base de datos (FIN DEL ASUNTO....)\n      props.addOrEditLink(values);\n\n      //Una vez guardados los datos procedemos a setearlos y de esta manera dejamos limpios los intput:\n      setValues({...initialStateValues})\n  }\n\n  const getLinkById = async (id) => {\n      const doc = await Firebase.collection(\"links\").doc(id).get();\n      setValues({ ...doc.data() });\n    };\n  \n\n  useEffect(() => {\n      if (props.currentId === \"\") {\n        setValues({ ...initialStateValues });\n      } else {\n        getLinkById(props.currentId);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [props.currentId]);\n\n  return(\n      <form onSubmit={handleSubmit} className=\"card card-body border-primary\">\n      <div className=\"form-group input-group\">\n        <div className=\"input-group-text bg-light\">\n          <i className=\"material-icons\">insert_link</i>\n        </div>\n        <input style={{ color: \"white\" }} type=\"text\" className=\"form-control\" placeholder=\"https://someurl.xyz\" value={values.url} name=\"url\" onChange={handleInputChange}/>\n      </div>\n      <br/>\n      <div className=\"form-group input-group\">\n        <div className=\"input-group-text bg-light\">\n          <i className=\"material-icons\">create</i>\n        </div>\n        <input style={{ color: \"white\" }} type=\"text\" value={values.name} name=\"name\" placeholder=\"Website Name\" className=\"form-control\" onChange={handleInputChange}/>\n      </div>\n      <br/>\n      <div className=\"form-group\">\n        <textarea style={{ color: \"white\" }} rows=\"3\" className=\"form-control\" placeholder=\"Write a Description\" name=\"description\" value={values.description} onChange={handleInputChange}/>\n      </div>\n      <br/>\n      <button className=\"btn btn-primary btn-block\">\n      {props.currentId === \"\" ? \"Save\" : \"Update\"}\n      </button>\n    </form>\n  )\n}\n\nexport default LinkForm;\n"]},"metadata":{},"sourceType":"module"}