Merge pull request #779 from ephemeraHQ/noe/frames-refetch-improvements

Noe/frames & conversation list improvements
ephemeraHQ · Sep 19, 2024 · db14951 · db14951
2 parents db05b58 + 714f9fc
commit db14951
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 151 deletions.
diff --git a/components/Chat/Frame/FramesPreviews.tsx b/components/Chat/Frame/FramesPreviews.tsx
@@ -1,3 +1,4 @@
+import { useConversationContext } from "@utils/conversation";
 import { useCallback, useRef, useState } from "react";
 import { View } from "react-native";
 
@@ -17,8 +18,8 @@ type Props = {
 
 export default function FramesPreviews({ message }: Props) {
   const messageId = useRef<string | undefined>(undefined);
-  const tagsFetchedOnceForMessage = useRef<{ [messageId: string]: boolean }>(
-    {}
+  const tagsFetchedOnceForMessage = useConversationContext(
+    "tagsFetchedOnceForMessage"
   );
   const account = useCurrentAccount() as string;
   const [framesForMessage, setFramesForMessage] = useState<{
@@ -38,7 +39,7 @@ export default function FramesPreviews({ message }: Props) {
         }
       );
     }
-  }, [account, message]);
+  }, [account, message, tagsFetchedOnceForMessage]);
 
   // Components are recycled, let's fix when stuff changes
   if (message.id !== messageId.current) {

diff --git a/components/Chat/Message/MessageContextMenu.tsx b/components/Chat/Message/MessageContextMenu.tsx
@@ -9,6 +9,7 @@ import {
   SIDE_MARGIN,
   SPRING_CONFIGURATION,
 } from "@utils/contextMenu/constants";
+import { ConversationContext } from "@utils/conversation";
 import { BlurView } from "expo-blur";
 import React, { FC, memo, useEffect, useMemo } from "react";
 import {
@@ -31,6 +32,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useContext } from "use-context-selector";
 const AnimatedBlurView =
   Platform.OS === "ios"
     ? Animated.createAnimatedComponent(BlurView)
@@ -59,6 +61,10 @@ const BackdropComponent: FC<{
   items,
   fromMe,
 }) => {
+  /* Portal is eating the context so passing down context values
+    If it causes too many rerenders we could just pass down a
+    few needed context values but painful to maintain */
+  const conversationContext = useContext(ConversationContext);
   const activeValue = useSharedValue(false);
   const opacityValue = useSharedValue(0);
   const intensityValue = useSharedValue(0);
@@ -218,35 +224,38 @@ const BackdropComponent: FC<{
 
   return (
     <Portal>
-      <GestureHandlerRootView style={styles.gestureHandlerContainer}>
-        <AnimatedBlurView
-          tint="default"
-          style={styles.flex}
-          animatedProps={animatedContainerProps}
-        >
-          <TouchableWithoutFeedback onPress={onClose}>
-            <Animated.View
-              style={[StyleSheet.absoluteFill, animatedInnerContainerStyle]}
-            >
-              <Animated.View style={animatedPortalStyle}>
-                {children}
+      {/* Portal is eating the context so passing down context values */}
+      <ConversationContext.Provider value={conversationContext}>
+        <GestureHandlerRootView style={styles.gestureHandlerContainer}>
+          <AnimatedBlurView
+            tint="default"
+            style={styles.flex}
+            animatedProps={animatedContainerProps}
+          >
+            <TouchableWithoutFeedback onPress={onClose}>
+              <Animated.View
+                style={[StyleSheet.absoluteFill, animatedInnerContainerStyle]}
+              >
+                <Animated.View style={animatedPortalStyle}>
+                  {children}
+                </Animated.View>
+                <Animated.View style={animatedAuxiliaryViewStyle}>
+                  {auxiliaryView}
+                </Animated.View>
+                <Animated.View style={animatedMenuStyle}>
+                  <TableView
+                    style={{
+                      // flex: 1,
+                      width: ITEM_WIDTH,
+                    }}
+                    items={items}
+                  />
+                </Animated.View>
               </Animated.View>
-              <Animated.View style={animatedAuxiliaryViewStyle}>
-                {auxiliaryView}
-              </Animated.View>
-              <Animated.View style={animatedMenuStyle}>
-                <TableView
-                  style={{
-                    // flex: 1,
-                    width: ITEM_WIDTH,
-                  }}
-                  items={items}
-                />
-              </Animated.View>
-            </Animated.View>
-          </TouchableWithoutFeedback>
-        </AnimatedBlurView>
-      </GestureHandlerRootView>
+            </TouchableWithoutFeedback>
+          </AnimatedBlurView>
+        </GestureHandlerRootView>
+      </ConversationContext.Provider>
     </Portal>
   );
 };

diff --git a/components/ConversationFlashList.tsx b/components/ConversationFlashList.tsx
@@ -2,6 +2,7 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { FlashList } from "@shopify/flash-list";
 import { backgroundColor } from "@styles/colors";
 import { showUnreadOnConversation } from "@utils/conversation/showUnreadOnConversation";
+import { ConversationListContext } from "@utils/conversationList";
 import { useCallback, useEffect, useRef } from "react";
 import { Platform, StyleSheet, View, useColorScheme } from "react-native";
 
@@ -43,6 +44,10 @@ export default function ConversationFlashList({
   ListHeaderComponent,
   ListFooterComponent,
 }: Props) {
+  const navigationRef = useRef(navigation);
+  useEffect(() => {
+    navigationRef.current = navigation;
+  }, [navigation]);
   const styles = useStyles();
   const colorScheme = useColorScheme();
   const {
@@ -63,10 +68,6 @@ export default function ConversationFlashList({
   const isSplitScreen = useIsSplitScreen();
   const profiles = useProfilesStore((state) => state.profiles);
 
-  const setPinnedConversations = useChatStore(
-    (state) => state.setPinnedConversations
-  );
-
   const listRef = useRef<FlashList<any> | undefined>();
 
   const previousSearchQuery = useRef(itemsForSearchQuery);
@@ -107,21 +108,10 @@ export default function ConversationFlashList({
         ? profiles[conversation.peerAddress]?.socials
         : undefined;
       if (conversation.isGroup) {
-        return (
-          <GroupConversationItem
-            conversation={conversation}
-            navigation={navigation}
-            route={route}
-          />
-        );
+        return <GroupConversationItem conversation={conversation} />;
       }
       return (
         <ConversationListItem
-          onLongPress={() => {
-            setPinnedConversations([conversation]);
-          }}
-          navigation={navigation}
-          route={route}
           conversationPeerAddress={conversation.peerAddress}
           conversationPeerAvatar={getPreferredAvatar(socials)}
           colorScheme={colorScheme}
@@ -159,47 +149,52 @@ export default function ConversationFlashList({
     [
       colorScheme,
       initialLoadDoneOnce,
-      navigation,
       openedConversationTopic,
       peersStatus,
-      route,
+      profiles,
       topicsData,
       userAddress,
-      profiles,
-      setPinnedConversations,
     ]
   );
   return (
-    <View style={styles.container}>
-      <View style={styles.conversationList}>
-        <FlashList
-          keyboardShouldPersistTaps="handled"
-          onMomentumScrollBegin={onScroll}
-          onScrollBeginDrag={onScroll}
-          alwaysBounceVertical={items.length > 0}
-          contentInsetAdjustmentBehavior="automatic"
-          data={items}
-          extraData={[
-            colorScheme,
-            navigation,
-            route,
-            userAddress,
-            initialLoadDoneOnce,
-            lastUpdateAt,
-          ]}
-          ref={(r) => {
-            if (r) {
-              listRef.current = r;
-            }
-          }}
-          renderItem={renderItem}
-          keyExtractor={keyExtractor}
-          estimatedItemSize={Platform.OS === "ios" ? 77 : 88}
-          ListHeaderComponent={ListHeaderComponent}
-          ListFooterComponent={ListFooterComponent}
-        />
+    <ConversationListContext.Provider
+      value={{
+        navigationRef,
+        routeName: route.name,
+        routeParams: route.params,
+      }}
+    >
+      <View style={styles.container}>
+        <View style={styles.conversationList}>
+          <FlashList
+            keyboardShouldPersistTaps="handled"
+            onMomentumScrollBegin={onScroll}
+            onScrollBeginDrag={onScroll}
+            alwaysBounceVertical={items.length > 0}
+            contentInsetAdjustmentBehavior="automatic"
+            data={items}
+            extraData={[
+              colorScheme,
+              navigation,
+              route,
+              userAddress,
+              initialLoadDoneOnce,
+              lastUpdateAt,
+            ]}
+            ref={(r) => {
+              if (r) {
+                listRef.current = r;
+              }
+            }}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            estimatedItemSize={Platform.OS === "ios" ? 77 : 88}
+            ListHeaderComponent={ListHeaderComponent}
+            ListFooterComponent={ListFooterComponent}
+          />
+        </View>
       </View>
-    </View>
+    </ConversationListContext.Provider>
   );
 }
 

diff --git a/components/ConversationList/GroupConversationItem.tsx b/components/ConversationList/GroupConversationItem.tsx
@@ -3,7 +3,6 @@ import { useGroupConsent } from "@hooks/useGroupConsent";
 import { translate } from "@i18n";
 import { useGroupNameQuery } from "@queries/useGroupNameQuery";
 import { useGroupPhotoQuery } from "@queries/useGroupPhotoQuery";
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { actionSheetColors } from "@styles/colors";
 import { showUnreadOnConversation } from "@utils/conversation/showUnreadOnConversation";
 import { FC, useCallback } from "react";
@@ -14,22 +13,15 @@ import {
   useCurrentAccount,
 } from "../../data/store/accountsStore";
 import { useSelect } from "../../data/store/storeHelpers";
-import { NavigationParamList } from "../../screens/Navigation/Navigation";
 import { ConversationWithLastMessagePreview } from "../../utils/conversation";
 import { conversationName } from "../../utils/str";
 import ConversationListItem from "../ConversationListItem";
 
-interface GroupConversationItemProps
-  extends NativeStackScreenProps<
-    NavigationParamList,
-    "Chats" | "ShareFrame" | "ChatsRequests" | "Blocked"
-  > {
+interface GroupConversationItemProps {
   conversation: ConversationWithLastMessagePreview;
 }
 
 export const GroupConversationItem: FC<GroupConversationItemProps> = ({
-  navigation,
-  route,
   conversation,
 }) => {
   const userAddress = useCurrentAccount() as string;
@@ -51,26 +43,14 @@ export const GroupConversationItem: FC<GroupConversationItemProps> = ({
     gcTime: Infinity,
   });
   const colorScheme = useColorScheme();
-  const {
-    initialLoadDoneOnce,
-    openedConversationTopic,
-    topicsData,
-    setPinnedConversations,
-  } = useChatStore(
-    useSelect([
-      "initialLoadDoneOnce",
-      "openedConversationTopic",
-      "topicsData",
-      "setPinnedConversations",
-    ])
-  );
-
-  const onLongPress = useCallback(() => {
-    // Prevent this for blocked chats
-    if (consent !== "denied") {
-      setPinnedConversations([conversation]);
-    }
-  }, [setPinnedConversations, conversation, consent]);
+  const { initialLoadDoneOnce, openedConversationTopic, topicsData } =
+    useChatStore(
+      useSelect([
+        "initialLoadDoneOnce",
+        "openedConversationTopic",
+        "topicsData",
+      ])
+    );
 
   const handleRemove = useCallback(
     (defaultAction: () => void) => {
@@ -148,9 +128,6 @@ export const GroupConversationItem: FC<GroupConversationItemProps> = ({
 
   return (
     <ConversationListItem
-      onLongPress={onLongPress}
-      navigation={navigation}
-      route={route}
       conversationPeerAddress={conversation.peerAddress}
       conversationPeerAvatar={groupPhoto}
       colorScheme={colorScheme}