From 27d1ae2f5d7330f3731ef7c60edd308785e1289f Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Mon, 21 Oct 2024 19:19:29 -0500
Subject: [PATCH] getting libraries to load on library selection screen

---
 api/queries/libraries.ts                    |  9 -----
 components/Login/helpers/server-library.tsx | 41 ++++++++++++++++++++-
 2 files changed, 39 insertions(+), 11 deletions(-)
 delete mode 100644 api/queries/libraries.ts

diff --git a/api/queries/libraries.ts b/api/queries/libraries.ts
deleted file mode 100644
index 0a40bc7c..00000000
--- a/api/queries/libraries.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { QueryKeys } from "../../enums/query-keys";
-import { fetchMusicLibraries } from "./functions/libraries";
-import { Api } from "@jellyfin/sdk";
-
-export const useLibraries = (api: Api) => useQuery({
-    queryKey: [QueryKeys.Libraries, api],
-    queryFn: ({ queryKey }) => fetchMusicLibraries(queryKey[1] as Api)
-});
diff --git a/components/Login/helpers/server-library.tsx b/components/Login/helpers/server-library.tsx
index a5791703..1e8fda99 100644
--- a/components/Login/helpers/server-library.tsx
+++ b/components/Login/helpers/server-library.tsx
@@ -1,15 +1,18 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import React, { useEffect, useState } from "react";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { Select, View } from "tamagui";
 import { JellifyLibrary } from "../../../types/JellifyLibrary";
-import { useLibraries } from "../../../api/queries/libraries";
 import { mutateServerCredentials } from "../../../api/mutators/functions/storage";
 import { useAuthenticationContext } from "../provider";
 import { Heading } from "../../helpers/text";
 import Button from "../../helpers/button";
 import _ from "lodash";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models/base-item-dto";
+import { Api } from "@jellyfin/sdk";
+import { fetchMusicLibraries } from "../../../api/queries/functions/libraries";
+import { QueryKeys } from "../../../enums/query-keys";
+import { Icon } from "react-native-vector-icons/Icon";
 
 export default function ServerLibrary(): React.JSX.Element {
 
@@ -20,6 +23,11 @@ export default function ServerLibrary(): React.JSX.Element {
 
     const { apiClient, server, setApiClient, setUsername: setClientUsername } = useApiClientContext();
 
+    const useLibraries = (api: Api) => useQuery({
+        queryKey: [QueryKeys.Libraries, api],
+        queryFn: ({ queryKey }) => fetchMusicLibraries(queryKey[1] as Api)
+    });
+
     useEffect(() => {
 
         if (!_.isUndefined(apiClient)) 
@@ -48,6 +56,35 @@ export default function ServerLibrary(): React.JSX.Element {
         <View marginHorizontal={10} flex={1} justifyContent='center'>
             <Heading>Select Music Library</Heading>
 
+            { !_.isUndefined(libraries) &&
+                <Select defaultValue="">
+                    <Select.Trigger>
+                        <Select.Value placeholder="Libraries" />
+                    </Select.Trigger>
+                    <Select.Content>
+                        <Select.Viewport>
+                            { React.useMemo(
+                                () => libraries.map((item, i) => {
+                                    return (
+                                        <Select.Item
+                                            index={i}
+                                            key={item.Name!}
+                                            value={item.Name!}
+                                        >
+                                            <Select.ItemText>{item.Name!}</Select.ItemText>
+                                            <Select.ItemIndicator marginLeft="auto">
+                                                <Icon name="check" size={16} />
+                                            </Select.ItemIndicator>
+                                        </Select.Item>
+                                    )
+                                }),
+                                [libraries]
+                            )}
+                        </Select.Viewport>
+                    </Select.Content>
+                </Select>
+            }
+
             <Button
                 onPress={() => {
                     serverCredentials.mutate(undefined);