Use interface over type

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 = {
-    query: IQuery;
+interface FilterI {
+    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 = {
-    query: IQuery;
+interface PaginationI {
+    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;