wiring up a context for shaking the login state, let's see if she builds *fingers crossed*

components/Login/component.tsx

@@ -1,16 +1,37 @@
-import _, { isError } from "lodash"
+import _ from "lodash"
 import ServerAuthentication from "./helpers/server-authentication";
 import ServerAddress from "./helpers/server-address";
 import { useServer } from "../../api/queries/keychain";
 import { View } from "react-native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { useState } from "react";
 
 export default function Login(): React.JSX.Element {
 
-    let { isError } = useServer;
+    let { isError, data } = useServer;
+
+    const Stack = createStackNavigator();
+
+    let [loginState, setLoginState] = useState({})
 
     return (
-        <View>
-            { isError ? <ServerAddress /> : <ServerAuthentication /> }
-        </View>
+        <Stack.Navigator>
+            { 
+                (isError || _.isUndefined(data) || _.isEmpty(data.version)) ? (
+                    <Stack.Screen
+                        name="ServerAddress"
+                        options={{title: "ServerAddress"}}
+                        component={ServerAddress}
+                        >
+                        </Stack.Screen>
+                    ) : (
+                    <Stack.Screen
+                        name="ServerAuthentication"
+                        component={ServerAuthentication}
+                        options={{title: "Server Authentication"}}
+                    />
+                )
+            }
+        </Stack.Navigator>
     );
 }

components/Login/helpers/server-address.tsx

@@ -1,19 +1,16 @@
 import React, { useState } from "react";
 import _ from "lodash";
-import { serverUrlMutation } from "../../../api/mutators/storage";
-import { Button, SafeAreaView, TextInput, useColorScheme, View } from "react-native";
-import { Jellyfin } from "@jellyfin/sdk";
-import { getSystemApi } from "@jellyfin/sdk/lib/utils/api/system-api";
+import { Button, TextInput, useColorScheme, View } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation } from "@tanstack/react-query";
-import { client } from "../../../api/queries";
 import { AsyncStorageKeys } from "../../../enums/async-storage-keys";
 import { JellifyServer } from "../../../types/JellifyServer";
 import { serverMutation } from "../../../api/mutators/functions/storage";
+import { useServer } from "../../../api/queries/keychain";
 
 export default function ServerAddress(): React.JSX.Element {
 
-    const [serverUrl, setServerUrl] = useState("");
+    const [serverUrl, setServerUrl] = useState(useServer.data?.url ?? "");
 
     const isDarkMode = useColorScheme() === 'dark';
 
@@ -51,7 +48,7 @@ export default function ServerAddress(): React.JSX.Element {
             </TextInput>
 
             <Button 
-                onPress={() => serverUrlMutation.mutate(serverUrl)}
+                onPress={() => useServerMutation.mutate(serverUrl)}
                 title="Connect"
             />
 

components/Login/helpers/server-authentication.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Button, TextInput, useColorScheme, View } from "react-native";
-import { clearServer } from "../../../api/mutators/storage";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation } from "@tanstack/react-query";
 import { AsyncStorageKeys } from "../../../enums/async-storage-keys";

components/jellify.tsx

@@ -1,4 +1,4 @@
-import { SafeAreaView, useColorScheme } from "react-native";
+import { ActivityIndicator, SafeAreaView, Text, useColorScheme } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import Login from "./Login/component";
 import Navigation from "./navigation";
@@ -7,6 +7,8 @@ import { setupPlayer } from "react-native-track-player/lib/src/trackPlayer";
 import { useCredentials } from "../api/queries/keychain";
 import _ from "lodash";
 import { jellifyStyles } from "./styles";
+import { createContext, useContext, useState } from "react";
+import { SharedWebCredentials } from "react-native-keychain";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -19,14 +21,26 @@ export default function Jellify(): React.JSX.Element {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  let { data, isError, isSuccess } = useCredentials;
+  let { data, isError, isSuccess, isPending } = useCredentials;
 
+  const [credentials, setCredentials] = useState(data);
+
+  const LoginContext = createContext<[SharedWebCredentials | undefined, React.Dispatch<React.SetStateAction<SharedWebCredentials | undefined>>]>([data, setCredentials]);
 
   return (
-    <NavigationContainer>
+    (isPending) ? (
       <SafeAreaView style={jellifyStyles.container}>
-        { (!isError && !_.isUndefined(data)) ? <Navigation /> : <Login /> }
+        <Text>Logging in</Text>
+        <ActivityIndicator />
       </SafeAreaView>
-    </NavigationContainer>
+    ) : (
+      <LoginContext.Provider value={[credentials, setCredentials]}>
+        <NavigationContainer>
+          <SafeAreaView style={jellifyStyles.container}>
+          { (!isError && !_.isUndefined(data)) ? <Navigation /> : <Login /> }
+          </SafeAreaView>
+        </NavigationContainer>
+      </LoginContext.Provider>
+    )
   );
 }