diff --git a/src/view/components/GenresItemsContainer.tsx b/src/view/components/GenresItemsContainer.tsx index c6c608aab..cb003ba05 100644 --- a/src/view/components/GenresItemsContainer.tsx +++ b/src/view/components/GenresItemsContainer.tsx @@ -156,7 +156,7 @@ const GenresItemsContainer: FunctionComponent = ({ to return (
-
+
); }; diff --git a/src/view/components/ItemsContainer.tsx b/src/view/components/ItemsContainer.tsx index ef3ef01fd..1d389eda4 100644 --- a/src/view/components/ItemsContainer.tsx +++ b/src/view/components/ItemsContainer.tsx @@ -18,10 +18,11 @@ type ItemsContainerProps = { const ItemsContainer: FunctionComponent = ({ getCurrentViewStyle, query, items = [], noItemsMessage }: ItemsContainerProps) => { const element = useRef(null); + const viewStyle = getCurrentViewStyle(); useEffect(() => { let html; - const viewStyle = getCurrentViewStyle(); + if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml(items, { items: items, @@ -95,13 +96,15 @@ const ItemsContainer: FunctionComponent = ({ getCurrentView const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement; itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); - }, [getCurrentViewStyle, query.SortBy, items, noItemsMessage]); + }, [query.SortBy, items, noItemsMessage, viewStyle]); + + const cssClass = viewStyle == 'List' ? 'vertical-list' : 'vertical-wrap'; return (
); diff --git a/src/view/components/Pagination.tsx b/src/view/components/Pagination.tsx index e315e53f3..bdb1fecfd 100644 --- a/src/view/components/Pagination.tsx +++ b/src/view/components/Pagination.tsx @@ -54,11 +54,8 @@ const Pagination: FunctionComponent = ({ query, itemsResult = { return (
-
+
- ); }; diff --git a/src/view/components/SelectView.tsx b/src/view/components/SelectView.tsx index 8c74f13ab..eb857ca12 100644 --- a/src/view/components/SelectView.tsx +++ b/src/view/components/SelectView.tsx @@ -9,11 +9,10 @@ type SelectViewProps = { getCurrentViewStyle: () => string; query: IQuery; savedViewKey: string; - onViewStyleChange: () => void; reloadItems: () => void; } -const SelectView: FunctionComponent = ({ getCurrentViewStyle, savedViewKey, query, onViewStyleChange, reloadItems }: SelectViewProps) => { +const SelectView: FunctionComponent = ({ getCurrentViewStyle, savedViewKey, query, reloadItems }: SelectViewProps) => { const element = useRef(null); useEffect(() => { @@ -25,10 +24,9 @@ const SelectView: FunctionComponent = ({ getCurrentViewStyle, s const viewStyle = (e as CustomEvent).detail.viewStyle; userSettings.set(savedViewKey, viewStyle, false); query.StartIndex = 0; - onViewStyleChange(); reloadItems(); }); - }, [getCurrentViewStyle, onViewStyleChange, query, reloadItems, savedViewKey]); + }, [getCurrentViewStyle, query, reloadItems, savedViewKey]); return (
diff --git a/src/view/movies/CollectionsView.tsx b/src/view/movies/CollectionsView.tsx index 17ddbe4d1..612df7dee 100644 --- a/src/view/movies/CollectionsView.tsx +++ b/src/view/movies/CollectionsView.tsx @@ -73,38 +73,16 @@ const CollectionsView: FunctionComponent = ({ topParentId }: IProps) => }); }, [query]); - const onViewStyleChange = useCallback(() => { - const page = element.current; - - if (!page) { - console.error('Unexpected null reference'); - return; - } - - const viewStyle = getCurrentViewStyle(); - const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement; - if (viewStyle == 'List') { - itemsContainer.classList.add('vertical-list'); - itemsContainer.classList.remove('vertical-wrap'); - } else { - itemsContainer.classList.remove('vertical-list'); - itemsContainer.classList.add('vertical-wrap'); - } - - itemsContainer.innerHTML = ''; - }, [getCurrentViewStyle]); - useEffect(() => { - onViewStyleChange(); reloadItems(); - }, [onViewStyleChange, reloadItems]); + }, [reloadItems]); return (
- + diff --git a/src/view/movies/FavoritesView.tsx b/src/view/movies/FavoritesView.tsx index 81388f2c1..713b02376 100644 --- a/src/view/movies/FavoritesView.tsx +++ b/src/view/movies/FavoritesView.tsx @@ -96,38 +96,16 @@ const FavoritesView: FunctionComponent = ({ topParentId }: IProps) => { }); }, [query]); - const onViewStyleChange = useCallback(() => { - const page = element.current; - - if (!page) { - console.error('Unexpected null reference'); - return; - } - - const viewStyle = getCurrentViewStyle(); - const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement; - if (viewStyle == 'List') { - itemsContainer.classList.add('vertical-list'); - itemsContainer.classList.remove('vertical-wrap'); - } else { - itemsContainer.classList.remove('vertical-list'); - itemsContainer.classList.add('vertical-wrap'); - } - - itemsContainer.innerHTML = ''; - }, [getCurrentViewStyle]); - useEffect(() => { - onViewStyleChange(); reloadItems(); - }, [onViewStyleChange, query, reloadItems]); + }, [query, reloadItems]); return (
- + diff --git a/src/view/movies/MoviesView.tsx b/src/view/movies/MoviesView.tsx index 0db029c6e..e0fee74a5 100644 --- a/src/view/movies/MoviesView.tsx +++ b/src/view/movies/MoviesView.tsx @@ -97,34 +97,9 @@ const MoviesView: FunctionComponent = ({ topParentId }: IProps) => { }); }, [query]); - const onViewStyleChange = useCallback(() => { - const page = element.current; - - if (!page) { - console.error('Unexpected null reference'); - return; - } - - const viewStyle = getCurrentViewStyle(); - const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement; - if (viewStyle == 'List') { - itemsContainer.classList.add('vertical-list'); - itemsContainer.classList.remove('vertical-wrap'); - } else { - itemsContainer.classList.remove('vertical-list'); - itemsContainer.classList.add('vertical-wrap'); - } - - itemsContainer.innerHTML = ''; - }, [getCurrentViewStyle]); - - useEffect(() => { - onViewStyleChange(); - }, [onViewStyleChange]); - useEffect(() => { reloadItems(); - }, [onViewStyleChange, query, reloadItems]); + }, [query, reloadItems]); return (
@@ -133,7 +108,7 @@ const MoviesView: FunctionComponent = ({ topParentId }: IProps) => { - + diff --git a/src/view/movies/SuggestionsView.tsx b/src/view/movies/SuggestionsView.tsx index 10d965570..7cecd5616 100644 --- a/src/view/movies/SuggestionsView.tsx +++ b/src/view/movies/SuggestionsView.tsx @@ -97,8 +97,8 @@ const SuggestionsView: FunctionComponent = (props: IProps) => { ImageTypeLimit: 1, EnableImageTypes: 'Primary,Backdrop,Banner,Thumb' }); - window.ApiClient.getJSON(url).then(recommendations => { - setRecommendations(recommendations); + window.ApiClient.getJSON(url).then(result => { + setRecommendations(result); // FIXME: Wait for all sections to load autoFocus(page); diff --git a/src/view/movies/TrailersView.tsx b/src/view/movies/TrailersView.tsx index f856b142e..e776c0117 100644 --- a/src/view/movies/TrailersView.tsx +++ b/src/view/movies/TrailersView.tsx @@ -83,30 +83,9 @@ const TrailersView: FunctionComponent = ({ topParentId }: IProps) => { }); }, [query]); - const onViewStyleChange = useCallback(() => { - const page = element.current; - - if (!page) { - console.error('Unexpected null reference'); - return; - } - const viewStyle = getCurrentViewStyle(); - const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement; - if (viewStyle == 'List') { - itemsContainer.classList.add('vertical-list'); - itemsContainer.classList.remove('vertical-wrap'); - } else { - itemsContainer.classList.remove('vertical-list'); - itemsContainer.classList.add('vertical-wrap'); - } - - itemsContainer.innerHTML = ''; - }, [getCurrentViewStyle]); - useEffect(() => { - onViewStyleChange(); reloadItems(); - }, [onViewStyleChange, query, reloadItems]); + }, [query, reloadItems]); return (