apply suggestion

src/view/components/AlphaPickerContainer.tsx

@@ -1,14 +1,13 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import AlphaPicker from '../../components/alphaPicker/alphaPicker';
-import { AlphaPickerValueI, QueryI } from './interface';
+import { QueryI } from './interface';
 
-interface AlphaPickerContainerI {
+interface AlphaPickerContainerProps {
-    getQuery: () => QueryI
+    getQuery: () => QueryI;
-    setAlphaPickerValue: React.Dispatch<AlphaPickerValueI>;
+    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
-    setStartIndex: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const AlphaPickerContainer: FC<AlphaPickerContainerI> = ({ getQuery, setAlphaPickerValue, setStartIndex }) => {
+const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ getQuery, setQuery }) => {
     const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
     const element = useRef<HTMLDivElement>(null);
     const query = getQuery();
@@ -23,9 +22,9 @@ const AlphaPickerContainer: FC<AlphaPickerContainerI> = ({ getQuery, setAlphaPic
         } else {
             updatedValue = {NameStartsWith: newValue};
         }
-        setAlphaPickerValue(updatedValue);
+
-        setStartIndex(0);
+        setQuery({StartIndex: 0, ...updatedValue});
-    }, [setStartIndex, setAlphaPickerValue]);
+    }, [setQuery]);
 
     useEffect(() => {
         const alphaPickerElement = element.current;

src/view/components/Filter.tsx

@@ -1,24 +1,26 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
-import { FiltersI } from './interface';
+import { FiltersI, QueryI } from './interface';
 
-interface FilterI {
+interface FilterProps {
     topParentId?: string | null;
     getItemTypes: () => string[];
     getFilters: () => FiltersI;
     getSettingsKey: () => string;
     getFilterMenuOptions: () => Record<string, never>;
     getVisibleFilters: () => string[];
+    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
     reloadItems: () => void;
 }
 
-const Filter: FC<FilterI> = ({
+const Filter: FC<FilterProps> = ({
     topParentId,
     getItemTypes,
     getSettingsKey,
     getFilters,
     getVisibleFilters,
     getFilterMenuOptions,
+    setQuery,
     reloadItems
 }) => {
     const element = useRef<HTMLDivElement>(null);
@@ -35,10 +37,11 @@ const Filter: FC<FilterI> = ({
                 serverId: window.ApiClient.serverId(),
                 filterMenuOptions: getFilterMenuOptions()
             }).then(() => {
+                setQuery({StartIndex: 0});
                 reloadItems();
             });
         });
-    }, [getSettingsKey, getFilters, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, reloadItems]);
+    }, [getSettingsKey, getFilters, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setQuery, reloadItems]);
 
     useEffect(() => {
         const btnFilter = element.current?.querySelector('.btnFilter');

src/view/components/GenresItemsContainer.tsx

@@ -11,13 +11,13 @@ import layoutManager from '../../components/layoutManager';
 import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
 import globalize from '../../scripts/globalize';
 
-interface GenresItemsContainerI {
+interface GenresItemsContainerProps {
     topParentId?: string | null;
     getCurrentViewStyle: () => string;
     itemsResult?: BaseItemDtoQueryResult;
 }
 
-const GenresItemsContainer: FC<GenresItemsContainerI> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => {
+const GenresItemsContainer: FC<GenresItemsContainerProps> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const enableScrollX = useCallback(() => {

src/view/components/ItemsContainer.tsx

@@ -50,7 +50,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
         const cardOptions: CardOptionsI = {
             shape: shape,
             showTitle: viewsettings.showTitle,
-            showYear: viewsettings.showTitle,
+            showYear: viewsettings.showYear,
             cardLayout: viewsettings.cardLayout,
             centerText: true,
             context: getContext(),
@@ -66,7 +66,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
         cardOptions.items = items;
 
         return cardOptions;
-    }, [getContext, items, viewsettings.cardLayout, viewsettings.imageType, viewsettings.showTitle]);
+    }, [getContext, items, viewsettings.cardLayout, viewsettings.imageType, viewsettings.showTitle, viewsettings.showYear]);
 
     const getItemsHtml = useCallback(() => {
         const settings = getViewSettings();
@@ -82,8 +82,6 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
         }
 
         if (!items?.length) {
-            html = '';
-
             html += '<div class="noItemsMessage centerMessage">';
             html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
             html += '<p>' + globalize.translate(noItemsMessage) + '</p>';

src/view/components/Pagination.tsx

@@ -3,16 +3,18 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
 import globalize from '../../scripts/globalize';
 import * as userSettings from '../../scripts/settings/userSettings';
+import { QueryI } from './interface';
 
-interface PaginationI {
+interface PaginationProps {
-    startIndex: number
+    query: QueryI;
-    setStartIndex: React.Dispatch<React.SetStateAction<number>>;
+    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
     itemsResult?: BaseItemDtoQueryResult;
 }
 
-const Pagination: FC<PaginationI> = ({ startIndex, setStartIndex, itemsResult = {} }) => {
+const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} }) => {
     const limit = userSettings.libraryPageSize(undefined);
     const totalRecordCount = itemsResult.TotalRecordCount || 0;
+    const startIndex = query.StartIndex || 0;
     const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
     const showControls = limit < totalRecordCount;
     const element = useRef<HTMLDivElement>(null);
@@ -20,16 +22,16 @@ const Pagination: FC<PaginationI> = ({ startIndex, setStartIndex, itemsResult =
     const onNextPageClick = useCallback(() => {
         if (limit > 0) {
             const newIndex = startIndex + limit;
-            setStartIndex(newIndex);
+            setQuery({StartIndex: newIndex});
         }
-    }, [limit, setStartIndex, startIndex]);
+    }, [limit, setQuery, startIndex]);
 
     const onPreviousPageClick = useCallback(() => {
         if (limit > 0) {
             const newIndex = Math.max(0, startIndex - limit);
-            setStartIndex(newIndex);
+            setQuery({StartIndex: newIndex});
         }
-    }, [limit, setStartIndex, startIndex]);
+    }, [limit, setQuery, startIndex]);
 
     useEffect(() => {
         const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;

src/view/components/RecommendationContainer.tsx

@@ -5,13 +5,13 @@ import globalize from '../../scripts/globalize';
 import escapeHTML from 'escape-html';
 import SectionContainer from './SectionContainer';
 
-interface RecommendationContainerI {
+interface RecommendationContainerProps {
     getPortraitShape: () => string;
     enableScrollX: () => boolean;
     recommendation?: RecommendationDto;
 }
 
-const RecommendationContainer: FC<RecommendationContainerI> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
+const RecommendationContainer: FC<RecommendationContainerProps> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
     let title = '';
 
     switch (recommendation.RecommendationType) {

src/view/components/SectionContainer.tsx

@@ -8,14 +8,14 @@ import ItemsContainerElement from '../../elements/ItemsContainerElement';
 import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
 import { CardOptionsI } from './interface';
 
-interface SectionContainerI {
+interface SectionContainerProps {
     sectionTitle: string;
     enableScrollX: () => boolean;
     items?: BaseItemDto[];
     cardOptions?: CardOptionsI;
 }
 
-const SectionContainer: FC<SectionContainerI> = ({
+const SectionContainer: FC<SectionContainerProps> = ({
     sectionTitle,
     enableScrollX,
     items = [],

src/view/components/SelectView.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
+import { QueryI } from './interface';
 
-interface SelectViewI {
+interface SelectViewProps {
     getSettingsKey: () => string;
     getVisibleViewSettings: () => string[];
     getViewSettings: () => {
@@ -11,10 +12,11 @@ interface SelectViewI {
         imageType: string;
         viewType: string;
     };
+    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
     reloadItems: () => void;
 }
 
-const SelectView: FC<SelectViewI> = ({ getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
+const SelectView: FC<SelectViewProps> = ({ setQuery, getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const showViewSettingsMenu = useCallback(() => {
@@ -25,10 +27,11 @@ const SelectView: FC<SelectViewI> = ({ getSettingsKey, getVisibleViewSettings, g
                 settings: getViewSettings(),
                 visibleSettings: getVisibleViewSettings()
             }).then(() => {
+                setQuery({StartIndex: 0});
                 reloadItems();
             });
         });
-    }, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems]);
+    }, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems, setQuery]);
 
     useEffect(() => {
         const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;

src/view/components/Shuffle.tsx

@@ -4,12 +4,12 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import { playbackManager } from '../../components/playback/playbackmanager';
 import IconButtonElement from '../../elements/IconButtonElement';
 
-interface ShuffleI {
+interface ShuffleProps {
     itemsResult?: BaseItemDtoQueryResult;
     topParentId: string | null;
 }
 
-const Shuffle: FC<ShuffleI> = ({ itemsResult = {}, topParentId }) => {
+const Shuffle: FC<ShuffleProps> = ({ itemsResult = {}, topParentId }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const shuffle = useCallback(() => {

src/view/components/Sort.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
+import { QueryI } from './interface';
 
-interface SortI {
+interface SortProps {
     getSortMenuOptions: () => {
         name: string;
         value: string;
@@ -11,10 +12,11 @@ interface SortI {
         sortOrder: string;
     }
     getSettingsKey: () => string;
+    setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
     reloadItems: () => void;
 }
 
-const Sort: FC<SortI> = ({ getSortMenuOptions, getSortValues, getSettingsKey, reloadItems }) => {
+const Sort: FC<SortProps> = ({ getSortMenuOptions, getSortValues, getSettingsKey, setQuery, reloadItems }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const showSortMenu = useCallback(() => {
@@ -25,10 +27,11 @@ const Sort: FC<SortI> = ({ getSortMenuOptions, getSortValues, getSettingsKey, re
                 settings: getSortValues(),
                 sortOptions: getSortMenuOptions()
             }).then(() => {
+                setQuery({StartIndex: 0});
                 reloadItems();
             });
         });
-    }, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems]);
+    }, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems, setQuery]);
 
     useEffect(() => {
         const btnSort = element.current?.querySelector('.btnSort');

src/view/components/ViewItemsContainer.tsx

@@ -1,5 +1,5 @@
 import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 
 import loading from '../../components/loading/loading';
 import * as userSettings from '../../scripts/settings/userSettings';
@@ -12,10 +12,9 @@ import Shuffle from './Shuffle';
 import Sort from './Sort';
 import NewCollection from './NewCollection';
 import globalize from '../../scripts/globalize';
-import layoutManager from '../../components/layoutManager';
+import { QueryI } from './interface';
-import { AlphaPickerValueI, QueryI } from './interface';
 
-interface ViewItemsContainerI {
+interface ViewItemsContainerProps {
     topParentId: string | null;
     isBtnShuffleEnabled?: boolean;
     isBtnFilterEnabled?: boolean;
@@ -26,7 +25,7 @@ interface ViewItemsContainerI {
     getNoItemsMessage: () => string;
 }
 
-const ViewItemsContainer: FC<ViewItemsContainerI> = ({
+const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
     topParentId,
     isBtnShuffleEnabled = false,
     isBtnFilterEnabled = true,
@@ -37,15 +36,12 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
     getNoItemsMessage
 }) => {
     const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
-    const [ startIndex, setStartIndex ] = useState<number>(0);
+    const [ query, setQuery ] = useState<QueryI>({
-    const [ alphaPickerValue, setAlphaPickerValue ] = useState<AlphaPickerValueI>({});
+        StartIndex: 0
+    });
 
     const element = useRef<HTMLDivElement>(null);
 
-    const queryAlphaPickerValue = useMemo(() => ({
-        ...alphaPickerValue
-    }), [alphaPickerValue]);
-
     const getSettingsKey = useCallback(() => {
         return `${topParentId} - ${getBasekey()}`;
     }, [getBasekey, topParentId]);
@@ -135,7 +131,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
             fields += ',ProductionYear';
         }
 
-        const query: QueryI = {
+        const options: QueryI = {
             SortBy: getSortValues().sortBy,
             SortOrder: getSortValues().sortOrder,
             IncludeItemTypes: getItemTypes().join(','),
@@ -144,18 +140,18 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
             ImageTypeLimit: 1,
             EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
             Limit: userSettings.libraryPageSize(undefined),
-            StartIndex: startIndex,
+            StartIndex: query.StartIndex,
+            NameLessThan: query.NameLessThan,
+            NameStartsWith: query.NameStartsWith,
             ParentId: topParentId
         };
 
         if (getBasekey() === 'favorites') {
-            query.IsFavorite = true;
+            options.IsFavorite = true;
         }
 
-        const queryInfo: QueryI = Object.assign(query, queryAlphaPickerValue || {});
+        return options;
-
+    }, [getViewSettings, getSortValues, getItemTypes, query.StartIndex, query.NameLessThan, query.NameStartsWith, topParentId, getBasekey]);
-        return queryInfo;
-    }, [getViewSettings, getSortValues, getItemTypes, startIndex, topParentId, getBasekey, queryAlphaPickerValue]);
 
     const getQueryWithFilters = useCallback(() => {
         const query = getQuery();
@@ -320,8 +316,8 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
             <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}
-                    startIndex={startIndex}
+                    query={query}
-                    setStartIndex={setStartIndex}
+                    setQuery={setQuery}
                 />
 
                 {isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
@@ -330,6 +326,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
                     getSettingsKey={getSettingsKey}
                     getVisibleViewSettings={getVisibleViewSettings}
                     getViewSettings={getViewSettings}
+                    setQuery={setQuery}
                     reloadItems={reloadItems}
                 />}
 
@@ -337,6 +334,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
                     getSortMenuOptions={getSortMenuOptions}
                     getSortValues={getSortValues}
                     getSettingsKey={getSettingsKey}
+                    setQuery={setQuery}
                     reloadItems={reloadItems}
                 />
 
@@ -347,6 +345,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
                     getItemTypes={getItemTypes}
                     getVisibleFilters={getVisibleFilters}
                     getFilterMenuOptions={getFilterMenuOptions}
+                    setQuery={setQuery}
                     reloadItems={reloadItems}
                 />}
 
@@ -356,8 +355,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
 
             {isAlphaPickerEnabled && <AlphaPickerContainer
                 getQuery={getQuery}
-                setAlphaPickerValue={setAlphaPickerValue}
+                setQuery={setQuery}
-                setStartIndex={setStartIndex}
             />}
 
             <ItemsContainer
@@ -370,8 +368,8 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
             <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}
-                    startIndex={startIndex}
+                    query={query}
-                    setStartIndex={setStartIndex}
+                    setQuery={setQuery}
                 />
             </div>
         </div>

src/view/components/interface.ts

@@ -1,9 +1,5 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 
-export interface AlphaPickerValueI {
-    NameLessThan?: string;
-    NameStartsWith?: string | null;
-}
 export interface QueryI {
     SortBy?: string;
     SortOrder?: string;
@@ -17,7 +13,7 @@ export interface QueryI {
     ParentId?: string | null;
     IsFavorite?: boolean;
     IsMissing?: boolean;
-    Limit:number;
+    Limit?:number;
     NameStartsWithOrGreater?: string;
     NameLessThan?: string;
     NameStartsWith?: string | null;