mirror of https://github.com/tooot-app/app
104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
import ComponentSeparator from '@components/Separator'
|
|
import { useSearchQuery } from '@utils/queryHooks/search'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React, { useContext, useEffect, useMemo, useRef } from 'react'
|
|
import { AccessibilityInfo, findNodeHandle, FlatList, View } from 'react-native'
|
|
import { Circle } from 'react-native-animated-spinkit'
|
|
import ComposeActions from './Root/Actions'
|
|
import ComposePosting from './Posting'
|
|
import ComposeRootFooter from './Root/Footer'
|
|
import ComposeRootHeader from './Root/Header'
|
|
import ComposeRootSuggestion from './Root/Suggestion'
|
|
import ComposeContext from './utils/createContext'
|
|
import ComposeDrafts from './Root/Drafts'
|
|
import { useSelector } from 'react-redux'
|
|
import { getInstanceConfigurationStatusCharsURL } from '@utils/slices/instancesSlice'
|
|
|
|
export let instanceConfigurationStatusCharsURL = 23
|
|
|
|
const ComposeRoot = React.memo(
|
|
() => {
|
|
const { colors } = useTheme()
|
|
|
|
instanceConfigurationStatusCharsURL = useSelector(
|
|
getInstanceConfigurationStatusCharsURL,
|
|
() => true
|
|
)
|
|
|
|
const accessibleRefDrafts = useRef(null)
|
|
const accessibleRefAttachments = useRef(null)
|
|
|
|
useEffect(() => {
|
|
const tagDrafts = findNodeHandle(accessibleRefDrafts.current)
|
|
tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
|
|
}, [accessibleRefDrafts.current])
|
|
|
|
const { composeState } = useContext(ComposeContext)
|
|
|
|
const mapSchemaToType = () => {
|
|
if (composeState.tag) {
|
|
switch (composeState.tag?.schema) {
|
|
case '@':
|
|
return 'accounts'
|
|
case '#':
|
|
return 'hashtags'
|
|
}
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
const { isFetching, data, refetch } = useSearchQuery({
|
|
type: mapSchemaToType(),
|
|
term: composeState.tag?.raw.substring(1),
|
|
options: { enabled: false }
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (
|
|
(composeState.tag?.schema === '@' || composeState.tag?.schema === '#') &&
|
|
composeState.tag?.raw
|
|
) {
|
|
refetch()
|
|
}
|
|
}, [composeState.tag])
|
|
|
|
const listEmpty = useMemo(() => {
|
|
if (isFetching) {
|
|
return (
|
|
<View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
|
|
<Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
|
|
</View>
|
|
)
|
|
}
|
|
}, [isFetching])
|
|
|
|
const Footer = useMemo(
|
|
() => <ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />,
|
|
[accessibleRefAttachments.current]
|
|
)
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<FlatList
|
|
renderItem={({ item }) => <ComposeRootSuggestion item={item} />}
|
|
ListEmptyComponent={listEmpty}
|
|
keyboardShouldPersistTaps='always'
|
|
ListHeaderComponent={ComposeRootHeader}
|
|
ListFooterComponent={Footer}
|
|
ItemSeparatorComponent={ComponentSeparator}
|
|
// @ts-ignore
|
|
data={data ? data[mapSchemaToType()] : undefined}
|
|
keyExtractor={() => Math.random().toString()}
|
|
/>
|
|
<ComposeActions />
|
|
<ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
|
|
<ComposePosting />
|
|
</View>
|
|
)
|
|
},
|
|
() => true
|
|
)
|
|
|
|
export default ComposeRoot
|