From 23d321d426a3674954120570e643267fc3e5b006 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Tue, 15 Feb 2022 23:49:46 +0300 Subject: [PATCH] Fix useState TypeScript errors --- .../alphaPicker/AlphaPickerComponent.tsx | 2 +- src/components/pages/NewUserPage.tsx | 4 +- src/components/pages/SearchPage.tsx | 2 +- src/components/pages/UserEditPage.tsx | 2 +- .../pages/UserLibraryAccessPage.tsx | 6 +- src/components/pages/UserParentalControl.tsx | 6 +- src/components/pages/UserProfilesPage.tsx | 4 +- src/components/search/LiveTVSearchResults.tsx | 29 ++++----- src/components/search/SearchResults.tsx | 61 ++++++++++--------- src/components/search/SearchSuggestions.tsx | 5 +- 10 files changed, 62 insertions(+), 59 deletions(-) diff --git a/src/components/alphaPicker/AlphaPickerComponent.tsx b/src/components/alphaPicker/AlphaPickerComponent.tsx index b0d2bd10c7..bf8b44d8a5 100644 --- a/src/components/alphaPicker/AlphaPickerComponent.tsx +++ b/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 = ({ onAlphaPicked = () => {} }: AlphaPickerProps) => { - const [ alphaPicker, setAlphaPicker ] = useState(null); + const [ alphaPicker, setAlphaPicker ] = useState(); const element = useRef(null); useEffect(() => { diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index 6a8848f012..4e4622a561 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -22,8 +22,8 @@ type ItemsArr = { } const NewUserPage: FunctionComponent = () => { - const [ channelsItems, setChannelsItems ] = useState([]); - const [ mediaFoldersItems, setMediaFoldersItems ] = useState([]); + const [ channelsItems, setChannelsItems ] = useState([]); + const [ mediaFoldersItems, setMediaFoldersItems ] = useState([]); const element = useRef(null); const getItemsResult = (items: ItemsArr[]) => { diff --git a/src/components/pages/SearchPage.tsx b/src/components/pages/SearchPage.tsx index 8325d2b013..a63d450e8e 100644 --- a/src/components/pages/SearchPage.tsx +++ b/src/components/pages/SearchPage.tsx @@ -12,7 +12,7 @@ type SearchProps = { }; const SearchPage: FunctionComponent = ({ serverId, parentId, collectionType }: SearchProps) => { - const [ query, setQuery ] = useState(null); + const [ query, setQuery ] = useState(); return ( <> diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx index 7b1e6246ad..3fa84572c6 100644 --- a/src/components/pages/UserEditPage.tsx +++ b/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([]); const [ authProviders, setAuthProviders ] = useState([]); const [ passwordResetProviders, setPasswordResetProviders ] = useState([]); diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx index f8c887c1e0..f6491f86e0 100644 --- a/src/components/pages/UserLibraryAccessPage.tsx +++ b/src/components/pages/UserLibraryAccessPage.tsx @@ -21,9 +21,9 @@ type ItemsArr = { const UserLibraryAccessPage: FunctionComponent = () => { const [ userName, setUserName ] = useState(''); - const [channelsItems, setChannelsItems] = useState([]); - const [mediaFoldersItems, setMediaFoldersItems] = useState([]); - const [devicesItems, setDevicesItems] = useState([]); + const [channelsItems, setChannelsItems] = useState([]); + const [mediaFoldersItems, setMediaFoldersItems] = useState([]); + const [devicesItems, setDevicesItems] = useState([]); const element = useRef(null); diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx index 21eb3dc99f..ce4fe71840 100644 --- a/src/components/pages/UserParentalControl.tsx +++ b/src/components/pages/UserParentalControl.tsx @@ -27,9 +27,9 @@ type ItemsArr = { const UserParentalControl: FunctionComponent = () => { const [ userName, setUserName ] = useState(''); - const [ parentalRatings, setParentalRatings ] = useState([]); - const [ unratedItems, setUnratedItems ] = useState([]); - const [ accessSchedules, setAccessSchedules ] = useState([]); + const [ parentalRatings, setParentalRatings ] = useState([]); + const [ unratedItems, setUnratedItems ] = useState([]); + const [ accessSchedules, setAccessSchedules ] = useState([]); const [ blockedTags, setBlockedTags ] = useState([]); const element = useRef(null); diff --git a/src/components/pages/UserProfilesPage.tsx b/src/components/pages/UserProfilesPage.tsx index 1ec0b37dce..67cfa7c459 100644 --- a/src/components/pages/UserProfilesPage.tsx +++ b/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([]); const element = useRef(null); diff --git a/src/components/search/LiveTVSearchResults.tsx b/src/components/search/LiveTVSearchResults.tsx index b4d6bd11b6..18dff2e51d 100644 --- a/src/components/search/LiveTVSearchResults.tsx +++ b/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 = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: LiveTVSearchResultsProps) => { - const [ movies, setMovies ] = useState([]); - const [ episodes, setEpisodes ] = useState([]); - const [ sports, setSports ] = useState([]); - const [ kids, setKids ] = useState([]); - const [ news, setNews ] = useState([]); - const [ programs, setPrograms ] = useState([]); - const [ channels, setChannels ] = useState([]); + const [ movies, setMovies ] = useState([]); + const [ episodes, setEpisodes ] = useState([]); + const [ sports, setSports ] = useState([]); + const [ kids, setKids ] = useState([]); + const [ news, setNews ] = useState([]); + const [ programs, setPrograms ] = useState([]); + const [ channels, setChannels ] = useState([]); useEffect(() => { const getDefaultParameters = () => ({ @@ -83,7 +84,7 @@ const LiveTVSearchResults: FunctionComponent = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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]); diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index 6779990f23..9f6d30a708 100644 --- a/src/components/search/SearchResults.tsx +++ b/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 = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: SearchResultsProps) => { - const [ movies, setMovies ] = useState([]); - const [ shows, setShows ] = useState([]); - const [ episodes, setEpisodes ] = useState([]); - const [ videos, setVideos ] = useState([]); - const [ programs, setPrograms ] = useState([]); - const [ channels, setChannels ] = useState([]); - const [ playlists, setPlaylists ] = useState([]); - const [ artists, setArtists ] = useState([]); - const [ albums, setAlbums ] = useState([]); - const [ songs, setSongs ] = useState([]); - const [ photoAlbums, setPhotoAlbums ] = useState([]); - const [ photos, setPhotos ] = useState([]); - const [ audioBooks, setAudioBooks ] = useState([]); - const [ books, setBooks ] = useState([]); - const [ people, setPeople ] = useState([]); + const [ movies, setMovies ] = useState([]); + const [ shows, setShows ] = useState([]); + const [ episodes, setEpisodes ] = useState([]); + const [ videos, setVideos ] = useState([]); + const [ programs, setPrograms ] = useState([]); + const [ channels, setChannels ] = useState([]); + const [ playlists, setPlaylists ] = useState([]); + const [ artists, setArtists ] = useState([]); + const [ albums, setAlbums ] = useState([]); + const [ songs, setSongs ] = useState([]); + const [ photoAlbums, setPhotoAlbums ] = useState([]); + const [ photos, setPhotos ] = useState([]); + const [ audioBooks, setAudioBooks ] = useState([]); + const [ books, setBooks ] = useState([]); + const [ people, setPeople ] = useState([]); useEffect(() => { const getDefaultParameters = () => ({ @@ -106,38 +107,38 @@ const SearchResults: FunctionComponent = ({ 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 = ({ 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]); diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx index afed4bd8b7..596ad64518 100644 --- a/src/components/search/SearchSuggestions.tsx +++ b/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 = ({ serverId = window.ApiClient.serverId(), parentId }: SearchSuggestionsProps) => { - const [ suggestions, setSuggestions ] = useState([]); + const [ suggestions, setSuggestions ] = useState([]); useEffect(() => { const apiClient = ServerConnections.getApiClient(serverId); @@ -38,7 +39,7 @@ const SearchSuggestions: FunctionComponent = ({ serverId EnableImages: false, ParentId: parentId, EnableTotalRecordCount: false - }).then(result => setSuggestions(result.Items)); + }).then(result => setSuggestions(result.Items || [])); }, [parentId, serverId]); return (