From 293447f65c0c4037663d035f63ce315be5403720 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sat, 30 Apr 2022 21:47:17 +0200
Subject: [PATCH] Clean up react memo

---
 src/components/Timeline/Shared/Actioned.tsx   |  20 ++--
 src/components/Timeline/Shared/Actions.tsx    |   4 +-
 src/components/Timeline/Shared/Avatar.tsx     |   3 +-
 src/components/Timeline/Shared/Card.tsx       | 101 +++++++++---------
 src/components/Timeline/Shared/Content.tsx    |  12 ++-
 src/components/Timeline/Shared/Feedback.tsx   |   6 +-
 .../Timeline/Shared/HeaderShared/Created.tsx  |   2 +-
 src/components/Timeline/Shared/Translate.tsx  |  27 ++---
 8 files changed, 93 insertions(+), 82 deletions(-)

diff --git a/src/components/Timeline/Shared/Actioned.tsx b/src/components/Timeline/Shared/Actioned.tsx
index 122b1fae..47b59a9f 100644
--- a/src/components/Timeline/Shared/Actioned.tsx
+++ b/src/components/Timeline/Shared/Actioned.tsx
@@ -144,19 +144,23 @@ const TimelineActioned = React.memo(
       }
     }, [])
 
-    return <View style={styles.actioned} children={children} />
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: StyleConstants.Spacing.S,
+          paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
+          paddingRight: StyleConstants.Spacing.Global.PagePadding
+        }}
+        children={children}
+      />
+    )
   },
   () => true
 )
 
 const styles = StyleSheet.create({
-  actioned: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: StyleConstants.Spacing.S,
-    paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
-    paddingRight: StyleConstants.Spacing.Global.PagePadding
-  },
   icon: {
     marginRight: StyleConstants.Spacing.S
   }
diff --git a/src/components/Timeline/Shared/Actions.tsx b/src/components/Timeline/Shared/Actions.tsx
index b36b691a..336a5217 100644
--- a/src/components/Timeline/Shared/Actions.tsx
+++ b/src/components/Timeline/Shared/Actions.tsx
@@ -2,6 +2,8 @@ import analytics from '@components/analytics'
 import Icon from '@components/Icon'
 import { displayMessage } from '@components/Message'
 import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { RootStackParamList } from '@utils/navigation/navigators'
 import {
   MutationVarsTimelineUpdateStatusProperty,
   QueryKeyTimeline,
@@ -31,7 +33,7 @@ const TimelineActions: React.FC<Props> = ({
   accts,
   reblog
 }) => {
-  const navigation = useNavigation()
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { t } = useTranslation('componentTimeline')
   const { colors, theme } = useTheme()
   const iconColor = colors.secondary
diff --git a/src/components/Timeline/Shared/Avatar.tsx b/src/components/Timeline/Shared/Avatar.tsx
index c4bd9701..739e622f 100644
--- a/src/components/Timeline/Shared/Avatar.tsx
+++ b/src/components/Timeline/Shared/Avatar.tsx
@@ -50,8 +50,7 @@ const TimelineAvatar = React.memo(
         }}
       />
     )
-  },
-  () => true
+  }
 )
 
 export default TimelineAvatar
diff --git a/src/components/Timeline/Shared/Card.tsx b/src/components/Timeline/Shared/Card.tsx
index a2c9dedc..f26a6d8c 100644
--- a/src/components/Timeline/Shared/Card.tsx
+++ b/src/components/Timeline/Shared/Card.tsx
@@ -8,65 +8,62 @@ import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
-  card: Mastodon.Card
+  card: Pick<
+    Mastodon.Card,
+    'url' | 'image' | 'blurhash' | 'title' | 'description'
+  >
 }
 
-const TimelineCard = React.memo(
-  ({ card }: Props) => {
-    const { colors } = useTheme()
-    const navigation = useNavigation()
+const TimelineCard = React.memo(({ card }: Props) => {
+  const { colors } = useTheme()
+  const navigation = useNavigation()
 
-    return (
-      <Pressable
-        accessible
-        accessibilityRole='link'
-        style={[styles.card, { borderColor: colors.border }]}
-        onPress={async () => {
-          analytics('timeline_shared_card_press')
-          await openLink(card.url, navigation)
-        }}
-        testID='base'
-      >
-        {card.image ? (
-          <GracefullyImage
-            uri={{ original: card.image }}
-            blurhash={card.blurhash}
-            style={styles.left}
-            imageStyle={styles.image}
-          />
-        ) : null}
-        <View style={styles.right}>
-          <Text
-            numberOfLines={2}
-            style={[styles.rightTitle, { color: colors.primaryDefault }]}
-            testID='title'
-          >
-            {card.title}
-          </Text>
-          {card.description ? (
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.rightDescription,
-                { color: colors.primaryDefault }
-              ]}
-              testID='description'
-            >
-              {card.description}
-            </Text>
-          ) : null}
+  return (
+    <Pressable
+      accessible
+      accessibilityRole='link'
+      style={[styles.card, { borderColor: colors.border }]}
+      onPress={async () => {
+        analytics('timeline_shared_card_press')
+        await openLink(card.url, navigation)
+      }}
+      testID='base'
+    >
+      {card.image ? (
+        <GracefullyImage
+          uri={{ original: card.image }}
+          blurhash={card.blurhash}
+          style={styles.left}
+          imageStyle={styles.image}
+        />
+      ) : null}
+      <View style={styles.right}>
+        <Text
+          numberOfLines={2}
+          style={[styles.rightTitle, { color: colors.primaryDefault }]}
+          testID='title'
+        >
+          {card.title}
+        </Text>
+        {card.description ? (
           <Text
             numberOfLines={1}
-            style={[styles.rightLink, { color: colors.secondary }]}
+            style={[styles.rightDescription, { color: colors.primaryDefault }]}
+            testID='description'
           >
-            {card.url}
+            {card.description}
           </Text>
-        </View>
-      </Pressable>
-    )
-  },
-  () => true
-)
+        ) : null}
+        <Text
+          numberOfLines={1}
+          style={[styles.rightLink, { color: colors.secondary }]}
+        >
+          {card.url}
+        </Text>
+      </View>
+    </Pressable>
+  )
+})
 
 const styles = StyleSheet.create({
   card: {
diff --git a/src/components/Timeline/Shared/Content.tsx b/src/components/Timeline/Shared/Content.tsx
index 31c1ccbb..6648d1c2 100644
--- a/src/components/Timeline/Shared/Content.tsx
+++ b/src/components/Timeline/Shared/Content.tsx
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 export interface Props {
-  status: Pick<Mastodon.Status, 'content' | 'spoiler_text' | 'emojis'> & {
-    mentions?: Mastodon.Status['mentions']
-    tags?: Mastodon.Status['tags']
-  }
+  status: Pick<
+    Mastodon.Status,
+    'content' | 'spoiler_text' | 'emojis' | 'mentions' | 'tags'
+  >
   numberOfLines?: number
   highlighted?: boolean
   disableDetails?: boolean
@@ -72,7 +72,9 @@ const TimelineContent = React.memo(
       </>
     )
   },
-  (prev, next) => prev.status.content === next.status.content
+  (prev, next) =>
+    prev.status.content === next.status.content &&
+    prev.status.spoiler_text === next.status.spoiler_text
 )
 
 export default TimelineContent
diff --git a/src/components/Timeline/Shared/Feedback.tsx b/src/components/Timeline/Shared/Feedback.tsx
index 6aae7492..022b4bed 100644
--- a/src/components/Timeline/Shared/Feedback.tsx
+++ b/src/components/Timeline/Shared/Feedback.tsx
@@ -10,7 +10,10 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
-  status: Mastodon.Status
+  status: Pick<
+    Mastodon.Status,
+    'id' | 'edited_at' | 'reblogs_count' | 'favourites_count'
+  >
   highlighted: boolean
 }
 
@@ -125,6 +128,7 @@ const TimelineFeedback = React.memo(
     )
   },
   (prev, next) =>
+    prev.status.edited_at === next.status.edited_at &&
     prev.status.reblogs_count === next.status.reblogs_count &&
     prev.status.favourites_count === next.status.favourites_count
 )
diff --git a/src/components/Timeline/Shared/HeaderShared/Created.tsx b/src/components/Timeline/Shared/HeaderShared/Created.tsx
index e6de55fa..8755c9c1 100644
--- a/src/components/Timeline/Shared/HeaderShared/Created.tsx
+++ b/src/components/Timeline/Shared/HeaderShared/Created.tsx
@@ -37,7 +37,7 @@ const HeaderSharedCreated = React.memo(
       </>
     )
   },
-  () => true
+  (prev, next) => prev.edited_at === next.edited_at
 )
 
 export default HeaderSharedCreated
diff --git a/src/components/Timeline/Shared/Translate.tsx b/src/components/Timeline/Shared/Translate.tsx
index feddae0f..1fa609a0 100644
--- a/src/components/Timeline/Shared/Translate.tsx
+++ b/src/components/Timeline/Shared/Translate.tsx
@@ -7,13 +7,16 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import * as Localization from 'expo-localization'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text } from 'react-native'
+import { Pressable, Text } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import { useSelector } from 'react-redux'
 
 export interface Props {
   highlighted: boolean
-  status: Mastodon.Status
+  status: Pick<
+    Mastodon.Status,
+    'language' | 'spoiler_text' | 'content' | 'emojis'
+  >
 }
 
 const TimelineTranslate = React.memo(
@@ -60,7 +63,12 @@ const TimelineTranslate = React.memo(
     return (
       <>
         <Pressable
-          style={[styles.button, { paddingBottom: isSuccess ? 0 : undefined }]}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: StyleConstants.Spacing.S,
+            paddingBottom: isSuccess ? 0 : undefined
+          }}
           onPress={() => {
             if (enabled) {
               if (!isSuccess) {
@@ -128,15 +136,10 @@ const TimelineTranslate = React.memo(
       </>
     )
   },
-  () => true
+  (prev, next) =>
+    prev.status.language === next.status.language &&
+    prev.status.content === next.status.content &&
+    prev.status.spoiler_text === next.status.spoiler_text
 )
 
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: StyleConstants.Spacing.S
-  }
-})
-
 export default TimelineTranslate