Merge pull request #815 from ephemeraHQ/noe/fix-perf-onboarding-andro…

…id-spam perf improvement initial sync android + spam score fixes
ephemeraHQ · Sep 30, 2024 · 9998e32 · 9998e32
2 parents a46a5d3 + 09937db
commit 9998e32
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 35 deletions.
diff --git a/components/ConversationFlashList.tsx b/components/ConversationFlashList.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef } from "react";
 import { Platform, StyleSheet, View, useColorScheme } from "react-native";
 
 import { GroupConversationItem } from "./ConversationList/GroupConversationItem";
+import HiddenRequestsButton from "./ConversationList/HiddenRequestsButton";
 import ConversationListItem from "./ConversationListItem";
 import {
   useChatStore,
@@ -18,6 +19,7 @@ import { useSelect } from "../data/store/storeHelpers";
 import { NavigationParamList } from "../screens/Navigation/Navigation";
 import { useIsSplitScreen } from "../screens/Navigation/navHelpers";
 import {
+  ConversationFlatListHiddenRequestItem,
   ConversationFlatListItem,
   ConversationWithLastMessagePreview,
 } from "../utils/conversation";
@@ -102,6 +104,15 @@ export default function ConversationFlashList({
 
   const renderItem = useCallback(
     ({ item }: { item: ConversationFlatListItem }) => {
+      if (item.topic === "hiddenRequestsButton") {
+        const hiddenRequestItem = item as ConversationFlatListHiddenRequestItem;
+        return (
+          <HiddenRequestsButton
+            spamCount={hiddenRequestItem.spamCount}
+            toggleActivated={hiddenRequestItem.toggleActivated}
+          />
+        );
+      }
       const conversation = item as ConversationWithLastMessagePreview;
       const lastMessagePreview = conversation.lastMessagePreview;
       const socials = conversation.peerAddress

diff --git a/components/ConversationList/HiddenRequestsButton.tsx b/components/ConversationList/HiddenRequestsButton.tsx
@@ -8,6 +8,7 @@ import {
   textSecondaryColor,
 } from "@styles/colors";
 import { PictoSizes } from "@styles/sizes";
+import { converseEventEmitter } from "@utils/events";
 import {
   Platform,
   StyleSheet,
@@ -21,13 +22,11 @@ import Picto from "../Picto/Picto";
 
 type Props = {
   spamCount: number;
-  handlePress: () => void;
   toggleActivated: boolean;
 };
 
 export default function HiddenRequestsButton({
   spamCount,
-  handlePress,
   toggleActivated = false,
 }: Props) {
   const colorScheme = useColorScheme();
@@ -36,7 +35,9 @@ export default function HiddenRequestsButton({
     <TouchableHighlight
       underlayColor={clickedItemBackgroundColor(colorScheme)}
       key="spam"
-      onPress={handlePress}
+      onPress={() => {
+        converseEventEmitter.emit("toggleSpamRequests");
+      }}
     >
       <View style={styles.spamHeader}>
         <Text style={styles.spamHeaderTitle}>

diff --git a/data/helpers/conversations/spamScore.ts b/data/helpers/conversations/spamScore.ts
@@ -67,6 +67,7 @@ export const computeConversationsSpamScores = async (
   const sendersSpamScores = await getSendersSpamScores(
     Array.from(conversationsRequesterAddresses)
   );
+
   const topicSpamScores: TopicSpamScores = {};
 
   conversations.forEach((conversation) => {
@@ -80,7 +81,10 @@ export const computeConversationsSpamScores = async (
     const senderSpamScore = sendersSpamScores[senderKey];
     if (
       !conversation.messagesIds.length &&
-      typeof senderSpamScore === "number"
+      typeof senderSpamScore === "number" &&
+      // 1:1 Conversations without messages and no specific sender spam score
+      // should not get a spam score now (waiting for first message)
+      (conversation.isGroup || senderSpamScore !== 0)
     ) {
       // Cannot score an empty conversation further, score is just the
       // sender spam score

diff --git a/screens/ConversationList.tsx b/screens/ConversationList.tsx
@@ -39,6 +39,7 @@ import {
 import { XmtpConversation } from "../data/store/chatStore";
 import { useSelect } from "../data/store/storeHelpers";
 import {
+  ConversationFlatListItem,
   LastMessagePreview,
   getFilteredConversationsWithSearch,
 } from "../utils/conversation";
@@ -48,7 +49,6 @@ import { sortRequestsBySpamScore } from "../utils/xmtpRN/conversations";
 type ConversationWithLastMessagePreview = XmtpConversation & {
   lastMessagePreview?: LastMessagePreview;
 };
-type FlatListItem = ConversationWithLastMessagePreview | { topic: string };
 
 type Props = {
   searchBarRef:
@@ -88,7 +88,7 @@ function ConversationList({ navigation, route, searchBarRef }: Props) {
   const pinnedConversations = useChatStore((s) => s.pinnedConversations);
 
   const [flatListItems, setFlatListItems] = useState<{
-    items: FlatListItem[];
+    items: ConversationFlatListItem[];
     searchQuery: string;
   }>({ items: [], searchQuery: "" });
 

diff --git a/screens/Navigation/ConversationRequestsListNav.tsx b/screens/Navigation/ConversationRequestsListNav.tsx
@@ -5,6 +5,8 @@ import {
   backgroundColor,
   textPrimaryColor,
 } from "@styles/colors";
+import { ConversationFlatListItem } from "@utils/conversation";
+import { converseEventEmitter } from "@utils/events";
 import React, {
   useCallback,
   useEffect,
@@ -25,7 +27,6 @@ import ActivityIndicator from "../../components/ActivityIndicator/ActivityIndica
 import AndroidBackAction from "../../components/AndroidBackAction";
 import Button from "../../components/Button/Button";
 import ConversationFlashList from "../../components/ConversationFlashList";
-import HiddenRequestsButton from "../../components/ConversationList/HiddenRequestsButton";
 import { showActionSheetWithOptions } from "../../components/StateHandlers/ActionSheetStateHandler";
 import {
   useChatStore,
@@ -133,10 +134,17 @@ export default function ConversationRequestsListNav() {
     [clearAllSpam, clearingAll, styles.headerContainer, styles.headerText]
   );
 
-  const handleSpamToggle = useCallback(() => {
+  const toggleSpamRequests = useCallback(() => {
     setIsSpamToggleEnabled((prev) => !prev);
   }, []);
 
+  useEffect(() => {
+    converseEventEmitter.on("toggleSpamRequests", toggleSpamRequests);
+    return () => {
+      converseEventEmitter.off("toggleSpamRequests", toggleSpamRequests);
+    };
+  }, [toggleSpamRequests]);
+
   // Navigate back to the main screen when no request to display
   useEffect(() => {
     const unsubscribe = navRef.current?.addListener("focus", () => {
@@ -151,35 +159,32 @@ export default function ConversationRequestsListNav() {
     <NativeStack.Screen name="ChatsRequests" options={navigationOptions}>
       {(navigationProps) => {
         navRef.current = navigationProps.navigation;
+        let items: ConversationFlatListItem[] = likelyNotSpam;
+        if (likelySpam.length > 0) {
+          items = isSpamToggleEnabled
+            ? [
+                ...likelyNotSpam,
+                {
+                  topic: "hiddenRequestsButton",
+                  toggleActivated: true,
+                  spamCount: likelySpam.length,
+                },
+                ...likelySpam,
+              ]
+            : [
+                ...likelyNotSpam,
+                {
+                  topic: "hiddenRequestsButton",
+                  toggleActivated: false,
+                  spamCount: likelySpam.length,
+                },
+              ];
+        }
         return (
           <>
             <GestureHandlerRootView style={styles.root}>
               <View style={styles.container}>
-                <ConversationFlashList
-                  {...navigationProps}
-                  items={likelyNotSpam}
-                  ListFooterComponent={
-                    <View>
-                      {likelySpam.length ? (
-                        <HiddenRequestsButton
-                          spamCount={likelySpam.length}
-                          handlePress={handleSpamToggle}
-                          toggleActivated={isSpamToggleEnabled}
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {isSpamToggleEnabled ? (
-                        <ConversationFlashList
-                          {...navigationProps}
-                          items={likelySpam}
-                        />
-                      ) : (
-                        <></>
-                      )}
-                    </View>
-                  }
-                />
+                <ConversationFlashList {...navigationProps} items={items} />
               </View>
             </GestureHandlerRootView>
           </>

diff --git a/utils/conversation.ts b/utils/conversation.ts
@@ -35,9 +35,16 @@ import {
 export type ConversationWithLastMessagePreview = XmtpConversation & {
   lastMessagePreview?: LastMessagePreview;
 };
+
+export type ConversationFlatListHiddenRequestItem = {
+  topic: "hiddenRequestsButton";
+  toggleActivated: boolean;
+  spamCount: number;
+};
+
 export type ConversationFlatListItem =
   | ConversationWithLastMessagePreview
-  | { topic: string };
+  | ConversationFlatListHiddenRequestItem;
 
 export type LastMessagePreview = {
   contentPreview: string;

diff --git a/utils/events.ts b/utils/events.ts
@@ -25,6 +25,7 @@ type ConverseEvents = {
     messageId?: string;
     animated?: boolean;
   }) => void;
+  toggleSpamRequests: () => void;
 };
 
 type ShowActionSheetEvents = {

diff --git a/utils/xmtpRN/conversations.ts b/utils/xmtpRN/conversations.ts
@@ -804,7 +804,8 @@ export const sortRequestsBySpamScore = (
   requests.forEach((conversation) => {
     const isLikelyNotSpam =
       conversation.spamScore !== undefined &&
-      (conversation.spamScore === null || conversation.spamScore < 1) &&
+      conversation.spamScore !== null &&
+      conversation.spamScore < 1 &&
       conversation.version !== ConversationVersion.GROUP;
     // @todo => remove this once we have group-specific spam scores