2020-12-29 16:19:04 +01:00
|
|
|
import { HeaderLeft, HeaderRight } from '@components/Header'
|
2020-12-30 14:33:33 +01:00
|
|
|
import haptics from '@root/components/haptics'
|
2020-12-29 16:19:04 +01:00
|
|
|
import { store } from '@root/store'
|
2020-12-30 00:56:25 +01:00
|
|
|
import layoutAnimation from '@root/utils/styles/layoutAnimation'
|
2020-12-29 16:19:04 +01:00
|
|
|
import formatText from '@screens/Shared/Compose/formatText'
|
|
|
|
import ComposeRoot from '@screens/Shared/Compose/Root'
|
2021-01-11 21:36:57 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
2021-01-07 19:13:09 +01:00
|
|
|
import { getLocalAccount } from '@utils/slices/instancesSlice'
|
2020-12-29 16:19:04 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2021-01-01 17:52:14 +01:00
|
|
|
import React, { useCallback, useEffect, useReducer, useState } from 'react'
|
2020-12-06 23:51:13 +01:00
|
|
|
import {
|
|
|
|
Alert,
|
|
|
|
Keyboard,
|
|
|
|
KeyboardAvoidingView,
|
2021-01-14 00:43:35 +01:00
|
|
|
Platform,
|
2020-12-06 23:51:13 +01:00
|
|
|
StyleSheet,
|
2020-12-30 00:56:25 +01:00
|
|
|
Text
|
2020-12-06 23:51:13 +01:00
|
|
|
} from 'react-native'
|
2020-11-15 23:33:01 +01:00
|
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
2020-11-08 01:10:38 +01:00
|
|
|
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
2020-12-20 17:53:24 +01:00
|
|
|
import { useQueryClient } from 'react-query'
|
2020-12-30 00:56:25 +01:00
|
|
|
import ComposeEditAttachment from './Compose/EditAttachment'
|
2021-01-01 17:52:14 +01:00
|
|
|
import ComposeContext from './Compose/utils/createContext'
|
2020-12-30 00:56:25 +01:00
|
|
|
import composeInitialState from './Compose/utils/initialState'
|
|
|
|
import composeParseState from './Compose/utils/parseState'
|
2021-01-01 23:10:47 +01:00
|
|
|
import composePost from './Compose/utils/post'
|
2020-12-30 00:56:25 +01:00
|
|
|
import composeReducer from './Compose/utils/reducer'
|
2021-01-07 22:18:14 +01:00
|
|
|
import { SharedComposeProp } from './sharedScreens'
|
2020-11-08 01:10:38 +01:00
|
|
|
|
2020-11-15 20:29:43 +01:00
|
|
|
const Stack = createNativeStackNavigator()
|
2020-11-08 01:10:38 +01:00
|
|
|
|
2021-01-07 22:18:14 +01:00
|
|
|
const Compose: React.FC<SharedComposeProp> = ({
|
|
|
|
route: { params },
|
|
|
|
navigation
|
|
|
|
}) => {
|
2020-12-07 12:31:40 +01:00
|
|
|
const { theme } = useTheme()
|
2020-12-20 17:53:24 +01:00
|
|
|
const queryClient = useQueryClient()
|
2020-12-06 23:51:13 +01:00
|
|
|
|
2020-11-15 23:33:01 +01:00
|
|
|
const [hasKeyboard, setHasKeyboard] = useState(false)
|
|
|
|
useEffect(() => {
|
|
|
|
Keyboard.addListener('keyboardWillShow', _keyboardDidShow)
|
|
|
|
Keyboard.addListener('keyboardWillHide', _keyboardDidHide)
|
|
|
|
|
|
|
|
// cleanup function
|
|
|
|
return () => {
|
|
|
|
Keyboard.removeListener('keyboardWillShow', _keyboardDidShow)
|
|
|
|
Keyboard.removeListener('keyboardWillHide', _keyboardDidHide)
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
const _keyboardDidShow = () => {
|
|
|
|
setHasKeyboard(true)
|
|
|
|
}
|
|
|
|
const _keyboardDidHide = () => {
|
|
|
|
setHasKeyboard(false)
|
|
|
|
}
|
|
|
|
|
2021-01-07 19:13:09 +01:00
|
|
|
const localAccount = getLocalAccount(store.getState())
|
2020-12-07 12:31:40 +01:00
|
|
|
const [composeState, composeDispatch] = useReducer(
|
2020-12-17 09:44:03 +01:00
|
|
|
composeReducer,
|
2020-12-07 12:31:40 +01:00
|
|
|
params?.type && params?.incomingStatus
|
2020-12-30 00:56:25 +01:00
|
|
|
? composeParseState({
|
2020-12-07 12:31:40 +01:00
|
|
|
type: params.type,
|
2021-01-07 19:13:09 +01:00
|
|
|
incomingStatus: params.incomingStatus
|
2020-12-07 12:31:40 +01:00
|
|
|
})
|
2020-12-13 22:31:55 +01:00
|
|
|
: {
|
|
|
|
...composeInitialState,
|
2021-01-07 19:13:09 +01:00
|
|
|
visibility:
|
|
|
|
localAccount?.preferences &&
|
|
|
|
localAccount.preferences['posting:default:visibility']
|
|
|
|
? localAccount.preferences['posting:default:visibility']
|
|
|
|
: 'public'
|
2020-12-13 22:31:55 +01:00
|
|
|
}
|
2020-12-07 12:31:40 +01:00
|
|
|
)
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
switch (params?.type) {
|
|
|
|
case 'edit':
|
|
|
|
if (params.incomingStatus.spoiler_text) {
|
|
|
|
formatText({
|
2020-12-11 00:29:22 +01:00
|
|
|
textInput: 'spoiler',
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch,
|
|
|
|
content: params.incomingStatus.spoiler_text,
|
|
|
|
disableDebounce: true
|
|
|
|
})
|
|
|
|
}
|
|
|
|
formatText({
|
2020-12-11 00:29:22 +01:00
|
|
|
textInput: 'text',
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch,
|
|
|
|
content: params.incomingStatus.text!,
|
|
|
|
disableDebounce: true
|
|
|
|
})
|
|
|
|
break
|
|
|
|
case 'reply':
|
2020-12-13 01:24:25 +01:00
|
|
|
const actualStatus =
|
|
|
|
params.incomingStatus.reblog || params.incomingStatus
|
2020-12-07 12:31:40 +01:00
|
|
|
formatText({
|
2020-12-11 00:29:22 +01:00
|
|
|
textInput: 'text',
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch,
|
2020-12-30 14:33:33 +01:00
|
|
|
content: `@${actualStatus.account.acct} `,
|
2020-12-07 12:31:40 +01:00
|
|
|
disableDebounce: true
|
|
|
|
})
|
|
|
|
break
|
2020-12-21 21:47:15 +01:00
|
|
|
case 'conversation':
|
|
|
|
formatText({
|
|
|
|
textInput: 'text',
|
|
|
|
composeDispatch,
|
|
|
|
content: `@${params.incomingStatus.account.acct} `,
|
|
|
|
disableDebounce: true
|
|
|
|
})
|
|
|
|
break
|
2020-12-07 12:31:40 +01:00
|
|
|
}
|
|
|
|
}, [params?.type])
|
2020-11-15 22:33:09 +01:00
|
|
|
|
2020-12-06 23:51:13 +01:00
|
|
|
const totalTextCount =
|
2020-12-07 12:31:40 +01:00
|
|
|
(composeState.spoiler.active ? composeState.spoiler.count : 0) +
|
|
|
|
composeState.text.count
|
2020-12-06 23:51:13 +01:00
|
|
|
|
2020-12-13 01:24:25 +01:00
|
|
|
const postButtonText = {
|
|
|
|
conversation: '回复私信',
|
|
|
|
reply: '发布回复',
|
|
|
|
edit: '发嘟嘟'
|
|
|
|
}
|
|
|
|
|
2020-12-26 00:53:49 +01:00
|
|
|
const headerLeft = useCallback(
|
|
|
|
() => (
|
|
|
|
<HeaderLeft
|
2020-12-26 23:27:53 +01:00
|
|
|
type='text'
|
|
|
|
content='退出编辑'
|
2020-12-26 00:53:49 +01:00
|
|
|
onPress={() =>
|
|
|
|
Alert.alert('确认取消编辑?', '', [
|
|
|
|
{
|
|
|
|
text: '退出编辑',
|
|
|
|
style: 'destructive',
|
|
|
|
onPress: () => navigation.goBack()
|
2020-12-30 00:56:25 +01:00
|
|
|
},
|
|
|
|
{ text: '继续编辑', style: 'cancel' }
|
2020-12-26 00:53:49 +01:00
|
|
|
])
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
const headerCenter = useCallback(
|
|
|
|
() => (
|
|
|
|
<Text
|
|
|
|
style={[
|
|
|
|
styles.count,
|
|
|
|
{
|
|
|
|
color: totalTextCount > 500 ? theme.red : theme.secondary
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
{totalTextCount} / 500
|
|
|
|
</Text>
|
|
|
|
),
|
|
|
|
[totalTextCount]
|
|
|
|
)
|
|
|
|
const headerRight = useCallback(
|
2020-12-26 23:27:53 +01:00
|
|
|
() => (
|
|
|
|
<HeaderRight
|
|
|
|
type='text'
|
|
|
|
content={params?.type ? postButtonText[params.type] : '发嘟嘟'}
|
2020-12-30 00:56:25 +01:00
|
|
|
onPress={() => {
|
|
|
|
layoutAnimation()
|
|
|
|
setIsSubmitting(true)
|
2021-01-01 23:10:47 +01:00
|
|
|
composePost(params, composeState)
|
2020-12-30 00:56:25 +01:00
|
|
|
.then(() => {
|
2020-12-30 14:33:33 +01:00
|
|
|
haptics('Success')
|
2021-01-11 21:36:57 +01:00
|
|
|
const queryKey: QueryKeyTimeline = [
|
|
|
|
'Timeline',
|
|
|
|
{ page: 'Following' }
|
|
|
|
]
|
|
|
|
queryClient.invalidateQueries(queryKey)
|
2021-01-04 14:55:34 +01:00
|
|
|
if (
|
|
|
|
params?.type &&
|
|
|
|
(params.type === 'reply' || params.type === 'conversation')
|
|
|
|
) {
|
|
|
|
queryClient.invalidateQueries(
|
|
|
|
[
|
|
|
|
'Toot',
|
|
|
|
{
|
|
|
|
toot: params.incomingStatus.reblog
|
|
|
|
? params.incomingStatus.reblog.id
|
|
|
|
: params.incomingStatus.id
|
|
|
|
}
|
|
|
|
],
|
|
|
|
{ exact: true, active: true }
|
|
|
|
)
|
|
|
|
}
|
2020-12-30 00:56:25 +01:00
|
|
|
navigation.goBack()
|
|
|
|
})
|
|
|
|
.catch(() => {
|
2020-12-30 14:33:33 +01:00
|
|
|
haptics('Error')
|
2020-12-30 00:56:25 +01:00
|
|
|
setIsSubmitting(false)
|
|
|
|
Alert.alert('发布失败', '', [
|
|
|
|
{
|
|
|
|
text: '返回重试'
|
|
|
|
}
|
|
|
|
])
|
|
|
|
})
|
|
|
|
}}
|
2020-12-26 23:27:53 +01:00
|
|
|
loading={isSubmitting}
|
2020-12-30 00:56:25 +01:00
|
|
|
disabled={composeState.text.raw.length < 1 || totalTextCount > 500}
|
2020-12-26 23:27:53 +01:00
|
|
|
/>
|
|
|
|
),
|
2021-01-01 23:10:47 +01:00
|
|
|
[isSubmitting, totalTextCount, composeState]
|
2020-12-29 16:19:04 +01:00
|
|
|
)
|
|
|
|
|
2020-11-08 01:10:38 +01:00
|
|
|
return (
|
2021-01-14 00:43:35 +01:00
|
|
|
<KeyboardAvoidingView
|
|
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
|
|
style={{ flex: 1 }}
|
|
|
|
>
|
2020-11-15 23:33:01 +01:00
|
|
|
<SafeAreaView
|
|
|
|
style={{ flex: 1 }}
|
|
|
|
edges={hasKeyboard ? ['left', 'right'] : ['left', 'right', 'bottom']}
|
|
|
|
>
|
2020-12-30 00:56:25 +01:00
|
|
|
<ComposeContext.Provider value={{ composeState, composeDispatch }}>
|
2021-01-13 01:03:46 +01:00
|
|
|
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
|
2020-12-30 00:56:25 +01:00
|
|
|
<Stack.Screen
|
|
|
|
name='Screen-Shared-Compose-Root'
|
|
|
|
component={ComposeRoot}
|
|
|
|
options={{ headerLeft, headerCenter, headerRight }}
|
|
|
|
/>
|
|
|
|
<Stack.Screen
|
|
|
|
name='Screen-Shared-Compose-EditAttachment'
|
|
|
|
component={ComposeEditAttachment}
|
2021-01-14 00:43:35 +01:00
|
|
|
options={{ stackPresentation: 'modal', headerShown: false }}
|
2020-12-30 00:56:25 +01:00
|
|
|
/>
|
|
|
|
</Stack.Navigator>
|
|
|
|
</ComposeContext.Provider>
|
2020-11-15 23:33:01 +01:00
|
|
|
</SafeAreaView>
|
|
|
|
</KeyboardAvoidingView>
|
2020-11-08 01:10:38 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-12-06 23:51:13 +01:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
count: {
|
|
|
|
textAlign: 'center',
|
2020-12-29 00:21:05 +01:00
|
|
|
...StyleConstants.FontStyle.M
|
2020-12-06 23:51:13 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2020-12-11 00:29:22 +01:00
|
|
|
export default Compose
|