tooot/src/screens/Shared/Account.tsx

100 lines
3.0 KiB
TypeScript

import BottomSheet from '@components/BottomSheet'
import { HeaderRight } from '@components/Header'
import HeaderDefaultActionsAccount from '@components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
import { accountFetch } from '@utils/fetches/accountFetch'
import { getLocalAccountId } from '@utils/slices/instancesSlice'
import React, { useEffect, useReducer, useRef, useState } from 'react'
import Animated, {
useAnimatedScrollHandler,
useSharedValue
} from 'react-native-reanimated'
import { useQuery } from 'react-query'
import { useSelector } from 'react-redux'
import AccountHeader from './Account/Header'
import AccountInformation from './Account/Information'
import AccountNav from './Account/Nav'
import AccountSegmentedControl from './Account/SegmentedControl'
import AccountToots from './Account/Toots'
import AccountContext from './Account/utils/createContext'
import accountInitialState from './Account/utils/initialState'
import accountReducer from './Account/utils/reducer'
// Moved account example: https://m.cmx.im/web/accounts/27812
export interface Props {
route: {
params: {
account: Pick<Mastodon.Account, 'id' | 'username' | 'acct' | 'url'>
}
}
navigation: any
}
const ScreenSharedAccount: React.FC<Props> = ({
route: {
params: { account }
},
navigation
}) => {
const localAccountId = useSelector(getLocalAccountId)
const { data } = useQuery(['Account', { id: account.id }], accountFetch)
const scrollY = useSharedValue(0)
const [accountState, accountDispatch] = useReducer(
accountReducer,
accountInitialState
)
const [modalVisible, setBottomSheetVisible] = useState(false)
useEffect(() => {
const updateHeaderRight = () =>
navigation.setOptions({
headerRight: () => (
<HeaderRight
content='MoreHorizontal'
onPress={() => setBottomSheetVisible(true)}
/>
)
})
return updateHeaderRight()
}, [])
const onScroll = useAnimatedScrollHandler(event => {
scrollY.value = event.contentOffset.y
})
return (
<AccountContext.Provider value={{ accountState, accountDispatch }}>
<AccountNav scrollY={scrollY} account={data} />
{accountState.informationLayout?.height &&
accountState.informationLayout.y ? (
<AccountSegmentedControl scrollY={scrollY} />
) : null}
<Animated.ScrollView
scrollEventThrottle={16}
showsVerticalScrollIndicator={false}
onScroll={onScroll}
>
<AccountHeader account={data} />
<AccountInformation account={data} />
<AccountToots id={account.id} />
</Animated.ScrollView>
<BottomSheet
visible={modalVisible}
handleDismiss={() => setBottomSheetVisible(false)}
>
{/* 添加到列表 */}
{localAccountId !== account.id && (
<HeaderDefaultActionsAccount
account={account}
setBottomSheetVisible={setBottomSheetVisible}
/>
)}
</BottomSheet>
</AccountContext.Provider>
)
}
export default ScreenSharedAccount