getting the provider to support the state of the ui more better

components/Login/helpers/server-address.tsx

@@ -19,7 +19,7 @@ const https = "https://"
 
 export default function ServerAddress(): React.JSX.Element {
 
-    const { setServer, setApiClient } = useApiClientContext();
+    const { setServer } = useApiClientContext();
     const { serverAddress, setServerAddress } = useAuthenticationContext();
 
     const [useHttps, setUseHttps] = useState(true)
@@ -46,7 +46,6 @@ export default function ServerAddress(): React.JSX.Element {
             }
 
             setServer(jellifyServer);
-            setApiClient(buildApiClient(serverUrl));
             return await mutateServer(jellifyServer);
         },
         onError: async (error: Error) => {

components/Login/helpers/server-authentication.tsx

@@ -15,7 +15,7 @@ export default function ServerAuthentication(): React.JSX.Element {
     const { username, setUsername, setServerAddress } = useAuthenticationContext();
     const [password, setPassword] = React.useState<string | undefined>('');
 
-    const { apiClient, setApiClient, server, setUsername: setClientUsername } = useApiClientContext();
+    const { apiClient, server, setUsername: setClientUsername } = useApiClientContext();
 
     const useApiMutation = useMutation({
         mutationFn: async (credentials: JellyfinCredentials) => {
@@ -36,7 +36,6 @@ export default function ServerAuthentication(): React.JSX.Element {
             console.log(`Successfully signed in to ${server!.name}`)
             setUsername(credentials.username);
             setClientUsername(credentials.username);
-            setApiClient(client.createApi(server!.url, (authResult.data.AccessToken as string)))
             return await Keychain.setInternetCredentials(server!.url, credentials.username, (authResult.data.AccessToken as string));
 
         },
@@ -49,7 +48,6 @@ export default function ServerAuthentication(): React.JSX.Element {
     const clearServer = useMutation({
         mutationFn: async () => {
             setServerAddress(undefined);
-            setApiClient(undefined);
             return Promise.resolve();
         }
     });

components/jellyfin-api-provider.tsx

@@ -6,10 +6,12 @@ import { JellifyServer } from '../types/JellifyServer';
 import { useCredentials, useServer } from '../api/queries/keychain';
 import { JellifyLibrary } from '../types/JellifyLibrary';
 import { SharedWebCredentials } from 'react-native-keychain';
+import { QueryObserverResult, RefetchOptions } from '@tanstack/react-query';
 
 interface JellyfinApiClientContext {
   apiClient: Api | undefined;
   setApiClient: React.Dispatch<React.SetStateAction<Api | undefined>>;
+  refetchApi: (options?: RefetchOptions | undefined) => Promise<QueryObserverResult<Api, Error>>;
   server: JellifyServer | undefined;
   setServer: React.Dispatch<React.SetStateAction<JellifyServer | undefined>>;
   library: JellifyLibrary | undefined;
@@ -24,7 +26,7 @@ const JellyfinApiClientContextInitializer = () => {
     const [library, setLibrary] = useState<JellifyLibrary | undefined>(undefined);
     const [username, setUsername] = useState<string | undefined>();
 
-    const { data: api, isPending: apiPending } = useApi();
+    const { data: api, isPending: apiPending, refetch: refetchApi } = useApi();
     const { data: jellyfinServer, isPending: serverPending } = useServer();
     const { data: credentials, isPending: credentialsPending } : { data: SharedWebCredentials | undefined, isPending: boolean } = useCredentials();
 
@@ -45,9 +47,17 @@ const JellyfinApiClientContextInitializer = () => {
       serverPending,
     ]);
 
+    useEffect(() => {
+      refetchApi();
+    }, [
+      jellyfinServer,
+      username
+    ]);
+
     return { 
       apiClient,
       setApiClient, 
+      refetchApi,
       server,
       setServer, 
       library, 
@@ -61,6 +71,7 @@ export const JellyfinApiClientContext =
   createContext<JellyfinApiClientContext>({ 
     apiClient: undefined, 
     setApiClient: () => {},
+    refetchApi: () => new Promise(() => {}),
     server: undefined,
     setServer: () => {},
     library: undefined,
@@ -75,6 +86,7 @@ export const JellyfinApiClientProvider: ({ children }: {
   const { 
     apiClient, 
     setApiClient, 
+    refetchApi,
     server, 
     setServer, 
     library,
@@ -89,6 +101,7 @@ export const JellyfinApiClientProvider: ({ children }: {
     <JellyfinApiClientContext.Provider value={{ 
       apiClient, 
       setApiClient, 
+      refetchApi,
       server, 
       setServer, 
       library,