Revert "speed up chat (#3660)"

This reverts commit 9cdb560.

packages/app-mobile/patches/expo+48.0.4.patch

@@ -0,0 +1,11 @@
+diff --git a/node_modules/expo/build/environment/getInstallationIdAsync.js b/node_modules/expo/build/environment/getInstallationIdAsync.js
+index 75366e4..5c83839 100644
+--- a/node_modules/expo/build/environment/getInstallationIdAsync.js
++++ b/node_modules/expo/build/environment/getInstallationIdAsync.js
+@@ -1,5 +1,5 @@
+ import * as Application from 'expo-application';
+-import uuidv5 from 'uuid/v5';
++import { v5 as uuidv5 } from 'uuid';
+ let installationId;
+ const UUID_NAMESPACE = '29cc8a0d-747c-5f85-9ff9-f2f16636d963'; // uuidv5(0, "expo")
+ export default async function getInstallationIdAsync() {

packages/app-mobile/src/screens/Unlocked/Chat/ChatDetailScreen.tsx

@@ -1,10 +1,9 @@
 import type { StackScreenProps } from "@react-navigation/stack";
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Platform, Button, View, Text } from "react-native";
 
-import * as Crypto from "expo-crypto";
-
-// import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
+import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
 
 import { CHAT_MESSAGES } from "@coral-xyz/common";
 import { createEmptyFriendship } from "@coral-xyz/db";
@@ -14,103 +13,112 @@ import {
   SignalingManager,
   useChatsWithMetadata,
 } from "@coral-xyz/tamagui";
-import { GiftedChat, Send } from "react-native-gifted-chat";
+import { GiftedChat, MessageVideoProps } from "react-native-gifted-chat";
 import { v4 as uuidv4 } from "uuid";
 
-import { UserAvatar } from "~components/UserAvatar";
 import { ChatStackNavigatorParamList } from "~screens/Unlocked/Chat/ChatHelpers";
 
-const generateId = () => {
-  return Crypto.randomUUID();
-};
-
-// function VideoMessage() {
-//   const video = useRef(null);
-//   const [status, setStatus] = useState<AVPlaybackStatus | object>({});
-//   return (
-//     <View>
-//       <Video
-//         ref={video}
-//         style={{ width: 150, height: 100 }}
-//         source={{
-//           uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
-//         }}
-//         useNativeControls
-//         resizeMode={ResizeMode.CONTAIN}
-//         isLooping
-//         onPlaybackStatusUpdate={(status) => setStatus(() => status)}
-//       />
-//       <View>
-//         <Button
-//           title={status.isPlaying ? "Pause" : "Play"}
-//           onPress={() =>
-//             status.isPlaying
-//               ? video.current.pauseAsync()
-//               : video.current.playAsync()
-//           }
-//         />
-//       </View>
-//     </View>
-//   );
-// }
+function VideoMessage() {
+  const video = useRef(null);
+  const [status, setStatus] = useState<AVPlaybackStatus | object>({});
+  return (
+    <View>
+      <Video
+        ref={video}
+        style={{ width: 150, height: 100 }}
+        source={{
+          uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
+        }}
+        useNativeControls
+        resizeMode={ResizeMode.CONTAIN}
+        isLooping
+        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+      />
+      <View>
+        <Button
+          title={status.isPlaying ? "Pause" : "Play"}
+          onPress={() =>
+            status.isPlaying
+              ? video.current.pauseAsync()
+              : video.current.playAsync()
+          }
+        />
+      </View>
+    </View>
+  );
+}
 
 const formatDate = (created_at: string) => {
   return !isNaN(new Date(parseInt(created_at, 10)).getTime())
     ? new Date(parseInt(created_at, 10)).getTime()
     : 0;
 };
 
-const formatChats = (chats) => {
-  return chats
-    .map((x) => {
-      return {
-        _id: x.client_generated_uuid,
-        text: x.message,
-        createdAt: formatDate(x.created_at),
-        received: x.received,
-        sent: true,
-        pending: false,
-        // Videos / images follow this format
-        // video:
-        //   "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-        // image:
-        //   "https://d33wubrfki0l68.cloudfront.net/7e97b18b02060f1d4b65a5850b49e2488da391bb/d60ff/img/homepage/dissection/3.png",
-        user: {
-          _id: x.uuid,
-          name: x.username,
-          avatar: x.image,
-        },
-      };
-    })
-    .reverse();
-};
-
 export function ChatDetailScreen({
   // navigation,
   route,
 }: StackScreenProps<ChatStackNavigatorParamList, "ChatDetail">): JSX.Element {
   const { roomType, roomId, remoteUserId, remoteUsername } = route.params;
   const user = useUser();
   const avatarUrl = useAvatarUrl();
+  const existingChatRef = useRef<any>();
 
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
   const { chats } = useChatsWithMetadata({
     room: roomId.toString(),
     type: roomType,
   });
 
-  const messages = useMemo(() => formatChats(chats), [chats]);
-
-  const onLoadEarlier = useCallback(async () => {
+  const onLoadEarlier = async () => {
     setIsLoadingEarlier(true);
     try {
       await fetchMoreChatsFor(user.uuid, roomId.toString(), roomType);
     } catch (e) {
       console.error(e);
-    } finally {
-      setIsLoadingEarlier(false);
     }
-  }, [roomId, roomType, user.uuid]);
+    setIsLoadingEarlier(false);
+  };
+
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    if (
+      existingChatRef.current &&
+      JSON.stringify(chats) === JSON.stringify(existingChatRef.current)
+    ) {
+      return;
+    }
+    if (chats && chats.length) {
+      SignalingManager.getInstance().debouncedUpdateLastRead(
+        chats[chats.length - 1]
+      );
+    }
+    const _messages = chats
+      .map((x) => {
+        return {
+          _id: x.client_generated_uuid,
+          text: x.message,
+          createdAt: formatDate(x.created_at),
+          received: x.received,
+          sent: true,
+          pending: false,
+          // Videos / images follow this format
+          // video:
+          //   "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+          // image:
+          //   "https://d33wubrfki0l68.cloudfront.net/7e97b18b02060f1d4b65a5850b49e2488da391bb/d60ff/img/homepage/dissection/3.png",
+          user: {
+            _id: x.uuid,
+            name: x.username,
+            avatar: x.image,
+          },
+        };
+      })
+      .reverse();
+
+    existingChatRef.current = chats;
+    setMessages(_messages);
+  }, [chats]);
 
   const onSend = useCallback(
     async (messages = []) => {
@@ -158,22 +166,14 @@ export function ChatDetailScreen({
     [chats.length, roomId, roomType, user.uuid, remoteUserId, remoteUsername]
   );
 
-  const renderSend = useCallback((props) => {
-    return <Send {...props} />;
-  }, []);
-
-  // const renderMessageVideo = useCallback((props: MessageVideoProps<any>) => {
-  //   const { video } = props.currentMessage;
-  //   return <VideoMessage />;
-  // }, []);
-
-  const renderAvatar = useCallback((props) => {
-    return <UserAvatar uri={props.currentMessage.user.avatar} size={32} />;
+  const renderMessageVideo = useCallback((props: MessageVideoProps<any>) => {
+    const { video } = props.currentMessage;
+    return <VideoMessage />;
   }, []);
 
   return (
     <GiftedChat
-      messageIdGenerator={generateId}
+      messageIdGenerator={() => uuidv4()}
       showAvatarForEveryMessage
       alwaysShowSend
       loadEarlier
@@ -183,9 +183,7 @@ export function ChatDetailScreen({
       inverted
       messages={messages}
       onSend={onSend}
-      renderSend={renderSend}
-      renderAvatar={renderAvatar}
-      // renderMessageVideo={renderMessageVideo}
+      renderMessageVideo={renderMessageVideo}
       user={{
         _id: user.uuid,
         name: user.username,