build out settings screen

api/queries.ts

@@ -4,7 +4,7 @@ import { createApi } from "./queries/functions/api";
 
 export const useApi = (serverUrl?: string, username?: string, password?: string, accessToken?: string) => useQuery({
     queryKey: [QueryKeys.Api, serverUrl, username, password, accessToken],
-    queryFn: ({ queryKey }) => createApi(serverUrl, username, password, accessToken),
+    queryFn: () => createApi(serverUrl, username, password, accessToken),
     gcTime: 1000,
     refetchInterval: false
 })

api/queries/recently-played.ts

@@ -0,0 +1,11 @@
+import { Api } from "@jellyfin/sdk";
+import { useQuery } from "@tanstack/react-query";
+import { QueryKeys } from "../../enums/query-keys";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
+
+export const useRecentlyPlayed = (api: Api) => useQuery({
+    queryKey: [QueryKeys.RecentlyPlayed],
+    queryFn: () => {
+
+    }
+})

components/Home/component.tsx

@@ -3,6 +3,7 @@ import { useApiClientContext } from "../jellyfin-api-provider";
 import _ from "lodash";
 import { Heading } from "../helpers/text";
 import { SafeAreaView } from "react-native-safe-area-context";
+import RecentlyPlayed from "./helpers/recently-played";
 
 
 export default function Home(): React.JSX.Element {
@@ -13,9 +14,8 @@ export default function Home(): React.JSX.Element {
             <ScrollView paddingLeft={10}>
                 <YStack alignContent='flex-start'>
                     <Heading>Hi there</Heading>
-                    <ScrollView horizontal>
-
-                    </ScrollView>
+                    
+                    <RecentlyPlayed />
                 </YStack>
             </ScrollView>
     );

components/Home/helpers/recently-played.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ScrollView } from "tamagui";
+import { useApiClientContext } from "../../jellyfin-api-provider";
+import { useRecentlyPlayed } from "../../../api/queries/recently-played";
+
+export default function RecentlyPlayed(): React.JSX.Element {
+
+    const { apiClient } = useApiClientContext();
+
+    const { data, isError, refetch } = useRecentlyPlayed(apiClient!)
+
+    return (
+        <ScrollView horizontal>
+
+        </ScrollView>
+    )
+}

components/Settings/component.tsx

@@ -1,10 +1,13 @@
 import React from "react";
-import { View } from "tamagui";
+import { ScrollView } from "tamagui";
+import AccountDetails from "./helpers/account-details";
+import SignOut from "./helpers/sign-out";
 
 export default function Settings(): React.JSX.Element {
     return (
-        <View>
-            
-        </View>
+        <ScrollView>
+            <AccountDetails />
+            <SignOut />
+        </ScrollView>
     )
 }

components/Settings/helpers/account-details.tsx

@@ -0,0 +1,20 @@
+import { XStack } from "@tamagui/stacks";
+import React from "react";
+import { Avatar } from "tamagui";
+import { Colors } from "../../../enums/colors";
+import { useApiClientContext } from "../../jellyfin-api-provider";
+
+export default function AccountDetails(): React.JSX.Element {
+
+    const {  } = useApiClientContext();
+
+    return (
+        <XStack>
+            <Avatar circular>
+                <Avatar.Image src=""/>
+
+                <Avatar.Fallback backgroundColor={Colors.Secondary}/>
+            </Avatar>
+        </XStack>
+    )
+}

components/Settings/helpers/sign-out.tsx

@@ -1,10 +1,14 @@
 import React from "react";
-import { View } from "react-native-ui-lib";
+import Button from "../../helpers/button";
+import { useApiClientContext } from "../../jellyfin-api-provider";
 
 export default function SignOut(): React.JSX.Element {
+
+    const { signOut } = useApiClientContext();
+
     return (
-        <View>
-            
-        </View>
+        <Button onPress={signOut}>
+            Sign Out
+        </Button>
     )
 }

components/jellyfin-api-provider.tsx

@@ -19,6 +19,7 @@ interface JellyfinApiClientContext {
   setAccessToken: React.Dispatch<SetStateAction<string | undefined>>;
   library: JellifyLibrary | undefined;
   setLibrary: React.Dispatch<SetStateAction<JellifyLibrary | undefined>>;
+  signOut: () => void
 }
 
 const JellyfinApiClientContextInitializer = () => {
@@ -33,6 +34,13 @@ const JellyfinApiClientContextInitializer = () => {
     const [apiClient, setApiClient] = useState<Api | undefined>(undefined);
     const { data: api, isPending: apiPending, refetch: refetchApi } = useApi(server?.url ?? undefined, username, undefined, accessToken);
 
+    const signOut = () => {
+      setUsername(undefined);
+      setAccessToken(undefined);
+      setServer(undefined);
+      setLibrary(undefined);
+    }
+
     useEffect(() => {
       if (!apiPending)
         console.log("Setting API client to stored values")
@@ -87,7 +95,8 @@ const JellyfinApiClientContextInitializer = () => {
       accessToken,
       setAccessToken,
       library,
-      setLibrary
+      setLibrary,
+      signOut
     };
 }
 
@@ -103,6 +112,7 @@ export const JellyfinApiClientContext =
     setAccessToken: () => {},
     library: undefined,
     setLibrary: () => {},
+    signOut: () => {}
   });
 
 export const JellyfinApiClientProvider: ({ children }: {
@@ -118,7 +128,8 @@ export const JellyfinApiClientProvider: ({ children }: {
     accessToken,
     setAccessToken,
     library,
-    setLibrary
+    setLibrary,
+    signOut
    } = JellyfinApiClientContextInitializer();
 
   // Add your logic to check if credentials are stored and initialize the API client here.
@@ -134,7 +145,8 @@ export const JellyfinApiClientProvider: ({ children }: {
       accessToken,
       setAccessToken,
       library,
-      setLibrary
+      setLibrary,
+      signOut
     }}>
         {children}
     </JellyfinApiClientContext.Provider>

enums/query-keys.ts

@@ -21,4 +21,5 @@ export enum QueryKeys {
     ReportPlaybackStopped = "REPORT_PLAYBACK_STOPPED",
     ServerUrl = "SERVER_URL",
     Playlist = "Playlist",
+    RecentlyPlayed = "RecentlyPlayed",
 }

types/JellifyServer.ts

@@ -1,10 +1,7 @@
-import { JellifyLibrary } from "./JellifyLibrary";
-
 export interface JellifyServer {
     url: string;
     address: string;
     name: string;
     version: string;
     startUpComplete: boolean;
-    library?: JellifyLibrary;
 }

types/JellifyUser.ts

@@ -0,0 +1,5 @@
+export interface JellifyUser {
+    id: string;
+    name: string;
+    accessToken: string;
+}