Editing can update media

src/components/GracefullyImage.tsx

@@ -1,6 +1,6 @@
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import {
   AccessibilityProps,
   Image,
@@ -39,125 +39,103 @@ export interface Props {
   >
 }
 
-const GracefullyImage = React.memo(
-  ({
-    accessibilityLabel,
-    accessibilityHint,
-    hidden = false,
-    uri,
-    blurhash,
-    dimension,
-    onPress,
-    style,
-    imageStyle,
-    setImageDimensions
-  }: Props) => {
-    const { reduceMotionEnabled } = useAccessibility()
-    const { colors } = useTheme()
-    const [originalFailed, setOriginalFailed] = useState(false)
-    const [imageLoaded, setImageLoaded] = useState(false)
+const GracefullyImage = ({
+  accessibilityLabel,
+  accessibilityHint,
+  hidden = false,
+  uri,
+  blurhash,
+  dimension,
+  onPress,
+  style,
+  imageStyle,
+  setImageDimensions
+}: Props) => {
+  const { reduceMotionEnabled } = useAccessibility()
+  const { colors } = useTheme()
+  const [originalFailed, setOriginalFailed] = useState(false)
+  const [imageLoaded, setImageLoaded] = useState(false)
 
-    const source = useMemo(() => {
-      if (originalFailed) {
-        return { uri: uri.remote || undefined }
-      } else {
-        return {
-          uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
-        }
+  const source = originalFailed
+    ? { uri: uri.remote || undefined }
+    : {
+        uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
       }
-    }, [originalFailed])
 
-    const onLoad = useCallback(() => {
-      setImageLoaded(true)
-      if (setImageDimensions && source.uri) {
-        Image.getSize(source.uri, (width, height) =>
-          setImageDimensions({ width, height })
+  const onLoad = () => {
+    setImageLoaded(true)
+    if (setImageDimensions && source.uri) {
+      Image.getSize(source.uri, (width, height) =>
+        setImageDimensions({ width, height })
+      )
+    }
+  }
+  const onError = () => {
+    if (!originalFailed) {
+      setOriginalFailed(true)
+    }
+  }
+
+  const blurhashView = useMemo(() => {
+    if (hidden || !imageLoaded) {
+      if (blurhash) {
+        return (
+          <Blurhash
+            decodeAsync
+            blurhash={blurhash}
+            style={styles.placeholder}
+          />
         )
-      }
-    }, [source.uri])
-    const onError = useCallback(() => {
-      if (!originalFailed) {
-        setOriginalFailed(true)
-      }
-    }, [originalFailed])
-
-    const previewView = useMemo(
-      () =>
-        uri.preview && !imageLoaded ? (
-          <Image
-            fadeDuration={0}
-            source={{ uri: uri.preview }}
+      } else {
+        return (
+          <View
             style={[
               styles.placeholder,
               { backgroundColor: colors.shimmerDefault }
             ]}
           />
-        ) : null,
-      []
-    )
-    const originalView = useMemo(
-      () => (
+        )
+      }
+    } else {
+      return null
+    }
+  }, [hidden, imageLoaded])
+
+  return (
+    <Pressable
+      {...(onPress
+        ? { accessibilityRole: 'imagebutton' }
+        : { accessibilityRole: 'image' })}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
+      {...(onPress
+        ? hidden
+          ? { disabled: true }
+          : { onPress }
+        : { disabled: true })}
+    >
+      {uri.preview && !imageLoaded ? (
         <Image
           fadeDuration={0}
-          source={source}
-          style={[{ flex: 1 }, imageStyle]}
-          onLoad={onLoad}
-          onError={onError}
+          source={{ uri: uri.preview }}
+          style={[
+            styles.placeholder,
+            { backgroundColor: colors.shimmerDefault }
+          ]}
         />
-      ),
-      [source]
-    )
-    const blurhashView = useMemo(() => {
-      if (hidden || !imageLoaded) {
-        if (blurhash) {
-          return (
-            <Blurhash
-              decodeAsync
-              blurhash={blurhash}
-              style={styles.placeholder}
-            />
-          )
-        } else {
-          return (
-            <View
-              style={[
-                styles.placeholder,
-                { backgroundColor: colors.shimmerDefault }
-              ]}
-            />
-          )
-        }
-      } else {
-        return null
-      }
-    }, [hidden, imageLoaded])
-
-    return (
-      <Pressable
-        {...(onPress
-          ? { accessibilityRole: 'imagebutton' }
-          : { accessibilityRole: 'image' })}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
-        {...(onPress
-          ? hidden
-            ? { disabled: true }
-            : { onPress }
-          : { disabled: true })}
-      >
-        {previewView}
-        {originalView}
-        {blurhashView}
-      </Pressable>
-    )
-  },
-  (prev, next) =>
-    prev.hidden === next.hidden &&
-    prev.uri.preview === next.uri.preview &&
-    prev.uri.original === next.uri.original &&
-    prev.uri.remote === next.uri.remote
-)
+      ) : null}
+      <Image
+        fadeDuration={0}
+        source={source}
+        style={[{ flex: 1 }, imageStyle]}
+        onLoad={onLoad}
+        onError={onError}
+      />
+      {blurhashView}
+    </Pressable>
+  )
+}
 
 const styles = StyleSheet.create({
   placeholder: {

src/components/Timeline/Shared/Attachment.tsx

@@ -10,10 +10,9 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { useEffect } from 'react'
+import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 
 export interface Props {
   status: Pick<Mastodon.Status, 'media_attachments' | 'sensitive'>
@@ -24,24 +23,13 @@ const TimelineAttachment = React.memo(
     const { t } = useTranslation('componentTimeline')
 
     const [sensitiveShown, setSensitiveShown] = useState(status.sensitive)
-    const onPressBlurView = useCallback(() => {
-      analytics('timeline_shared_attachment_blurview_press_show')
-      layoutAnimation()
-      setSensitiveShown(false)
-      haptics('Light')
-    }, [])
-    const onPressShow = useCallback(() => {
-      analytics('timeline_shared_attachment_blurview_press_hide')
-      setSensitiveShown(true)
-      haptics('Light')
-    }, [])
 
     const imageUrls = useRef<
       RootStackParamList['Screen-ImagesViewer']['imageUrls']
     >([])
     const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
-    useEffect(() => {
-      status.media_attachments.forEach((attachment, index) => {
+    const navigateToImagesViewer = (id: string) => {
+      status.media_attachments.forEach(attachment => {
         switch (attachment.type) {
           case 'image':
             imageUrls.current.push({
@@ -55,117 +43,136 @@ const TimelineAttachment = React.memo(
             })
         }
       })
-    }, [])
-    const navigateToImagesViewer = (id: string) =>
       navigation.navigate('Screen-ImagesViewer', {
         imageUrls: imageUrls.current,
         id
       })
-    const attachments = useMemo(
-      () =>
-        status.media_attachments.map((attachment, index) => {
-          switch (attachment.type) {
-            case 'image':
-              return (
-                <AttachmentImage
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  image={attachment}
-                  navigateToImagesViewer={navigateToImagesViewer}
-                />
-              )
-            case 'video':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                />
-              )
-            case 'gifv':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                  gifv
-                />
-              )
-            case 'audio':
-              return (
-                <AttachmentAudio
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  audio={attachment}
-                />
-              )
-            default:
-              if (
-                attachment.preview_url?.endsWith('.jpg') ||
-                attachment.preview_url?.endsWith('.jpeg') ||
-                attachment.preview_url?.endsWith('.png') ||
-                attachment.preview_url?.endsWith('.gif') ||
-                attachment.remote_url?.endsWith('.jpg') ||
-                attachment.remote_url?.endsWith('.jpeg') ||
-                attachment.remote_url?.endsWith('.png') ||
-                attachment.remote_url?.endsWith('.gif')
-              ) {
-                imageUrls.current.push({
-                  id: attachment.id,
-                  preview_url: attachment.preview_url,
-                  url: attachment.url,
-                  remote_url: attachment.remote_url,
-                  blurhash: attachment.blurhash,
-                  width: attachment.meta?.original?.width,
-                  height: attachment.meta?.original?.height
-                })
+    }
+
+    return (
+      <View>
+        <View
+          style={{
+            marginTop: StyleConstants.Spacing.S,
+            flex: 1,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignContent: 'stretch'
+          }}
+        >
+          {status.media_attachments.map((attachment, index) => {
+            switch (attachment.type) {
+              case 'image':
                 return (
                   <AttachmentImage
                     key={index}
                     total={status.media_attachments.length}
                     index={index}
                     sensitiveShown={sensitiveShown}
-                    // @ts-ignore
                     image={attachment}
                     navigateToImagesViewer={navigateToImagesViewer}
                   />
                 )
-              } else {
+              case 'video':
                 return (
-                  <AttachmentUnsupported
+                  <AttachmentVideo
                     key={index}
                     total={status.media_attachments.length}
                     index={index}
                     sensitiveShown={sensitiveShown}
-                    attachment={attachment}
+                    video={attachment}
                   />
                 )
-              }
-          }
-        }),
-      [sensitiveShown]
-    )
-
-    return (
-      <View>
-        <View style={styles.container} children={attachments} />
+              case 'gifv':
+                return (
+                  <AttachmentVideo
+                    key={index}
+                    total={status.media_attachments.length}
+                    index={index}
+                    sensitiveShown={sensitiveShown}
+                    video={attachment}
+                    gifv
+                  />
+                )
+              case 'audio':
+                return (
+                  <AttachmentAudio
+                    key={index}
+                    total={status.media_attachments.length}
+                    index={index}
+                    sensitiveShown={sensitiveShown}
+                    audio={attachment}
+                  />
+                )
+              default:
+                if (
+                  attachment.preview_url?.endsWith('.jpg') ||
+                  attachment.preview_url?.endsWith('.jpeg') ||
+                  attachment.preview_url?.endsWith('.png') ||
+                  attachment.preview_url?.endsWith('.gif') ||
+                  attachment.remote_url?.endsWith('.jpg') ||
+                  attachment.remote_url?.endsWith('.jpeg') ||
+                  attachment.remote_url?.endsWith('.png') ||
+                  attachment.remote_url?.endsWith('.gif')
+                ) {
+                  imageUrls.current.push({
+                    id: attachment.id,
+                    preview_url: attachment.preview_url,
+                    url: attachment.url,
+                    remote_url: attachment.remote_url,
+                    blurhash: attachment.blurhash,
+                    width: attachment.meta?.original?.width,
+                    height: attachment.meta?.original?.height
+                  })
+                  return (
+                    <AttachmentImage
+                      key={index}
+                      total={status.media_attachments.length}
+                      index={index}
+                      sensitiveShown={sensitiveShown}
+                      // @ts-ignore
+                      image={attachment}
+                      navigateToImagesViewer={navigateToImagesViewer}
+                    />
+                  )
+                } else {
+                  return (
+                    <AttachmentUnsupported
+                      key={index}
+                      total={status.media_attachments.length}
+                      index={index}
+                      sensitiveShown={sensitiveShown}
+                      attachment={attachment}
+                    />
+                  )
+                }
+            }
+          })}
+        </View>
 
         {status.sensitive &&
           (sensitiveShown ? (
-            <Pressable style={styles.sensitiveBlur}>
+            <Pressable
+              style={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+              }}
+            >
               <Button
                 type='text'
                 content={t('shared.attachment.sensitive.button')}
                 overlay
-                onPress={onPressBlurView}
+                onPress={() => {
+                  analytics('timeline_shared_attachment_blurview_press_show')
+                  layoutAnimation()
+                  setSensitiveShown(false)
+                  haptics('Light')
+                }}
               />
             </Pressable>
           ) : (
@@ -174,7 +181,11 @@ const TimelineAttachment = React.memo(
               content='EyeOff'
               round
               overlay
-              onPress={onPressShow}
+              onPress={() => {
+                analytics('timeline_shared_attachment_blurview_press_hide')
+                setSensitiveShown(true)
+                haptics('Light')
+              }}
               style={{
                 position: 'absolute',
                 top: StyleConstants.Spacing.S * 2,
@@ -185,33 +196,28 @@ const TimelineAttachment = React.memo(
       </View>
     )
   },
-  () => true
+  (prev, next) => {
+    let isEqual = true
+
+    if (
+      prev.status.media_attachments.length !==
+      next.status.media_attachments.length
+    ) {
+      isEqual = false
+      return isEqual
+    }
+
+    prev.status.media_attachments.forEach((attachment, index) => {
+      if (
+        attachment.preview_url !==
+        next.status.media_attachments[index].preview_url
+      ) {
+        isEqual = false
+      }
+    })
+
+    return isEqual
+  }
 )
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: StyleConstants.Spacing.S,
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignContent: 'stretch'
-  },
-  sensitiveBlur: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  sensitiveBlurButton: {
-    padding: StyleConstants.Spacing.S,
-    borderRadius: 6
-  },
-  sensitiveText: {
-    ...StyleConstants.FontStyle.M
-  }
-})
-
 export default TimelineAttachment

src/components/Timeline/Shared/Attachment/Image.tsx

@@ -1,8 +1,8 @@
 import analytics from '@components/analytics'
 import GracefullyImage from '@components/GracefullyImage'
 import { StyleConstants } from '@utils/styles/constants'
-import React, { useCallback } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { View } from 'react-native'
 import attachmentAspectRatio from './aspectRatio'
 
 export interface Props {
@@ -13,44 +13,43 @@ export interface Props {
   navigateToImagesViewer: (imageIndex: string) => void
 }
 
-const AttachmentImage = React.memo(
-  ({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
-    const onPress = useCallback(() => {
-      analytics('timeline_shared_attachment_image_press', { id: image.id })
-      navigateToImagesViewer(image.id)
-    }, [])
-
-    return (
-      <View style={styles.base}>
-        <GracefullyImage
-          accessibilityLabel={image.description}
-          hidden={sensitiveShown}
-          uri={{ original: image.preview_url, remote: image.remote_url }}
-          blurhash={image.blurhash}
-          onPress={onPress}
-          style={{
-            aspectRatio:
-              total > 1 ||
-              !image.meta?.original?.width ||
-              !image.meta?.original?.height
-                ? attachmentAspectRatio({ total, index })
-                : image.meta.original.height / image.meta.original.width > 1
-                ? 1
-                : image.meta.original.width / image.meta.original.height
-          }}
-        />
-      </View>
-    )
-  },
-  (prev, next) => prev.sensitiveShown === next.sensitiveShown
-)
-
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexBasis: '50%',
-    padding: StyleConstants.Spacing.XS / 2
-  }
-})
+const AttachmentImage = ({
+  total,
+  index,
+  sensitiveShown,
+  image,
+  navigateToImagesViewer
+}: Props) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexBasis: '50%',
+        padding: StyleConstants.Spacing.XS / 2
+      }}
+    >
+      <GracefullyImage
+        accessibilityLabel={image.description}
+        hidden={sensitiveShown}
+        uri={{ original: image.preview_url, remote: image.remote_url }}
+        blurhash={image.blurhash}
+        onPress={() => {
+          analytics('timeline_shared_attachment_image_press', { id: image.id })
+          navigateToImagesViewer(image.id)
+        }}
+        style={{
+          aspectRatio:
+            total > 1 ||
+            !image.meta?.original?.width ||
+            !image.meta?.original?.height
+              ? attachmentAspectRatio({ total, index })
+              : image.meta.original.height / image.meta.original.width > 1
+              ? 1
+              : image.meta.original.width / image.meta.original.height
+        }}
+      />
+    </View>
+  )
+}
 
 export default AttachmentImage

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -10,142 +10,116 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, Text, View } from 'react-native'
 import { useQueryClient } from 'react-query'
 import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedMuted from './HeaderShared/Muted'
 
-const Names = React.memo(
-  ({ accounts }: { accounts: Mastodon.Account[] }) => {
-    const { t } = useTranslation('componentTimeline')
-    const { colors } = useTheme()
+const Names = ({ accounts }: { accounts: Mastodon.Account[] }) => {
+  const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
 
-    return (
-      <Text
-        numberOfLines={1}
-        style={[styles.namesLeading, { color: colors.secondary }]}
-      >
-        <Text>{t('shared.header.conversation.withAccounts')}</Text>
-        {accounts.map((account, index) => (
-          <Text key={account.id} numberOfLines={1}>
-            {index !== 0 ? t('common:separator') : undefined}
-            <ParseEmojis
-              content={account.display_name || account.username}
-              emojis={account.emojis}
-              fontBold
-            />
-          </Text>
-        ))}
-      </Text>
-    )
-  },
-  () => true
-)
+  return (
+    <Text
+      numberOfLines={1}
+      style={{ ...StyleConstants.FontStyle.M, color: colors.secondary }}
+    >
+      <Text>{t('shared.header.conversation.withAccounts')}</Text>
+      {accounts.map((account, index) => (
+        <Text key={account.id} numberOfLines={1}>
+          {index !== 0 ? t('common:separator') : undefined}
+          <ParseEmojis
+            content={account.display_name || account.username}
+            emojis={account.emojis}
+            fontBold
+          />
+        </Text>
+      ))}
+    </Text>
+  )
+}
 
 export interface Props {
   queryKey: QueryKeyTimeline
   conversation: Mastodon.Conversation
 }
 
-const HeaderConversation = React.memo(
-  ({ queryKey, conversation }: Props) => {
-    const { colors, theme } = useTheme()
-    const { t } = useTranslation('componentTimeline')
+const HeaderConversation = ({ queryKey, conversation }: Props) => {
+  const { colors, theme } = useTheme()
+  const { t } = useTranslation('componentTimeline')
 
-    const queryClient = useQueryClient()
-    const mutation = useTimelineMutation({
-      onMutate: true,
-      onError: (err: any, _, oldData) => {
-        displayMessage({
-          theme,
-          type: 'error',
-          message: t('common:message.error.message', {
-            function: t(`shared.header.conversation.delete.function`)
-          }),
-          ...(err.status &&
-            typeof err.status === 'number' &&
-            err.data &&
-            err.data.error &&
-            typeof err.data.error === 'string' && {
-              description: err.data.error
-            })
-        })
-        queryClient.setQueryData(queryKey, oldData)
-      }
-    })
-
-    const actionOnPress = useCallback(() => {
-      analytics('timeline_conversation_delete_press')
-      mutation.mutate({
-        type: 'deleteItem',
-        source: 'conversations',
-        queryKey,
-        id: conversation.id
+  const queryClient = useQueryClient()
+  const mutation = useTimelineMutation({
+    onMutate: true,
+    onError: (err: any, _, oldData) => {
+      displayMessage({
+        theme,
+        type: 'error',
+        message: t('common:message.error.message', {
+          function: t(`shared.header.conversation.delete.function`)
+        }),
+        ...(err.status &&
+          typeof err.status === 'number' &&
+          err.data &&
+          err.data.error &&
+          typeof err.data.error === 'string' && {
+            description: err.data.error
+          })
       })
-    }, [])
+      queryClient.setQueryData(queryKey, oldData)
+    }
+  })
 
-    const actionChildren = useMemo(
-      () => (
-        <Icon
-          name='Trash'
-          color={colors.secondary}
-          size={StyleConstants.Font.Size.L}
-        />
-      ),
-      []
-    )
+  const actionOnPress = useCallback(() => {
+    analytics('timeline_conversation_delete_press')
+    mutation.mutate({
+      type: 'deleteItem',
+      source: 'conversations',
+      queryKey,
+      id: conversation.id
+    })
+  }, [])
 
-    return (
-      <View style={styles.base}>
-        <View style={styles.nameAndMeta}>
-          <Names accounts={conversation.accounts} />
-          <View style={styles.meta}>
-            {conversation.last_status?.created_at ? (
-              <HeaderSharedCreated
-                created_at={conversation.last_status?.created_at}
-                edited_at={conversation.last_status?.edited_at}
-              />
-            ) : null}
-            <HeaderSharedMuted muted={conversation.last_status?.muted} />
-          </View>
+  const actionChildren = useMemo(
+    () => (
+      <Icon
+        name='Trash'
+        color={colors.secondary}
+        size={StyleConstants.Font.Size.L}
+      />
+    ),
+    []
+  )
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={{ flex: 3 }}>
+        <Names accounts={conversation.accounts} />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          {conversation.last_status?.created_at ? (
+            <HeaderSharedCreated
+              created_at={conversation.last_status?.created_at}
+              edited_at={conversation.last_status?.edited_at}
+            />
+          ) : null}
+          <HeaderSharedMuted muted={conversation.last_status?.muted} />
         </View>
-
-        <Pressable
-          style={styles.action}
-          onPress={actionOnPress}
-          children={actionChildren}
-        />
       </View>
-    )
-  },
-  () => true
-)
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  nameAndMeta: {
-    flex: 3
-  },
-  meta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: StyleConstants.Spacing.XS,
-    marginBottom: StyleConstants.Spacing.S
-  },
-  created_at: {
-    ...StyleConstants.FontStyle.S
-  },
-  action: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  namesLeading: {
-    ...StyleConstants.FontStyle.M
-  }
-})
+      <Pressable
+        style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}
+        onPress={actionOnPress}
+        children={actionChildren}
+      />
+    </View>
+  )
+}
 
 export default HeaderConversation

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
@@ -20,77 +20,61 @@ export interface Props {
   status: Mastodon.Status
 }
 
-const TimelineHeaderDefault = React.memo(
-  ({ queryKey, rootQueryKey, status }: Props) => {
-    const { t } = useTranslation('componentTimeline')
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
-    const { colors } = useTheme()
+const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
+  const { t } = useTranslation('componentTimeline')
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
+  const { colors } = useTheme()
 
-    return (
-      <View style={styles.base}>
-        <View style={styles.accountAndMeta}>
-          <HeaderSharedAccount account={status.account} />
-          <View style={styles.meta}>
-            <HeaderSharedCreated
-              created_at={status.created_at}
-              edited_at={status.edited_at}
-            />
-            <HeaderSharedVisibility visibility={status.visibility} />
-            <HeaderSharedMuted muted={status.muted} />
-            <HeaderSharedApplication application={status.application} />
-          </View>
-        </View>
-
-        {queryKey ? (
-          <Pressable
-            accessibilityHint={t('shared.header.actions.accessibilityHint')}
-            style={styles.action}
-            onPress={() =>
-              navigation.navigate('Screen-Actions', {
-                queryKey,
-                rootQueryKey,
-                status,
-                type: 'status'
-              })
-            }
-            children={
-              <Icon
-                name='MoreHorizontal'
-                color={colors.secondary}
-                size={StyleConstants.Font.Size.L}
-              />
-            }
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={{ flex: 5 }}>
+        <HeaderSharedAccount account={status.account} />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <HeaderSharedCreated
+            created_at={status.created_at}
+            edited_at={status.edited_at}
           />
-        ) : null}
+          <HeaderSharedVisibility visibility={status.visibility} />
+          <HeaderSharedMuted muted={status.muted} />
+          <HeaderSharedApplication application={status.application} />
+        </View>
       </View>
-    )
-  },
-  () => true
-)
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  accountAndMeta: {
-    flex: 5
-  },
-  meta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: StyleConstants.Spacing.XS,
-    marginBottom: StyleConstants.Spacing.S
-  },
-  created_at: {
-    ...StyleConstants.FontStyle.S
-  },
-  action: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: StyleConstants.Spacing.S
-  }
-})
+      {queryKey ? (
+        <Pressable
+          accessibilityHint={t('shared.header.actions.accessibilityHint')}
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            paddingBottom: StyleConstants.Spacing.S
+          }}
+          onPress={() =>
+            navigation.navigate('Screen-Actions', {
+              queryKey,
+              rootQueryKey,
+              status,
+              type: 'status'
+            })
+          }
+          children={
+            <Icon
+              name='MoreHorizontal'
+              color={colors.secondary}
+              size={StyleConstants.Font.Size.L}
+            />
+          }
+        />
+      ) : null}
+    </View>
+  )
+}
 
 export default TimelineHeaderDefault

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -10,7 +10,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
@@ -22,115 +22,103 @@ export interface Props {
   notification: Mastodon.Notification
 }
 
-const TimelineHeaderNotification = React.memo(
-  ({ queryKey, notification }: Props) => {
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
-    const { colors } = useTheme()
+const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
+  const { colors } = useTheme()
 
-    const actions = useMemo(() => {
-      switch (notification.type) {
-        case 'follow':
-          return <RelationshipOutgoing id={notification.account.id} />
-        case 'follow_request':
-          return <RelationshipIncoming id={notification.account.id} />
-        default:
-          if (notification.status) {
-            return (
-              <Pressable
-                style={{
-                  flex: 1,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  paddingBottom: StyleConstants.Spacing.S
-                }}
-                onPress={() =>
-                  navigation.navigate('Screen-Actions', {
-                    queryKey,
-                    status: notification.status!,
-                    type: 'status'
-                  })
-                }
-                children={
-                  <Icon
-                    name='MoreHorizontal'
-                    color={colors.secondary}
-                    size={StyleConstants.Font.Size.L}
-                  />
-                }
-              />
-            )
-          }
-      }
-    }, [notification.type])
-
-    return (
-      <View style={styles.base}>
-        <View
-          style={{
-            flex:
-              notification.type === 'follow' ||
-              notification.type === 'follow_request'
-                ? 1
-                : 4
-          }}
-        >
-          <HeaderSharedAccount
-            account={
-              notification.status
-                ? notification.status.account
-                : notification.account
-            }
-            {...((notification.type === 'follow' ||
-              notification.type === 'follow_request') && { withoutName: true })}
-          />
-          <View style={styles.meta}>
-            <HeaderSharedCreated
-              created_at={notification.created_at}
-              edited_at={notification.status?.edited_at}
+  const actions = useMemo(() => {
+    switch (notification.type) {
+      case 'follow':
+        return <RelationshipOutgoing id={notification.account.id} />
+      case 'follow_request':
+        return <RelationshipIncoming id={notification.account.id} />
+      default:
+        if (notification.status) {
+          return (
+            <Pressable
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: 'center',
+                paddingBottom: StyleConstants.Spacing.S
+              }}
+              onPress={() =>
+                navigation.navigate('Screen-Actions', {
+                  queryKey,
+                  status: notification.status!,
+                  type: 'status'
+                })
+              }
+              children={
+                <Icon
+                  name='MoreHorizontal'
+                  color={colors.secondary}
+                  size={StyleConstants.Font.Size.L}
+                />
+              }
             />
-            {notification.status?.visibility ? (
-              <HeaderSharedVisibility
-                visibility={notification.status.visibility}
-              />
-            ) : null}
-            <HeaderSharedMuted muted={notification.status?.muted} />
-            <HeaderSharedApplication
-              application={notification.status?.application}
-            />
-          </View>
-        </View>
+          )
+        }
+    }
+  }, [notification.type])
 
-        <View
-          style={[
-            styles.relationship,
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View
+        style={{
+          flex:
             notification.type === 'follow' ||
             notification.type === 'follow_request'
-              ? { flexShrink: 1 }
-              : { flex: 1 }
-          ]}
+              ? 1
+              : 4
+        }}
+      >
+        <HeaderSharedAccount
+          account={
+            notification.status
+              ? notification.status.account
+              : notification.account
+          }
+          {...((notification.type === 'follow' ||
+            notification.type === 'follow_request') && { withoutName: true })}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
         >
-          {actions}
+          <HeaderSharedCreated
+            created_at={notification.created_at}
+            edited_at={notification.status?.edited_at}
+          />
+          {notification.status?.visibility ? (
+            <HeaderSharedVisibility
+              visibility={notification.status.visibility}
+            />
+          ) : null}
+          <HeaderSharedMuted muted={notification.status?.muted} />
+          <HeaderSharedApplication
+            application={notification.status?.application}
+          />
         </View>
       </View>
-    )
-  },
-  () => true
-)
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  meta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: StyleConstants.Spacing.XS,
-    marginBottom: StyleConstants.Spacing.S
-  },
-  relationship: {
-    marginLeft: StyleConstants.Spacing.M
-  }
-})
+      <View
+        style={[
+          { marginLeft: StyleConstants.Spacing.M },
+          notification.type === 'follow' ||
+          notification.type === 'follow_request'
+            ? { flexShrink: 1 }
+            : { flex: 1 }
+        ]}
+      >
+        {actions}
+      </View>
+    </View>
+  )
+}
 
 export default TimelineHeaderNotification

src/screens/Actions.tsx

@@ -35,191 +35,189 @@ import ActionsNotificationsFilter from './Actions/NotificationsFilter'
 import ActionsShare from './Actions/Share'
 import ActionsStatus from './Actions/Status'
 
-const ScreenActions = React.memo(
-  ({
-    route: { params },
-    navigation
-  }: RootStackScreenProps<'Screen-Actions'>) => {
-    const { t } = useTranslation()
+const ScreenActions = ({
+  route: { params },
+  navigation
+}: RootStackScreenProps<'Screen-Actions'>) => {
+  const { t } = useTranslation()
 
-    const instanceAccount = useSelector(
-      getInstanceAccount,
-      (prev, next) => prev?.id === next?.id
-    )
-    let sameAccount = false
+  const instanceAccount = useSelector(
+    getInstanceAccount,
+    (prev, next) => prev?.id === next?.id
+  )
+  let sameAccount = false
+  switch (params.type) {
+    case 'status':
+      console.log('media length', params.status.media_attachments.length)
+      sameAccount = instanceAccount?.id === params.status.account.id
+      break
+    case 'account':
+      sameAccount = instanceAccount?.id === params.account.id
+      break
+  }
+
+  const instanceDomain = useSelector(getInstanceUrl)
+  let sameDomain = true
+  let statusDomain: string
+  switch (params.type) {
+    case 'status':
+      statusDomain = params.status.uri
+        ? params.status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
+        : ''
+      sameDomain = instanceDomain === statusDomain
+      break
+  }
+
+  const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
+
+  const DEFAULT_VALUE = 350
+  const screenHeight = Dimensions.get('screen').height
+  const panY = useSharedValue(DEFAULT_VALUE)
+  useEffect(() => {
+    panY.value = withTiming(0)
+  }, [])
+  const styleTop = useAnimatedStyle(() => {
+    return {
+      bottom: interpolate(
+        panY.value,
+        [0, screenHeight],
+        [0, -screenHeight],
+        Extrapolate.CLAMP
+      )
+    }
+  })
+  const dismiss = useCallback(() => {
+    navigation.goBack()
+  }, [])
+  const onGestureEvent = useAnimatedGestureHandler({
+    onActive: ({ translationY }) => {
+      panY.value = translationY
+    },
+    onEnd: ({ velocityY }) => {
+      if (velocityY > 500) {
+        runOnJS(dismiss)()
+      } else {
+        panY.value = withTiming(0)
+      }
+    }
+  })
+
+  const actions = () => {
     switch (params.type) {
       case 'status':
-        sameAccount = instanceAccount?.id === params.status.account.id
-        break
-      case 'account':
-        sameAccount = instanceAccount?.id === params.account.id
-        break
-    }
-
-    const instanceDomain = useSelector(getInstanceUrl)
-    let sameDomain = true
-    let statusDomain: string
-    switch (params.type) {
-      case 'status':
-        statusDomain = params.status.uri
-          ? params.status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
-          : ''
-        sameDomain = instanceDomain === statusDomain
-        break
-    }
-
-    const { colors } = useTheme()
-    const insets = useSafeAreaInsets()
-
-    const DEFAULT_VALUE = 350
-    const screenHeight = Dimensions.get('screen').height
-    const panY = useSharedValue(DEFAULT_VALUE)
-    useEffect(() => {
-      panY.value = withTiming(0)
-    }, [])
-    const styleTop = useAnimatedStyle(() => {
-      return {
-        bottom: interpolate(
-          panY.value,
-          [0, screenHeight],
-          [0, -screenHeight],
-          Extrapolate.CLAMP
-        )
-      }
-    })
-    const dismiss = useCallback(() => {
-      navigation.goBack()
-    }, [])
-    const onGestureEvent = useAnimatedGestureHandler({
-      onActive: ({ translationY }) => {
-        panY.value = translationY
-      },
-      onEnd: ({ velocityY }) => {
-        if (velocityY > 500) {
-          runOnJS(dismiss)()
-        } else {
-          panY.value = withTiming(0)
-        }
-      }
-    })
-
-    const actions = useMemo(() => {
-      switch (params.type) {
-        case 'status':
-          return (
-            <>
-              {!sameAccount ? (
-                <ActionsAccount
-                  queryKey={params.queryKey}
-                  rootQueryKey={params.rootQueryKey}
-                  account={params.status.account}
-                  dismiss={dismiss}
-                />
-              ) : null}
-              {sameAccount && params.status ? (
-                <ActionsStatus
-                  navigation={navigation}
-                  queryKey={params.queryKey}
-                  rootQueryKey={params.rootQueryKey}
-                  status={params.status}
-                  dismiss={dismiss}
-                />
-              ) : null}
-              {!sameDomain && statusDomain ? (
-                <ActionsDomain
-                  queryKey={params.queryKey}
-                  rootQueryKey={params.rootQueryKey}
-                  domain={statusDomain}
-                  dismiss={dismiss}
-                />
-              ) : null}
-              {params.status.visibility !== 'direct' ? (
-                <ActionsShare
-                  url={params.status.url || params.status.uri}
-                  type={params.type}
-                  dismiss={dismiss}
-                />
-              ) : null}
-              <Button
-                type='text'
-                content={t('common:buttons.cancel')}
-                onPress={() => {
-                  analytics('bottomsheet_acknowledge')
-                }}
-                style={styles.button}
+        return (
+          <>
+            {!sameAccount ? (
+              <ActionsAccount
+                queryKey={params.queryKey}
+                rootQueryKey={params.rootQueryKey}
+                account={params.status.account}
+                dismiss={dismiss}
               />
-            </>
-          )
-        case 'account':
-          return (
-            <>
-              {!sameAccount ? (
-                <ActionsAccount account={params.account} dismiss={dismiss} />
-              ) : null}
+            ) : null}
+            {sameAccount && params.status ? (
+              <ActionsStatus
+                navigation={navigation}
+                queryKey={params.queryKey}
+                rootQueryKey={params.rootQueryKey}
+                status={params.status}
+                dismiss={dismiss}
+              />
+            ) : null}
+            {!sameDomain && statusDomain ? (
+              <ActionsDomain
+                queryKey={params.queryKey}
+                rootQueryKey={params.rootQueryKey}
+                domain={statusDomain}
+                dismiss={dismiss}
+              />
+            ) : null}
+            {params.status.visibility !== 'direct' ? (
               <ActionsShare
-                url={params.account.url}
+                url={params.status.url || params.status.uri}
                 type={params.type}
                 dismiss={dismiss}
               />
-              <Button
-                type='text'
-                content={t('common:buttons.cancel')}
-                onPress={() => {
-                  analytics('bottomsheet_acknowledge')
-                }}
-                style={styles.button}
-              />
-            </>
-          )
-        case 'notifications_filter':
-          return <ActionsNotificationsFilter />
-      }
-    }, [])
+            ) : null}
+            <Button
+              type='text'
+              content={t('common:buttons.cancel')}
+              onPress={() => {
+                analytics('bottomsheet_acknowledge')
+              }}
+              style={styles.button}
+            />
+          </>
+        )
+      case 'account':
+        return (
+          <>
+            {!sameAccount ? (
+              <ActionsAccount account={params.account} dismiss={dismiss} />
+            ) : null}
+            <ActionsShare
+              url={params.account.url}
+              type={params.type}
+              dismiss={dismiss}
+            />
+            <Button
+              type='text'
+              content={t('common:buttons.cancel')}
+              onPress={() => {
+                analytics('bottomsheet_acknowledge')
+              }}
+              style={styles.button}
+            />
+          </>
+        )
+      case 'notifications_filter':
+        return <ActionsNotificationsFilter />
+    }
+  }
 
-    return (
-      <SafeAreaProvider>
-        <Animated.View style={{ flex: 1 }}>
-          <TapGestureHandler
-            onHandlerStateChange={({ nativeEvent }) => {
-              if (nativeEvent.state === State.ACTIVE) {
-                dismiss()
-              }
-            }}
+  return (
+    <SafeAreaProvider>
+      <Animated.View style={{ flex: 1 }}>
+        <TapGestureHandler
+          onHandlerStateChange={({ nativeEvent }) => {
+            if (nativeEvent.state === State.ACTIVE) {
+              dismiss()
+            }
+          }}
+        >
+          <Animated.View
+            style={[
+              styles.overlay,
+              { backgroundColor: colors.backgroundOverlayInvert }
+            ]}
           >
-            <Animated.View
-              style={[
-                styles.overlay,
-                { backgroundColor: colors.backgroundOverlayInvert }
-              ]}
-            >
-              <PanGestureHandler onGestureEvent={onGestureEvent}>
-                <Animated.View
+            <PanGestureHandler onGestureEvent={onGestureEvent}>
+              <Animated.View
+                style={[
+                  styles.container,
+                  styleTop,
+                  {
+                    backgroundColor: colors.backgroundDefault,
+                    paddingBottom: insets.bottom || StyleConstants.Spacing.L
+                  }
+                ]}
+              >
+                <View
                   style={[
-                    styles.container,
-                    styleTop,
-                    {
-                      backgroundColor: colors.backgroundDefault,
-                      paddingBottom: insets.bottom || StyleConstants.Spacing.L
-                    }
+                    styles.handle,
+                    { backgroundColor: colors.primaryOverlay }
                   ]}
-                >
-                  <View
-                    style={[
-                      styles.handle,
-                      { backgroundColor: colors.primaryOverlay }
-                    ]}
-                  />
-                  {actions}
-                </Animated.View>
-              </PanGestureHandler>
-            </Animated.View>
-          </TapGestureHandler>
-        </Animated.View>
-      </SafeAreaProvider>
-    )
-  },
-  () => true
-)
+                />
+                {actions()}
+              </Animated.View>
+            </PanGestureHandler>
+          </Animated.View>
+        </TapGestureHandler>
+      </Animated.View>
+    </SafeAreaProvider>
+  )
+}
 
 const styles = StyleSheet.create({
   overlay: {

src/screens/Compose.tsx

@@ -305,7 +305,6 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
 
               switch (params?.type) {
                 case 'edit':
-                  console.log('firing mutation')
                   mutateTimeline.mutate({
                     type: 'editItem',
                     queryKey: params.queryKey,

src/utils/queryHooks/timeline/editItem.ts

@@ -7,15 +7,12 @@ const editItem = ({
   rootQueryKey,
   status
 }: MutationVarsTimelineEditItem) => {
-  console.log('START')
   queryKey &&
     queryClient.setQueryData<InfiniteData<any> | undefined>(queryKey, old => {
       if (old) {
         old.pages = old.pages.map(page => {
           page.body = page.body.map((item: Mastodon.Status) => {
             if (item.id === status.id) {
-              console.log('found queryKey', queryKey)
-              console.log('new content', status.content)
               item = status
             }
             return item
@@ -34,8 +31,6 @@ const editItem = ({
           old.pages = old.pages.map(page => {
             page.body = page.body.map((item: Mastodon.Status) => {
               if (item.id === status.id) {
-                console.log('found rootQueryKey', queryKey)
-                console.log('new content', status.content)
                 item = status
               }
               return item
@@ -46,7 +41,6 @@ const editItem = ({
         }
       }
     )
-  console.log('EDN')
 }
 
 export default editItem