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,8 +39,7 @@ export interface Props {
   >
 }
 
-const GracefullyImage = React.memo(
+const GracefullyImage = ({
-  ({
   accessibilityLabel,
   accessibilityHint,
   hidden = false,
@@ -57,56 +56,26 @@ const GracefullyImage = React.memo(
   const [originalFailed, setOriginalFailed] = useState(false)
   const [imageLoaded, setImageLoaded] = useState(false)
 
-    const source = useMemo(() => {
+  const source = originalFailed
-      if (originalFailed) {
+    ? { uri: uri.remote || undefined }
-        return { uri: uri.remote || undefined }
+    : {
-      } else {
-        return {
         uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
       }
-      }
-    }, [originalFailed])
 
-    const onLoad = useCallback(() => {
+  const onLoad = () => {
     setImageLoaded(true)
     if (setImageDimensions && source.uri) {
       Image.getSize(source.uri, (width, height) =>
         setImageDimensions({ width, height })
       )
     }
-    }, [source.uri])
+  }
-    const onError = useCallback(() => {
+  const onError = () => {
     if (!originalFailed) {
       setOriginalFailed(true)
     }
-    }, [originalFailed])
+  }
 
-    const previewView = useMemo(
-      () =>
-        uri.preview && !imageLoaded ? (
-          <Image
-            fadeDuration={0}
-            source={{ uri: uri.preview }}
-            style={[
-              styles.placeholder,
-              { backgroundColor: colors.shimmerDefault }
-            ]}
-          />
-        ) : null,
-      []
-    )
-    const originalView = useMemo(
-      () => (
-        <Image
-          fadeDuration={0}
-          source={source}
-          style={[{ flex: 1 }, imageStyle]}
-          onLoad={onLoad}
-          onError={onError}
-        />
-      ),
-      [source]
-    )
   const blurhashView = useMemo(() => {
     if (hidden || !imageLoaded) {
       if (blurhash) {
@@ -146,18 +115,27 @@ const GracefullyImage = React.memo(
           : { onPress }
         : { disabled: true })}
     >
-        {previewView}
+      {uri.preview && !imageLoaded ? (
-        {originalView}
+        <Image
+          fadeDuration={0}
+          source={{ uri: uri.preview }}
+          style={[
+            styles.placeholder,
+            { backgroundColor: colors.shimmerDefault }
+          ]}
+        />
+      ) : null}
+      <Image
+        fadeDuration={0}
+        source={source}
+        style={[{ flex: 1 }, imageStyle]}
+        onLoad={onLoad}
+        onError={onError}
+      />
       {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
-)
 
 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 React, { useRef, useState } from 'react'
-import { useEffect } 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(() => {
+    const navigateToImagesViewer = (id: string) => {
-      status.media_attachments.forEach((attachment, index) => {
+      status.media_attachments.forEach(attachment => {
         switch (attachment.type) {
           case 'image':
             imageUrls.current.push({
@@ -55,15 +43,25 @@ 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) => {
+    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 (
@@ -150,22 +148,31 @@ const TimelineAttachment = React.memo(
                   )
                 }
             }
-        }),
+          })}
-      [sensitiveShown]
+        </View>
-    )
-
-    return (
-      <View>
-        <View style={styles.container} children={attachments} />
 
         {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
 
-const styles = StyleSheet.create({
+    if (
-  container: {
+      prev.status.media_attachments.length !==
-    marginTop: StyleConstants.Spacing.S,
+      next.status.media_attachments.length
-    flex: 1,
+    ) {
-    flexDirection: 'row',
+      isEqual = false
-    flexWrap: 'wrap',
+      return isEqual
-    justifyContent: 'center',
+    }
-    alignContent: 'stretch'
+
-  },
+    prev.status.media_attachments.forEach((attachment, index) => {
-  sensitiveBlur: {
+      if (
-    position: 'absolute',
+        attachment.preview_url !==
-    width: '100%',
+        next.status.media_attachments[index].preview_url
-    height: '100%',
+      ) {
-    flex: 1,
+        isEqual = false
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  sensitiveBlurButton: {
-    padding: StyleConstants.Spacing.S,
-    borderRadius: 6
-  },
-  sensitiveText: {
-    ...StyleConstants.FontStyle.M
       }
     })
 
+    return isEqual
+  }
+)
+
 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 React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import attachmentAspectRatio from './aspectRatio'
 
 export interface Props {
@@ -13,21 +13,30 @@ export interface Props {
   navigateToImagesViewer: (imageIndex: string) => void
 }
 
-const AttachmentImage = React.memo(
+const AttachmentImage = ({
-  ({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
+  total,
-    const onPress = useCallback(() => {
+  index,
-      analytics('timeline_shared_attachment_image_press', { id: image.id })
+  sensitiveShown,
-      navigateToImagesViewer(image.id)
+  image,
-    }, [])
+  navigateToImagesViewer
-
+}: Props) => {
   return (
-      <View style={styles.base}>
+    <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={onPress}
+        onPress={() => {
+          analytics('timeline_shared_attachment_image_press', { id: image.id })
+          navigateToImagesViewer(image.id)
+        }}
         style={{
           aspectRatio:
             total > 1 ||
@@ -41,16 +50,6 @@ const AttachmentImage = React.memo(
       />
     </View>
   )
-  },
-  (prev, next) => prev.sensitiveShown === next.sensitiveShown
-)
-
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexBasis: '50%',
-    padding: StyleConstants.Spacing.XS / 2
 }
-})
 
 export default AttachmentImage

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -10,20 +10,19 @@ 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(
+const Names = ({ accounts }: { accounts: Mastodon.Account[] }) => {
-  ({ accounts }: { accounts: Mastodon.Account[] }) => {
   const { t } = useTranslation('componentTimeline')
   const { colors } = useTheme()
 
   return (
     <Text
       numberOfLines={1}
-        style={[styles.namesLeading, { color: colors.secondary }]}
+      style={{ ...StyleConstants.FontStyle.M, color: colors.secondary }}
     >
       <Text>{t('shared.header.conversation.withAccounts')}</Text>
       {accounts.map((account, index) => (
@@ -38,17 +37,14 @@ const Names = React.memo(
       ))}
     </Text>
   )
-  },
+}
-  () => true
-)
 
 export interface Props {
   queryKey: QueryKeyTimeline
   conversation: Mastodon.Conversation
 }
 
-const HeaderConversation = React.memo(
+const HeaderConversation = ({ queryKey, conversation }: Props) => {
-  ({ queryKey, conversation }: Props) => {
   const { colors, theme } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
@@ -96,10 +92,17 @@ const HeaderConversation = React.memo(
   )
 
   return (
-      <View style={styles.base}>
+    <View style={{ flex: 1, flexDirection: 'row' }}>
-        <View style={styles.nameAndMeta}>
+      <View style={{ flex: 3 }}>
         <Names accounts={conversation.accounts} />
-          <View style={styles.meta}>
+        <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}
@@ -111,41 +114,12 @@ const HeaderConversation = React.memo(
       </View>
 
       <Pressable
-          style={styles.action}
+        style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}
         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
 }
-})
 
 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,17 +20,23 @@ export interface Props {
   status: Mastodon.Status
 }
 
-const TimelineHeaderDefault = React.memo(
+const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
-  ({ queryKey, rootQueryKey, status }: Props) => {
   const { t } = useTranslation('componentTimeline')
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { colors } = useTheme()
 
   return (
-      <View style={styles.base}>
+    <View style={{ flex: 1, flexDirection: 'row' }}>
-        <View style={styles.accountAndMeta}>
+      <View style={{ flex: 5 }}>
         <HeaderSharedAccount account={status.account} />
-          <View style={styles.meta}>
+        <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}
@@ -44,7 +50,12 @@ const TimelineHeaderDefault = React.memo(
       {queryKey ? (
         <Pressable
           accessibilityHint={t('shared.header.actions.accessibilityHint')}
-            style={styles.action}
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            paddingBottom: StyleConstants.Spacing.S
+          }}
           onPress={() =>
             navigation.navigate('Screen-Actions', {
               queryKey,
@@ -64,33 +75,6 @@ const TimelineHeaderDefault = React.memo(
       ) : null}
     </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
 }
-})
 
 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,8 +22,7 @@ export interface Props {
   notification: Mastodon.Notification
 }
 
-const TimelineHeaderNotification = React.memo(
+const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
-  ({ queryKey, notification }: Props) => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { colors } = useTheme()
 
@@ -64,7 +63,7 @@ const TimelineHeaderNotification = React.memo(
   }, [notification.type])
 
   return (
-      <View style={styles.base}>
+    <View style={{ flex: 1, flexDirection: 'row' }}>
       <View
         style={{
           flex:
@@ -83,7 +82,14 @@ const TimelineHeaderNotification = React.memo(
           {...((notification.type === 'follow' ||
             notification.type === 'follow_request') && { withoutName: true })}
         />
-          <View style={styles.meta}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
           <HeaderSharedCreated
             created_at={notification.created_at}
             edited_at={notification.status?.edited_at}
@@ -102,7 +108,7 @@ const TimelineHeaderNotification = React.memo(
 
       <View
         style={[
-            styles.relationship,
+          { marginLeft: StyleConstants.Spacing.M },
           notification.type === 'follow' ||
           notification.type === 'follow_request'
             ? { flexShrink: 1 }
@@ -113,24 +119,6 @@ const TimelineHeaderNotification = React.memo(
       </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
 }
-})
 
 export default TimelineHeaderNotification

src/screens/Actions.tsx

@@ -35,8 +35,7 @@ import ActionsNotificationsFilter from './Actions/NotificationsFilter'
 import ActionsShare from './Actions/Share'
 import ActionsStatus from './Actions/Status'
 
-const ScreenActions = React.memo(
+const ScreenActions = ({
-  ({
   route: { params },
   navigation
 }: RootStackScreenProps<'Screen-Actions'>) => {
@@ -49,6 +48,7 @@ const ScreenActions = React.memo(
   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':
@@ -103,7 +103,7 @@ const ScreenActions = React.memo(
     }
   })
 
-    const actions = useMemo(() => {
+  const actions = () => {
     switch (params.type) {
       case 'status':
         return (
@@ -174,7 +174,7 @@ const ScreenActions = React.memo(
       case 'notifications_filter':
         return <ActionsNotificationsFilter />
     }
-    }, [])
+  }
 
   return (
     <SafeAreaProvider>
@@ -209,7 +209,7 @@ const ScreenActions = React.memo(
                     { backgroundColor: colors.primaryOverlay }
                   ]}
                 />
-                  {actions}
+                {actions()}
               </Animated.View>
             </PanGestureHandler>
           </Animated.View>
@@ -217,9 +217,7 @@ const ScreenActions = React.memo(
       </Animated.View>
     </SafeAreaProvider>
   )
-  },
+}
-  () => true
-)
 
 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