import React, { useState, useEffect, useCallback } from "react" import PropTypes from "prop-types" import { OrderedMap, Map } from "immutable" import fuzzy from "fuzzy"; import InfiniteScroll from "react-infinite-scroll-component"; import ListFilter from "./filter" import ExplorerOptions from "./explorerOptions" import Poster from "./poster" import Loader from "../loader/loader" const ListPosters = (props) => { if (props.loading) { return (); } let elmts = props.data; const listSize = elmts !== undefined ? elmts.size : 0; // Filter the list of elements if (props.filter !== "") { elmts = elmts.filter((v) => fuzzy.test(props.filter, v.get("title"))); } else { elmts = elmts.slice(0, listSize.items); } // Chose when to display filter / explore options let displayFilter = true; if ((props.params && props.params.category && props.params.category !== "" && props.params.source && props.params.source !== "") || (listSize === 0)) { displayFilter = false; } let displayExplorerOptions = false; if (listSize !== 0) { displayExplorerOptions = !displayFilter; } return (
{displayFilter && }
); } ListPosters.propTypes = { data: PropTypes.instanceOf(OrderedMap), onClick: PropTypes.func, onDoubleClick: PropTypes.func, onKeyEnter: PropTypes.func, selectedImdbId: PropTypes.string, loading: PropTypes.bool.isRequired, params: PropTypes.object.isRequired, exploreOptions: PropTypes.instanceOf(Map), type: PropTypes.string.isRequired, placeHolder: PropTypes.string.isRequired, updateFilter: PropTypes.func.isRequired, filter: PropTypes.string, }; export default ListPosters; const Posters = (props) => { const addMoreCount = 20; const [size, setSize] = useState(0); const [postersPerRow, setPostersPerRow] = useState(0); const [posterHeight, setPosterHeight] = useState(0); const loadMore = () => { if ((size === props.elmts.size)) { return } const newSize = (((size + addMoreCount) >= props.elmts.size) ? props.elmts.size : size + addMoreCount); setSize(newSize); } useEffect(() => { loadMore() }, [props.elmts.size]); const move = (event) => { // Only run the function if nothing else if actively focused if (document.activeElement.tagName.toLowerCase() !== "body") { return } let diff = 0; let moveFocus = 0; switch (event.key) { case "Enter": props.onKeyEnter(props.selectedImdbId); return; case "l": diff = 1; break; case "h": diff = -1; break; case "k": diff = -1*postersPerRow; moveFocus = -1*posterHeight; break; case "j": diff = postersPerRow; moveFocus = posterHeight; break; default: return; } // Get the index of the currently selected item const idx = props.elmts.keySeq().findIndex(k => k === props.selectedImdbId); var newIdx = idx + diff; // Handle edge cases if (newIdx > props.elmts.size -1) { newIdx = props.elmts.size -1; } else if (newIdx < 0) { newIdx = 0; } // Get the imdbID of the newly selected item var selectedImdb = Object.keys(props.elmts.toJS())[newIdx]; // Select the movie props.selectPoster(selectedImdb); if (moveFocus !== 0) { window.scrollBy(0, moveFocus); } } const posterCount = useCallback(node => { if (node === null) { return } const parentWidth = node.getBoundingClientRect().width; const childContainer = node.getElementsByClassName("img-thumbnail"); let childWidth = 0; let posterHeight = 0; if ((childContainer !== null) && (childContainer.item(0) !== null)) { const child = childContainer.item(0); childWidth = child.getBoundingClientRect().width + child.getBoundingClientRect().left; posterHeight = child.getBoundingClientRect().height; } let numberPerRow = (childWidth >= parentWidth) ? 1 : Math.floor(parentWidth/childWidth); setPostersPerRow(numberPerRow); setPosterHeight(posterHeight); }) useEffect(() => { document.onkeypress = move; return () => { document.onkeypress = null; } }, [move]) if (props.elmts.size === 0) { return (

No result

); } return (
} > {props.elmts.slice(0, size).toIndexedSeq().map(function(el, index) { const imdbId = el.get("imdb_id"); const selected = (imdbId === props.selectedImdbId) ? true : false; return ( props.selectPoster(imdbId)} onDoubleClick={() => props.onDoubleClick(imdbId)} /> ) } ,this)}
); } Posters.propTypes = { elmts: PropTypes.instanceOf(OrderedMap), selectedImdbId: PropTypes.string, loading: PropTypes.bool.isRequired, onDoubleClick: PropTypes.func, onKeyEnter: PropTypes.func, selectPoster: PropTypes.func, };