Refactor api hooks

src/App.tsx

@@ -1,58 +1,18 @@
-import { Api } from '@jellyfin/sdk';
-import { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
 import { History } from '@remix-run/router';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { HistoryRouter } from './components/HistoryRouter';
 import ServerConnections from './components/ServerConnections';
-import { ApiContext } from './hooks/useApi';
-import { UserContext } from './hooks/useUser';
+import { ApiProvider } from './hooks/useApi';
 import AppRoutes from './routes/index';
-import events from './utils/events';
-import { toApi } from './utils/sdk';
 
 const App = ({ history, connections }: { history: History, connections: typeof ServerConnections }) => {
-    const [ api, setApi ] = useState<Api | undefined>(toApi(connections.currentApiClient()));
-    const [ user, setUser ] = useState<UserDto | undefined>();
-
-    useEffect(() => {
-        connections.currentApiClient()
-            .getCurrentUser()
-            .then(newUser => setUser(newUser))
-            .catch(err => {
-                console.warn('[App] Could not get current user', err);
-            });
-
-        const udpateApiUser = (_e: any, newUser: UserDto) => {
-            setUser(newUser);
-
-            if (newUser.ServerId) {
-                setApi(toApi(connections.getApiClient(newUser.ServerId)));
-            }
-        };
-
-        const resetApiUser = () => {
-            setApi(undefined);
-            setUser(undefined);
-        };
-
-        events.on(connections, 'localusersignedin', udpateApiUser);
-        events.on(connections, 'localusersignedout', resetApiUser);
-
-        return () => {
-            events.off(connections, 'localusersignedin', udpateApiUser);
-            events.off(connections, 'localusersignedout', resetApiUser);
-        };
-    }, [ connections ]);
-
     return (
-        <ApiContext.Provider value={api}>
-            <UserContext.Provider value={user}>
+        <ApiProvider connections={connections}>
             <HistoryRouter history={history}>
                 <AppRoutes />
             </HistoryRouter>
-            </UserContext.Provider>
-        </ApiContext.Provider>
+        </ApiProvider>
     );
 };
 

src/components/search/SearchSuggestions.tsx

@@ -7,7 +7,6 @@ import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import { appRouter } from '../appRouter';
 import { useApi } from '../../hooks/useApi';
-import { useUser } from '../../hooks/useUser';
 import globalize from '../../scripts/globalize';
 
 import '../../elements/emby-button/emby-button';
@@ -30,8 +29,7 @@ type SearchSuggestionsProps = {
 
 const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ parentId }: SearchSuggestionsProps) => {
     const [ suggestions, setSuggestions ] = useState<BaseItemDto[]>([]);
-    const api = useApi();
-    const user = useUser();
+    const { api, user } = useApi();
 
     useEffect(() => {
         if (api && user?.Id) {
@@ -49,7 +47,7 @@ const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ parentId
                 })
                 .then(result => setSuggestions(result.data.Items || []));
         }
-    }, [api, parentId, user?.Id]);
+    }, [ api, parentId, user ]);
 
     return (
         <div

src/hooks/useApi.ts

@@ -1,5 +0,0 @@
-import { Api } from '@jellyfin/sdk';
-import { createContext, useContext } from 'react';
-
-export const ApiContext = createContext<Api | undefined>(undefined);
-export const useApi = () => useContext(ApiContext);

src/hooks/useApi.tsx

@@ -0,0 +1,71 @@
+import type { Api } from '@jellyfin/sdk';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
+import { ApiClient } from 'jellyfin-apiclient';
+import React, { createContext, FC, useContext, useEffect, useState } from 'react';
+
+import type ServerConnections from '../components/ServerConnections';
+import events from '../utils/events';
+import { toApi } from '../utils/jellyfin-apiclient/compat';
+
+interface ApiProviderProps {
+    connections: typeof ServerConnections
+}
+
+interface JellyfinApiContext {
+    __legacyApiClient__?: ApiClient
+    api?: Api
+    user?: UserDto
+}
+
+export const ApiContext = createContext<JellyfinApiContext>({});
+export const useApi = () => useContext(ApiContext);
+
+export const ApiProvider: FC<ApiProviderProps> = ({ connections, children }) => {
+    const [ legacyApiClient, setLegacyApiClient ] = useState<ApiClient>();
+    const [ api, setApi ] = useState<Api>();
+    const [ user, setUser ] = useState<UserDto>();
+
+    useEffect(() => {
+        connections.currentApiClient()
+            .getCurrentUser()
+            .then(newUser => udpateApiUser(null, newUser))
+            .catch(err => {
+                console.warn('[ApiProvider] Could not get current user', err);
+            });
+
+        const udpateApiUser = (_e: any, newUser: UserDto) => {
+            setUser(newUser);
+
+            if (newUser.ServerId) {
+                setLegacyApiClient(connections.getApiClient(newUser.ServerId));
+            }
+        };
+
+        const resetApiUser = () => {
+            setLegacyApiClient(undefined);
+            setUser(undefined);
+        };
+
+        events.on(connections, 'localusersignedin', udpateApiUser);
+        events.on(connections, 'localusersignedout', resetApiUser);
+
+        return () => {
+            events.off(connections, 'localusersignedin', udpateApiUser);
+            events.off(connections, 'localusersignedout', resetApiUser);
+        };
+    }, [ connections, setLegacyApiClient, setUser ]);
+
+    useEffect(() => {
+        setApi(legacyApiClient ? toApi(legacyApiClient) : undefined);
+    }, [ legacyApiClient, setApi ]);
+
+    return (
+        <ApiContext.Provider value={{
+            __legacyApiClient__: legacyApiClient,
+            api,
+            user
+        }}>
+            {children}
+        </ApiContext.Provider>
+    );
+};

src/hooks/useUser.ts

@@ -1,5 +0,0 @@
-import { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
-import { createContext, useContext } from 'react';
-
-export const UserContext = createContext<UserDto | undefined>(undefined);
-export const useUser = () => useContext(UserContext);