style changes

getting api client to get added to context when signed in

Server name should stay on auth screen even when a different server address is requested

api/client.ts

@@ -1 +1,19 @@
-// TODO: Create client singleton here
+import { Api, Jellyfin } from "@jellyfin/sdk";
+import { getDeviceNameSync, getUniqueIdSync } from "react-native-device-info";
+import { name, version } from "../package.json"
+
+export const client : Jellyfin  = new Jellyfin({
+    clientInfo: {
+        name: name,
+        version: version
+    },
+    deviceInfo: {
+        name: getDeviceNameSync(),
+        id: getUniqueIdSync()
+    }
+});
+
+export function buildApiClient (serverUrl : string): Api {
+    let jellyfin = new Jellyfin(client);
+    return jellyfin.createApi(serverUrl);
+} 

api/mutators/functions/storage.ts

@@ -1,12 +1,11 @@
-import { Jellyfin } from "@jellyfin/sdk/lib/jellyfin";
 import { fetchServer } from "../../queries/functions/storage";
 import { JellyfinCredentials } from "../../types/jellyfin-credentials";
 import * as Keychain from "react-native-keychain"
 import { getSystemApi } from "@jellyfin/sdk/lib/utils/api/system-api";
-import { client } from "../../queries";
 import { JellifyServer } from "../../../types/JellifyServer";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { AsyncStorageKeys } from "../../../enums/async-storage-keys";
+import { buildApiClient } from "../../client";
 
 interface ServerMutationParams {
     serverUrl: string,
@@ -19,11 +18,10 @@ export const serverMutation = async (serverUrl: string) => {
     if (!!!serverUrl)
         throw Error("Server URL is empty")
 
-    let jellyfin = new Jellyfin(client);
-    let api = jellyfin.createApi(serverUrl);
+    const api = buildApiClient(serverUrl);
 
     console.log(`Created API client for ${api.basePath}`)
-    return await getSystemApi(api).getPublicSystemInfo()
+    return await getSystemApi(api).getPublicSystemInfo();
 }
 
 export const mutateServer = async (server: JellifyServer | undefined) => {

api/queries.ts

@@ -1,21 +1,7 @@
-import { Jellyfin } from "@jellyfin/sdk"
 import { useQuery } from "@tanstack/react-query";
-import { getDeviceNameSync, getUniqueIdSync } from "react-native-device-info"
 import { QueryKeys } from "../enums/query-keys";
-import { name, version } from "../package.json"
 import { createApi, createPublicApi } from "./queries/functions/api";
 
-export const client : Jellyfin  = new Jellyfin({
-    clientInfo: {
-        name: name,
-        version: version
-    },
-    deviceInfo: {
-        name: getDeviceNameSync(),
-        id: getUniqueIdSync()
-    }
-});
-
 export const usePublicApi = (serverUrl: string) => useQuery({
     queryKey: [QueryKeys.PublicApi, serverUrl],
     queryFn: ({ queryKey }) => {

components/Login/component.tsx

@@ -7,14 +7,14 @@ import ServerLibrary from "./helpers/server-library";
 
 export default function Login(): React.JSX.Element {
 
-    const { server, username } = useApiClientContext();
+    const { server, changeServer, username } = useApiClientContext();
 
     const Stack = createStackNavigator();
 
     return (
         <Stack.Navigator screenOptions={{ headerShown: false }}>
             {
-                (_.isUndefined(server) || _.isEmpty(server.url)) ? (
+                (_.isUndefined(server) || _.isEmpty(server.url) || changeServer) ? (
                     <Stack.Screen
                         name="ServerAddress"
                         options={{

components/Login/helpers/server-address.tsx

@@ -10,13 +10,14 @@ import { useApiClientContext } from "../../jellyfin-api-provider";
 import { Button, Input, SizableText, useTheme, View, YStack, Stack, XStack, getFontSizeToken, Paragraph, H2 } from "tamagui";
 import { CheckboxWithLabel } from "../../helpers/checkbox-with-label";
 import { SwitchWithLabel } from "../../helpers/switch-with-label";
+import { buildApiClient } from "../../../api/client";
 
 const http = "http://"
 const https = "https://"
 
 export default function ServerAddress(): React.JSX.Element {
 
-    const { setChangeServer, setServer } = useApiClientContext();
+    const { setChangeServer, setServer, setApiClient } = useApiClientContext();
 
     const [useHttps, setUseHttps] = useState(true)
     const [serverAddress, setServerAddress] = useState("");
@@ -44,6 +45,7 @@ export default function ServerAddress(): React.JSX.Element {
 
             setChangeServer(false);
             setServer(jellifyServer);
+            setApiClient(buildApiClient(serverUrl));
             return await mutateServer(jellifyServer);
         },
         onError: async (error: Error) => {

components/Login/helpers/server-authentication.tsx

@@ -6,9 +6,9 @@ import { useApiClientContext } from "../../jellyfin-api-provider";
 import { jellifyStyles } from "../../styles";
 import _ from "lodash";
 import * as Keychain from "react-native-keychain"
-import { client } from "../../../api/queries";
 import { JellyfinCredentials } from "../../../api/types/jellyfin-credentials";
-import { Button, Input, Paragraph, View } from "tamagui";
+import { Button, H2, Input, Paragraph, View } from "tamagui";
+import { client } from "../../../api/client";
 
 export default function ServerAuthentication(): React.JSX.Element {
     const [username, setUsername] = React.useState('');
@@ -45,16 +45,18 @@ export default function ServerAuthentication(): React.JSX.Element {
 
     const clearServer = useMutation({
         mutationFn: async () => {
-            setServer(undefined);
             setContextUsername(undefined);
             setChangeServer(true);
-            return await AsyncStorage.setItem(AsyncStorageKeys.ServerUrl, "");
+            return Promise.resolve();
         }
     });
 
     return (
-        <View style={jellifyStyles.container}>
-            <Paragraph fontSize={25} fontWeight={800}>Sign in to {server?.name ?? "Jellyfin"}</Paragraph>
+        <View marginHorizontal={10} flex={1} justifyContent='center'>
+            <H2 marginVertical={30}>
+
+                Sign in to {server?.name ?? "Jellyfin"}
+            </H2>
             <Button
                 onPress={() => {
                     clearServer.mutate();

components/helpers/switch-with-label.tsx

@@ -3,7 +3,7 @@ import { SizeTokens, XStack, Label, Separator, Switch } from "tamagui";
 export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, label: string, onCheckedChange: (value: boolean) => void, width?: number }) {
     const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
     return (
-      <XStack width={props.width ?? 150} alignItems="center" gap="$4">
+      <XStack alignItems="center" gap="$4">
         <Label
           justifyContent="flex-end"
           size={props.size}

components/theme.ts

@@ -0,0 +1,2 @@
+import { createTamagui } from "tamagui";
+