No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Quedan menos de 24 hrs para aprender Ingl茅s, AI y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
0 Hrs
56 Min
59 Seg

Error: carga duplicada de datos

10/17
Recursos

Aportes 11

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Esta es mi estructura de carpetas y c贸digo:
.
Mi repositorio
.
Commit Actual

Aunque esta soluci贸n evita el problema del duplicado, es un poco no muy 贸ptimo porque cada vez que vuelves al home est谩s haciendo la petici贸n a la api. Si es una app con miles de usuarios al mismo tiempo conectados, debemos tener un super back que pueda soportar toda esta cantidad de peticiones al mismo tiempo.
.
Una manera tambi茅n muy sencilla es que el llamado a la api solo se haga una sola vez. 驴C贸mo podemos implementar esto? Hay varias maneras de hacerlo. Una muy sencilla, ser铆a, por ejemplo, preguntando si en nuestra section de categor铆as contamos con 鈥榟ijos鈥 nodos. Si no contamos con hijos nodos quiere decir que es la primera carga y por ende se debe ejecutar la llamada a la api, de lo contrario, s铆 ya hay hijos nodos no es necesario hacer la petici贸n.
.

const childrenCategoriesPreview = Array.from(categoriesPreviewList.children);
  if(!childrenCategoriesPreview.length){
    getTrendingMoviesPreview();
    getCategoriesMoviesPreview();
  }

.
Agregando este condicional evito el constante llamado a la api.

Un peque帽o aporte, nada relevante pero quiz谩s a alguien le interese jaja鈥

Si usaron el parametro de lenguaje de la API, para colocarlo en espa帽ol

params: {
        'api_key': API_KEY,
        'language': 'es-VE',
    },

Yo soy de Venezuela, por eso coloque el 鈥淰E鈥, si son de M茅xico por ejemplo seria 鈥渆s-MX鈥, de este modo la API arrojara los datos en el idioma deseado, y tambi茅n hace diferencia en las im谩genes de las pel铆culas, como saben en otros paises las im谩genes de las carteleras de las pel铆culas suelen variar, al igual que varia la tendencia de las pel铆culas.

Otro detalle es que cuando se traduce en la parte de categorias, la categor铆a de 鈥淪uspense鈥濃 no se traduce bien y queda igual. Si quieren arreglar esto pueden solucionarlo de la siguiente manera:

const categoryTitleText = document.createTextNode(`${
            category.name == 'Suspense' ? 'Suspenso' : category.name
        }`);

No se que tan buena practica sea, pero lo que hice desde el inicio fue utilizar los template literals para crear todo el html y de ahi hacer una unica inserci贸n al Dom con el innerHtml

 let moviesInHtml=`${movies.map(movie=>`
    <div class="movie-container">
        <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img"
        alt="${movie.original_title}" />
    </div>
    
    `).join("")}`
    
    trendingMoviesPreviewList.innerHTML=moviesInHtml

Hola! Yo solucione eso sin darme cuenta del error.
Solo puse el
getTrendingMoviesPreview();
getCategoriesPreview();
al final del navigation.js cuando estaba ordenando el codigo sin darme cuenta que se repetian antes de cambiarlo. y fue en esta clase que me entere que se repetian si no lo hubiera puesto al final.

lo solucione as铆:
categoriesPreviewList.innerHTML = 鈥樷;

No se si est谩 mal, pero antes de ver la clase solucion茅 el bug poniendo el innerHTML = 鈥溾 en la funcion de homePage en navigation.js

Yo lo hab铆a solucionado antes de ver esta clase, simplemente con una variable llamada isLoaded en el archivo navigation.js
驴Tiene desventajas mi soluci贸n?

Inicializo la variable como falsa y despu茅s la vuelvo true y de ah铆 ya no vuelve a cambiar y no actualiza ni duplica el contenido hasta que se recargue la p谩gina.
fn mainpage()

function mainPage(){
    console.log('Est谩s en la main page');
    hideFromDom('movie-page');
    //hideFromDom('trending-page');
    //hideFromDom('search-page');
    //hideFromDom('category-page');
    showElementsOnDom('main-page');

    if (!isLoaded) {
        getTrendingMoviesPreview('main-trending-movies');
        getLatestMoviesPreview('main-latest-movies');

        isLoaded = true; //evitar volver a cargar cuando se navega de vuelta.
    }
}

En este video veo que el profesor respondi贸 la segunda pregunta que hice en el video anterior: borrar las variables que estaban dentro de getTrendingMoviesPreview() y getCategoriresPreview() porque ya hab铆an sido establecidas en el archivo node.js.

estoy podr铆amos llamarla una SPA vanilla, ya que la navegacion de la pagina web se mantiene en el mismo URL

Consejo si es que han copiado el proyecto desde un inicio del profesor:

Respira y no te rindas, es d铆ficll acomodar la vista desktop pero si respiras por 5 segundos lo lograr谩s estilizar a tu manera.