mrvilla / collection Goto Github PK

    
           handleMovieData(movieData, bookData, albumData, comicData) { 
        
           	console.log('movieData: ', movieData); 
        
           	this.renderSearchFilmTemplate( 
        
           		movieData.Poster, 
        
           		movieData.Title, 
        
           		movieData.Rated, 
        
           		movieData.Genre, 
        
           		movieData.Runtime, 
        
           		movieData.Plot, 
        
           		movieData.Director, 
        
           		movieData.Writer, 
        
           		movieData.Actors, 
        
           		movieData.Year 
        
           	); 
        
           	console.log('bookData: ', bookData); 
        
           	this.renderSearchBookTemplate( 
        
           		bookData.items[0].volumeInfo.title, 
        
           		bookData.items[0].volumeInfo.imageLinks.thumbnail, 
        
           		bookData.items[0].volumeInfo.authors, 
        
           		bookData.items[0].volumeInfo.categories, 
        
           		bookData.items[0].volumeInfo.ratingsCount, 
        
           		bookData.items[0].volumeInfo.pageCount, 
        
           		bookData.items[0].volumeInfo.publishedDate 
        
           	); 
        
           	console.log('albumData: ', albumData); 
        
           	this.renderSearchAlbumTemplate( 
        
           		albumData.results[1].title, 
        
           		albumData.results[1].cover_image 
        
           		//albumData.results[0].artist, 
        
           	); 
        
           	console.log('comicData: ', comicData); 
        
           }

This should actually be the last method (except for the render method) in this class. Try and extract the respective render logic into its own place (class, function, ...) and import that. This way, this class does not have to know about the how (check out Law of Demeter, Single Responsibility Principle)...

Naming of submit handler

collection/src/app/shared/components/search/scripts/search.js

Line 38 in fc2f42d

handleClick = (evt, target) => {

Nice and shiny overall, but the naming is confusing. It's a submit handler but called handleClick

Error handling

collection/src/app/shared/data/externtalData.js

Line 4 in fc2f42d

.then((res) => res.json());

What about error handling here? If one of the fetches throws an error, the entire Promise.all fails also. This can be avoided :)

Low level ajax call

collection/src/app/shared/data/externtalData.js

Lines 18 to 33 in fc2f42d

    
           var data = null; 
        
           var xhr = new XMLHttpRequest(); 
        
           xhr.withCredentials = true; 
        
           xhr.addEventListener("readystatechange", function () { 
        
           	if (this.readyState === 4) { 
        
           		console.log('goodreads:', this); 
        
           	} 
        
           }); 
        
           xhr.open("GET", `https://www.goodreads.com/search/?key=OdApwh4IJ7zOqXbUspaow&q=${searchQuery}`); 
        
           xhr.setRequestHeader("cache-control", "no-cache"); 
        
           xhr.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:3000"); 
        
           xhr.send(data);

Are we doing anything with this? We don't need to go so low-level here, because fetch abstracts all of that away.

mrvilla / collection Goto Github PK

collection's Introduction

Hey all 👋

collection's People

Watchers

collection's Issues

Constructor should be at the top

Reduce class size by extracting respective render logic

Naming of submit handler

Error handling

Low level ajax call

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	handleMovieData(movieData, bookData, albumData, comicData) {
	console.log('movieData: ', movieData);
	this.renderSearchFilmTemplate(
	movieData.Poster,
	movieData.Title,
	movieData.Rated,
	movieData.Genre,
	movieData.Runtime,
	movieData.Plot,
	movieData.Director,
	movieData.Writer,
	movieData.Actors,
	movieData.Year
	);
	console.log('bookData: ', bookData);
	this.renderSearchBookTemplate(
	bookData.items[0].volumeInfo.title,
	bookData.items[0].volumeInfo.imageLinks.thumbnail,
	bookData.items[0].volumeInfo.authors,
	bookData.items[0].volumeInfo.categories,
	bookData.items[0].volumeInfo.ratingsCount,
	bookData.items[0].volumeInfo.pageCount,
	bookData.items[0].volumeInfo.publishedDate
	);
	console.log('albumData: ', albumData);
	this.renderSearchAlbumTemplate(
	albumData.results[1].title,
	albumData.results[1].cover_image
	//albumData.results[0].artist,
	);
	console.log('comicData: ', comicData);
	}

	var data = null;

	var xhr = new XMLHttpRequest();
	xhr.withCredentials = true;

	xhr.addEventListener("readystatechange", function () {
	if (this.readyState === 4) {
	console.log('goodreads:', this);
	}
	});

	xhr.open("GET", `https://www.goodreads.com/search/?key=OdApwh4IJ7zOqXbUspaow&q=${searchQuery}`);
	xhr.setRequestHeader("cache-control", "no-cache");
	xhr.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:3000");

	xhr.send(data);