Editing can update media

2025-03-12 17:40:19 +01:00 · 2022-04-30 21:29:08 +02:00 · 2022-04-30 21:29:08 +02:00 · f93d6f7db8
commit f93d6f7db8
parent d4f91a5756
9 changed files with 666 additions and 746 deletions
--- a/src/components/GracefullyImage.tsx
+++ b/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(() => {
-      if (originalFailed) {
-        return { uri: uri.remote || undefined }
-      } else {
-        return {
+  const source = originalFailed
+    ? { uri: uri.remote || undefined }
+    : {
        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}
-        {originalView}
+      {uri.preview && !imageLoaded ? (
+        <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: {
--- a/src/components/Timeline/Shared/Attachment.tsx
+++ b/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,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]
-    )
-
-    return (
-      <View>
-        <View style={styles.container} children={attachments} />
+          })}
+        </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

-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
+    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
+  }
+)
+
 export default TimelineAttachment
--- a/src/components/Timeline/Shared/Attachment/Image.tsx
+++ b/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,21 +13,30 @@ 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)
-    }, [])
-
+const AttachmentImage = ({
+  total,
+  index,
+  sensitiveShown,
+  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
--- a/src/components/Timeline/Shared/HeaderConversation.tsx
+++ b/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(
-  ({ accounts }: { accounts: Mastodon.Account[] }) => {
+const Names = ({ 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(
-  ({ queryKey, conversation }: Props) => {
+const HeaderConversation = ({ 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={styles.nameAndMeta}>
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <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
--- a/src/components/Timeline/Shared/HeaderDefault.tsx
+++ b/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(
-  ({ queryKey, rootQueryKey, status }: Props) => {
+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}>
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <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
--- a/src/components/Timeline/Shared/HeaderNotification.tsx
+++ b/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(
-  ({ queryKey, notification }: Props) => {
+const TimelineHeaderNotification = ({ 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
--- a/src/screens/Actions.tsx
+++ b/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: {
--- a/src/screens/Compose.tsx
+++ b/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,
--- a/src/utils/queryHooks/timeline/editItem.ts
+++ b/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