streamyfin/components/settings/Jellyseerr.tsx

import { useMutation } from "@tanstack/react-query";
import { useAtom } from "jotai";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { toast } from "sonner-native";
import { PasswordInput } from "@/components/PasswordInput";
import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
import { userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import { Button } from "../Button";
import { Input } from "../common/Input";
import { Text } from "../common/Text";
import { ListGroup } from "../list/ListGroup";
import { ListItem } from "../list/ListItem";

export const JellyseerrSettings = () => {
  const { jellyseerrUser, setJellyseerrUser, clearAllJellyseerData } =
    useJellyseerr();

  const { t } = useTranslation();

  const [user] = useAtom(userAtom);
  const [settings, updateSettings, _pluginSettings] = useSettings(null);

  const [jellyseerrPassword, setJellyseerrPassword] = useState<
    string | undefined
  >(undefined);

  const [jellyseerrServerUrl, setjellyseerrServerUrl] = useState<
    string | undefined
  >(settings?.jellyseerrServerUrl || undefined);

  const [showJellyseerrPassword, setShowJellyseerrPassword] =
    useState<boolean>(false);

  const loginToJellyseerrMutation = useMutation({
    mutationFn: async () => {
      if (!jellyseerrServerUrl && !settings?.jellyseerrServerUrl)
        throw new Error("Missing server url");
      if (!user?.Name)
        throw new Error("Missing required information for login");
      const jellyseerrTempApi = new JellyseerrApi(
        jellyseerrServerUrl || settings.jellyseerrServerUrl || "",
      );
      const testResult = await jellyseerrTempApi.test();
      if (!testResult.isValid) throw new Error("Invalid server url");
      return jellyseerrTempApi.login(user.Name, jellyseerrPassword || "");
    },
    onSuccess: (user) => {
      setJellyseerrUser(user);
      updateSettings({ jellyseerrServerUrl });
    },
    onError: () => {
      toast.error(t("jellyseerr.failed_to_login"));
    },
    onSettled: () => {
      setJellyseerrPassword(undefined);
    },
  });

  const clearData = () => {
    clearAllJellyseerData().finally(() => {
      setJellyseerrUser(undefined);
      setJellyseerrPassword(undefined);
      setjellyseerrServerUrl(undefined);
    });
  };

  return (
    <View className=''>
      <View>
        {jellyseerrUser ? (
          <>
            <ListGroup title={"Jellyseerr"}>
              <ListItem
                title={t(
                  "home.settings.plugins.jellyseerr.total_media_requests",
                )}
                value={jellyseerrUser?.requestCount?.toString()}
              />
              <ListItem
                title={t("home.settings.plugins.jellyseerr.movie_quota_limit")}
                value={
                  jellyseerrUser?.movieQuotaLimit?.toString() ??
                  t("home.settings.plugins.jellyseerr.unlimited")
                }
              />
              <ListItem
                title={t("home.settings.plugins.jellyseerr.movie_quota_days")}
                value={
                  jellyseerrUser?.movieQuotaDays?.toString() ??
                  t("home.settings.plugins.jellyseerr.unlimited")
                }
              />
              <ListItem
                title={t("home.settings.plugins.jellyseerr.tv_quota_limit")}
                value={
                  jellyseerrUser?.tvQuotaLimit?.toString() ??
                  t("home.settings.plugins.jellyseerr.unlimited")
                }
              />
              <ListItem
                title={t("home.settings.plugins.jellyseerr.tv_quota_days")}
                value={
                  jellyseerrUser?.tvQuotaDays?.toString() ??
                  t("home.settings.plugins.jellyseerr.unlimited")
                }
              />
            </ListGroup>

            <View className='p-4'>
              <Button color='red' onPress={clearData}>
                {t(
                  "home.settings.plugins.jellyseerr.reset_jellyseerr_config_button",
                )}
              </Button>
            </View>
          </>
        ) : (
          <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
            <Text className='text-xs text-red-600 mb-2'>
              {t("home.settings.plugins.jellyseerr.jellyseerr_warning")}
            </Text>
            <Text className='font-bold mb-1'>
              {t("home.settings.plugins.jellyseerr.server_url")}
            </Text>
            <View className='flex flex-col shrink mb-2'>
              <Text className='text-xs text-gray-600'>
                {t("home.settings.plugins.jellyseerr.server_url_hint")}
              </Text>
            </View>
            <Input
              className='border border-neutral-800 mb-2'
              placeholder={t(
                "home.settings.plugins.jellyseerr.server_url_placeholder",
              )}
              value={jellyseerrServerUrl ?? settings?.jellyseerrServerUrl}
              defaultValue={
                settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
              }
              keyboardType='url'
              returnKeyType='done'
              autoCapitalize='none'
              textContentType='URL'
              onChangeText={setjellyseerrServerUrl}
              editable={!loginToJellyseerrMutation.isPending}
            />
            <View>
              <Text className='font-bold mb-2'>
                {t("home.settings.plugins.jellyseerr.password")}
              </Text>
              <View className='relative'>
                <PasswordInput
                  value={jellyseerrPassword}
                  onChangeText={setJellyseerrPassword}
                  placeholder={t(
                    "home.settings.plugins.jellyseerr.password_placeholder",
                    { username: user?.Name },
                  )}
                  showPassword={showJellyseerrPassword}
                  onShowPasswordChange={setShowJellyseerrPassword}
                  layout='mobile'
                  topPosition='22'
                />
              </View>
              <Button
                loading={loginToJellyseerrMutation.isPending}
                disabled={loginToJellyseerrMutation.isPending}
                color='purple'
                className='h-12 mt-2'
                onPress={() => loginToJellyseerrMutation.mutate()}
              >
                {t("home.settings.plugins.jellyseerr.login_button")}
              </Button>
            </View>
          </View>
        )}
      </View>
    </View>
  );
};