Clean up core timeline components

2022-04-30 21:59:13 +02:00 · 2022-04-30 21:59:13 +02:00 · 855f50f9ee
parent 293447f65c
commit 855f50f9ee
6 changed files with 374 additions and 407 deletions
--- a/src/components/Timeline/Conversation.tsx
+++ b/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> = ({
-  conversation,
-  queryKey,
-  highlighted = false
-}) => {
+const TimelineConversation = React.memo(
+  ({ conversation, queryKey, highlighted = false }: Props) => {
    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: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
+  (prev, next) => isEqual(prev.conversation, next.conversation)
+)

 export default TimelineConversation
--- a/src/components/Timeline/Default.tsx
+++ b/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={[
-        styles.statusView,
-        {
+        style={{
+          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: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
+  (prev, next) => isEqual(prev.item, next.item)
+)

 export default TimelineDefault
--- a/src/components/Timeline/Empty.tsx
+++ b/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 { t, i18n } = useTranslation('componentTimeline')
+    const { colors } = useTheme()
+    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 }]}
-        children={children}
-      />
+        style={{
+          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,
--- a/src/components/Timeline/Footer.tsx
+++ b/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
--- a/src/components/Timeline/Lookback.tsx
+++ b/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
--- a/src/components/Timeline/Notifications.tsx
+++ b/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> = ({
-  notification,
-  queryKey,
-  highlighted = false
-}) => {
+const TimelineNotifications = React.memo(
+  ({ notification, queryKey, highlighted = false }: Props) => {
    if (
      notification.status &&
      shouldFilter({ status: notification.status, queryKey })
@ -62,15 +59,13 @@ const TimelineNotifications: React.FC<Props> = ({

    return (
      <Pressable
-      style={[
-        styles.notificationView,
-        {
+        style={{
+          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: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
+  (prev, next) => isEqual(prev.notification, next.notification)
+)

 export default TimelineNotifications