import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import fuzzy from "fuzzy";
import InfiniteScroll from "react-infinite-scroll-component";
import ListFilter from "./filter";
import ExplorerOptions from "./explorerOptions";
import Poster from "./poster";
import { KeyboardNavigation } from "./keyboard";
import Loader from "../loader/loader";
const ListPosters = ({
data,
exploreFetchOptions,
exploreOptions,
loading,
onClick,
onDoubleClick,
onKeyEnter,
params,
placeHolder,
selectedImdbId,
type,
}) => {
const [list, setList] = useState([]);
const [filteredList, setFilteredList] = useState([]);
const [filter, setFilter] = useState("");
useEffect(() => {
let l = [];
data.forEach((e) => {
l.push({
imdbId: e.imdb_id,
posterUrl: e.poster_url,
title: e.title,
});
});
setList(l);
}, [data]);
useEffect(() => {
if (filter !== "" && filter.length >= 3) {
setFilteredList(list.filter((e) => fuzzy.test(filter, e.title)));
} else {
setFilteredList(list);
}
}, [filter, list]);
if (loading) {
return ;
}
// Chose when to display filter / explore options
let displayFilter = true;
if (
(params &&
params.category &&
params.category !== "" &&
params.source &&
params.source !== "") ||
list.length === 0
) {
displayFilter = false;
}
let displayExplorerOptions = false;
if (list.length !== 0) {
displayExplorerOptions = !displayFilter;
}
return (
);
};
ListPosters.propTypes = {
data: PropTypes.object,
onClick: PropTypes.func,
onDoubleClick: PropTypes.func,
onKeyEnter: PropTypes.func,
selectedImdbId: PropTypes.string,
loading: PropTypes.bool.isRequired,
params: PropTypes.object.isRequired,
exploreOptions: PropTypes.object,
type: PropTypes.string.isRequired,
placeHolder: PropTypes.string.isRequired,
exploreFetchOptions: PropTypes.func,
};
export default ListPosters;
const Posters = ({
list,
onKeyEnter,
selectedImdbId,
selectPoster,
onDoubleClick,
}) => {
const addMoreCount = 20;
const [size, setSize] = useState(0);
const updateSize = (newSize, maxSize) => {
setSize(Math.min(newSize, maxSize));
};
useEffect(() => {
updateSize(size + addMoreCount, list.length);
}, [list]); // eslint-disable-line react-hooks/exhaustive-deps
const loadMore = () => {
updateSize(size + addMoreCount, list.length);
};
if (list.length === 0) {
return (
No result
);
}
return (
}
>
{list.slice(0, size).map((el, index) => {
const imdbId = el.imdbId;
return (
selectPoster(imdbId)}
onDoubleClick={() => onDoubleClick(imdbId)}
/>
);
}, this)}
);
};
Posters.propTypes = {
list: PropTypes.array.isRequired,
selectedImdbId: PropTypes.string,
onDoubleClick: PropTypes.func,
onKeyEnter: PropTypes.func,
selectPoster: PropTypes.func,
};