Skip to content

Commit

Permalink
refactor: converted several components to tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vali-98
Vali-98 committed Feb 12, 2024
1 parent fbac286 commit 7254973
Show file tree
Hide file tree
Showing 13 changed files with 170 additions and 135 deletions.
172 changes: 86 additions & 86 deletions app/CharInfo.js → app/CharInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,41 +18,44 @@ import {
import { useMMKVString, useMMKVObject } from 'react-native-mmkv'

import { useAutosave } from 'react-autosave'
import { CharacterCardV2 } from '@constants/Characters'

const CharInfo = () => {
const router = useRouter()
const [charName, setCharName] = useMMKVString(Global.CurrentCharacter)
const [currentCard, setCurrentCard] = useMMKVObject(Global.CurrentCharacterCard)
const [characterCard, setCharacterCard] = useState({})
const [currentCard, setCurrentCard] = useMMKVObject<CharacterCardV2>(
Global.CurrentCharacterCard
)
const [characterCard, setCharacterCard] = useState<CharacterCardV2 | undefined>(undefined)

const loadcard = () => {
Characters.getCard(charName).then((data) => {
setCharacterCard(JSON.parse(data))
if (data) setCharacterCard(JSON.parse(data))
})
}

const autosave = () => {
if (!characterCard) return
Logger.log(`Autosaved Card ${charName}`)
savecard()
}

const savecard = async (data) => {
const savecard = async () => {
return Characters.saveCard(charName, JSON.stringify(characterCard)).then(() => {
setCurrentCard(characterCard)
})
}

if (characterCard)
useAutosave({
data: characterCard,
onSave: autosave,
interval: 3000,
})

useEffect(() => {
loadcard()
}, [])

useAutosave({
data: characterCard,
onSave: autosave,
interval: 3000,
})

const deleteCard = () => {
Alert.alert(
`Delete Character`,
Expand Down Expand Up @@ -95,88 +98,85 @@ const CharInfo = () => {
),
}}
/>
{characterCard && (
<ScrollView>
<View style={styles.characterHeader}>
<Image
source={{ uri: Characters.getImageDir(charName) }}
style={styles.avatar}
/>

<ScrollView>
<View style={styles.characterHeader}>
<Image
source={{ uri: Characters.getImageDir(charName) }}
style={styles.avatar}
/>

<View style={styles.characterHeaderInfo}>
<Text style={{ fontSize: 20, marginBottom: 12, color: Color.Text }}>
{charName}
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.foregroundButton}
onPress={() => {
DocumentPicker.getDocumentAsync({
copyToCacheDirectory: true,
type: 'image/*',
}).then((result) => {
if (result.canceled) return
Characters.copyImage(result.assets[0].uri, charName)
})
}}>
<FontAwesome name="upload" size={20} color={Color.Button} />
</TouchableOpacity>
<View style={styles.characterHeaderInfo}>
<Text style={{ fontSize: 20, marginBottom: 12, color: Color.Text }}>
{charName}
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.foregroundButton}
onPress={() => {
DocumentPicker.getDocumentAsync({
copyToCacheDirectory: true,
type: 'image/*',
}).then((result: DocumentPicker.DocumentPickerResult) => {
if (result.canceled) return
Characters.copyImage(
result.assets[0].uri,
charName ?? ''
)
})
}}>
<FontAwesome name="upload" size={20} color={Color.Button} />
</TouchableOpacity>
</View>
</View>
</View>
</View>

<Text style={styles.boxText}>
Description Tokens:{' '}
{(characterCard?.description ?? characterCard?.data?.description) !==
undefined &&
llamaTokenizer.encode(
characterCard?.description ?? characterCard.data.description
).length}
</Text>
<Text style={styles.boxText}>
Description Tokens:{' '}
{/*characterCard?.data?.description !== undefined &&
llamaTokenizer.encode(characterCard.data.description).length*/}
</Text>

<ScrollView style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline
onChangeText={(mes) => {
if (
characterCard.spec !== undefined &&
characterCard.spec === 'chara_card_v2'
)
setCharacterCard({
...characterCard,
description: mes,
data: { ...characterCard.data, description: mes },
})
else setCharacterCard({ ...characterCard, description: mes })
}}
value={characterCard?.data?.description ?? characterCard?.description}
numberOfLines={8}
/>
</ScrollView>
<ScrollView style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline
onChangeText={(mes) => {
if (
characterCard?.spec !== undefined &&
characterCard?.spec === 'chara_card_v2'
)
setCharacterCard({
...characterCard,
data: { ...characterCard.data, description: mes },
})
}}
value={characterCard?.data?.description}
numberOfLines={8}
/>
</ScrollView>

<Text style={styles.boxText}>First Message</Text>
<ScrollView style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline
onChangeText={(mes) => {
if (
characterCard.spec !== undefined &&
characterCard.spec === 'chara_card_v2'
)
setCharacterCard({
...characterCard,
first_mes: mes,
data: { ...characterCard.data, first_mes: mes },
})
else setCharacterCard({ ...characterCard, first_mes: mes })
}}
value={characterCard?.data?.first_mes ?? characterCard?.first_mes}
numberOfLines={8}
/>
<Text style={styles.boxText}>First Message</Text>
<ScrollView style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline
onChangeText={(mes) => {
if (
characterCard?.spec !== undefined &&
characterCard?.spec === 'chara_card_v2'
)
setCharacterCard({
...characterCard,
data: { ...characterCard.data, first_mes: mes },
})
}}
value={characterCard?.data?.first_mes}
numberOfLines={8}
/>
</ScrollView>
</ScrollView>
</ScrollView>
)}
</SafeAreaView>
)
}
Expand Down
40 changes: 27 additions & 13 deletions app/Instruct.js → app/Instruct.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,50 @@ import { View, SafeAreaView, TouchableOpacity, StyleSheet, Alert, ScrollView } f
import { Dropdown } from 'react-native-element-dropdown'
import { useMMKVObject, useMMKVString } from 'react-native-mmkv'
import { useAutosave } from 'react-autosave'
import { InstructType } from '@constants/Instructs'

type InstructListItem = {
label: string
value: number
}

const Instruct = () => {
const [instructName, setInstructName] = useMMKVString(Global.InstructName)
const [currentInstruct, setCurrentInstruct] = useMMKVObject(Global.CurrentInstruct)
const [instructList, setInstructList] = useState([])
const [selectedItem, setSelectedItem] = useState(null)
const [showNewInstruct, setShowNewInstruct] = useState(false)
const [currentInstruct, setCurrentInstruct] = useMMKVObject<InstructType>(
Global.CurrentInstruct
)
const [instructList, setInstructList] = useState<Array<InstructListItem>>([])
const [selectedItem, setSelectedItem] = useState<InstructListItem | undefined>(undefined)
const [showNewInstruct, setShowNewInstruct] = useState<boolean>(false)

const loadInstructList = (name) => {
const loadInstructList = (name: string = '') => {
Instructs.getFileList().then((list) => {
const mainlist = list.map((item, index) => {
const mainlist = list.map((item, index): InstructListItem => {
return { label: item.replace(`.json`, ''), value: index }
})
setInstructList(mainlist)
for (const item of mainlist) {
if (item.label.replace(`.json`, '') === name) {
setSelectedItem(item.value)
setSelectedItem(item)
return
}
}
setSelectedItem(0)
setSelectedItem(undefined)
Instructs.loadFile(list[0].replace(`.json`, '')).then((instruct) => {
setCurrentInstruct(JSON.parse(instruct))
})
})
}

useEffect(() => {
loadInstructList(instructName)
if (instructName) loadInstructList(instructName)
}, [])

handleSaveInstruct = (log) => {
Instructs.saveFile(instructName, currentInstruct).then(Logger.log(`Instruct Updated!`, log))
const handleSaveInstruct = (log: boolean) => {
if (currentInstruct && instructName)
Instructs.saveFile(instructName, currentInstruct).then(() =>
Logger.log(`Instruct Updated!`, log)
)
}

useAutosave({ data: currentInstruct, onSave: () => handleSaveInstruct(false), interval: 3000 })
Expand All @@ -62,6 +73,7 @@ const Instruct = () => {
Logger.log(`Preset name already exists.`, true)
return
}
if (!currentInstruct) return

Instructs.saveFile(text, { ...currentInstruct, name: text }).then(() => {
Logger.log(`Preset created.`, true)
Expand All @@ -73,7 +85,7 @@ const Instruct = () => {

<View style={styles.dropdownContainer}>
<Dropdown
value={selectedItem}
value={selectedItem ?? ''}
style={styles.dropdownbox}
data={instructList}
selectedTextStyle={styles.selected}
Expand Down Expand Up @@ -112,6 +124,7 @@ const Instruct = () => {
text: `Confirm`,
style: `destructive`,
onPress: () => {
if (!instructName) return
Instructs.deleteFile(instructName).then(() => {
loadInstructList()
})
Expand Down Expand Up @@ -143,7 +156,8 @@ const Instruct = () => {
<TouchableOpacity
style={styles.button}
onPress={async () => {
saveStringExternal(instructName, JSON.stringify(currentInstruct))
if (instructName)
saveStringExternal(instructName, JSON.stringify(currentInstruct))
}}>
<FontAwesome size={24} name="download" color={Color.Button} />
</TouchableOpacity>
Expand Down
7 changes: 4 additions & 3 deletions app/Logs.js → app/Logs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import { View, Text, FlatList, StyleSheet, TouchableOpacity, Alert } from 'react
import { useMMKVObject } from 'react-native-mmkv'

const Logs = () => {
const [logs, setLogs] = useMMKVObject(Global.Logs)
const [logs, setLogs] = useMMKVObject<Array<string>>(Global.Logs)

const logitems = logs.reverse().map((item, index) => ({ entry: item, key: index }))
const logitems = logs?.reverse().map((item, index) => ({ entry: item, key: index })) ?? []

const handleExportLogs = () => {
if (!logs) return
const data = logs.join('\n')
saveStringExternal('logs.txt', data, 'text/plain')
}
Expand Down Expand Up @@ -56,7 +57,7 @@ const Logs = () => {
inverted
windowSize={3}
data={logitems}
keyExtractor={(item) => item.key}
keyExtractor={(item) => `${item.key}`}
renderItem={({ item, index }) => <Text style={styles.entry}>{item.entry}</Text>}
/>
</View>
Expand Down
23 changes: 15 additions & 8 deletions app/Settings.js → app/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,22 @@ const Settings = () => {
<SafeAreaView style={styles.mainContainer}>
<View style={styles.userContainer}>
<View style={styles.imageContainer}>
<Image style={styles.userImage} source={{ uri: Users.getImageDir(userName) }} />
<Image
style={styles.userImage}
source={{ uri: Users.getImageDir(userName ?? '') }}
/>
</View>
<View>
<Text style={styles.userName}>{userName}</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => router.push('UserInfo')}>
onPress={() => router.push('/UserInfo')}>
<FontAwesome size={20} name="edit" color={Color.Button} />
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => router.push('UserSelector')}>
onPress={() => router.push('/UserSelector')}>
<FontAwesome size={20} name="th-list" color={Color.Button} />
</TouchableOpacity>
</View>
Expand All @@ -42,23 +45,27 @@ const Settings = () => {
</TouchableOpacity>
<TouchableOpacity
style={styles.largeButton}
onPress={() => router.push('Instruct')}>
onPress={() => router.push('/Instruct')}>
<Text style={styles.largeButtonText}>Instruct</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.largeButton} onPress={() => router.push('APIMenu')}>
<TouchableOpacity
style={styles.largeButton}
onPress={() => router.push('/APIMenu')}>
<Text style={styles.largeButtonText}>API</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.largeButton} onPress={() => router.push('TTSMenu')}>
<TouchableOpacity
style={styles.largeButton}
onPress={() => router.push('/TTSMenu')}>
<Text style={styles.largeButtonText}>TTS</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.largeButton} onPress={() => router.push('Logs')}>
<TouchableOpacity style={styles.largeButton} onPress={() => router.push('/Logs')}>
<Text style={styles.largeButtonText}>Logs</Text>
</TouchableOpacity>

{__DEV__ && (
<TouchableOpacity
style={styles.largeButton}
onPress={() => router.push('LorebookMenu')}>
onPress={() => router.push('/LorebookMenu')}>
<Text style={styles.largeButtonText}>Lorebooks</Text>
</TouchableOpacity>
)}
Expand Down
Loading

0 comments on commit 7254973

Please sign in to comment.