Function SettingsUI

web/src/components/SettingsUI.tsx:12–120

()

import { useQuery } from '@tanstack/react-query'

function SettingsUI() {
    const [civitaiApiKey, setCivitaiApiKey] = React.useState<string>()

    const getSettingsQuery = useQuery({
        queryKey: ['settings'],
        queryFn: async () => {
            const resp = await fetch('/api/get_config')
            const data = (await resp.json()) as Config
            return data
        },
        enabled: !civitaiApiKey,
    })

    useEffect(() => {
        if (getSettingsQuery.data) {
            setCivitaiApiKey(getSettingsQuery.data.credentials.civitai.apikey)
        }
    }, [getSettingsQuery.data])

    const { toast } = useToast()

    const setCivitaiCredentialsMutation = useMutation({
        mutationFn: async ({
            civitai_api_key,
        }: {
            civitai_api_key: string
        }) => {
            const response = await fetch(`/api/update_config`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    credentials: {
                        civitai: {
                            apikey: civitai_api_key,
                        },
                    },
                }),
            })
            const data = await response.json()
            return data
        },
        onSuccess: async () => {
            toast({
                title: 'Saved your settings!',
            })
        },
    })

    if (getSettingsQuery.isLoading) {
        return <div>Loading...</div>
    }

    return (
        <>
            <div className="flex flex-col p-10">
                <div className="flex flex-col space-y-2">