getting more login flow stuff cleaned up

api/mutators/auth.ts

@@ -3,8 +3,8 @@ import { usePublicApi } from "../queries";
 import { useServerUrl } from "../queries/storage";
 import { JellyfinCredentials } from "../types/jellyfin-credentials";
 import { MutationKeys } from "../../enums/mutation-keys";
-import { createPublicApi } from "../query-functions/api";
-import { fetchServerUrl } from "../query-functions/storage";
+import { createPublicApi } from "../queries/functions/api";
+import { fetchServerUrl } from "../queries/functions/storage";
 
 export const authenticateWithCredentials = useMutation({
     mutationKey: [MutationKeys.AuthenticationWithCredentials],
@@ -12,4 +12,7 @@ export const authenticateWithCredentials = useMutation({
         createPublicApi(await fetchServerUrl())
         .authenticateUserByName(credentials.username, credentials.password!);
     },
+    onSuccess(data, credentials, context) {
+        
+    },
 })

api/mutators/functions/storage.ts

@@ -0,0 +1,9 @@
+import { fetchServerUrl } from "../../queries/functions/storage";
+import { JellyfinCredentials } from "../../types/jellyfin-credentials";
+import * as Keychain from "react-native-keychain"
+
+
+
+export const mutateServerCredentials = async (credentials: JellyfinCredentials) => {
+    return Keychain.setInternetCredentials(await fetchServerUrl(), credentials.username, credentials.accessToken!);
+}

api/mutators/storage.ts

@@ -3,16 +3,19 @@ import { MutationKeys } from "../../enums/mutation-keys";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { AsyncStorageKeys } from "../../enums/async-storage-keys";
 
-import * as Keychain from "react-native-keychain"
-import { useServerUrl } from "../queries/storage";
 import { Jellyfin } from "@jellyfin/sdk";
 import { client } from "../queries";
 import { getSystemApi } from "@jellyfin/sdk/lib/utils/api/system-api"
 import { JellyfinCredentials } from "../types/jellyfin-credentials";
+import { mutateServerCredentials } from "./functions/storage";
 
-export const serverUrl = useMutation({
+export const useServerUrl = useMutation({
     mutationKey: [MutationKeys.ServerUrl],
-    mutationFn: (serverUrl: string) => {
+    mutationFn: (serverUrl: string | undefined) => {
+
+        if (!!!serverUrl)
+            throw Error("Server URL was empty")
+
         let jellyfin = new Jellyfin(client);
         let api = jellyfin.createApi(serverUrl);
         return getSystemApi(api).getPublicSystemInfo()
@@ -20,13 +23,13 @@ export const serverUrl = useMutation({
     onSuccess: (publicSystemInfoResponse, serverUrl, context) => {
         if (!!!publicSystemInfoResponse.data.Version)
             throw new Error("Unable to connect to Jellyfin Server");
-        return AsyncStorage.setItem(AsyncStorageKeys.ServerUrl, serverUrl);
+        return AsyncStorage.setItem(AsyncStorageKeys.ServerUrl, serverUrl!);
     }
 });
 
 export const credentials = useMutation({
     mutationKey: [MutationKeys.Credentials],
-    mutationFn: (credentials: JellyfinCredentials) => {
-        return Keychain.setInternetCredentials(useServerUrl.data!, credentials.username, credentials.accessToken!);
+    mutationFn: async (credentials: JellyfinCredentials) => {
+        mutateServerCredentials(credentials)
     },
 });

api/queries.ts

@@ -3,8 +3,8 @@ import { Query, 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 "./query-functions/api";
-import { fetchServerUrl } from "./query-functions/storage";
+import { createApi, createPublicApi } from "./queries/functions/api";
+import { fetchServerUrl } from "./queries/functions/storage";
 
 export const client : Jellyfin  = new Jellyfin({
     clientInfo: {

api/queries/albums.ts

@@ -4,8 +4,8 @@ import { QueryKeys } from "../../enums/query-keys";
 import { useApi } from "../queries";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useChildrenFromParent } from "./items";
-import { fetchServerUrl } from "../query-functions/storage";
-import { createApi } from "../query-functions/api";
+import { fetchServerUrl } from "./functions/storage";
+import { createApi } from "./functions/api";
 
 export const useArtistAlbums : (artistId: string) => UseQueryResult<BaseItemDto[], Error> = (artistId: string) => useQuery({
     queryKey: [QueryKeys.ArtistAlbums, artistId],

api/queries/functions/api.ts

@@ -1,5 +1,5 @@
 import { Api } from "@jellyfin/sdk";
-import { client } from "../queries";
+import { client } from "../../queries";
 import { fetchCredentials } from "./keychain";
 
 

api/queries/functions/storage.ts

@@ -1,5 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage"
-import { AsyncStorageKeys } from "../../enums/async-storage-keys"
+import { AsyncStorageKeys } from "../../../enums/async-storage-keys"
 import _ from "lodash";
 
 

api/queries/keychain.ts

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query"
 import { QueryKeys } from "../../enums/query-keys"
-import { fetchCredentials } from "../query-functions/keychain"
+import { fetchCredentials } from "./functions/keychain"
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { AsyncStorageKeys } from "../../enums/async-storage-keys";
-import { fetchServerUrl } from "../query-functions/storage";
+import { fetchServerUrl } from "./functions/storage";
 
 export const useCredentials = useQuery({
     queryKey: [QueryKeys.Credentials],

api/queries/playlist.ts

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "../../enums/query-keys";
 import { getPlaylistsApi } from "@jellyfin/sdk/lib/utils/api/playlists-api"
-import { createApi } from "../query-functions/api";
-import { fetchServerUrl } from "../query-functions/storage";
+import { createApi } from "./functions/api";
+import { fetchServerUrl } from "./functions/storage";
 
 
 export const usePlaylists = useQuery({

api/queries/public.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "../../enums/query-keys";
 import { usePublicApi } from "../queries";
 import { getSystemApi } from "@jellyfin/sdk/lib/utils/api/system-api";
-import { createPublicApi } from "../query-functions/api";
+import { createPublicApi } from "./functions/api";
 
 export const usePublicSystemInfo = (serverUrl: string) => useQuery({
     queryKey: [QueryKeys.PublicSystemInfo, serverUrl],

components/Login/component.tsx

@@ -1,9 +1,12 @@
 import { createStackNavigator } from "@react-navigation/stack";
-import { StyleSheet, Text, TextInput, useColorScheme } from "react-native";
+import { Button, StyleSheet, Text, TextInput, useColorScheme, View } from "react-native";
 import SignIn from "./helpers/sign-in";
 import { Colors } from "react-native/Libraries/NewAppScreen";
 import { useState } from "react";
 import { useServerUrl } from "../../api/queries";
+import { useServerUrl as serverUrlMutation } from "../../api/mutators/storage";
+import _ from "lodash"
+import ServerAuthentication from "./helpers/server-authentication";
 
 export default function Login(): React.JSX.Element {
 
@@ -17,13 +20,24 @@ export default function Login(): React.JSX.Element {
 
     const Stack = createStackNavigator();
 
-    let [serverUrl, setServerUrl] = useState(!!!useServerUrl().data ? "" : useServerUrl().data!);
+    let [serverUrl, setServerUrl] = useState(useServerUrl().data);
 
     return (
-        <TextInput
-            style={styles.input}
-            value={serverUrl}
-            onChangeText={(value) => setServerUrl}
-            />
-        );
+        (_.isEmpty(serverUrl) ?
+            <View>
+
+                <TextInput
+                    style={styles.input}
+                    value={serverUrl}
+                    onChangeText={(value) => setServerUrl}
+                    />
+
+                <Button 
+                    onPress={(event) => serverUrlMutation.mutate(serverUrl)}
+                    title="Submit Server URL"/>
+            </View>
+        : 
+            <ServerAuthentication />
+        )
+    );
 }