//Esto trae distinto contenido segun sea la ruta en la uri, z.b. blog/primera-entrada o blog/2358
import { useParams, useHistory } from "react-router-dom";//esto permite traer variables de la uri y hacer el redirect despues
import useFetch from "./CustomHookFetchBaseDeDatos";//Tu custom hook (subcomponente) para interactuar con la base de datos

const RutaVariable = () => {
	const {id} = useParams();//esto permite traer variables de la uri
	//recuerda en App.jsx llamaste id a la variable
	
	const { data: blog, error, isLoading } = useFetch('http://localhost:3001/blogs/' + id);//rehusa tu custom hook para traer data de la BDD

	const history = useHistory();//esto permite ver el historial de uris del navegador
	
	const handleBorrarBDD = () => {
		fetch('http://localhost:3001/blogs/' + blog.id, {//aqui el metodo es delete
		  method: 'DELETE'
		}).then(() => {
			console.log("Se borro el id: "+blog.id);
		  history.push('/arrays');//al terminar te lleva de regreso a los blogs
		}) 
        /*
        Asi seria usando tu API, la url cambia y necesitas feach.map en el json
        
        const linkApi="/api-bdd.php?pwd=amr&sql=";//Asi es usando mi API propia que me permite correr SQL y regresa lo que traia como json bruto
        const sql=encodeURI("DELETE FROM blogs WHERE id=");//codifica el sql a la url, así haces lo que quieras...!!! y  te regresa objetos 

        blog.map(feach => (//como regresa un array...
            fetch(linkApi+sql + feach.id, {//aqui el metodo es delete
              method: 'DELETE'
            }).then(() => {
                console.log("Se borro el id: "+feach.id);
              history.push('/arrays');//al terminar te lleva de regreso a los blogs
            })             
        ));        
        */
	}	
	
	return ( <div className = "blog-details" >
      { isLoading && <div>Loading...</div> }
      { error && <div>{ error }</div> }
      { blog && (
        <article>
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
          <div>{ blog.body }</div>
		  <hr className="separasecciones"/>
		  <button onClick={handleBorrarBDD}>Borrar de la BDD</button>
        </article>
      )}
	</div>
	);
}

export default RutaVariable;