Use interface over type

src/elements/ItemsContainerElement.tsx

@@ -1,24 +1,21 @@
-import React, { FunctionComponent } from 'react';
+import React, { FC } from 'react';
 
-const createElement = ({ id, className }: IProps) => ({
+const createElement = ({ className }: IProps) => ({
     __html: `<div
         is="emby-itemscontainer"
-        ${id}
         class="${className}"
     >
     </div>`
 });
 
-type IProps = {
+interface IProps {
-    id?: string;
     className?: string;
 }
 
-const ItemsContainerElement: FunctionComponent<IProps> = ({ id, className }: IProps) => {
+const ItemsContainerElement: FC<IProps> = ({ className }) => {
     return (
         <div
             dangerouslySetInnerHTML={createElement({
-                id: id ? `id='${id}'` : '',
                 className: className
             })}
         />

src/elements/ItemsScrollerContainerElement.tsx

@@ -1,31 +1,29 @@
-import React, { FunctionComponent } from 'react';
+import React, { FC } from 'react';
 
-const createScroller = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, id, className }: IProps) => ({
+const createScroller = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, className }: IProps) => ({
     __html: `<div is="emby-scroller"
     class="${scrollerclassName}"
     ${dataHorizontal}
     ${dataMousewheel}
     ${dataCenterfocus}
     >
-    <div
+        <div
-        is="emby-itemscontainer"
+            is="emby-itemscontainer"
-        ${id}
+            class="${className}"
-        class="${className}"
+        >
-    >
+        </div>
-    </div>
     </div>`
 });
 
-type IProps = {
+interface IProps {
     scrollerclassName?: string;
     dataHorizontal?: string;
     dataMousewheel?: string;
     dataCenterfocus?: string;
-    id?: string;
     className?: string;
 }
 
-const ItemsScrollerContainerElement: FunctionComponent<IProps> = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, id, className }: IProps) => {
+const ItemsScrollerContainerElement: FC<IProps> = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, className }) => {
     return (
         <div
             dangerouslySetInnerHTML={createScroller({
@@ -33,7 +31,6 @@ const ItemsScrollerContainerElement: FunctionComponent<IProps> = ({ scrollerclas
                 dataHorizontal: dataHorizontal ? `data-horizontal="${dataHorizontal}"` : '',
                 dataMousewheel: dataMousewheel ? `data-mousewheel="${dataMousewheel}"` : '',
                 dataCenterfocus: dataCenterfocus ? `data-centerfocus="${dataCenterfocus}"` : '',
-                id: id ? `id='${id}'` : '',
                 className: className
             })}
         />

src/routes/movies.tsx

@@ -3,7 +3,7 @@ import '../elements/emby-itemscontainer/emby-itemscontainer';
 import '../elements/emby-tabs/emby-tabs';
 import '../elements/emby-button/emby-button';
 
-import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import * as mainTabsManager from '../components/maintabsmanager';
@@ -37,28 +37,28 @@ const getDefaultTabIndex = (folderId: string | null) => {
     }
 };
 
-const Movies: FunctionComponent = () => {
+const getTabs = () => {
+    return [{
+        name: globalize.translate('Movies')
+    }, {
+        name: globalize.translate('Suggestions')
+    }, {
+        name: globalize.translate('Trailers')
+    }, {
+        name: globalize.translate('Favorites')
+    }, {
+        name: globalize.translate('Collections')
+    }, {
+        name: globalize.translate('Genres')
+    }];
+};
+
+const Movies: FC = () => {
     const [ searchParams ] = useSearchParams();
     const currentTabIndex = parseInt(searchParams.get('tab') || getDefaultTabIndex(searchParams.get('topParentId')).toString());
     const [ selectedIndex, setSelectedIndex ] = useState(currentTabIndex);
     const element = useRef<HTMLDivElement>(null);
 
-    const getTabs = () => {
-        return [{
-            name: globalize.translate('Movies')
-        }, {
-            name: globalize.translate('Suggestions')
-        }, {
-            name: globalize.translate('Trailers')
-        }, {
-            name: globalize.translate('Favorites')
-        }, {
-            name: globalize.translate('Collections')
-        }, {
-            name: globalize.translate('Genres')
-        }];
-    };
-
     const getTabComponent = (index: number) => {
         if (index == null) {
             throw new Error('index cannot be null');
@@ -106,7 +106,7 @@ const Movies: FunctionComponent = () => {
             console.error('Unexpected null reference');
             return;
         }
-        mainTabsManager.setTabs(element.current, selectedIndex, getTabs, undefined, undefined, onTabChange);
+        mainTabsManager.setTabs(page, selectedIndex, getTabs, undefined, undefined, onTabChange);
         if (!page.getAttribute('data-title')) {
             const parentId = searchParams.get('topParentId');
 

src/view/components/Filter.tsx

@@ -1,15 +1,15 @@
-import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 import { Events } from 'jellyfin-apiclient';
 import IconButtonElement from '../../elements/IconButtonElement';
-import { IQuery } from './type';
+import { QueryI } from './interface';
 
-type FilterProps = {
+interface FilterI {
-    query: IQuery;
+    query: QueryI;
     getFilterMode: () => string | null;
     reloadItems: () => void;
 }
 
-const Filter: FunctionComponent<FilterProps> = ({ query, getFilterMode, reloadItems }: FilterProps) => {
+const Filter: FC<FilterI> = ({ query, getFilterMode, reloadItems }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const showFilterMenu = useCallback(() => {

src/view/components/GenresItemsContainer.tsx

@@ -3,7 +3,7 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import escapeHTML from 'escape-html';
-import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 
 import { appRouter } from '../../components/appRouter';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
@@ -11,13 +11,13 @@ import layoutManager from '../../components/layoutManager';
 import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
 import globalize from '../../scripts/globalize';
 
-type GenresItemsContainerProps = {
+interface GenresItemsContainerI {
     topParentId?: string | null;
     getCurrentViewStyle: () => string;
     itemsResult?: BaseItemDtoQueryResult;
 }
 
-const GenresItemsContainer: FunctionComponent<GenresItemsContainerProps> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }: GenresItemsContainerProps) => {
+const GenresItemsContainer: FC<GenresItemsContainerI> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const enableScrollX = useCallback(() => {

src/view/components/ItemsContainer.tsx

@@ -7,11 +7,11 @@ import listview from '../../components/listview/listview';
 import globalize from '../../scripts/globalize';
 import imageLoader from '../../components/images/imageLoader';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
-import { IQuery } from './type';
+import { QueryI } from './interface';
 
 type ItemsContainerProps = {
     getCurrentViewStyle: () => string;
-    query: IQuery;
+    query: QueryI;
     getContext: () => string | null;
     items?: BaseItemDto[] | null;
     noItemsMessage?: string;

src/view/components/NewCollection.tsx

@@ -1,8 +1,8 @@
-import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 
 import IconButtonElement from '../../elements/IconButtonElement';
 
-const NewCollection: FunctionComponent = () => {
+const NewCollection: FC = () => {
     const element = useRef<HTMLDivElement>(null);
 
     const showCollectionEditor = useCallback(() => {

src/view/components/Pagination.tsx

@@ -1,16 +1,16 @@
 import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
 import globalize from '../../scripts/globalize';
-import { IQuery } from './type';
+import { QueryI } from './interface';
 
-type PaginationProps = {
+interface PaginationI {
-    query: IQuery;
+    query: QueryI;
     itemsResult?: BaseItemDtoQueryResult;
     reloadItems: () => void;
 }
 
-const Pagination: FunctionComponent<PaginationProps> = ({ query, itemsResult = {}, reloadItems }: PaginationProps) => {
+const Pagination: FC<PaginationI> = ({ query, itemsResult = {}, reloadItems }) => {
     const startIndex = query.StartIndex;
     const limit = query.Limit;
     const totalRecordCount = itemsResult.TotalRecordCount || 0;

src/view/components/RecommendationContainer.tsx

@@ -1,17 +1,17 @@
 import { RecommendationDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent } from 'react';
+import React, { FC } from 'react';
 
 import globalize from '../../scripts/globalize';
 import escapeHTML from 'escape-html';
 import SectionContainer from './SectionContainer';
 
-type RecommendationContainerProps = {
+interface RecommendationContainerI {
     getPortraitShape: () => string;
     enableScrollX: () => boolean;
     recommendation?: RecommendationDto;
 }
 
-const RecommendationContainer: FunctionComponent<RecommendationContainerProps> = ({ getPortraitShape, enableScrollX, recommendation = {} }: RecommendationContainerProps) => {
+const RecommendationContainer: FC<RecommendationContainerI> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
     let title = '';
 
     switch (recommendation.RecommendationType) {

src/view/components/SectionContainer.tsx

@@ -1,26 +1,26 @@
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent, useEffect, useRef } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import ItemsContainerElement from '../../elements/ItemsContainerElement';
 import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
-import { ICardOptions } from './type';
+import { CardOptionsI } from './interface';
 
-type SectionContainerProps = {
+interface SectionContainerI {
     sectionTitle: string;
     enableScrollX: () => boolean;
     items?: BaseItemDto[];
-    cardOptions?: ICardOptions;
+    cardOptions?: CardOptionsI;
 }
 
-const SectionContainer: FunctionComponent<SectionContainerProps> = ({
+const SectionContainer: FC<SectionContainerI> = ({
     sectionTitle,
     enableScrollX,
     items = [],
     cardOptions = {}
-}: SectionContainerProps) => {
+}) => {
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {

src/view/components/SelectView.tsx

@@ -1,18 +1,18 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
 
 import libraryBrowser from '../../scripts/libraryBrowser';
 import * as userSettings from '../../scripts/settings/userSettings';
-import { IQuery } from './type';
+import { QueryI } from './interface';
 
-type SelectViewProps = {
+interface SelectViewI {
     getCurrentViewStyle: () => string;
-    query: IQuery;
+    query: QueryI;
     getViewSettings: () => string;
     reloadItems: () => void;
 }
 
-const SelectView: FunctionComponent<SelectViewProps> = ({ getCurrentViewStyle, getViewSettings, query, reloadItems }: SelectViewProps) => {
+const SelectView: FC<SelectViewI> = ({ getCurrentViewStyle, getViewSettings, query, reloadItems }) => {
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {

src/view/components/Shuffle.tsx

@@ -1,15 +1,15 @@
 import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 
 import { playbackManager } from '../../components/playback/playbackmanager';
 import IconButtonElement from '../../elements/IconButtonElement';
 
-type ShuffleProps = {
+interface ShuffleI {
     itemsResult?: BaseItemDtoQueryResult;
     topParentId: string | null;
 }
 
-const Shuffle: FunctionComponent<ShuffleProps> = ({ itemsResult = {}, topParentId }: ShuffleProps) => {
+const Shuffle: FC<ShuffleI> = ({ itemsResult = {}, topParentId }) => {
     const element = useRef<HTMLDivElement>(null);
 
     const shuffle = useCallback(() => {

src/view/components/Sort.tsx

@@ -1,20 +1,20 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 import IconButtonElement from '../../elements/IconButtonElement';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import * as userSettings from '../../scripts/settings/userSettings';
-import { IQuery } from './type';
+import { QueryI } from './interface';
 
-type SortProps = {
+interface SortI {
     getSortMenuOptions: () => {
         name: string;
         id: string;
     }[];
-    query: IQuery;
+    query: QueryI;
     getSettingsKey: () => string;
     reloadItems: () => void;
 }
 
-const Sort: FunctionComponent<SortProps> = ({ getSortMenuOptions, query, getSettingsKey, reloadItems }: SortProps) => {
+const Sort: FC<SortI> = ({ getSortMenuOptions, query, getSettingsKey, reloadItems }) => {
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {

src/view/components/ViewItemsContainer.tsx

@@ -1,5 +1,5 @@
 import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import loading from '../../components/loading/loading';
 import * as userSettings from '../../scripts/settings/userSettings';
@@ -10,10 +10,10 @@ import Pagination from './Pagination';
 import SelectView from './SelectView';
 import Shuffle from './Shuffle';
 import Sort from './Sort';
-import { IQuery } from './type';
+import { QueryI } from './interface';
 import NewCollection from './NewCollection';
 
-type IProps = {
+interface ViewItemsContainerI {
     topParentId: string | null;
     isBtnShuffleEnabled?: boolean;
     isBtnFilterEnabled?: boolean;
@@ -29,7 +29,7 @@ type IProps = {
     getNoItemsMessage: () => string;
 }
 
-const ViewItemsContainer: FunctionComponent<IProps> = ({
+const ViewItemsContainer: FC<ViewItemsContainerI> = ({
     topParentId,
     isBtnShuffleEnabled = false,
     isBtnFilterEnabled = true,
@@ -40,7 +40,7 @@ const ViewItemsContainer: FunctionComponent<IProps> = ({
     getItemTypes,
     getSortMenuOptions,
     getNoItemsMessage
-}: IProps) => {
+}) => {
     const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
 
     const element = useRef<HTMLDivElement>(null);
@@ -53,7 +53,7 @@ const ViewItemsContainer: FunctionComponent<IProps> = ({
         return `${getSettingsKey()} -view`;
     }, [getSettingsKey]);
 
-    let query = useMemo<IQuery>(() => ({
+    let query = useMemo<QueryI>(() => ({
         SortBy: 'SortName,ProductionYear',
         SortOrder: 'Ascending',
         IncludeItemTypes: getItemTypes(),

src/view/components/interface.ts

@@ -1,4 +1,4 @@
-export type IQuery = {
+export type QueryI = {
     SortBy?: string;
     SortOrder?: string;
     IncludeItemTypes?: string;
@@ -16,7 +16,7 @@ export type IQuery = {
     NameStartsWith?: string;
 }
 
-export type ICardOptions = {
+export type CardOptionsI = {
     itemsContainer?: HTMLElement;
     parentContainer?: HTMLElement;
     allowBottomPadding?: boolean;

src/view/movies/CollectionsView.tsx

@@ -1,13 +1,13 @@
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import globalize from '../../scripts/globalize';
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
-type IProps = {
+interface CollectionsViewI {
     topParentId: string | null;
 }
 
-const CollectionsView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
+const CollectionsView: FC<CollectionsViewI> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {
         return 'collections';
     }, []);

src/view/movies/FavoritesView.tsx

@@ -1,13 +1,13 @@
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import globalize from '../../scripts/globalize';
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
-type IProps = {
+interface FavoritesViewI {
     topParentId: string | null;
 }
 
-const FavoritesView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
+const FavoritesView: FC<FavoritesViewI> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {
         return 'favorites';
     }, []);

src/view/movies/GenresView.tsx

@@ -1,16 +1,16 @@
 import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import loading from '../../components/loading/loading';
 import * as userSettings from '../../scripts/settings/userSettings';
 import GenresItemsContainer from '../components/GenresItemsContainer';
-import { IQuery } from '../components/type';
+import { QueryI } from '../components/interface';
 
-type IProps = {
+interface GenresViewI {
     topParentId: string | null;
 }
 
-const GenresView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
+const GenresView: FC<GenresViewI> = ({ topParentId }) => {
     const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
     const element = useRef<HTMLDivElement>(null);
 
@@ -22,7 +22,7 @@ const GenresView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
         return getSettingsKey() + '-view';
     }, [getSettingsKey]);
 
-    let query = useMemo<IQuery>(() => ({
+    let query = useMemo<QueryI>(() => ({
         SortBy: 'SortName',
         SortOrder: 'Ascending',
         IncludeItemTypes: 'Movie',

src/view/movies/MoviesView.tsx

@@ -1,13 +1,13 @@
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 import globalize from '../../scripts/globalize';
 
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
-type IProps = {
+interface MoviesViewI {
     topParentId: string | null;
 }
 
-const MoviesView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
+const MoviesView: FC<MoviesViewI> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {
         return 'movies';
     }, []);

src/view/movies/SuggestionsView.tsx

@@ -8,11 +8,11 @@ import globalize from '../../scripts/globalize';
 import RecommendationContainer from '../components/RecommendationContainer';
 import SectionContainer from '../components/SectionContainer';
 
-type IProps = {
+interface SuggestionsViewI {
     topParentId: string | null;
 }
 
-const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
+const SuggestionsView: FunctionComponent<SuggestionsViewI> = ({topParentId}) => {
     const [ latestItems, setLatestItems ] = useState<BaseItemDto[]>([]);
     const [ resumeResult, setResumeResult ] = useState<BaseItemDtoQueryResult>({});
     const [ recommendations, setRecommendations ] = useState<RecommendationDto[]>([]);
@@ -102,12 +102,12 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
     }, [autoFocus]);
 
     const loadSuggestionsTab = useCallback((view) => {
-        const parentId = props.topParentId;
+        const parentId = topParentId;
         const userId = window.ApiClient.getCurrentUserId();
         loadResume(view, userId, parentId);
         loadLatest(view, userId, parentId);
         loadSuggestions(view, userId);
-    }, [loadLatest, loadResume, loadSuggestions, props.topParentId]);
+    }, [loadLatest, loadResume, loadSuggestions, topParentId]);
 
     useEffect(() => {
         const page = element.current;

src/view/movies/TrailersView.tsx

@@ -1,14 +1,14 @@
 
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import globalize from '../../scripts/globalize';
 import ViewItemsContainer from '../components/ViewItemsContainer';
 
-type IProps = {
+interface TrailersViewI {
     topParentId: string | null;
 }
 
-const TrailersView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
+const TrailersView: FC<TrailersViewI> = ({ topParentId }) => {
     const getBasekey = useCallback(() => {
         return 'trailers';
     }, []);