import React, {useState, useEffect} from 'react'; //import Firebase from "../../config/firebase"; import IPageProps from '../../interfaces/page'; import db from "../../config/firestore"; //Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify) import { toast } from "react-toastify"; const LinkForm: React.FunctionComponent<IPageProps> = props =>{ //Constantes iniciales const initialStateValues = { url:"", name:"", description:"", } //Creamos el useState con su estado inicial y su cambio posterior: 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 const handleInputChange = (e: { target: { name: string; value: string; }; }) =>{ const {name, value} = e.target; setValues({...values, [name]: value }); } //Para validar la URL por ejemplo: Buscar en google => validate url regex javascript const validURL = (str: string) => { var pattern = new RegExp( "^(https?:\\/\\/)?" + // protocol "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string "(\\#[-a-z\\d_]*)?$", "i" ); // fragment locator return !!pattern.test(str); }; //Evento que escucha al enviar el formulario, simplemente para ver que en consola esta funcionando: const handleSubmit = (e: { preventDefault: () => void; }) => { e.preventDefault(); //Utilizamos el validador de de la URL para que la gente ponga bien la URL: if (!validURL(values.url)) { return toast("invalid url", { type: "warning", // warning => Color amarillo autoClose: 1000 // Duración un segundo }); } // Le pasamos las props al addOrEditLink que esta en el component Links y este lo guardara en la base de datos (FIN DEL ASUNTO....) props.addOrEditLink(values); //Una vez guardados los datos procedemos a setearlos y de esta manera dejamos limpios los intput: setValues({...initialStateValues}) } const getLinkById = async (id: any, ) => { const doc = await db.collection("links").doc(id).get(); if (doc.exists) { // console.log(doc.id, " => ", doc.data()); var nomb = [doc.data()?.name]; var pagina = [doc.data()?.url]; var descripcion = [doc.data()?.description]; /* console.log("Nombre del sitio: ",nomb.toString()); console.log("URL del sito: ",pagina.toString()); console.log("Breve descripción: ",descripcion.toString());*/ setValues({ url: pagina.toString(), name: nomb.toString(), description: descripcion.toString(), }); }else { // doc.data() will be undefined in this case console.log("No such document!"); } } useEffect(() => { if (props.currentId === "") { setValues({ ...initialStateValues }); } else { getLinkById(props.currentId); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.currentId]); return( <form onSubmit={handleSubmit} className="card card-body border-primary"> <div className="form-group input-group"> <div className="input-group-text bg-light"> <i className="material-icons">insert_link</i> </div> <input style={{ color: "white" }} type="text" className="form-control" placeholder="https://someurl.xyz" value={values.url} name="url" onChange={handleInputChange}/> </div> <br/> <div className="form-group input-group"> <div className="input-group-text bg-light"> <i className="material-icons">create</i> </div> <input style={{ color: "white" }} type="text" value={values.name} name="name" placeholder="Website Name" className="form-control" onChange={handleInputChange}/> </div> <br/> <div className="form-group"> <textarea style={{ color: "white" }} className="form-control" placeholder="Write a Description" name="description" value={values.description} onChange={handleInputChange}/> </div> <br/> <button className="btn btn-primary btn-block"> {props.currentId === "" ? "Save" : "Update"} </button> </form> ) } export default LinkForm;