Clean up core timeline components

src/components/Timeline/Conversation.tsx

@@ -8,8 +8,9 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { isEqual } from 'lodash'
 import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import { useMutation, useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'
 import TimelineActions from './Shared/Actions'
@@ -54,11 +55,8 @@ export interface Props {
   highlighted?: boolean
 }
 
-const TimelineConversation: React.FC<Props> = ({
+const TimelineConversation = React.memo(
-  conversation,
+  ({ conversation, queryKey, highlighted = false }: Props) => {
-  queryKey,
-  highlighted = false
-}) => {
     const instanceAccount = useSelector(
       getInstanceAccount,
       (prev, next) => prev?.id === next?.id
@@ -94,8 +92,13 @@ const TimelineConversation: React.FC<Props> = ({
     return (
       <Pressable
         style={[
-        styles.base,
+          {
-        { backgroundColor: colors.backgroundDefault },
+            flex: 1,
+            flexDirection: 'column',
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            paddingBottom: 0,
+            backgroundColor: colors.backgroundDefault
+          },
           conversation.unread && {
             borderLeftWidth: StyleConstants.Spacing.XS,
             borderLeftColor: colors.blue,
@@ -106,7 +109,7 @@ const TimelineConversation: React.FC<Props> = ({
         ]}
         onPress={onPress}
       >
-      <View style={styles.header}>
+        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
           <Avatars accounts={conversation.accounts} />
           <TimelineHeaderConversation
             queryKey={queryKey}
@@ -151,20 +154,8 @@ const TimelineConversation: React.FC<Props> = ({
         ) : null}
       </Pressable>
     )
-}
-
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'column',
-    padding: StyleConstants.Spacing.Global.PagePadding,
-    paddingBottom: 0
   },
-  header: {
+  (prev, next) => isEqual(prev.conversation, next.conversation)
-    flex: 1,
+)
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
 
 export default TimelineConversation

src/components/Timeline/Default.tsx

@@ -14,9 +14,9 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { uniqBy } from 'lodash'
+import { isEqual, uniqBy } from 'lodash'
 import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineFeedback from './Shared/Feedback'
 import TimelineFiltered, { shouldFilter } from './Shared/Filtered'
@@ -34,7 +34,8 @@ export interface Props {
 }
 
 // When the poll is long
-const TimelineDefault: React.FC<Props> = ({
+const TimelineDefault = React.memo(
+  ({
     item,
     queryKey,
     rootQueryKey,
@@ -42,7 +43,7 @@ const TimelineDefault: React.FC<Props> = ({
     highlighted = false,
     disableDetails = false,
     disableOnPress = false
-}) => {
+  }: Props) => {
     const { colors } = useTheme()
     const instanceAccount = useSelector(getInstanceAccount, () => true)
     const navigation =
@@ -75,16 +76,14 @@ const TimelineDefault: React.FC<Props> = ({
     return (
       <Pressable
         accessible={highlighted ? false : true}
-      style={[
+        style={{
-        styles.statusView,
+          padding: StyleConstants.Spacing.Global.PagePadding,
-        {
           backgroundColor: colors.backgroundDefault,
           paddingBottom:
             disableDetails && disableOnPress
               ? StyleConstants.Spacing.Global.PagePadding
               : 0
-        }
+        }}
-      ]}
         onPress={onPress}
       >
         {item.reblog ? (
@@ -93,7 +92,7 @@ const TimelineDefault: React.FC<Props> = ({
           <TimelineActioned action='pinned' account={item.account} />
         ) : null}
 
-      <View style={styles.header}>
+        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
           <TimelineAvatar
             queryKey={disableOnPress ? undefined : queryKey}
             account={actualStatus.account}
@@ -141,7 +140,10 @@ const TimelineDefault: React.FC<Props> = ({
             <TimelineCard card={actualStatus.card} />
           ) : null}
           {!disableDetails ? (
-          <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
+            <TimelineFullConversation
+              queryKey={queryKey}
+              status={actualStatus}
+            />
           ) : null}
           <TimelineTranslate status={actualStatus} highlighted={highlighted} />
           <TimelineFeedback status={actualStatus} highlighted={highlighted} />
@@ -154,7 +156,10 @@ const TimelineDefault: React.FC<Props> = ({
             highlighted={highlighted}
             status={actualStatus}
             accts={uniqBy(
-            ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
+              (
+                [actualStatus.account] as Mastodon.Account[] &
+                  Mastodon.Mention[]
+              )
                 .concat(actualStatus.mentions)
                 .filter(d => d?.id !== instanceAccount?.id),
               d => d?.id
@@ -164,18 +169,8 @@ const TimelineDefault: React.FC<Props> = ({
         ) : null}
       </Pressable>
     )
-}
-
-const styles = StyleSheet.create({
-  statusView: {
-    padding: StyleConstants.Spacing.Global.PagePadding,
-    paddingBottom: 0
   },
-  header: {
+  (prev, next) => isEqual(prev.item, next.item)
-    flex: 1,
+)
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
 
 export default TimelineDefault

src/components/Timeline/Empty.tsx

@@ -4,7 +4,7 @@ import Icon from '@components/Icon'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
@@ -20,10 +20,10 @@ const TimelineEmpty = React.memo(
       options: { notifyOnChangeProps: ['status'] }
     })
 
-    const { colors, theme } = useTheme()
+    const { colors } = useTheme()
-    const { t, i18n } = useTranslation('componentTimeline')
+    const { t } = useTranslation('componentTimeline')
 
-    const children = useMemo(() => {
+    const children = () => {
       switch (status) {
         case 'loading':
           return (
@@ -67,24 +67,25 @@ const TimelineEmpty = React.memo(
             </>
           )
       }
-    }, [theme, i18n.language, status])
+    }
     return (
       <View
-        style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
+        style={{
-        children={children}
+          flex: 1,
-      />
+          minHeight: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: colors.backgroundDefault
+        }}
+      >
+        {children()}
+      </View>
     )
   },
   () => true
 )
 
 const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    minHeight: '100%',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   error: {
     ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,

src/components/Timeline/Footer.tsx

@@ -4,7 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Trans } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
@@ -27,11 +27,20 @@ const TimelineFooter = React.memo(
     const { colors } = useTheme()
 
     return (
-      <View style={styles.base}>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          padding: StyleConstants.Spacing.M
+        }}
+      >
         {!disableInfinity && hasNextPage ? (
           <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
         ) : (
-          <Text style={[styles.text, { color: colors.secondary }]}>
+          <Text
+            style={{ ...StyleConstants.FontStyle.S, color: colors.secondary }}
+          >
             <Trans
               i18nKey='componentTimeline:end.message'
               components={[
@@ -50,16 +59,4 @@ const TimelineFooter = React.memo(
   () => true
 )
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: StyleConstants.Spacing.M
-  },
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
 export default TimelineFooter

src/components/Timeline/Lookback.tsx

@@ -2,7 +2,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 
 const TimelineLookback = React.memo(
   () => {
@@ -11,10 +11,19 @@ const TimelineLookback = React.memo(
 
     return (
       <View
-        style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          padding: StyleConstants.Spacing.S,
+          backgroundColor: colors.backgroundDefault
+        }}
       >
         <Text
-          style={[StyleConstants.FontStyle.S, { color: colors.primaryDefault }]}
+          style={{
+            ...StyleConstants.FontStyle.S,
+            color: colors.primaryDefault
+          }}
         >
           {t('lookback.message')}
         </Text>
@@ -24,16 +33,4 @@ const TimelineLookback = React.memo(
   () => true
 )
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: StyleConstants.Spacing.S
-  },
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
 export default TimelineLookback

src/components/Timeline/Notifications.tsx

@@ -14,9 +14,9 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { uniqBy } from 'lodash'
+import { isEqual, uniqBy } from 'lodash'
 import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineFiltered, { shouldFilter } from './Shared/Filtered'
 import TimelineFullConversation from './Shared/FullConversation'
@@ -27,11 +27,8 @@ export interface Props {
   highlighted?: boolean
 }
 
-const TimelineNotifications: React.FC<Props> = ({
+const TimelineNotifications = React.memo(
-  notification,
+  ({ notification, queryKey, highlighted = false }: Props) => {
-  queryKey,
-  highlighted = false
-}) => {
     if (
       notification.status &&
       shouldFilter({ status: notification.status, queryKey })
@@ -62,15 +59,13 @@ const TimelineNotifications: React.FC<Props> = ({
 
     return (
       <Pressable
-      style={[
+        style={{
-        styles.notificationView,
+          padding: StyleConstants.Spacing.Global.PagePadding,
-        {
           backgroundColor: colors.backgroundDefault,
           paddingBottom: notification.status
             ? 0
             : StyleConstants.Spacing.Global.PagePadding
-        }
+        }}
-      ]}
         onPress={onPress}
       >
         {notification.type !== 'mention' ? (
@@ -92,7 +87,7 @@ const TimelineNotifications: React.FC<Props> = ({
                 : 0.5
           }}
         >
-        <View style={styles.header}>
+          <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
             <TimelineAvatar
               queryKey={queryKey}
               account={actualAccount}
@@ -161,17 +156,8 @@ const TimelineNotifications: React.FC<Props> = ({
         ) : null}
       </Pressable>
     )
-}
-
-const styles = StyleSheet.create({
-  notificationView: {
-    padding: StyleConstants.Spacing.Global.PagePadding
   },
-  header: {
+  (prev, next) => isEqual(prev.notification, next.notification)
-    flex: 1,
+)
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
 
 export default TimelineNotifications