Fix useState TypeScript errors

src/components/alphaPicker/AlphaPickerComponent.tsx

@@ -9,7 +9,7 @@ type AlphaPickerProps = {
 // React compatibility wrapper component for alphaPicker.js
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const AlphaPickerComponent: FunctionComponent<AlphaPickerProps> = ({ onAlphaPicked = () => {} }: AlphaPickerProps) => {
-    const [ alphaPicker, setAlphaPicker ] = useState(null);
+    const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {

src/components/pages/NewUserPage.tsx

@@ -22,8 +22,8 @@ type ItemsArr = {
 }
 
 const NewUserPage: FunctionComponent = () => {
-    const [ channelsItems, setChannelsItems ] = useState([]);
+    const [ channelsItems, setChannelsItems ] = useState<ItemsArr[]>([]);
-    const [ mediaFoldersItems, setMediaFoldersItems ] = useState([]);
+    const [ mediaFoldersItems, setMediaFoldersItems ] = useState<ItemsArr[]>([]);
     const element = useRef<HTMLDivElement>(null);
 
     const getItemsResult = (items: ItemsArr[]) => {

src/components/pages/SearchPage.tsx

@@ -12,7 +12,7 @@ type SearchProps = {
 };
 
 const SearchPage: FunctionComponent<SearchProps> = ({ serverId, parentId, collectionType }: SearchProps) => {
-    const [ query, setQuery ] = useState(null);
+    const [ query, setQuery ] = useState<string>();
 
     return (
         <>

src/components/pages/UserEditPage.tsx

@@ -24,7 +24,7 @@ type ItemsArr = {
 
 const UserEditPage: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
-    const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState([]);
+    const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ItemsArr[]>([]);
     const [ authProviders, setAuthProviders ] = useState([]);
     const [ passwordResetProviders, setPasswordResetProviders ] = useState([]);
 

src/components/pages/UserLibraryAccessPage.tsx

@@ -21,9 +21,9 @@ type ItemsArr = {
 
 const UserLibraryAccessPage: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
-    const [channelsItems, setChannelsItems] = useState([]);
+    const [channelsItems, setChannelsItems] = useState<ItemsArr[]>([]);
-    const [mediaFoldersItems, setMediaFoldersItems] = useState([]);
+    const [mediaFoldersItems, setMediaFoldersItems] = useState<ItemsArr[]>([]);
-    const [devicesItems, setDevicesItems] = useState([]);
+    const [devicesItems, setDevicesItems] = useState<ItemsArr[]>([]);
 
     const element = useRef<HTMLDivElement>(null);
 

src/components/pages/UserParentalControl.tsx

@@ -27,9 +27,9 @@ type ItemsArr = {
 
 const UserParentalControl: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
-    const [ parentalRatings, setParentalRatings ] = useState([]);
+    const [ parentalRatings, setParentalRatings ] = useState<RatingsArr[]>([]);
-    const [ unratedItems, setUnratedItems ] = useState([]);
+    const [ unratedItems, setUnratedItems ] = useState<ItemsArr[]>([]);
-    const [ accessSchedules, setAccessSchedules ] = useState([]);
+    const [ accessSchedules, setAccessSchedules ] = useState<AccessSchedule[]>([]);
     const [ blockedTags, setBlockedTags ] = useState([]);
 
     const element = useRef<HTMLDivElement>(null);

src/components/pages/UserProfilesPage.tsx

@@ -1,4 +1,4 @@
-
+import { UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, {FunctionComponent, useEffect, useState, useRef} from 'react';
 import Dashboard from '../../scripts/clientUtils';
 import globalize from '../../scripts/globalize';
@@ -21,7 +21,7 @@ type MenuEntry = {
 }
 
 const UserProfilesPage: FunctionComponent = () => {
-    const [ users, setUsers ] = useState([]);
+    const [ users, setUsers ] = useState<UserDto[]>([]);
 
     const element = useRef<HTMLDivElement>(null);
 

src/components/search/LiveTVSearchResults.tsx

@@ -1,3 +1,4 @@
+import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import classNames from 'classnames';
 import { ApiClient } from 'jellyfin-apiclient';
 import React, { FunctionComponent, useEffect, useState } from 'react';
@@ -29,13 +30,13 @@ type LiveTVSearchResultsProps = {
  * React component to display search result rows for live tv library search
  */
 const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: LiveTVSearchResultsProps) => {
-    const [ movies, setMovies ] = useState([]);
+    const [ movies, setMovies ] = useState<BaseItemDto[]>([]);
-    const [ episodes, setEpisodes ] = useState([]);
+    const [ episodes, setEpisodes ] = useState<BaseItemDto[]>([]);
-    const [ sports, setSports ] = useState([]);
+    const [ sports, setSports ] = useState<BaseItemDto[]>([]);
-    const [ kids, setKids ] = useState([]);
+    const [ kids, setKids ] = useState<BaseItemDto[]>([]);
-    const [ news, setNews ] = useState([]);
+    const [ news, setNews ] = useState<BaseItemDto[]>([]);
-    const [ programs, setPrograms ] = useState([]);
+    const [ programs, setPrograms ] = useState<BaseItemDto[]>([]);
-    const [ channels, setChannels ] = useState([]);
+    const [ channels, setChannels ] = useState<BaseItemDto[]>([]);
 
     useEffect(() => {
         const getDefaultParameters = () => ({
@@ -83,7 +84,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 IsSports: false,
                 IsKids: false,
                 IsNews: false
-            }).then(result => setMovies(result.Items));
+            }).then(result => setMovies(result.Items || []));
             // Episodes row
             fetchItems(apiClient, {
                 IncludeItemTypes: 'LiveTvProgram',
@@ -92,7 +93,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 IsSports: false,
                 IsKids: false,
                 IsNews: false
-            }).then(result => setEpisodes(result.Items));
+            }).then(result => setEpisodes(result.Items || []));
             // Sports row
             fetchItems(apiClient, {
                 IncludeItemTypes: 'LiveTvProgram',
@@ -101,7 +102,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 IsSports: true,
                 IsKids: false,
                 IsNews: false
-            }).then(result => setSports(result.Items));
+            }).then(result => setSports(result.Items || []));
             // Kids row
             fetchItems(apiClient, {
                 IncludeItemTypes: 'LiveTvProgram',
@@ -110,7 +111,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 IsSports: false,
                 IsKids: true,
                 IsNews: false
-            }).then(result => setKids(result.Items));
+            }).then(result => setKids(result.Items || []));
             // News row
             fetchItems(apiClient, {
                 IncludeItemTypes: 'LiveTvProgram',
@@ -119,7 +120,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 IsSports: false,
                 IsKids: false,
                 IsNews: true
-            }).then(result => setNews(result.Items));
+            }).then(result => setNews(result.Items || []));
             // Programs row
             fetchItems(apiClient, {
                 IncludeItemTypes: 'LiveTvProgram',
@@ -128,10 +129,10 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 IsSports: false,
                 IsKids: false,
                 IsNews: false
-            }).then(result => setPrograms(result.Items));
+            }).then(result => setPrograms(result.Items || []));
             // Channels row
             fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
-                .then(result => setChannels(result.Items));
+                .then(result => setChannels(result.Items || []));
         }
     }, [collectionType, parentId, query, serverId]);
 

src/components/search/SearchResults.tsx

@@ -1,3 +1,4 @@
+import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import classNames from 'classnames';
 import { ApiClient } from 'jellyfin-apiclient';
 import React, { FunctionComponent, useEffect, useState } from 'react';
@@ -17,21 +18,21 @@ type SearchResultsProps = {
  * React component to display search result rows for global search and non-live tv library search
  */
 const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: SearchResultsProps) => {
-    const [ movies, setMovies ] = useState([]);
+    const [ movies, setMovies ] = useState<BaseItemDto[]>([]);
-    const [ shows, setShows ] = useState([]);
+    const [ shows, setShows ] = useState<BaseItemDto[]>([]);
-    const [ episodes, setEpisodes ] = useState([]);
+    const [ episodes, setEpisodes ] = useState<BaseItemDto[]>([]);
-    const [ videos, setVideos ] = useState([]);
+    const [ videos, setVideos ] = useState<BaseItemDto[]>([]);
-    const [ programs, setPrograms ] = useState([]);
+    const [ programs, setPrograms ] = useState<BaseItemDto[]>([]);
-    const [ channels, setChannels ] = useState([]);
+    const [ channels, setChannels ] = useState<BaseItemDto[]>([]);
-    const [ playlists, setPlaylists ] = useState([]);
+    const [ playlists, setPlaylists ] = useState<BaseItemDto[]>([]);
-    const [ artists, setArtists ] = useState([]);
+    const [ artists, setArtists ] = useState<BaseItemDto[]>([]);
-    const [ albums, setAlbums ] = useState([]);
+    const [ albums, setAlbums ] = useState<BaseItemDto[]>([]);
-    const [ songs, setSongs ] = useState([]);
+    const [ songs, setSongs ] = useState<BaseItemDto[]>([]);
-    const [ photoAlbums, setPhotoAlbums ] = useState([]);
+    const [ photoAlbums, setPhotoAlbums ] = useState<BaseItemDto[]>([]);
-    const [ photos, setPhotos ] = useState([]);
+    const [ photos, setPhotos ] = useState<BaseItemDto[]>([]);
-    const [ audioBooks, setAudioBooks ] = useState([]);
+    const [ audioBooks, setAudioBooks ] = useState<BaseItemDto[]>([]);
-    const [ books, setBooks ] = useState([]);
+    const [ books, setBooks ] = useState<BaseItemDto[]>([]);
-    const [ people, setPeople ] = useState([]);
+    const [ people, setPeople ] = useState<BaseItemDto[]>([]);
 
     useEffect(() => {
         const getDefaultParameters = () => ({
@@ -106,38 +107,38 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
             if (!collectionType || isMovies()) {
                 // Movies row
                 fetchItems(apiClient, { IncludeItemTypes: 'Movie' })
-                    .then(result => setMovies(result.Items));
+                    .then(result => setMovies(result.Items || []));
             }
 
             // TV Show libraries
             if (!collectionType || isTVShows()) {
                 // Shows row
                 fetchItems(apiClient, { IncludeItemTypes: 'Series' })
-                    .then(result => setShows(result.Items));
+                    .then(result => setShows(result.Items || []));
                 // Episodes row
                 fetchItems(apiClient, { IncludeItemTypes: 'Episode' })
-                    .then(result => setEpisodes(result.Items));
+                    .then(result => setEpisodes(result.Items || []));
             }
 
             // People are included for Movies and TV Shows
             if (!collectionType || isMovies() || isTVShows()) {
                 // People row
-                fetchPeople(apiClient).then(result => setPeople(result.Items));
+                fetchPeople(apiClient).then(result => setPeople(result.Items || []));
             }
 
             // Music libraries
             if (!collectionType || isMusic()) {
                 // Playlists row
                 fetchItems(apiClient, { IncludeItemTypes: 'Playlist' })
-                    .then(results => setPlaylists(results.Items));
+                    .then(results => setPlaylists(results.Items || []));
                 // Artists row
-                fetchArtists(apiClient).then(result => setArtists(result.Items));
+                fetchArtists(apiClient).then(result => setArtists(result.Items || []));
                 // Albums row
                 fetchItems(apiClient, { IncludeItemTypes: 'MusicAlbum' })
-                    .then(result => setAlbums(result.Items));
+                    .then(result => setAlbums(result.Items || []));
                 // Songs row
                 fetchItems(apiClient, { IncludeItemTypes: 'Audio' })
-                    .then(result => setSongs(result.Items));
+                    .then(result => setSongs(result.Items || []));
             }
 
             // Other libraries do not support in-library search currently
@@ -146,25 +147,25 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                 fetchItems(apiClient, {
                     MediaTypes: 'Video',
                     ExcludeItemTypes: 'Movie,Episode,TvChannel'
-                }).then(result => setVideos(result.Items));
+                }).then(result => setVideos(result.Items || []));
                 // Programs row
                 fetchItems(apiClient, { IncludeItemTypes: 'LiveTvProgram' })
-                    .then(result => setPrograms(result.Items));
+                    .then(result => setPrograms(result.Items || []));
                 // Channels row
                 fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
-                    .then(result => setChannels(result.Items));
+                    .then(result => setChannels(result.Items || []));
                 // Photo Albums row
                 fetchItems(apiClient, { IncludeItemTypes: 'PhotoAlbum' })
-                    .then(results => setPhotoAlbums(results.Items));
+                    .then(results => setPhotoAlbums(results.Items || []));
                 // Photos row
                 fetchItems(apiClient, { IncludeItemTypes: 'Photo' })
-                    .then(results => setPhotos(results.Items));
+                    .then(results => setPhotos(results.Items || []));
                 // Audio Books row
                 fetchItems(apiClient, { IncludeItemTypes: 'AudioBook' })
-                    .then(results => setAudioBooks(results.Items));
+                    .then(results => setAudioBooks(results.Items || []));
                 // Books row
                 fetchItems(apiClient, { IncludeItemTypes: 'Book' })
-                    .then(results => setBooks(results.Items));
+                    .then(results => setBooks(results.Items || []));
             }
         }
     }, [collectionType, parentId, query, serverId]);

src/components/search/SearchSuggestions.tsx

@@ -1,3 +1,4 @@
+import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import { appRouter } from '../appRouter';
@@ -24,7 +25,7 @@ type SearchSuggestionsProps = {
 }
 
 const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ serverId = window.ApiClient.serverId(), parentId }: SearchSuggestionsProps) => {
-    const [ suggestions, setSuggestions ] = useState([]);
+    const [ suggestions, setSuggestions ] = useState<BaseItemDto[]>([]);
 
     useEffect(() => {
         const apiClient = ServerConnections.getApiClient(serverId);
@@ -38,7 +39,7 @@ const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ serverId
             EnableImages: false,
             ParentId: parentId,
             EnableTotalRecordCount: false
-        }).then(result => setSuggestions(result.Items));
+        }).then(result => setSuggestions(result.Items || []));
     }, [parentId, serverId]);
 
     return (