2021-01-16 00:00:31 +01:00
|
|
|
import ComponentSeparator from '@components/Separator'
|
2021-01-11 21:36:57 +01:00
|
|
|
import { useSearchQuery } from '@utils/queryHooks/search'
|
2020-12-27 00:32:51 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-08-07 01:18:10 +02:00
|
|
|
import React, { useContext, useEffect, useMemo, useRef } from 'react'
|
2022-09-18 23:54:50 +02:00
|
|
|
import { AccessibilityInfo, findNodeHandle, FlatList, View } from 'react-native'
|
2021-02-08 23:47:20 +01:00
|
|
|
import { Circle } from 'react-native-animated-spinkit'
|
2021-01-19 01:13:45 +01:00
|
|
|
import ComposeActions from './Root/Actions'
|
2021-01-14 22:53:01 +01:00
|
|
|
import ComposePosting from './Posting'
|
2021-01-01 17:52:14 +01:00
|
|
|
import ComposeRootFooter from './Root/Footer'
|
|
|
|
import ComposeRootHeader from './Root/Header'
|
2021-01-07 19:13:09 +01:00
|
|
|
import ComposeRootSuggestion from './Root/Suggestion'
|
2021-01-01 17:52:14 +01:00
|
|
|
import ComposeContext from './utils/createContext'
|
2021-02-07 00:39:11 +01:00
|
|
|
import ComposeDrafts from './Root/Drafts'
|
2021-11-15 22:34:43 +01:00
|
|
|
import { useSelector } from 'react-redux'
|
2022-09-23 00:21:41 +02:00
|
|
|
import { getInstanceConfigurationStatusCharsURL } from '@utils/slices/instancesSlice'
|
2020-12-04 01:17:10 +01:00
|
|
|
|
2021-11-15 22:34:43 +01:00
|
|
|
export let instanceConfigurationStatusCharsURL = 23
|
|
|
|
|
2021-03-18 23:32:31 +01:00
|
|
|
const ComposeRoot = React.memo(
|
|
|
|
() => {
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors } = useTheme()
|
2020-12-27 00:32:51 +01:00
|
|
|
|
2021-11-15 22:34:43 +01:00
|
|
|
instanceConfigurationStatusCharsURL = useSelector(
|
|
|
|
getInstanceConfigurationStatusCharsURL,
|
|
|
|
() => true
|
|
|
|
)
|
|
|
|
|
2021-04-09 21:43:12 +02:00
|
|
|
const accessibleRefDrafts = useRef(null)
|
|
|
|
const accessibleRefAttachments = useRef(null)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const tagDrafts = findNodeHandle(accessibleRefDrafts.current)
|
|
|
|
tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
|
|
|
|
}, [accessibleRefDrafts.current])
|
|
|
|
|
2022-09-23 00:21:41 +02:00
|
|
|
const { composeState } = useContext(ComposeContext)
|
2020-12-11 00:29:22 +01:00
|
|
|
|
2022-09-20 22:23:01 +02:00
|
|
|
const mapSchemaToType = () => {
|
|
|
|
if (composeState.tag) {
|
|
|
|
switch (composeState.tag?.schema) {
|
|
|
|
case '@':
|
|
|
|
return 'accounts'
|
|
|
|
case '#':
|
|
|
|
return 'hashtags'
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return undefined
|
|
|
|
}
|
|
|
|
}
|
2021-03-18 23:32:31 +01:00
|
|
|
const { isFetching, data, refetch } = useSearchQuery({
|
2022-09-20 22:23:01 +02:00
|
|
|
type: mapSchemaToType(),
|
|
|
|
term: composeState.tag?.raw.substring(1),
|
2021-03-18 23:32:31 +01:00
|
|
|
options: { enabled: false }
|
|
|
|
})
|
2021-01-07 19:13:09 +01:00
|
|
|
|
2021-03-18 23:32:31 +01:00
|
|
|
useEffect(() => {
|
|
|
|
if (
|
2022-09-20 22:23:01 +02:00
|
|
|
(composeState.tag?.schema === '@' || composeState.tag?.schema === '#') &&
|
|
|
|
composeState.tag?.raw
|
2021-03-18 23:32:31 +01:00
|
|
|
) {
|
|
|
|
refetch()
|
|
|
|
}
|
|
|
|
}, [composeState.tag])
|
2020-12-04 01:17:10 +01:00
|
|
|
|
2021-03-18 23:32:31 +01:00
|
|
|
const listEmpty = useMemo(() => {
|
|
|
|
if (isFetching) {
|
|
|
|
return (
|
2022-09-18 23:54:50 +02:00
|
|
|
<View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
|
2022-09-13 21:53:44 +02:00
|
|
|
<Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
|
2021-03-18 23:32:31 +01:00
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}, [isFetching])
|
2020-12-04 01:17:10 +01:00
|
|
|
|
2022-09-13 21:53:44 +02:00
|
|
|
const Footer = useMemo(
|
2022-09-18 23:54:50 +02:00
|
|
|
() => <ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />,
|
|
|
|
[accessibleRefAttachments.current]
|
2022-09-13 21:53:44 +02:00
|
|
|
)
|
|
|
|
|
2021-03-18 23:32:31 +01:00
|
|
|
return (
|
2022-09-18 23:54:50 +02:00
|
|
|
<View style={{ flex: 1 }}>
|
2021-03-18 23:32:31 +01:00
|
|
|
<FlatList
|
2022-09-20 22:23:01 +02:00
|
|
|
renderItem={({ item }) => <ComposeRootSuggestion item={item} />}
|
2021-03-18 23:32:31 +01:00
|
|
|
ListEmptyComponent={listEmpty}
|
|
|
|
keyboardShouldPersistTaps='always'
|
|
|
|
ListHeaderComponent={ComposeRootHeader}
|
2022-09-13 21:53:44 +02:00
|
|
|
ListFooterComponent={Footer}
|
2021-03-18 23:32:31 +01:00
|
|
|
ItemSeparatorComponent={ComponentSeparator}
|
|
|
|
// @ts-ignore
|
2022-09-20 22:23:01 +02:00
|
|
|
data={data ? data[mapSchemaToType()] : undefined}
|
2021-03-18 23:32:31 +01:00
|
|
|
keyExtractor={() => Math.random().toString()}
|
|
|
|
/>
|
|
|
|
<ComposeActions />
|
2021-04-09 21:43:12 +02:00
|
|
|
<ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
|
2021-03-18 23:32:31 +01:00
|
|
|
<ComposePosting />
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
() => true
|
|
|
|
)
|
2020-11-15 20:29:43 +01:00
|
|
|
|
2020-12-03 22:03:06 +01:00
|
|
|
export default ComposeRoot
|