Ultimos cambios.

src/config/config.ts

+//Clave de autotentificación para el firebase:
 const config = {
     firebase: {
         apiKey: "AIzaSyC6IF_TzThVkBp5zOc4qQLurfhxRp_jHAY",

src/config/routes.ts

@@ -14,49 +14,63 @@ const routes: IRoute[] = [
         exact: true,
         component: HomePage,
         name: 'Home Page',
-        protected: true
+        protected: true,
+        addOrEditLink: '', 
+        currentId: '',
     },
     {
         path: '/register',
         exact: true,
         component: RegisterPage,
         name: 'Register Page',
-        protected: false
+        protected: false,
+        addOrEditLink: '', 
+        currentId: '',
     },
     {
         path: '/login',
         exact: true,
         component: LoginPage,
         name: 'Login Page',
-        protected: false
+        protected: false,
+        addOrEditLink: '', 
+        currentId: '',
     },
     {
         path: '/change',
         exact: true,
         component: ChangePasswordPage,
         name: 'Change Password Page',
-        protected: true
+        protected: true,
+        addOrEditLink: '', 
+        currentId: '',
     },
     {
         path: '/logout',
         exact: true,
         component: LogoutPage,
         name: 'Logout Page',
-        protected: true
+        protected: true,
+        addOrEditLink: '', 
+        currentId: '',
     },
     {
         path: '/forget',
         exact: true,
         component: ForgotPasswordPage,
         name: 'Forgot Password Page',
-        protected: false
+        protected: false,
+        addOrEditLink: '', 
+        currentId: '',
     },
     {
         path: '/reset',
         exact: true,
         component: ResetPasswordPage,
         name: 'Reset Password Page',
-        protected: false
+        protected: false,
+        addOrEditLink: '', 
+        currentId: '',
     }
 ];
 

src/interfaces/page.ts

 export default interface IPageProps {
-    name: string;
+    //name: string;
+    addOrEditLink: any;
+    currentId: any;
 }
\ No newline at end of file

src/interfaces/route.ts

@@ -4,4 +4,6 @@ export default interface IRoute {
     component: any;
     name: string;
     protected: boolean;
+    addOrEditLink: any;
+    currentId: any;
 }
\ No newline at end of file

src/pages/auth/LinkForm.js → src/pages/auth/LinkForm.tsx

 import React, {useState, useEffect} from 'react';
-import  Firebase  from "../../config/firebase";
-//import IPageProps from '../../interfaces/page';
+//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 = (props) =>{
+
+const LinkForm: React.FunctionComponent<IPageProps> = props =>{
 
   //Constantes iniciales 
   const initialStateValues = {
@@ -17,13 +20,13 @@ const LinkForm = (props) =>{
  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 =>{
+ 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) => {
+ const validURL = (str: string) => {
   var pattern = new RegExp(
     "^(https?:\\/\\/)?" + // protocol
     "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
@@ -39,7 +42,7 @@ const LinkForm = (props) =>{
 
 
  //Evento que escucha al enviar el formulario, simplemente para ver que en consola esta funcionando:
-  const handleSubmit = e => {
+  const handleSubmit = (e: { preventDefault: () => void; }) => {
       e.preventDefault();
 
       //Utilizamos el validador de de la URL para que la gente ponga bien la URL:
@@ -58,11 +61,37 @@ const LinkForm = (props) =>{
       setValues({...initialStateValues})
   }
 
-  const getLinkById = async (id) => {
-      const doc = await Firebase.collection("links").doc(id).get();
-      setValues({ ...doc.data() });
-    };
+  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 === "") {
@@ -90,7 +119,7 @@ const LinkForm = (props) =>{
       </div>
       <br/>
       <div className="form-group">
-        <textarea style={{ color: "white" }} rows="3" className="form-control" placeholder="Write a Description" name="description" value={values.description} onChange={handleInputChange}/>
+        <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">
@@ -101,3 +130,4 @@ const LinkForm = (props) =>{
 }
 
 export default LinkForm;
+

src/pages/auth/Links.js → src/pages/auth/Links.tsx

@@ -4,10 +4,12 @@ import LinksForm from "./LinkForm";
 import db  from "../../config/firestore";
 //Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify)
 import { toast } from "react-toastify";
+//import firebase from "firebase";
 
 const Links = () => {
 //Creamos el useState con su estado inicial de los (links) y su cambio posterior (setLinks):
-  const [links, setLinks] = useState([]);
+;
+  const [links, setLinks] = useState<any[]>([]); 
   //Creamos el useState con su estado inicial de los (currentId) y su cambio posterior (setCurrentId):
   const [currentId, setCurrentId] = useState("");
 
@@ -16,7 +18,8 @@ const Links = () => {
   const getLinks = async () => {
     
     db.collection("links").onSnapshot((querySnapshot) => {
-      const docs = [];
+      const docs = [] as  any;
+
       querySnapshot.forEach((doc) => {
         docs.push({ ...doc.data(), id: doc.id });
       });
@@ -26,7 +29,7 @@ const Links = () => {
 
   //Borramos los datos facilmente con el delete() Mandamos un mensaje de si esta seguro de borrar los datos.
   // Y creamos un toast para mandar un mensaje dimamico diciendo que lo hemos borrado
-  const onDeleteLink = async (id) => {
+  const onDeleteLink = async (id: string | undefined) => {
     if (window.confirm("are you sure you want to delete this link?")) {
       await db.collection("links").doc(id).delete();
       toast("Link Removed Successfully", {
@@ -44,15 +47,17 @@ const Links = () => {
   // 2 OPCIONES:
   // 1. Añadimos los datos a la colección de firbase seteando el linkObject y creamos otro mensaje dimamico para que se vea.
   // 2. Actualizamos los datos a la colección de firbase haciendo un update el linkObject y creamos otro mensaje dimamico para que se vea.
-  const addOrEditLink = async (linkObject) => {
+  const addOrEditLink = async (linkObject: { [x: string]: any; }) => {
     try {
       if (currentId === "") {
+        console.log("Añado datos a la base");
         await db.collection("links").doc().set(linkObject);
         toast("New Link Added", {
           type: "success", // success => color verde
           autoClose: 2000 // El mensaje se autocierra pasado 2 segundos 
         });
       } else {
+        console.log("Entro en el update");
         await db.collection("links").doc(currentId).update(linkObject);
         toast("Link Updated Successfully", {
           type: "info", // info => color azul

src/pages/home.tsx

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import { Card, CardBody, Container } from 'reactstrap';
 import IPageProps from '../interfaces/page';
 import Links from './auth/Links';
+//import { ToastContainer } from "react-toastify";
+
 
 //Página de inicio protegida:
 const HomePage: React.FunctionComponent<IPageProps> = props => {
@@ -21,10 +23,16 @@ const HomePage: React.FunctionComponent<IPageProps> = props => {
                         {/**Creamos pequeño enlace para cambiar contraseña si queremos una vez dentro de home nos redirige a la page de cambio*/}
                         Click <Link to='/logout'>here</Link> to logout.
                     </p>
-                    <p>Prueba de concepto:</p>
+                    <p>Facilita los linKs a la comunidad, para así aprender juntos:</p>
                     <div>
+                        <p>¡El saber es poder!</p>
                         <Links/> 
                     </div>
+                    <div>
+                   {/** <ToastContainer/> */}  
+                    </div>
+                         
+                    
                 </CardBody>
             </Card>
         </Container>