Consulta sobre rutas

[pabloSalva]

Hola como están tenemos un problema al intentar agregar peliculas.
como hacemos para agregar la ruta "create" y que se conecte con la api??
lo intentamos resolver estos dias pero no lo logramos.
Saludos

[ivanduva]

Buenas. No tienen que crear ningún endpoint, ya está hecho.
Como les escribimos en el documento correspondiente a la actividad (en la sección "API DE FILMSTER") el endpoint que tienen que usar para crear una película es /api/v1/movies/, con un POST.

No tienen que tocar nada del server, tienen que modificar el cliente para que el service utilice ese endpoint. Fíjense que en el archivo api/movie.mjs se usa ese mismo endpoint, pero para obtener todas las películas. Ustedes tienen que usarlo pero hacer un POST en lugar de un GET.

Si se les complica avisen.
Saludos

[pabloSalva]

Hola lo que hicimos fue agregar en el archivo index.mjs dentro de la funcion saveMovie la siguiente linea:

movieService.create(movie)

y dentro del archivo api/movie.mjs lo siguiente:

function create(data){
    return fetch('/api/v1/movies', {
        method: 'POST', 
        body: JSON.stringify(data), 
        headers:{
          'Content-Type': 'application/json'
        }
      }).then(res => res.json())
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));

}
  
export default {
  getAll,create
}

agregamos tambien en el formulario del index.html lo siguiente:
action="http://localhost:3000/api/v1/movies" method="post"

aun no podemos crear la pelicula. me devuelve el error de la ruta: routes/movies.js "Error al crear película"

[RodrigoJacznik]

esta casi bien. El problema radica en que el formulario se esta enviando por default con el content-type: application/x-www-form-urlencoded y el server espera application/json

Lo que deberian hacer en client/src/index.mjs es:

document.querySelector('#modal form')
    .addEventListener('submit', function (e) {
        e.preventDefault();
        e.stopPropagation();
        
        // Código para enviar datos de la nueva película
        // 1. Obtener datos del formulario de peliculas.
        // 2. Eviar datos mediante services.
    })

[fedeglggg]

Hola, probamos lo que nos dijieron ayer y nos da el siguiente error en la consola:
Error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" movie.mjs:15:21 create http://localhost:3000/api/movie.mjs:15 Success: undefined
creamos un branch bug/#1 por si quieren verlo, en client\src\index.mjs:

function saveMovie() {
    const movie = {
        name: $refs.movieName.value,
        plot: $refs.moviePlot.value,
        year: new Date($refs.movieReleaseDate.value),
        country: $refs.movieCountry.value,
        runtime: +$refs.movieRuntime.value,
        language: $refs.movieLanguage.value,
        generes: parseCSV($refs.movieGeneres.value),
        writers: parseCSV($refs.movieWriters.value),
        directors: parseCSV($refs.movieDirectors.value)
    }
    movieService.create(movie)
    console.log(movie)
}

en client\src\api\movie.mjs:

function create(data){
  return fetch('/api/v1/movies', {
      method: 'POST', 
     body: data, 
      headers:{
        'Content-Type': 'application/json'
      }
    })
    .then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response));
}

[RodrigoJacznik]

Hola, cambia la propiedad name por title en saveMovie.

[fedeglggg]

ahora en client\src\index.mjs:

function saveMovie() {
    const movie = {
        title: $refs.movieName.value,
        plot: $refs.moviePlot.value,
        year: new Date($refs.movieReleaseDate.value),
        country: $refs.movieCountry.value,
        runtime: +$refs.movieRuntime.value,
        language: $refs.movieLanguage.value,
        generes: parseCSV($refs.movieGeneres.value),
        writers: parseCSV($refs.movieWriters.value),
        directors: parseCSV($refs.movieDirectors.value)
    }
    movieService.create(movie)
    console.log(movie)
}

esto nos sigue tirando el mismo error: Error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

Estubimos probando con new XMLHttpRequest() y aparentemente funciona bien con este metodo:

function create(data){
	var xhttp = new XMLHttpRequest();
	let d = new Date();
	let hour = d.getHours
    xhttp.open("POST", "http://localhost:3000/api/v1/movies",true);
    //xhttp.setRequestHeader("Content-type","application/json");
	xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
	var input = JSON.stringify({
		title: data.name,
		description: data.plot,
		year: data.year,
		runtime: data.runtime,
		country: data.country,
		language: data.language,
		genres: data.generes,
		directors: data.directors,
		writers: data.writers,
		createdAt: d,
		updatedAt: d
	})
		xhttp.send(input);
}

nos basamos en los errores que veiamos en la consola cuando trataba de hacer un post, sigo sin entender bien porque no funciona con el fetch, entendemos que es algo del matcheo de la db con la data en el post.

[RodrigoJacznik]

Hola, generes esta mal escrito también. Es genres. Eso debería solucionarlo.

fetch es la nueva api. XMLHttpRequest es la vieja api

[pabloSalva]

Hola, al final mandamos directamente la data y anduvo. es necesario/obligatorio hacerlo con fetch??

function create(data){
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://localhost:3000/api/v1/movies",true);
xhttp.setRequestHeader("Content-Type","application/json ; charset=UTF-8");
var input = JSON.stringify(data);
xhttp.send(input)
}

[ivanduva]

No es obligatorio, mientras que ande y no suban nada roto.
Lo que sí, es mejor usar fetch pero la actividad no se trata específicamente de eso. Si les interesa el tema pueden leer algo acá para ver las diferencias y qué ventaja tiene fetch:

https://developers.google.com/web/updates/2015/03/introduction-to-fetch
https://www.sitepoint.com/xmlhttprequest-vs-the-fetch-api-whats-best-for-ajax-in-2019/

Saludos!

[fedeglggg]

Lo pudimos hacer andar utilizando fetch, no queriamos terminarlo con xmlrequest por las ventajas que ustedes mencionan.
Nuestros errores eran que no utilizabamos JSON.stringify(data) en el body del fetch y que al mismo tiempo teniamos mal los nombres de los atributos de la pelicula (title description y genres). Con XMLHttpRequest() funcionaba porque igualabamos los nombres de los atributos en las tablas a los atributos de la pelicula, ejemplo: description: data.plot.
Gracias por las respuestas.
Saludos

[ivanduva]

Genial!