From 111cc430db08564a1d6e7139c956226aceef4e8d Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 10 Aug 2022 22:08:49 +0300
Subject: [PATCH] Refactoring duplicates onViewStyleChange

---
 src/view/components/GenresItemsContainer.tsx |  2 +-
 src/view/components/ItemsContainer.tsx       |  9 ++++--
 src/view/components/Pagination.tsx           |  5 +---
 src/view/components/SelectView.tsx           |  6 ++--
 src/view/movies/CollectionsView.tsx          | 26 ++----------------
 src/view/movies/FavoritesView.tsx            | 26 ++----------------
 src/view/movies/MoviesView.tsx               | 29 ++------------------
 src/view/movies/SuggestionsView.tsx          |  4 +--
 src/view/movies/TrailersView.tsx             | 23 +---------------
 9 files changed, 19 insertions(+), 111 deletions(-)

diff --git a/src/view/components/GenresItemsContainer.tsx b/src/view/components/GenresItemsContainer.tsx
index c6c608aab6..cb003ba053 100644
--- a/src/view/components/GenresItemsContainer.tsx
+++ b/src/view/components/GenresItemsContainer.tsx
@@ -156,7 +156,7 @@ const GenresItemsContainer: FunctionComponent<GenresItemsContainerProps> = ({ to
 
     return (
         <div ref={element}>
-            <div id='items'></div>
+            <div id='items'/>
         </div>
     );
 };
diff --git a/src/view/components/ItemsContainer.tsx b/src/view/components/ItemsContainer.tsx
index ef3ef01fd6..1d389eda41 100644
--- a/src/view/components/ItemsContainer.tsx
+++ b/src/view/components/ItemsContainer.tsx
@@ -18,10 +18,11 @@ type ItemsContainerProps = {
 
 const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentViewStyle, query, items = [], noItemsMessage }: ItemsContainerProps) => {
     const element = useRef<HTMLDivElement>(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<ItemsContainerProps> = ({ 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 (
         <div ref={element}>
             <ItemsContainerElement
                 id=''
-                className='itemsContainer vertical-wrap centered padded-left padded-right'
+                className={`itemsContainer ${cssClass} centered padded-left padded-right`}
             />
         </div>
     );
diff --git a/src/view/components/Pagination.tsx b/src/view/components/Pagination.tsx
index e315e53f31..bdb1fecfd5 100644
--- a/src/view/components/Pagination.tsx
+++ b/src/view/components/Pagination.tsx
@@ -54,11 +54,8 @@ const Pagination: FunctionComponent<PaginationProps> = ({ query, itemsResult = {
 
     return (
         <div ref={element}>
-            <div
-                className='paging'
-            />
+            <div className='paging' />
         </div>
-
     );
 };
 
diff --git a/src/view/components/SelectView.tsx b/src/view/components/SelectView.tsx
index 8c74f13ab4..eb857ca120 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<SelectViewProps> = ({ getCurrentViewStyle, savedViewKey, query, onViewStyleChange, reloadItems }: SelectViewProps) => {
+const SelectView: FunctionComponent<SelectViewProps> = ({ getCurrentViewStyle, savedViewKey, query, reloadItems }: SelectViewProps) => {
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -25,10 +24,9 @@ const SelectView: FunctionComponent<SelectViewProps> = ({ 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 (
         <div ref={element}>
diff --git a/src/view/movies/CollectionsView.tsx b/src/view/movies/CollectionsView.tsx
index 17ddbe4d17..612df7deef 100644
--- a/src/view/movies/CollectionsView.tsx
+++ b/src/view/movies/CollectionsView.tsx
@@ -73,38 +73,16 @@ const CollectionsView: FunctionComponent<IProps> = ({ 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 (
         <div ref={element}>
             <div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
                 <Pagination itemsResult= {itemsResult} query={query} reloadItems={reloadItems} />
 
-                <SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} onViewStyleChange={onViewStyleChange} reloadItems={reloadItems} />
+                <SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} reloadItems={reloadItems} />
                 <Sort sortMenuOptions={SortMenuOptions} query={query} savedQueryKey={savedQueryKey} reloadItems={reloadItems} />
                 <NewCollection />
 
diff --git a/src/view/movies/FavoritesView.tsx b/src/view/movies/FavoritesView.tsx
index 81388f2c1c..713b02376e 100644
--- a/src/view/movies/FavoritesView.tsx
+++ b/src/view/movies/FavoritesView.tsx
@@ -96,38 +96,16 @@ const FavoritesView: FunctionComponent<IProps> = ({ 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 (
         <div ref={element}>
             <div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
                 <Pagination itemsResult= {itemsResult} query={query} reloadItems={reloadItems} />
 
-                <SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} onViewStyleChange={onViewStyleChange} reloadItems={reloadItems} />
+                <SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} reloadItems={reloadItems} />
                 <Sort sortMenuOptions={SortMenuOptions} query={query} savedQueryKey={savedQueryKey} reloadItems={reloadItems} />
                 <Filter query={query} reloadItems={reloadItems} />
 
diff --git a/src/view/movies/MoviesView.tsx b/src/view/movies/MoviesView.tsx
index 0db029c6e3..e0fee74a5a 100644
--- a/src/view/movies/MoviesView.tsx
+++ b/src/view/movies/MoviesView.tsx
@@ -97,34 +97,9 @@ const MoviesView: FunctionComponent<IProps> = ({ 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 (
         <div ref={element}>
@@ -133,7 +108,7 @@ const MoviesView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
 
                 <Shuffle itemsResult= {itemsResult} topParentId={topParentId} />
 
-                <SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} onViewStyleChange={onViewStyleChange} reloadItems={reloadItems} />
+                <SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} reloadItems={reloadItems} />
                 <Sort sortMenuOptions={SortMenuOptions} query={query} savedQueryKey={savedQueryKey} reloadItems={reloadItems} />
                 <Filter query={query} reloadItems={reloadItems} />
 
diff --git a/src/view/movies/SuggestionsView.tsx b/src/view/movies/SuggestionsView.tsx
index 10d965570b..7cecd56167 100644
--- a/src/view/movies/SuggestionsView.tsx
+++ b/src/view/movies/SuggestionsView.tsx
@@ -97,8 +97,8 @@ const SuggestionsView: FunctionComponent<IProps> = (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 f856b142e2..e776c01174 100644
--- a/src/view/movies/TrailersView.tsx
+++ b/src/view/movies/TrailersView.tsx
@@ -83,30 +83,9 @@ const TrailersView: FunctionComponent<IProps> = ({ 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 (
         <div ref={element}>