Fix history page

src/components/Separator.tsx

@@ -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(
+const ComponentSeparator: React.FC<Props> = ({
-  ({ extraMarginLeft = 0, extraMarginRight = 0 }: Props) => {
+  extraMarginLeft = 0,
-    const { colors } = useTheme()
+  extraMarginRight = 0,
+  style
+}) => {
+  const { colors } = useTheme()
 
-    return (
+  return (
-      <View
+    <View
-        style={{
+      style={[
+        style,
+        {
           backgroundColor: colors.backgroundDefault,
           borderTopColor: colors.border,
           borderTopWidth: StyleSheet.hairlineWidth,
-          marginLeft:
+          marginLeft: StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
-            StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
+          marginRight: StyleConstants.Spacing.Global.PagePadding + extraMarginRight
-          marginRight:
+        }
-            StyleConstants.Spacing.Global.PagePadding + extraMarginRight
+      ]}
-        }}
+    />
-      />
+  )
-    )
+}
-  },
-  () => true
-)
 
 export default ComponentSeparator

src/screens/Tabs/Shared/History.tsx

@@ -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 { FlatList, View } from 'react-native'
-import { ScrollView } from 'react-native-gesture-handler'
 
-const ContentView = ({
+const ContentView: React.FC<{ item: Mastodon.StatusHistory }> = ({ item }) => {
-  history,
-  first,
-  last
-}: {
-  history: Mastodon.StatusHistory
-  first: boolean
-  last: boolean
-}) => {
   const { colors } = useTheme()
 
   return (
-    <>
+    // @ts-ignore
-      <View
+    <StatusContext.Provider value={{ status: item, disableOnPress: true }}>
-        style={{
+      <HeaderSharedCreated created_at={item.created_at} />
-          padding: StyleConstants.Spacing.Global.PagePadding,
+      <TimelineContent />
-          paddingTop: first ? 0 : undefined
+      {item.poll?.options.map((option, index) => (
-        }}
+        <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.XS }}>
-      >
+          <View style={{ flex: 1, flexDirection: 'row' }}>
-        <HeaderSharedCreated created_at={history.created_at} />
+            <Icon
-        {typeof history.content === 'string' && history.content.length > 0 ? (
+              style={{
-          <TimelineContent status={history} />
+                paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
-        ) : null}
+                marginRight: StyleConstants.Spacing.S
-        {history.poll
+              }}
-          ? history.poll.options.map((option, index) => (
+              name='Circle'
-              <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
+              size={StyleConstants.Font.Size.M}
-                <View style={{ flex: 1, flexDirection: 'row' }}>
+              color={colors.disabled}
-                  <Icon
+            />
-                    style={{
+            <CustomText style={{ flex: 1 }}>
-                      paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
+              <ParseEmojis content={option.title} emojis={item.poll?.emojis} />
-                      marginRight: StyleConstants.Spacing.S
+            </CustomText>
-                    }}
+          </View>
-                    name='Circle'
+        </View>
-                    size={StyleConstants.Font.Size.M}
+      ))}
-                    color={colors.disabled}
+      <TimelineAttachment />
-                  />
+    </StatusContext.Provider>
-                  <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}
-    </>
   )
 }
 
@@ -84,19 +63,40 @@ const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>
   }, [])
 
   return (
-    <ScrollView>
+    <FlatList
-      {data && data.length > 0
+      style={{ flex: 1, minHeight: '100%', padding: StyleConstants.Spacing.Global.PagePadding }}
-        ? data
+      data={
-            .slice(0)
+        data && data.length > 0
-            .reverse()
+          ? data
-            .map((d, i) =>
+              .slice(0)
-              i !== 0 ? (
+              .reverse()
-                <ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
+              .filter((_, index) => index !== 0)
-              ) : null
+          : []
-            )
+      }
-        : null}
+      renderItem={({ item }) => <ContentView item={item} />}
-    </ScrollView>
+      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