1+ import { SettingRow } from "../components/setting-base"
2+ import { FormItem } from "../components/setting-base"
3+ import { useTranslations } from 'next-intl' ;
4+ import { Input } from "@/components/ui/input" ;
5+ import { Button } from "@/components/ui/button" ;
6+ import { useState , useEffect } from "react" ;
7+ import { Store } from "@tauri-apps/plugin-store" ;
8+ import useImageStore from "@/stores/imageHosting" ;
9+ import { checkPicgoState , type PicgoImageHostingSetting } from "@/lib/imageHosting/picgo" ;
10+ import { Alert , AlertDescription , AlertTitle } from "@/components/ui/alert" ;
11+ import { CheckCircle , LoaderCircle , XCircle } from "lucide-react"
12+
13+ const DEFAULT_URL = 'http://127.0.0.1:36677'
14+
15+ export default function PicgoImageHosting ( ) {
16+ const t = useTranslations ( 'settings.imageHosting' ) ;
17+ const { mainImageHosting, setMainImageHosting } = useImageStore ( )
18+
19+ const [ loading , setLoading ] = useState ( false )
20+ const [ picgoState , setPicgoState ] = useState ( false )
21+ const [ url , setUrl ] = useState ( DEFAULT_URL )
22+
23+ async function init ( ) {
24+ const store = await Store . load ( 'store.json' ) ;
25+ const picgoSetting = await store . get < PicgoImageHostingSetting > ( 'picgo' )
26+ if ( picgoSetting ) {
27+ setUrl ( picgoSetting . url )
28+ } else {
29+ await store . set ( 'picgo' , { url : DEFAULT_URL } )
30+ await store . save ( )
31+ }
32+ }
33+
34+ async function handleCheckPicgoState ( ) {
35+ setLoading ( true )
36+ setPicgoState ( false )
37+ const state = await checkPicgoState ( )
38+ setPicgoState ( state )
39+ setLoading ( false )
40+ }
41+
42+ async function handleSaveUrl ( url : string ) {
43+ const store = await Store . load ( 'store.json' ) ;
44+ await store . set ( 'picgo' , { url } )
45+ await store . save ( )
46+ setUrl ( url )
47+ handleCheckPicgoState ( )
48+ }
49+
50+ useEffect ( ( ) => {
51+ init ( )
52+ handleCheckPicgoState ( )
53+ window . addEventListener ( 'visibilitychange' , handleCheckPicgoState )
54+ return ( ) => {
55+ window . removeEventListener ( 'visibilitychange' , handleCheckPicgoState )
56+ }
57+ } , [ ] )
58+
59+ return < div >
60+ < SettingRow className = "mb-4" >
61+ < Alert variant = { picgoState ? 'default' : 'destructive' } >
62+ {
63+ loading ? < LoaderCircle className = "animate-spin size-4" /> :
64+ picgoState ? < CheckCircle className = "size-4 !text-green-500" /> : < XCircle className = "size-4" />
65+ }
66+ < AlertTitle className = "mb-1 text-base font-bold" > PicGo</ AlertTitle >
67+ < AlertDescription >
68+ { picgoState ? t ( 'picgo.ok' ) : t ( 'picgo.error' ) }
69+ </ AlertDescription >
70+ </ Alert >
71+ </ SettingRow >
72+ < SettingRow >
73+ < FormItem title = "URL" desc = { t ( 'picgo.desc' ) } >
74+ < Input
75+ type = "text"
76+ value = { url }
77+ onChange = { ( e ) => handleSaveUrl ( e . target . value ) }
78+ />
79+ </ FormItem >
80+ </ SettingRow >
81+ < SettingRow className = "mb-4" >
82+ { mainImageHosting === 'picgo' ? (
83+ < Button disabled variant = "outline" >
84+ { t ( 'isPrimaryBackup' , { type : 'PicGo' } ) }
85+ </ Button >
86+ ) : (
87+ < Button
88+ variant = "outline"
89+ onClick = { ( ) => setMainImageHosting ( 'picgo' ) }
90+ >
91+ { t ( 'setPrimaryBackup' ) }
92+ </ Button >
93+ ) }
94+ </ SettingRow >
95+ </ div >
96+ }
0 commit comments