2020-10-29 14:52:28 +01:00
|
|
|
import React, { useEffect, useRef, useState } from 'react'
|
2020-10-28 00:02:37 +01:00
|
|
|
import {
|
|
|
|
Dimensions,
|
2020-10-29 14:52:28 +01:00
|
|
|
FlatList,
|
2020-10-28 00:02:37 +01:00
|
|
|
Image,
|
|
|
|
ScrollView,
|
|
|
|
StyleSheet,
|
|
|
|
Text,
|
|
|
|
View
|
|
|
|
} from 'react-native'
|
2020-10-29 14:52:28 +01:00
|
|
|
import SegmentedControl from '@react-native-community/segmented-control'
|
2020-10-28 00:02:37 +01:00
|
|
|
import { Feather } from '@expo/vector-icons'
|
2020-10-26 00:27:53 +01:00
|
|
|
|
2020-11-04 22:26:38 +01:00
|
|
|
// import * as relationshipsSlice from 'src/stacks/common/relationshipsSlice'
|
2020-10-26 00:27:53 +01:00
|
|
|
|
2020-10-28 00:02:37 +01:00
|
|
|
import ParseContent from 'src/components/ParseContent'
|
2020-11-21 13:19:05 +01:00
|
|
|
import Timeline from 'src/screens/Timelines/Timeline'
|
2020-11-04 22:26:38 +01:00
|
|
|
import { useQuery } from 'react-query'
|
2020-11-21 13:19:05 +01:00
|
|
|
import { accountFetch } from '../../utils/fetches/accountFetch'
|
2020-10-28 00:02:37 +01:00
|
|
|
|
|
|
|
// Moved account example: https://m.cmx.im/web/accounts/27812
|
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
const Header = ({
|
|
|
|
uri,
|
|
|
|
size
|
|
|
|
}: {
|
|
|
|
uri: string
|
|
|
|
size: { width: number; height: number }
|
|
|
|
}) => {
|
2020-10-28 00:02:37 +01:00
|
|
|
if (uri) {
|
2020-11-05 00:47:31 +01:00
|
|
|
const heightRatio = size ? size.height / size.width : 1 / 2
|
2020-10-28 00:02:37 +01:00
|
|
|
return (
|
|
|
|
<Image
|
|
|
|
source={{ uri: uri }}
|
2020-11-04 22:26:38 +01:00
|
|
|
style={[
|
|
|
|
styles.header,
|
|
|
|
{
|
|
|
|
height:
|
|
|
|
Dimensions.get('window').width *
|
2020-11-05 00:47:31 +01:00
|
|
|
(heightRatio > 0.5 ? 1 / 2 : heightRatio)
|
2020-11-04 22:26:38 +01:00
|
|
|
}
|
|
|
|
]}
|
2020-10-28 00:02:37 +01:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
} else {
|
2020-11-04 22:26:38 +01:00
|
|
|
return (
|
|
|
|
<View
|
|
|
|
style={[
|
|
|
|
styles.header,
|
|
|
|
{ height: Dimensions.get('window').width * (1 / 3) }
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
)
|
2020-10-28 00:02:37 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
const Information = ({
|
|
|
|
account,
|
|
|
|
emojis
|
|
|
|
}: {
|
2020-11-21 00:40:55 +01:00
|
|
|
account: Mastodon.Account
|
|
|
|
emojis: Mastodon.Emoji[]
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2020-10-28 00:02:37 +01:00
|
|
|
return (
|
|
|
|
<View style={styles.information}>
|
|
|
|
{/* <Text>Moved or not: {account.moved}</Text> */}
|
|
|
|
<Image source={{ uri: account.avatar }} style={styles.avatar} />
|
|
|
|
|
|
|
|
<Text style={styles.display_name}>
|
|
|
|
{account.display_name || account.username}
|
|
|
|
{account.bot && (
|
|
|
|
<Feather name='hard-drive' style={styles.display_name} />
|
|
|
|
)}
|
|
|
|
</Text>
|
|
|
|
<Text style={styles.account}>
|
|
|
|
{account.acct}
|
|
|
|
{account.locked && <Feather name='lock' />}
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
{account.fields &&
|
|
|
|
account.fields.map((field, index) => (
|
|
|
|
<View key={index} style={{ flex: 1, flexDirection: 'row' }}>
|
|
|
|
<Text style={{ width: '30%', alignSelf: 'center' }}>
|
|
|
|
<ParseContent content={field.name} emojis={emojis} showFullLink />{' '}
|
|
|
|
{field.verified_at && <Feather name='check-circle' />}
|
|
|
|
</Text>
|
|
|
|
<Text style={{ width: '70%' }}>
|
|
|
|
<ParseContent
|
|
|
|
content={field.value}
|
|
|
|
emojis={emojis}
|
|
|
|
showFullLink
|
|
|
|
/>
|
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
))}
|
2020-10-29 14:52:28 +01:00
|
|
|
{account.note && <ParseContent content={account.note} emojis={emojis} />}
|
2020-10-28 00:02:37 +01:00
|
|
|
<Text>
|
|
|
|
加入时间{' '}
|
|
|
|
{new Date(account.created_at).toLocaleDateString('zh-CN', {
|
|
|
|
year: 'numeric',
|
|
|
|
month: 'long',
|
|
|
|
day: 'numeric'
|
|
|
|
})}
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
<Text>Toots: {account.statuses_count}</Text>
|
|
|
|
<Text>Followers: {account.followers_count}</Text>
|
|
|
|
<Text>Following: {account.following_count}</Text>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
2020-10-26 00:27:53 +01:00
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
const Toots = ({ account }: { account: string }) => {
|
2020-10-29 14:52:28 +01:00
|
|
|
const [segment, setSegment] = useState(0)
|
|
|
|
const [segmentManuallyTriggered, setSegmentManuallyTriggered] = useState(
|
|
|
|
false
|
|
|
|
)
|
2020-11-04 22:26:38 +01:00
|
|
|
const horizontalPaging = useRef<any>()
|
2020-10-29 14:52:28 +01:00
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
const pages: ['Account_Default', 'Account_All', 'Account_Media'] = [
|
|
|
|
'Account_Default',
|
|
|
|
'Account_All',
|
|
|
|
'Account_Media'
|
|
|
|
]
|
2020-10-29 14:52:28 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<SegmentedControl
|
|
|
|
values={['嘟嘟', '嘟嘟和回复', '媒体']}
|
|
|
|
selectedIndex={segment}
|
|
|
|
onChange={({ nativeEvent }) => {
|
|
|
|
setSegmentManuallyTriggered(true)
|
|
|
|
setSegment(nativeEvent.selectedSegmentIndex)
|
|
|
|
horizontalPaging.current.scrollToIndex({
|
|
|
|
index: nativeEvent.selectedSegmentIndex
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
style={{ width: '100%', height: 30 }}
|
|
|
|
/>
|
|
|
|
<FlatList
|
|
|
|
style={{ width: Dimensions.get('window').width, height: '100%' }}
|
|
|
|
data={pages}
|
|
|
|
keyExtractor={page => page}
|
|
|
|
renderItem={({ item, index }) => {
|
|
|
|
return (
|
|
|
|
<View style={{ width: Dimensions.get('window').width }}>
|
|
|
|
<Timeline
|
|
|
|
key={index}
|
|
|
|
page={item}
|
|
|
|
account={account}
|
|
|
|
disableRefresh
|
2020-11-05 00:47:31 +01:00
|
|
|
scrollEnabled={false}
|
2020-10-29 14:52:28 +01:00
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
ref={horizontalPaging}
|
|
|
|
bounces={false}
|
|
|
|
getItemLayout={(data, index) => ({
|
|
|
|
length: Dimensions.get('window').width,
|
|
|
|
offset: Dimensions.get('window').width * index,
|
|
|
|
index
|
|
|
|
})}
|
|
|
|
horizontal
|
|
|
|
onMomentumScrollEnd={() => {
|
|
|
|
setSegmentManuallyTriggered(false)
|
|
|
|
}}
|
|
|
|
onScroll={({ nativeEvent }) =>
|
|
|
|
!segmentManuallyTriggered &&
|
|
|
|
setSegment(
|
|
|
|
nativeEvent.contentOffset.x <= Dimensions.get('window').width / 3
|
|
|
|
? 0
|
|
|
|
: 1
|
|
|
|
)
|
|
|
|
}
|
|
|
|
pagingEnabled
|
|
|
|
showsHorizontalScrollIndicator={false}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
export interface Props {
|
|
|
|
route: {
|
|
|
|
params: {
|
|
|
|
id: string
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
const ScreenSharedAccount: React.FC<Props> = ({
|
2020-10-26 00:27:53 +01:00
|
|
|
route: {
|
|
|
|
params: { id }
|
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2020-11-04 22:26:38 +01:00
|
|
|
const { isLoading, isFetchingMore, isError, isSuccess, data } = useQuery(
|
|
|
|
['Account', { id }],
|
|
|
|
accountFetch
|
|
|
|
)
|
|
|
|
|
2020-10-28 00:02:37 +01:00
|
|
|
// const stateRelationships = useSelector(relationshipsState)
|
2020-11-04 22:26:38 +01:00
|
|
|
interface isHeaderImageSize {
|
|
|
|
width: number
|
|
|
|
height: number
|
|
|
|
}
|
|
|
|
const [headerImageSize, setHeaderImageSize] = useState<
|
|
|
|
isHeaderImageSize | undefined
|
|
|
|
>(undefined)
|
2020-10-26 00:27:53 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
2020-11-05 00:47:31 +01:00
|
|
|
if (isSuccess && data.header) {
|
2020-11-04 22:26:38 +01:00
|
|
|
Image.getSize(data.header, (width, height) => {
|
2020-10-28 00:02:37 +01:00
|
|
|
setHeaderImageSize({ width, height })
|
|
|
|
})
|
|
|
|
} else {
|
2020-11-05 00:47:31 +01:00
|
|
|
setHeaderImageSize({ width: 3, height: 1 })
|
2020-10-26 00:27:53 +01:00
|
|
|
}
|
2020-11-05 00:47:31 +01:00
|
|
|
}, [data, isSuccess])
|
2020-10-26 00:27:53 +01:00
|
|
|
|
2020-10-28 00:02:37 +01:00
|
|
|
// add emoji support
|
2020-11-05 00:47:31 +01:00
|
|
|
return isSuccess && headerImageSize ? (
|
|
|
|
<ScrollView>
|
2020-11-04 22:26:38 +01:00
|
|
|
{headerImageSize && (
|
|
|
|
<Header
|
|
|
|
uri={data.header}
|
|
|
|
size={{
|
2020-10-28 00:02:37 +01:00
|
|
|
width: headerImageSize.width,
|
|
|
|
height: headerImageSize.height
|
2020-11-04 22:26:38 +01:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<Information account={data} emojis={data.emojis} />
|
|
|
|
<Toots account={id} />
|
2020-11-05 00:47:31 +01:00
|
|
|
</ScrollView>
|
2020-10-28 00:02:37 +01:00
|
|
|
) : (
|
|
|
|
<></>
|
2020-10-26 00:27:53 +01:00
|
|
|
)
|
|
|
|
}
|
2020-10-28 00:02:37 +01:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
2020-11-04 22:26:38 +01:00
|
|
|
header: {
|
2020-10-28 00:02:37 +01:00
|
|
|
width: '100%',
|
|
|
|
backgroundColor: 'gray'
|
2020-11-04 22:26:38 +01:00
|
|
|
},
|
2020-10-28 00:02:37 +01:00
|
|
|
information: { marginTop: -30, paddingLeft: 12, paddingRight: 12 },
|
|
|
|
avatar: {
|
|
|
|
width: 90,
|
|
|
|
height: 90
|
|
|
|
},
|
|
|
|
display_name: {
|
|
|
|
fontSize: 18,
|
|
|
|
fontWeight: 'bold',
|
|
|
|
marginTop: 12
|
|
|
|
},
|
|
|
|
account: {
|
|
|
|
marginTop: 4
|
|
|
|
}
|
|
|
|
})
|
2020-10-31 21:04:46 +01:00
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
export default ScreenSharedAccount
|