112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
// Import necessary packages
|
|
import React, { useState, useEffect } from "react";
|
|
import { View, Text, TextInput, StyleSheet } from "react-native"; // Add Picker import
|
|
import { getDb } from "@/app/lib/db";
|
|
import { Settings } from "@/app/lib/settings";
|
|
import { LanguageServer } from "@/app/i18n/api";
|
|
import {Picker} from "@react-native-picker/picker"
|
|
import { longLang } from "@/app/i18n/lang";
|
|
import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
|
|
|
|
type Language = {
|
|
code: string;
|
|
name: string;
|
|
};
|
|
|
|
type LanguageMatrix = {
|
|
[key: string]: Language;
|
|
};
|
|
|
|
const SettingsComponent: React.FC = () => {
|
|
const [hostLanguage, setHostLanguage] = useState<string | null>(null);
|
|
const [libretranslateBaseUrl, setLibretranslateBaseUrl] = useState<string | null>(null);
|
|
const [languages, setLanguages] = useState<undefined|LanguageMatrix>();
|
|
const [isLoaded, setIsLoaded] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
// Fetch the database connection
|
|
const db = await getDb();
|
|
const settings = new Settings(db);
|
|
|
|
// Get the current settings values
|
|
const hostLang = await settings.getHostLanguage();
|
|
const libretranslateUrl = await settings.getLibretranslateBaseUrl();
|
|
const langServer = new LanguageServer(libretranslateBaseUrl || LIBRETRANSLATE_BASE_URL);
|
|
|
|
// Fetch languages from API
|
|
const langData = await langServer.fetchLanguages();
|
|
setLanguages(langData);
|
|
setHostLanguage(hostLang || "en");
|
|
setLibretranslateBaseUrl(libretranslateUrl);
|
|
setIsLoaded(true);
|
|
})();
|
|
}, []);
|
|
|
|
const handleHostLanguageChange = async (value: string) => {
|
|
setHostLanguage(value);
|
|
|
|
// Fetch the database connection
|
|
const db = await getDb();
|
|
const settings = new Settings(db);
|
|
|
|
// Save the updated setting value
|
|
await settings.setHostLanguage(value);
|
|
};
|
|
|
|
const handleLibretranslateBaseUrlChange = async (value: string) => {
|
|
setLibretranslateBaseUrl(value);
|
|
|
|
// Fetch the database connection
|
|
const db = await getDb();
|
|
const settings = new Settings(db);
|
|
|
|
// Save the updated setting value
|
|
await settings.setLibretranslateBaseUrl(value);
|
|
};
|
|
|
|
return (
|
|
isLoaded ? <View style={styles.container}>
|
|
<Text style={styles.label}>Host Language:</Text>
|
|
<Picker
|
|
selectedValue={hostLanguage || ""}
|
|
style={{ height: 50, width: "100%" }}
|
|
onValueChange={handleHostLanguageChange}
|
|
accessibilityHint="language"
|
|
>
|
|
{languages && Object.keys(languages).map((langCode) => (
|
|
<Picker.Item key={langCode} label={longLang(langCode)} value={langCode} />
|
|
))}
|
|
</Picker>
|
|
|
|
<Text style={styles.label}>LibreTranslate Base URL:</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={libretranslateBaseUrl || ""}
|
|
onChangeText={handleLibretranslateBaseUrlChange}
|
|
accessibilityHint="libretranslate base url"
|
|
/>
|
|
</View> : <View><Text>Loading ...</Text></View>
|
|
);
|
|
};
|
|
|
|
// Create styles for the component
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
label: {
|
|
fontSize: 16,
|
|
marginBottom: 8,
|
|
},
|
|
input: {
|
|
height: 40,
|
|
borderColor: "gray",
|
|
borderWidth: 1,
|
|
marginBottom: 20,
|
|
paddingHorizontal: 8,
|
|
},
|
|
});
|
|
|
|
export default SettingsComponent; |