[메모] 이벤트 처리, 검색결과

const onClick = e => {
	const {
      code,
      className,
      value,
      dataset: { key: isLeft }
    } = e.target;
  
  if (className == 'arrow') {
  	do somthing
  }
  
  if (code == 'Enter') {
  	func(value);
  }
}

class SearchResult {
	$searchResult = null;
	data = null;
	onClick = null;

	images = new Set();

	isRequesting = false;

	constructor({ $target, initialData, onClick, onRandom }) {
		this.$searchResult = document.createElement('section');
		this.$searchResult.className = 'SearchResult';
		$target.appendChild(this.$searchResult);

		this.data = initialData;
		this.onClick = onClick;
		this.onRandom = onRandom;

		this.$searchResult.onclick = this.handleOnClick;

		this.render();
		// this.lazyLoad();
		console.log('[CREATED]', 'SearchResult', this);
	}

	handleOnClick = ({ target }) => {
		if (target.tagName == 'IMG') {
			console.log('SearchResult', target.dataset);
			this.onClick(this.data[target.dataset.key.split('_')[1]]);
		}
	};

	setState(nextData) {
		this.data = nextData;
		this.render();
		console.log('[UPDATED]', 'searchResult ', { nextData });
	}

	clearResults = () => {
		console.log('clearResults');
		this.$searchResult.innerHTML = '';
		// this.$searchResult.appendChild(this.createNoItem());
	};

	createItem = (cat, i) => {
		const article = document.createElement('article');
		article.classList.add('item');

		const img = new Image();
		img.src = window.cats.LAZY_IMG_SRC;
		img.dataset.src = cat.url;
		img.alt = cat.name;
		img.title = cat.name;
		img.dataset.key = `${cat.id}_${i}`;

		// 상태에 이미지 엘리먼트 등록 시킴
		this.images.add(img);

		article.appendChild(img);
		return article;
	};

	createNoItem = () => {
		const article = document.createElement('article');
		article.classList.add('NoItem');
		article.style = 'flex:1; justify-content: center; display: flex;';
		const h1 = document.createElement('h1');
		h1.innerText = '검색결과 없음';
		article.appendChild(h1);
		return article;
	};

	loadLazyImages = (entries, observer) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				// console.log('loadLazyImages', entry.target.dataset.src, 'fetch data');

				let lazyImage = entry.target;
				lazyImage.src = lazyImage.dataset.src;

				// set에 등록된 이미지 삭제하기
				this.images.delete(lazyImage);

				lazyImage.classList.remove('lazy');
				observer.unobserve(lazyImage);
			}
		});
		if (this.images.size <= 30 && !this.isRequesting) {
			this.onRandom();
		}
		// console.log(this.images.size);
		// console.log('entries', entries);
	};

	lazyOptions = {
		threshold: 0,
		trackVisibility: true,
		delay: 200,
	};

	lazyImageObserver = new IntersectionObserver(
		this.loadLazyImages,
		this.lazyOptions
	);

	registerImagesToLazyObserver = (lazyImages, lazyImageObserver) => {
		lazyImages.forEach(function (lazyImage) {
			lazyImageObserver.observe(lazyImage);
		});
	};

	lazyLoad = () => {
		this.registerImagesToLazyObserver([...this.images], this.lazyImageObserver);
	};

	setIsRequesting = (isRequesting) => {
		console.log('!! isRequesting', isRequesting);
		this.isRequesting = isRequesting;
	};

	// 검색결고 없음 안 사라짐
	// 검색했을 땐 생성자를 안 들려서 레이지 로딩 등록이 안 됨
	// 레이지 로딩 등록을 앞에서 해야 할 듯 App => onSearch  function에서
	//
	render() {
		if (this.data == undefined || this.data.length == 0)
			this.$searchResult.appendChild(this.createNoItem());
		else
			this.data.map((cat, i) =>
				this.$searchResult.appendChild(this.createItem(cat, i))
			);
		this.lazyLoad();
	}
}