building out login page

components/Login/component.tsx

@@ -1,18 +1,29 @@
 import { createStackNavigator } from "@react-navigation/stack";
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, TextInput, useColorScheme } from "react-native";
 import SignIn from "./helpers/sign-in";
-
-const styles = StyleSheet.create({
-    text: {
-        color: "#FFFFFF"
-    }
-})
+import { Colors } from "react-native/Libraries/NewAppScreen";
+import { useState } from "react";
+import { useServerUrl } from "../../api/queries";
 
 export default function Login(): React.JSX.Element {
 
+    const isDarkMode = useColorScheme() === 'dark';
+    
+    const styles = StyleSheet.create({
+        input: {
+            color: isDarkMode ? "white" : "black"
+        }
+    })
+
     const Stack = createStackNavigator();
 
+    let [serverUrl, setServerUrl] = useState(!!!useServerUrl().data ? "" : useServerUrl().data!);
+
     return (
-        <Text style={styles.text} >Alyssa please be impressed</Text>
-    );
+        <TextInput
+            style={styles.input}
+            value={serverUrl}
+            onChangeText={(value) => setServerUrl}
+            />
+        );
 }

components/jellify.tsx

@@ -4,6 +4,7 @@ import Login from "./Login/component";
 import Navigation from "./navigation";
 import { Colors } from "react-native/Libraries/NewAppScreen";
 import { setupPlayer } from "react-native-track-player/lib/src/trackPlayer";
+import { useServerUrl } from "../api/queries";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -12,11 +13,12 @@ export default function Jellify(): React.JSX.Element {
   setupPlayer();
 
   // Attempt to create API instance, if it fails we aren't authenticated yet
-  let error, isLoading = true, isSuccess = false;
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
+  let { data, isLoading, isSuccess } = useServerUrl();
+
 
   return (
     <NavigationContainer>