rebase 2.0.8 (#1105)

ephemeraHQ · Oct 28, 2024 · 41d14d0 · 41d14d0
1 parent 121b06f
commit 41d14d0
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 495 deletions.
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
@@ -31,7 +31,6 @@ import {
 } from "../../data/store/accountsStore";
 import { XmtpConversationWithUpdate } from "../../data/store/chatStore";
 import { useFramesStore } from "../../data/store/framesStore";
-import { useIsSplitScreen } from "../../screens/Navigation/navHelpers";
 import {
   ReanimatedFlashList,
   ReanimatedFlatList,
@@ -287,7 +286,6 @@ export function Chat() {
 
   const xmtpAddress = useCurrentAccount() as string;
   const peerSocials = usePeerSocials();
-  const isSplitScreen = useIsSplitScreen();
   const recommendationsData = useRecommendationsStore(
     useShallow((s) =>
       conversation?.peerAddress ? s.frens[conversation.peerAddress] : undefined
@@ -456,9 +454,7 @@ export function Chat() {
             //   minIndexForVisible: 0,
             //   autoscrollToTopThreshold: 100,
             // }}
-            estimatedListSize={
-              isSplitScreen ? undefined : Dimensions.get("screen")
-            }
+            estimatedListSize={Dimensions.get("screen")}
             inverted
             keyExtractor={keyExtractor}
             getItemType={getItemType(framesStore)}

diff --git a/components/ConversationContextMenu.tsx b/components/ConversationContextMenu.tsx
@@ -1,24 +1,23 @@
 import { AnimatedBlurView } from "@components/AnimatedBlurView";
 import TableView, { TableViewItemType } from "@components/TableView/TableView";
 import { ConversationReadOnly } from "@screens/ConversationReadOnly";
-import { useIsSplitScreen } from "@screens/Navigation/navHelpers";
 import { backgroundColor } from "@styles/colors";
 import {
-  SIDE_MARGIN,
   AUXILIARY_VIEW_MIN_HEIGHT,
-  HOLD_ITEM_TRANSFORM_DURATION,
-  contextMenuStyleGuide,
   BACKDROP_DARK_BACKGROUND_COLOR,
   BACKDROP_LIGHT_BACKGROUND_COLOR,
+  HOLD_ITEM_TRANSFORM_DURATION,
   ITEM_WIDTH,
+  SIDE_MARGIN,
+  contextMenuStyleGuide,
 } from "@utils/contextMenu/constants";
 import React, { FC, memo, useCallback, useEffect } from "react";
 import {
   Platform,
   StyleSheet,
+  View,
   useColorScheme,
   useWindowDimensions,
-  View,
 } from "react-native";
 import {
   Gesture,
@@ -50,7 +49,6 @@ const ConversationContextMenuComponent: FC<ConversationContextMenuProps> = ({
   const activeValue = useSharedValue(false);
   const opacityValue = useSharedValue(0);
   const intensityValue = useSharedValue(0);
-  const isSplitScreen = useIsSplitScreen();
   const { height, width } = useWindowDimensions();
   const colorScheme = useColorScheme();
   const styles = useStyles();
@@ -143,12 +141,7 @@ const ConversationContextMenuComponent: FC<ConversationContextMenuProps> = ({
                 <View style={styles.previewContainer}>
                   <GestureDetector
                     gesture={Gesture.Tap().onEnd(() => {
-                      if (isSplitScreen) {
-                        runOnJS(closeMenu)();
-                      } else {
-                        // Navigate to conversation
-                        runOnJS(onClose)(true);
-                      }
+                      runOnJS(onClose)(true);
                     })}
                   >
                     <ConversationReadOnly topic={conversationTopic} />

diff --git a/components/ConversationFlashList.tsx b/components/ConversationFlashList.tsx
@@ -6,9 +6,6 @@ import { ConversationListContext } from "@utils/conversationList";
 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,
   useCurrentAccount,
@@ -17,14 +14,16 @@ import {
 } from "../data/store/accountsStore";
 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";
 import { getPreferredAvatar, getProfile } from "../utils/profile";
 import { conversationName } from "../utils/str";
+import { GroupConversationItem } from "./ConversationList/GroupConversationItem";
+import HiddenRequestsButton from "./ConversationList/HiddenRequestsButton";
+import ConversationListItem from "./ConversationListItem";
 
 type Props = {
   onScroll?: () => void;
@@ -67,37 +66,10 @@ export default function ConversationFlashList({
   );
   const userAddress = useCurrentAccount() as string;
   const peersStatus = useSettingsStore((s) => s.peersStatus);
-  const isSplitScreen = useIsSplitScreen();
   const profiles = useProfilesStore((state) => state.profiles);
 
   const listRef = useRef<FlashList<any> | undefined>();
 
-  const previousSearchQuery = useRef(itemsForSearchQuery);
-
-  useEffect(() => {
-    // In Split screen, when we click on a convo with search active
-    // the search clears and the selected convo may be out of screen
-    // so we scroll back to it
-    if (
-      isSplitScreen &&
-      previousSearchQuery.current &&
-      !itemsForSearchQuery &&
-      openedConversationTopic
-    ) {
-      const topicIndex = items.findIndex(
-        (c) => c.topic === openedConversationTopic
-      );
-      if (topicIndex === -1) return;
-      setTimeout(() => {
-        listRef.current?.scrollToIndex({
-          index: topicIndex,
-          viewPosition: 0.5,
-        });
-      }, 10);
-    }
-    previousSearchQuery.current = itemsForSearchQuery;
-  }, [isSplitScreen, items, openedConversationTopic, itemsForSearchQuery]);
-
   const keyExtractor = useCallback((item: ConversationFlatListItem) => {
     return item.topic;
   }, []);

diff --git a/components/ConversationListItem.tsx b/components/ConversationListItem.tsx
@@ -49,7 +49,6 @@ import {
   useChatStore,
   useSettingsStore,
 } from "../data/store/accountsStore";
-import { useIsSplitScreen } from "../screens/Navigation/navHelpers";
 import { saveTopicsData } from "../utils/api";
 import { getMinimalDate } from "../utils/date";
 import { converseEventEmitter } from "../utils/events";
@@ -103,7 +102,6 @@ const ConversationListItem = memo(function ConversationListItem({
     useSelect(["setTopicsData", "setPinnedConversations"])
   );
   const setPeersStatus = useSettingsStore((s) => s.setPeersStatus);
-  const isSplitScreen = useIsSplitScreen();
   const [selected, setSelected] = useState(false);
   const resetSelected = useCallback(() => {
     setSelected(false);
@@ -143,7 +141,7 @@ const ConversationListItem = memo(function ConversationListItem({
           });
           // Take the user back to wherever the conversation was restored "to"
           // https://github.com/ephemeraHQ/converse-app/issues/315#issuecomment-2312903441
-          navigationRef.current?.pop(isSplitScreen ? 1 : 2);
+          navigationRef.current?.pop(2);
         },
         [translate("cancel")]: () => {},
       };
@@ -185,11 +183,9 @@ const ConversationListItem = memo(function ConversationListItem({
     if (routeParams?.frameURL) {
       // Sharing a frame !!
       navigationRef.current?.goBack();
-      if (!isSplitScreen) {
-        await new Promise((r) =>
-          setTimeout(r, Platform.OS === "ios" ? 300 : 20)
-        );
-      }
+
+      await new Promise((r) => setTimeout(r, Platform.OS === "ios" ? 300 : 20));
+
       // This handle the case where the conversation is already opened
       converseEventEmitter.emit(
         "setCurrentConversationInputValue",
@@ -207,7 +203,6 @@ const ConversationListItem = memo(function ConversationListItem({
     conversationTopic,
     allowGroup,
     navigationRef,
-    isSplitScreen,
     colorScheme,
   ]);
 
@@ -517,20 +512,10 @@ const ConversationListItem = memo(function ConversationListItem({
           underlayColor={clickedItemBackgroundColor(colorScheme)}
           delayPressIn={75}
           onLongPress={onLongPress}
-          onPressIn={() => {
-            if (!isSplitScreen) return;
-            openConversation();
-          }}
-          onPress={() => {
-            if (isSplitScreen) return;
-            openConversation();
-            setSelected(true);
-          }}
           style={{
-            backgroundColor:
-              selected || (isSplitScreen && conversationOpened)
-                ? clickedItemBackgroundColor(colorScheme)
-                : backgroundColor(colorScheme),
+            backgroundColor: selected
+              ? clickedItemBackgroundColor(colorScheme)
+              : backgroundColor(colorScheme),
             height: 76,
           }}
         >
@@ -539,14 +524,6 @@ const ConversationListItem = memo(function ConversationListItem({
       ) : (
         <TouchableRipple
           unstable_pressDelay={75}
-          onPressIn={() => {
-            if (!isSplitScreen) return;
-            openConversation();
-          }}
-          onPress={() => {
-            if (isSplitScreen) return;
-            openConversation();
-          }}
           onLongPress={onLongPress}
           style={styles.rippleRow}
           rippleColor={clickedItemBackgroundColor(colorScheme)}
@@ -607,7 +584,7 @@ const ConversationListItem = memo(function ConversationListItem({
             toggleReadStatus();
           }
         }}
-        hitSlop={{ left: isSplitScreen ? 0 : -6 }}
+        hitSlop={{ left: -6 }}
       >
         {rowItem}
         {contextMenuComponent}

diff --git a/components/Search/NavigationChatButton.tsx b/components/Search/NavigationChatButton.tsx
@@ -10,7 +10,6 @@ import {
   currentAccount,
   useProfilesStore,
 } from "../../data/store/accountsStore";
-import { useIsSplitScreen } from "../../screens/Navigation/navHelpers";
 import { navigate } from "../../utils/navigation";
 import { canGroupMessage } from "../../utils/xmtpRN/conversations";
 import Button from "../Button/Button";
@@ -29,7 +28,6 @@ export function NavigationChatButton({
   addToGroup,
 }: NavigationChatProps) {
   const styles = useStyles();
-  const isSplitScreen = useIsSplitScreen();
   const [loading, setLoading] = useState(false);
   const profile = useProfilesStore(
     useShallow((s) => getProfile(address, s.profiles))
@@ -41,16 +39,13 @@ export function NavigationChatButton({
     const parent = navigation.getParent();
     parent?.goBack();
 
-    setTimeout(
-      () => {
-        navigate("Conversation", {
-          mainConversationWithPeer: address,
-          focus: true,
-        });
-      },
-      isSplitScreen ? 0 : 300
-    );
-  }, [address, isSplitScreen, navigation]);
+    setTimeout(() => {
+      navigate("Conversation", {
+        mainConversationWithPeer: address,
+        focus: true,
+      });
+    }, 300);
+  }, [address, navigation]);
 
   const addToGroupIfPossible = useCallback(async () => {
     if (loading) return;

diff --git a/screens/ConversationList.tsx b/screens/ConversationList.tsx
@@ -23,6 +23,8 @@ import NewConversationButton from "../components/ConversationList/NewConversatio
 import RequestsButton from "../components/ConversationList/RequestsButton";
 import EphemeralAccountBanner from "../components/EphemeralAccountBanner";
 import InitialLoad from "../components/InitialLoad";
+import { useHeaderSearchBar } from "./Navigation/ConversationListNav";
+import { NavigationParamList } from "./Navigation/Navigation";
 import PinnedConversations from "../components/PinnedConversations/PinnedConversations";
 import Recommendations from "../components/Recommendations/Recommendations";
 import NoResult from "../components/Search/NoResult";
@@ -42,9 +44,6 @@ import {
 } from "../utils/conversation";
 import { converseEventEmitter } from "../utils/events";
 import { sortRequestsBySpamScore } from "../utils/xmtpRN/conversations";
-import { useHeaderSearchBar } from "./Navigation/ConversationListNav";
-import { NavigationParamList } from "./Navigation/Navigation";
-import { useIsSplitScreen } from "./Navigation/navHelpers";
 
 type ConversationWithLastMessagePreview = XmtpConversation & {
   lastMessagePreview?: LastMessagePreview;
@@ -97,7 +96,6 @@ function ConversationList({ navigation, route, searchBarRef }: Props) {
     !initialLoadDoneOnce && flatListItems.items.length <= 1;
   const showNoResult = flatListItems.items.length === 0 && !!searchQuery;
 
-  const isSplit = useIsSplitScreen();
   const sharingMode = !!route.params?.frameURL;
 
   const requestsCount = useMemo(() => {
@@ -164,10 +162,10 @@ function ConversationList({ navigation, route, searchBarRef }: Props) {
   useEffect(() => {
     // In split screen, when selecting a convo with search active,
     // let's clear the search
-    if (isSplit && openedConversationTopic) {
+    if (openedConversationTopic) {
       clearSearch();
     }
-  }, [clearSearch, isSplit, openedConversationTopic]);
+  }, [clearSearch, openedConversationTopic]);
 
   const ListHeaderComponents: React.ReactElement[] = [
     <PinnedConversations

diff --git a/screens/Navigation/ConversationListNav.tsx b/screens/Navigation/ConversationListNav.tsx
@@ -28,7 +28,6 @@ import { useChatStore } from "../../data/store/accountsStore";
 import { useSelect } from "../../data/store/storeHelpers";
 import ConversationList from "../ConversationList";
 import { NativeStack, navigationAnimation } from "./Navigation";
-import { useIsSplitScreen } from "./navHelpers";
 
 export const useHeaderSearchBar = (props: any) => {
   // No-op
@@ -147,7 +146,6 @@ export default function ConversationListNav() {
 
 const useStyles = () => {
   const colorScheme = useColorScheme();
-  const isSplitScreen = useIsSplitScreen();
   const dimensions = useWindowDimensions();
   return StyleSheet.create({
     rightButtonContainer: {
@@ -162,7 +160,7 @@ const useStyles = () => {
       web: {
         flexDirection: "row",
         justifyContent: "flex-start",
-        width: isSplitScreen ? 400 : dimensions.width,
+        width: dimensions.width,
         marginLeft: 16,
       },
     }),

diff --git a/screens/Navigation/ConversationNav.tsx b/screens/Navigation/ConversationNav.tsx
@@ -10,14 +10,13 @@ import {
 } from "react-native";
 import { StackAnimationTypes } from "react-native-screens";
 
+import Picto from "../../components/Picto/Picto";
+import Conversation from "../Conversation";
 import {
   NativeStack,
-  navigationAnimation,
   NavigationParamList,
+  navigationAnimation,
 } from "./Navigation";
-import { useIsSplitScreen } from "./navHelpers";
-import Picto from "../../components/Picto/Picto";
-import Conversation from "../Conversation";
 
 export type ConversationNavParams = {
   topic?: string;
@@ -39,10 +38,6 @@ export const ConversationScreenConfig = {
 export default function ConversationNav(
   routeParams?: ConversationNavParams | undefined
 ) {
-  // If we're in split screen mode, the topic is not passed via the usual StackNavigation
-  // but via the DrawerNavigation that passes it back to this component via prop
-  // so we override the route when instantiating Conversation
-  const isSplitScreen = useIsSplitScreen();
   const colorScheme = useColorScheme();
   const navigationOptions = useCallback(
     ({ navigation }: { navigation: NavigationProp<NavigationParamList> }) => ({
@@ -72,18 +67,7 @@ export default function ConversationNav(
   return (
     <NativeStack.Screen name="Conversation" options={navigationOptions}>
       {({ route, navigation }) => (
-        <Conversation
-          navigation={navigation}
-          key={
-            isSplitScreen
-              ? `conversation-${JSON.stringify(routeParams || {})}`
-              : "conversation"
-          }
-          route={{
-            ...route,
-            params: isSplitScreen ? routeParams || {} : route.params,
-          }}
-        />
+        <Conversation navigation={navigation} route={route} />
       )}
     </NativeStack.Screen>
   );