mirror of https://github.com/tooot-app/app
101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
import { ComponentEmojis } from '@components/Emojis'
|
|
import { EmojisState } from '@components/Emojis/Context'
|
|
import { HeaderLeft, HeaderRight } from '@components/Header'
|
|
import ComponentInput from '@components/Input'
|
|
import { TabMeProfileStackScreenProps } from '@utils/navigation/navigators'
|
|
import { useProfileMutation } from '@utils/queryHooks/profile'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React, { RefObject, useEffect, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Alert, ScrollView, TextInput } from 'react-native'
|
|
import FlashMessage from 'react-native-flash-message'
|
|
|
|
const TabMeProfileNote: React.FC<
|
|
TabMeProfileStackScreenProps<'Tab-Me-Profile-Note'> & {
|
|
messageRef: RefObject<FlashMessage>
|
|
}
|
|
> = ({
|
|
messageRef,
|
|
route: {
|
|
params: { note }
|
|
},
|
|
navigation
|
|
}) => {
|
|
const { theme } = useTheme()
|
|
const { t } = useTranslation(['common'])
|
|
const { mutateAsync, status } = useProfileMutation()
|
|
|
|
const [notes, setNotes] = useState(note)
|
|
const notesProps: NonNullable<EmojisState['inputProps'][0]> = {
|
|
value: [notes, setNotes],
|
|
selection: useState({ start: notes.length }),
|
|
isFocused: useRef<boolean>(false),
|
|
ref: useRef<TextInput>(null),
|
|
maxLength: 500
|
|
}
|
|
|
|
const [dirty, setDirty] = useState(false)
|
|
useEffect(() => {
|
|
setDirty(note !== notes)
|
|
}, [notes])
|
|
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
headerLeft: () => (
|
|
<HeaderLeft
|
|
content='chevron-left'
|
|
onPress={() => {
|
|
if (dirty) {
|
|
Alert.alert(t('common:discard.title'), t('common:discard.message'), [
|
|
{
|
|
text: t('common:buttons.discard'),
|
|
style: 'destructive',
|
|
onPress: () => navigation.navigate('Tab-Me-Profile-Root')
|
|
},
|
|
{
|
|
text: t('common:buttons.cancel'),
|
|
style: 'default'
|
|
}
|
|
])
|
|
} else {
|
|
navigation.navigate('Tab-Me-Profile-Root')
|
|
}
|
|
}}
|
|
/>
|
|
),
|
|
headerRight: () => (
|
|
<HeaderRight
|
|
disabled={!dirty}
|
|
loading={status === 'loading'}
|
|
content='save'
|
|
onPress={async () => {
|
|
mutateAsync({
|
|
messageRef,
|
|
message: {
|
|
text: 'me.profile.root.note.title',
|
|
succeed: true,
|
|
failed: true
|
|
},
|
|
type: 'note',
|
|
data: notes
|
|
}).then(() => {
|
|
navigation.navigate('Tab-Me-Profile-Root')
|
|
})
|
|
}}
|
|
/>
|
|
)
|
|
})
|
|
}, [theme, dirty, status, notes])
|
|
|
|
return (
|
|
<ComponentEmojis inputProps={[notesProps]}>
|
|
<ScrollView style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
|
|
<ComponentInput {...notesProps} multiline />
|
|
</ScrollView>
|
|
</ComponentEmojis>
|
|
)
|
|
}
|
|
|
|
export default TabMeProfileNote
|