octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix history page

This commit is contained in:
xmflsct 2022-12-03 21:14:00 +01:00
parent 20a55efb9c
commit 507ecf5eeb
2 changed files with 80 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Separator.tsx
View File

@ -1,32 +1,35 @@
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
export interface Props {
extraMarginLeft?: number
extraMarginRight?: number
style?: StyleProp<ViewStyle>
}
const ComponentSeparator = React.memo(
({ extraMarginLeft = 0, extraMarginRight = 0 }: Props) => {
const { colors } = useTheme()
const ComponentSeparator: React.FC<Props> = ({
extraMarginLeft = 0,
extraMarginRight = 0,
style
}) => {
const { colors } = useTheme()
return (
<View
style={{
return (
<View
style={[
style,
{
backgroundColor: colors.backgroundDefault,
borderTopColor: colors.border,
borderTopWidth: StyleSheet.hairlineWidth,
marginLeft:
StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
marginRight:
StyleConstants.Spacing.Global.PagePadding + extraMarginRight
}}
/>
)
},
() => true
)
marginLeft: StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
marginRight: StyleConstants.Spacing.Global.PagePadding + extraMarginRight
}
]}
/>
)
}
export default ComponentSeparator

120
src/screens/Tabs/Shared/History.tsx
View File

@ -5,6 +5,7 @@ import ComponentSeparator from '@components/Separator'
import CustomText from '@components/Text'
import TimelineAttachment from '@components/Timeline/Shared/Attachment'
import TimelineContent from '@components/Timeline/Shared/Content'
import StatusContext from '@components/Timeline/Shared/Context'
import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
@ -12,58 +13,36 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import { FlatList, View } from 'react-native'
const ContentView = ({
history,
first,
last
}: {
history: Mastodon.StatusHistory
first: boolean
last: boolean
}) => {
const ContentView: React.FC<{ item: Mastodon.StatusHistory }> = ({ item }) => {
const { colors } = useTheme()
return (
<>
<View
style={{
padding: StyleConstants.Spacing.Global.PagePadding,
paddingTop: first ? 0 : undefined
}}
>
<HeaderSharedCreated created_at={history.created_at} />
{typeof history.content === 'string' && history.content.length > 0 ? (
<TimelineContent status={history} />
) : null}
{history.poll
? history.poll.options.map((option, index) => (
<View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Icon
style={{
paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
marginRight: StyleConstants.Spacing.S
}}
name='Circle'
size={StyleConstants.Font.Size.M}
color={colors.disabled}
/>
<CustomText style={{ flex: 1 }}>
<ParseEmojis content={option.title} emojis={history.poll?.emojis} />
</CustomText>
</View>
</View>
))
: null}
{Array.isArray(history.media_attachments) && history.media_attachments.length ? (
<TimelineAttachment status={history} />
) : null}
</View>
{!last ? <ComponentSeparator extraMarginLeft={0} /> : null}
</>
// @ts-ignore
<StatusContext.Provider value={{ status: item, disableOnPress: true }}>
<HeaderSharedCreated created_at={item.created_at} />
<TimelineContent />
{item.poll?.options.map((option, index) => (
<View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.XS }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Icon
style={{
paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
marginRight: StyleConstants.Spacing.S
}}
name='Circle'
size={StyleConstants.Font.Size.M}
color={colors.disabled}
/>
<CustomText style={{ flex: 1 }}>
<ParseEmojis content={option.title} emojis={item.poll?.emojis} />
</CustomText>
</View>
</View>
))}
<TimelineAttachment />
</StatusContext.Provider>
)
}
@ -84,19 +63,40 @@ const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>
}, [])
return (
<ScrollView>
{data && data.length > 0
? data
.slice(0)
.reverse()
.map((d, i) =>
i !== 0 ? (
<ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
) : null
)
: null}
</ScrollView>
<FlatList
style={{ flex: 1, minHeight: '100%', padding: StyleConstants.Spacing.Global.PagePadding }}
data={
data && data.length > 0
? data
.slice(0)
.reverse()
.filter((_, index) => index !== 0)
: []
}
renderItem={({ item }) => <ContentView item={item} />}
ItemSeparatorComponent={() => (
<ComponentSeparator
extraMarginLeft={0}
style={{ marginVertical: StyleConstants.Spacing.Global.PagePadding }}
/>
)}
/>
)
// return (
// <ScrollView>
// {data && data.length > 0
// ? data
// .slice(0)
// .reverse()
// .map((d, i) =>
// i !== 0 ? (
// <ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
// ) : null
// )
// : null}
// </ScrollView>
// )
}
export default TabSharedHistory