@@ -0,0 +1,179 @@
import { useState, useEffect, useRef } from 'react';
// import { HideUntilLoaded } from 'react-animation';
import PropTypes from 'prop-types';
import Spinner from '../spinner/Spinner';
import ErrorMessage from '../errorMessage/ErrorMessage';
import MarvelServices from '../services/MarvelServices';
import './charlist.scss';
const CharList = (props) => {
const [charList, setCharList] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [newItemLoading, setNewItemLoading] = useState(false);
const [offset, setOffset] = useState(1548);
const [charEnded, setCharEnded] = useState(true);
console.log(offset);
const marvelService = new MarvelServices();
useEffect(() => {
console.log('updateChar');
updateChar();
}, []);
function handleScroll() {
if (newItemLoading) return;
if (charEnded) {
if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
onCharListLoading();
updateChar(offset);
}
}
}
useEffect(() => {
console.log('scroll');
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
console.log('unmount');
}
});
const updateChar = (offset) => {
onCharListLoading();
marvelService.getAllCharacters(offset)
.then(onCharListLoaded)
.catch(onError)
}
//loading new items button disable
const onCharListLoading = () => {
setNewItemLoading(true);
}
const onCharListLoaded = (newCharList) => {
let ended = true;
if (newCharList.length < 9) {
ended = false;
}
setCharList(charList => [...charList, ...newCharList]);
setLoading(loading => false);
setNewItemLoading(newItemLoading => false);
setOffset(offset => offset + 9);
setCharEnded(charEnded => ended);
}
const onError = () => {
//We use without callback, because we don't mind wich state we have had before
setError(true);
setLoading(false);
}
const myRefs = useRef([]);
// we use function declaration
function renderItems(arr) {
const items = arr.map((item, i) => {
let imgStyle = { 'objectFit': 'cover' };
if (item.thumbnail === 'http://i.annihil.us/u/prod/marvel/i/mg/b/40/image_not_available.jpg') {
imgStyle = { 'objectFit': 'unset' };
}
return (
// <HideUntilLoaded key={item.id} animationIn="bounceIn" durationOut={2000}>
<li tabIndex={0}
//instead of callback function setRef we will do all the stuff inside this map
ref={elem => myRefs.current[i] = elem}
className="char__item"
key={item.id}
onClick={() => props.onCharSelected(item.id, myRefs.current[i], myRefs.current)}
onFocus={() => props.onCharSelected(item.id, myRefs.current[i], myRefs.current)}>
<img src={item.thumbnail} alt={item.name} style={imgStyle} />
<div className="char__name">{item.name}</div>
</li>
// </HideUntilLoaded>
)
});
// А эта конструкция вынесена для центровки спиннера/ошибки
return (
<ul className="char__grid">
{items}
</ul>
)
}
const items = renderItems(charList);
const errorMessage = error ? <ErrorMessage /> : null;
const spinner = loading ? <Spinner /> : null;
const content = !(loading || error) ? items : null;
// let name = charEnded ? 'There are no items to load' : 'load more';
// const styleField = {
// 'minWidth': '300px',
// 'color': 'white',
// 'filter': 'grayscale(.5)'
// }
return (
<div className="char__list">
{errorMessage}
{spinner}
{content}
{/* <button className="button button__main button__long"
disabled={newItemLoading}
style={{'display': charEnded ? 'none' : 'block'}}
// style={charEnded ? styleField : null}
onClick={() => updateChar(offset)}>
<div className="inner">{name}</div>
</button> */}
</div>
)
}
CharList.propTypes = {
onCharSelected: PropTypes.func.isRequired
}
export default CharList;
DavidP1983 created this gist