From 5f499d897cc0fbe5cfbbb151c463fb043621f040 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Wed, 27 Sep 2023 16:00:59 +0200
Subject: [PATCH] fix: severa channel item issues recycling

---
 .../components/message-item.tsx               | 62 ++++++++++++++++---
 .../components/creator-channels/messages.tsx  | 54 +++-------------
 packages/app/components/reaction/index.tsx    |  2 +-
 .../components/reaction/message-reactions.tsx |  2 +-
 4 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index 399b1f6880..5f27e09cbc 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -53,7 +53,7 @@ import { MenuItemIcon } from "../../dropdown/menu-item-icon";
 import { MessageReactions } from "../../reaction/message-reactions";
 import { useDeleteMessage } from "../hooks/use-delete-message";
 import { useReactOnMessage } from "../hooks/use-react-on-message";
-import { MessageItemProps } from "../types";
+import { ChannelMessageItem, MessageItemProps } from "../types";
 import { generateLoremIpsum } from "../utils";
 import { CreatorBadge } from "./creator-badge";
 
@@ -63,6 +63,43 @@ const height = Dimensions.get("window").height;
 const PlatformAnimateHeight = Platform.OS === "web" ? AnimateHeight : View;
 const AnimatedView = Animated.createAnimatedComponent(View);
 
+const getImageAttachmentWidth = (item: ChannelMessageItem) => {
+  const theFirstAttachment = item.channel_message?.attachments[0];
+
+  if (
+    !theFirstAttachment ||
+    !theFirstAttachment.height ||
+    !theFirstAttachment.width
+  ) {
+    return 0;
+  }
+  if (theFirstAttachment.height > theFirstAttachment.width) {
+    return 160;
+  } else if (theFirstAttachment.height < theFirstAttachment.width) {
+    return 320;
+  } else {
+    return 320;
+  }
+};
+const getImageAttachmentHeight = (item: ChannelMessageItem) => {
+  const theFirstAttachment = item.channel_message?.attachments[0];
+
+  if (
+    !theFirstAttachment ||
+    !theFirstAttachment.height ||
+    !theFirstAttachment.width
+  ) {
+    return 0;
+  }
+  if (theFirstAttachment.height > theFirstAttachment.width) {
+    return 284;
+  } else if (theFirstAttachment.height < theFirstAttachment.width) {
+    return 180;
+  } else {
+    return 320;
+  }
+};
+
 export const MessageItem = memo(
   ({
     item,
@@ -74,8 +111,6 @@ export const MessageItem = memo(
     editMessageItemDimension,
     edition,
     isUserAdmin,
-    imageAttachmentWidth,
-    imageAttachmentHeight,
   }: MessageItemProps & {
     edition?: CreatorEditionResponse;
     isUserAdmin?: boolean;
@@ -85,8 +120,6 @@ export const MessageItem = memo(
       height: number;
       pageY: number;
     }>;
-    imageAttachmentWidth: number;
-    imageAttachmentHeight: number;
   }) => {
     const { channel_message } = item;
     const reactOnMessage = useReactOnMessage(channelId);
@@ -97,6 +130,16 @@ export const MessageItem = memo(
     const animatedViewRef = useAnimatedRef<any>();
     const router = useRouter();
 
+    const imageAttachmentWidth = useMemo(
+      () => getImageAttachmentWidth(item),
+      [item]
+    );
+
+    const imageAttachmentHeight = useMemo(
+      () => getImageAttachmentHeight(item),
+      [item]
+    );
+
     const linkifiedMessage = useMemo(
       () =>
         channel_message.body
@@ -483,8 +526,11 @@ export const MessageItem = memo(
                   }
                 >
                   <Image
-                    recyclingKey={item.channel_message.attachments[0]?.url}
-                    source={item.channel_message.attachments[0]?.url}
+                    transition={100}
+                    recyclingKey={
+                      item.channel_message.attachments[0]?.media_upload
+                    }
+                    source={`${item.channel_message.attachments[0]?.url}?optimizer=image&width=600`}
                     alt=""
                     resizeMode="cover"
                     style={{
@@ -509,7 +555,7 @@ export const MessageItem = memo(
               initialHeight={item.reaction_group.length > 0 ? 29 : 0}
             >
               {item.reaction_group.length > 0 ? (
-                <AnimatedView tw="pt-1" layout={Layout}>
+                <AnimatedView layout={Layout}>
                   <MessageReactions
                     key={channel_message.id}
                     reactionGroup={item.reaction_group}
diff --git a/packages/app/components/creator-channels/messages.tsx b/packages/app/components/creator-channels/messages.tsx
index 6257ea1098..857456bc84 100644
--- a/packages/app/components/creator-channels/messages.tsx
+++ b/packages/app/components/creator-channels/messages.tsx
@@ -97,53 +97,20 @@ const benefits = [
     text: "Unreleased content or news",
   },
 ];
-const getImageAttachmentWidth = (item: ChannelMessageItem) => {
-  const theFirstAttachment = item.channel_message?.attachments[0];
 
-  if (
-    !theFirstAttachment ||
-    !theFirstAttachment.height ||
-    !theFirstAttachment.width
-  ) {
-    return 0;
-  }
-  if (theFirstAttachment.height > theFirstAttachment.width) {
-    return 160;
-  } else if (theFirstAttachment.height < theFirstAttachment.width) {
-    return 320;
-  } else {
-    return 320;
-  }
-};
-const getImageAttachmentHeight = (item: ChannelMessageItem) => {
-  const theFirstAttachment = item.channel_message?.attachments[0];
-
-  if (
-    !theFirstAttachment ||
-    !theFirstAttachment.height ||
-    !theFirstAttachment.width
-  ) {
-    return 0;
-  }
-  if (theFirstAttachment.height > theFirstAttachment.width) {
-    return 284;
-  } else if (theFirstAttachment.height < theFirstAttachment.width) {
-    return 180;
-  } else {
-    return 320;
-  }
-};
 const keyExtractor = (item: ChannelMessageItem) =>
   item.channel_message.id.toString();
 
 const getItemType = (item: ChannelMessageItem) => {
-  if (item.channel_message.is_payment_gated && !item.channel_message.body) {
+  /*
+  if (
+    item.channel_message.is_payment_gated &&
+    !item.channel_message.body &&
+    !item.channel_message?.attachments
+  ) {
     return "payment-gate";
   }
-
-  if (item.channel_message.is_payment_gated && item.channel_message.body) {
-    return "message-unlocked";
-  }
+  */
 
   if (
     item.channel_message?.attachments &&
@@ -176,8 +143,6 @@ const getItemType = (item: ChannelMessageItem) => {
       ) {
         return "image-square";
       }
-
-      return "image";
     }
   }
 
@@ -383,8 +348,6 @@ export const Messages = memo(() => {
         <MessageItem
           item={item}
           reactions={extraData.reactions}
-          imageAttachmentWidth={getImageAttachmentWidth(item)}
-          imageAttachmentHeight={getImageAttachmentHeight(item)}
           channelId={extraData.channelId}
           listRef={listRef}
           setEditMessage={setEditMessage}
@@ -603,13 +566,12 @@ export const Messages = memo(() => {
                 data={data}
                 onEndReached={onLoadMore}
                 inverted
-                drawDistance={100}
                 getItemType={getItemType}
                 scrollEnabled={data.length > 0}
                 overscan={4}
                 onScroll={scrollhandler}
                 useWindowScroll={false}
-                estimatedItemSize={400}
+                estimatedItemSize={300}
                 // android > 12 flips the scrollbar to the left, FlashList bug
                 showsVerticalScrollIndicator={Platform.OS !== "android"}
                 keyboardDismissMode={
diff --git a/packages/app/components/reaction/index.tsx b/packages/app/components/reaction/index.tsx
index d7a15ce7c7..3871274814 100644
--- a/packages/app/components/reaction/index.tsx
+++ b/packages/app/components/reaction/index.tsx
@@ -15,8 +15,8 @@ import { colors } from "@showtime-xyz/universal.tailwind";
 import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
-import { ReactionGroup } from "../creator-channels/hooks/use-channel-messages";
 import { ChannelReactionResponse } from "../creator-channels/hooks/use-channel-reactions";
+import { ReactionGroup } from "../creator-channels/types";
 import {
   emojiButtonWidth,
   reactionButtonSize,
diff --git a/packages/app/components/reaction/message-reactions.tsx b/packages/app/components/reaction/message-reactions.tsx
index 9cf509b7fd..16a3cdd5dd 100644
--- a/packages/app/components/reaction/message-reactions.tsx
+++ b/packages/app/components/reaction/message-reactions.tsx
@@ -10,8 +10,8 @@ import { View } from "@showtime-xyz/universal.view";
 
 import { formatToUSNumber } from "app/utilities";
 
-import { ReactionGroup } from "../creator-channels/hooks/use-channel-messages";
 import { ChannelReactionResponse } from "../creator-channels/hooks/use-channel-reactions";
+import { ReactionGroup } from "../creator-channels/types";
 
 const AnimatedView = Animated.createAnimatedComponent(View);