From 6f34f2e6a6e5b0e3da6b8914f74d2c8e12fbb8a6 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Mon, 9 Sep 2024 09:04:35 +0300
Subject: [PATCH] feat: allow authorizing quick connect closes #113

---
 app/(auth)/(tabs)/(home)/settings.tsx  | 43 ++++++++++++++++++++++++--
 components/settings/SettingToggles.tsx | 14 +++++++--
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/app/(auth)/(tabs)/(home)/settings.tsx b/app/(auth)/(tabs)/(home)/settings.tsx
index b89821ce..c1cc44b4 100644
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -5,10 +5,12 @@ import { SettingToggles } from "@/components/settings/SettingToggles";
 import { useFiles } from "@/hooks/useFiles";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
+import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
-import { ScrollView, View } from "react-native";
+import { Alert, ScrollView, View } from "react-native";
+import { red } from "react-native-reanimated/lib/typescript/reanimated2/Colors";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function settings() {
@@ -26,6 +28,36 @@ export default function settings() {
 
   const insets = useSafeAreaInsets();
 
+  const openQuickConnectAuthCodeInput = () => {
+    Alert.prompt(
+      "Quick connect",
+      "Enter the code from the Jellyfin app",
+      async (text) => {
+        if (text) {
+          try {
+            const res = await getQuickConnectApi(api!).authorizeQuickConnect({
+              code: text,
+              userId: user?.Id,
+            });
+            console.log(res.status, res.statusText, res.data);
+            if (res.status === 200) {
+              Haptics.notificationAsync(
+                Haptics.NotificationFeedbackType.Success
+              );
+              Alert.alert("Success", "Quick connect authorized");
+            } else {
+              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+              Alert.alert("Error", "Invalid code");
+            }
+          } catch (e) {
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+            Alert.alert("Error", "Invalid code");
+          }
+        }
+      }
+    );
+  };
+
   return (
     <ScrollView
       contentContainerStyle={{
@@ -38,12 +70,19 @@ export default function settings() {
         <View>
           <Text className="font-bold text-lg mb-2">Information</Text>
 
-          <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
             <ListItem title="User" subTitle={user?.Name} />
             <ListItem title="Server" subTitle={api?.basePath} />
           </View>
         </View>
 
+        <View>
+          <Text className="font-bold text-lg mb-2">Quick connect</Text>
+          <Button onPress={openQuickConnectAuthCodeInput} color="black">
+            Authorize
+          </Button>
+        </View>
+
         <SettingToggles />
 
         <View className="flex flex-col space-y-2">
diff --git a/components/settings/SettingToggles.tsx b/components/settings/SettingToggles.tsx
index 03858bd6..949be282 100644
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -7,7 +7,13 @@ import {
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { Linking, Switch, TouchableOpacity, View } from "react-native";
+import {
+  Linking,
+  Switch,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
@@ -16,7 +22,9 @@ import { useState } from "react";
 import { Button } from "../Button";
 import { MediaToggles } from "./MediaToggles";
 
-export const SettingToggles: React.FC = () => {
+interface Props extends ViewProps {}
+
+export const SettingToggles: React.FC<Props> = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
 
   const [api] = useAtom(apiAtom);
@@ -49,7 +57,7 @@ export const SettingToggles: React.FC = () => {
   });
 
   return (
-    <View>
+    <View {...props}>
       {/* <View>
         <Text className="text-lg font-bold mb-2">Look and feel</Text>
         <View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800 opacity-50">