flatten single channel nav (#4233)

* rough flattened nav * fix thread crash * omit use of skiptoken * only flatten single-channel groups * fix build * fix android crash
tloncorp · Dec 3, 2024 · 73d91e2 · 73d91e2
1 parent d80dc00
commit 73d91e2
Show file tree

Hide file tree

Showing 27 changed files with 309 additions and 353 deletions.
diff --git a/apps/tlon-mobile/src/components/AuthenticatedApp.tsx b/apps/tlon-mobile/src/components/AuthenticatedApp.tsx
@@ -9,7 +9,7 @@ import { useUpdatePresentedNotifications } from '@tloncorp/app/lib/notifications
 import { RootStack } from '@tloncorp/app/navigation/RootStack';
 import { AppDataProvider } from '@tloncorp/app/provider/AppDataProvider';
 import { sync } from '@tloncorp/shared';
-import { ZStack } from '@tloncorp/ui';
+import { PortalProvider, ZStack } from '@tloncorp/ui';
 import { useCallback, useEffect } from 'react';
 import { AppStateStatus } from 'react-native';
 
@@ -58,7 +58,13 @@ function AuthenticatedApp() {
 export default function ConnectedAuthenticatedApp() {
   return (
     <AppDataProvider>
-      <AuthenticatedApp />
+      {/* 
+        This portal provider overrides the root portal provider 
+        to ensure that sheets have access to `AppDataContext`
+      */}
+      <PortalProvider>
+        <AuthenticatedApp />
+      </PortalProvider>
     </AppDataProvider>
   );
 }
diff --git a/apps/tlon-mobile/src/hooks/useNotificationListener.ts b/apps/tlon-mobile/src/hooks/useNotificationListener.ts
@@ -6,6 +6,7 @@ import { connectNotifications } from '@tloncorp/app/lib/notifications';
 import { RootStackParamList } from '@tloncorp/app/navigation/types';
 import {
   createTypedReset,
+  getMainGroupRoute,
   screenNameFromChannelId,
 } from '@tloncorp/app/navigation/utils';
 import * as posthog from '@tloncorp/app/utils/posthog';
@@ -154,17 +155,18 @@ export default function useNotificationListener() {
         }
 
         const routeStack: RouteStack = [{ name: 'ChatList' }];
-        if (channel.groupId && !channelSwitcherEnabled) {
+        if (channel.groupId) {
+          const mainGroupRoute = await getMainGroupRoute(channel.groupId);
+          routeStack.push(mainGroupRoute);
+        }
+        // Only push the channel if it wasn't already handled by the main group stack
+        if (routeStack[routeStack.length - 1].name !== 'Channel') {
+          const screenName = screenNameFromChannelId(channelId);
           routeStack.push({
-            name: 'GroupChannels',
-            params: { groupId: channel.groupId },
+            name: screenName,
+            params: { channelId: channel.id },
           });
         }
-        const screenName = screenNameFromChannelId(channelId);
-        routeStack.push({
-          name: screenName,
-          params: { channelId: channel.id },
-        });
 
         // if we have a post id, try to navigate to the thread
         if (postInfo) {

diff --git a/packages/app/features/channels/ChannelMembersScreen.tsx b/packages/app/features/channels/ChannelMembersScreen.tsx
@@ -8,7 +8,7 @@ type Props = NativeStackScreenProps<RootStackParamList, 'ChannelMembers'>;
 
 export function ChannelMembersScreen(props: Props) {
   const { channelId } = props.route.params;
-  const channelQuery = store.useChannelWithRelations({
+  const channelQuery = store.useChannel({
     id: channelId,
   });
 

diff --git a/packages/app/features/top/ChannelScreen.tsx b/packages/app/features/top/ChannelScreen.tsx
@@ -319,16 +319,6 @@ export default function ChannelScreen(props: Props) {
 
   const canUpload = useCanUpload();
 
-  const isFocused = useIsFocused();
-
-  const { data: pins } = store.usePins({
-    enabled: isFocused,
-  });
-
-  const pinnedItems = useMemo(() => {
-    return pins ?? [];
-  }, [pins]);
-
   const chatOptionsNavProps = useChatSettingsNavigation();
 
   const handleGoToUserProfile = useCallback(
@@ -350,8 +340,6 @@ export default function ChannelScreen(props: Props) {
 
   return (
     <ChatOptionsProvider
-      groupId={group?.id}
-      pinned={pinnedItems}
       useGroup={store.useGroup}
       onPressInvite={(group) => {
         setInviteSheetGroup(group);

diff --git a/packages/app/features/top/ChannelSearchScreen.tsx b/packages/app/features/top/ChannelSearchScreen.tsx
@@ -1,5 +1,5 @@
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { useChannelSearch, useChannelWithRelations } from '@tloncorp/shared';
+import { useChannel, useChannelSearch } from '@tloncorp/shared';
 import type * as db from '@tloncorp/shared/db';
 import { Button, SearchBar, SearchResults, XStack, YStack } from '@tloncorp/ui';
 import { useCallback, useState } from 'react';
@@ -13,7 +13,7 @@ type Props = NativeStackScreenProps<RootStackParamList, 'ChannelSearch'>;
 export default function ChannelSearchScreen(props: Props) {
   const channelId = props.route.params.channelId;
   const groupId = props.route.params.groupId;
-  const channelQuery = useChannelWithRelations({
+  const channelQuery = useChannel({
     id: channelId,
   });
 

diff --git a/packages/app/features/top/ChatListScreen.tsx b/packages/app/features/top/ChatListScreen.tsx
@@ -6,14 +6,11 @@ import {
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { createDevLogger } from '@tloncorp/shared';
 import * as db from '@tloncorp/shared/db';
-import * as logic from '@tloncorp/shared/logic';
 import * as store from '@tloncorp/shared/store';
 import {
   AddGroupSheet,
   ChatList,
   ChatOptionsProvider,
-  ChatOptionsSheet,
-  ChatOptionsSheetMethods,
   GroupPreviewAction,
   GroupPreviewSheet,
   InviteUsersSheet,
@@ -29,9 +26,11 @@ import { TLON_EMPLOYEE_GROUP } from '../../constants';
 import { useChatSettingsNavigation } from '../../hooks/useChatSettingsNavigation';
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { useGroupActions } from '../../hooks/useGroupActions';
-import { useFeatureFlag } from '../../lib/featureFlags';
 import type { RootStackParamList } from '../../navigation/types';
-import { screenNameFromChannelId } from '../../navigation/utils';
+import {
+  screenNameFromChannelId,
+  useNavigateToGroup,
+} from '../../navigation/utils';
 import { identifyTlonEmployee } from '../../utils/posthog';
 import { isSplashDismissed, setSplashDismissed } from '../../utils/splash';
 
@@ -53,19 +52,6 @@ export function ChatListScreenView({
   const [addGroupOpen, setAddGroupOpen] = useState(false);
   const [screenTitle, setScreenTitle] = useState('Home');
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>();
-  const chatOptionsSheetRef = useRef<ChatOptionsSheetMethods>(null);
-  const [longPressedChat, setLongPressedChat] = useState<db.Chat | null>(null);
-  const chatOptionsGroupId = useMemo(() => {
-    return longPressedChat?.type === 'group'
-      ? longPressedChat.group.id
-      : undefined;
-  }, [longPressedChat]);
-
-  const chatOptionsChannelId = useMemo(() => {
-    return longPressedChat?.type === 'channel'
-      ? longPressedChat.channel.id
-      : undefined;
-  }, [longPressedChat]);
 
   const [activeTab, setActiveTab] = useState<'all' | 'groups' | 'messages'>(
     'all'
@@ -77,10 +63,6 @@ export function ChatListScreenView({
 
   const [showSearchInput, setShowSearchInput] = useState(false);
   const isFocused = useIsFocused();
-  const { data: pins } = store.usePins({
-    enabled: isFocused,
-  });
-  const pinned = useMemo(() => pins ?? [], [pins]);
 
   const { data: chats } = store.useCurrentChats({
     enabled: isFocused,
@@ -172,44 +154,26 @@ export function ChatListScreenView({
     }
   }, []);
 
-  const [isChannelSwitcherEnabled] = useFeatureFlag('channelSwitcher');
+  const navigateToGroup = useNavigateToGroup();
 
   const onPressChat = useCallback(
-    (item: db.Chat) => {
-      if (item.type === 'group' && item.isPending) {
-        setSelectedGroupId(item.id);
-      } else if (item.type === 'group' && !isChannelSwitcherEnabled) {
-        navigation.navigate('GroupChannels', { groupId: item.group.id });
-      } else if (item.type === 'group') {
-        if (!item.group.channels?.length) {
-          throw new Error('cant open group with no channels');
+    async (item: db.Chat) => {
+      if (item.type === 'group') {
+        if (item.isPending) {
+          setSelectedGroupId(item.id);
+        } else {
+          navigateToGroup(item.group.id);
         }
-        navigation.navigate('Channel', {
-          channelId: item.group.channels[0].id,
-          groupId: item.group.id,
-        });
       } else {
         const screenName = screenNameFromChannelId(item.id);
         navigation.navigate(screenName, {
           channelId: item.id,
         });
       }
     },
-    [isChannelSwitcherEnabled, navigation]
+    [navigateToGroup, navigation]
   );
 
-  const onLongPressChat = useCallback((item: db.Chat) => {
-    if (item.isPending) {
-      return;
-    }
-    setLongPressedChat(item);
-    chatOptionsSheetRef.current?.open(
-      item.id,
-      item.type === 'channel' ? item.channel.type : 'group',
-      item.unreadCount
-    );
-  }, []);
-
   const handleGroupPreviewSheetOpenChange = useCallback((open: boolean) => {
     if (!open) {
       setSelectedGroupId(null);
@@ -298,9 +262,6 @@ export function ChatListScreenView({
       useGroup={store.useGroupPreview}
     >
       <ChatOptionsProvider
-        channelId={chatOptionsChannelId}
-        groupId={chatOptionsGroupId}
-        pinned={pinned}
         {...useChatSettingsNavigation()}
         onPressInvite={(group) => {
           setInviteSheetGroup(group);
@@ -329,7 +290,6 @@ export function ChatListScreenView({
               pinned={resolvedChats.pinned}
               unpinned={resolvedChats.unpinned}
               pending={resolvedChats.pending}
-              onLongPressItem={onLongPressChat}
               onPressItem={onPressChat}
               onSectionChange={handleSectionChange}
               showSearchInput={showSearchInput}
@@ -343,7 +303,6 @@ export function ChatListScreenView({
             open={splashVisible}
             onOpenChange={handleWelcomeOpenChange}
           />
-          <ChatOptionsSheet ref={chatOptionsSheetRef} />
           <GroupPreviewSheet
             open={!!selectedGroup}
             onOpenChange={handleGroupPreviewSheetOpenChange}

diff --git a/packages/app/features/top/GroupChannelsScreen.tsx b/packages/app/features/top/GroupChannelsScreen.tsx
@@ -11,7 +11,7 @@ import {
   GroupChannelsScreenView,
   InviteUsersSheet,
 } from '@tloncorp/ui';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useChatSettingsNavigation } from '../../hooks/useChatSettingsNavigation';
 import { useGroupContext } from '../../hooks/useGroupContext';
@@ -30,11 +30,7 @@ export function GroupChannelsScreenContent({
   groupId: string;
 }) {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
-
   const isFocused = useIsFocused();
-  const { data: pins } = store.usePins({
-    enabled: isFocused,
-  });
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>(
     null
   );
@@ -43,10 +39,6 @@ export function GroupChannelsScreenContent({
     group?.id ?? ''
   );
 
-  const pinnedItems = useMemo(() => {
-    return pins ?? [];
-  }, [pins]);
-
   const handleChannelSelected = useCallback(
     (channel: db.Channel) => {
       navigation.navigate('Channel', {
@@ -79,9 +71,6 @@ export function GroupChannelsScreenContent({
 
   return (
     <ChatOptionsProvider
-      groupId={id}
-      pinned={pinnedItems}
-      useGroup={store.useGroup}
       onPressInvite={(group) => {
         setInviteSheetGroup(group);
       }}

diff --git a/packages/app/features/top/PostScreen.tsx b/packages/app/features/top/PostScreen.tsx
@@ -3,10 +3,15 @@ import { useChannelContext } from '@tloncorp/shared';
 import * as db from '@tloncorp/shared/db';
 import * as store from '@tloncorp/shared/store';
 import * as urbit from '@tloncorp/shared/urbit';
-import { PostScreenView, useCurrentUserId } from '@tloncorp/ui';
+import {
+  ChatOptionsProvider,
+  PostScreenView,
+  useCurrentUserId,
+} from '@tloncorp/ui';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useChannelNavigation } from '../../hooks/useChannelNavigation';
+import { useChatSettingsNavigation } from '../../hooks/useChatSettingsNavigation';
 import { useGroupActions } from '../../hooks/useGroupActions';
 import { useFeatureFlag } from '../../lib/featureFlags';
 import type { RootStackParamList } from '../../navigation/types';
@@ -134,34 +139,38 @@ export default function PostScreen(props: Props) {
     [props.navigation]
   );
 
+  const chatOptionsNavProps = useChatSettingsNavigation();
+
   return currentUserId && channel && post ? (
-    <PostScreenView
-      handleGoToUserProfile={handleGoToUserProfile}
-      canUpload={canUpload}
-      parentPost={post}
-      posts={posts}
-      isLoadingPosts={isLoadingPosts}
-      channel={channel}
-      initialThreadUnread={initialThreadUnread}
-      goBack={props.navigation.goBack}
-      sendReply={sendReply}
-      groupMembers={group?.members ?? []}
-      uploadAsset={store.uploadAsset}
-      handleGoToImage={navigateToImage}
-      getDraft={getDraft}
-      storeDraft={storeDraft}
-      clearDraft={clearDraft}
-      markRead={markRead}
-      editingPost={editingPost}
-      onPressDelete={handleDeletePost}
-      onPressRetry={handleRetrySend}
-      onPressRef={navigateToRef}
-      onGroupAction={performGroupAction}
-      goToDm={handleGoToDm}
-      setEditingPost={setEditingPost}
-      editPost={editPost}
-      negotiationMatch={negotiationStatus.matchedOrPending}
-      headerMode={headerMode}
-    />
+    <ChatOptionsProvider {...chatOptionsNavProps}>
+      <PostScreenView
+        handleGoToUserProfile={handleGoToUserProfile}
+        canUpload={canUpload}
+        parentPost={post}
+        posts={posts}
+        isLoadingPosts={isLoadingPosts}
+        channel={channel}
+        initialThreadUnread={initialThreadUnread}
+        goBack={props.navigation.goBack}
+        sendReply={sendReply}
+        groupMembers={group?.members ?? []}
+        uploadAsset={store.uploadAsset}
+        handleGoToImage={navigateToImage}
+        getDraft={getDraft}
+        storeDraft={storeDraft}
+        clearDraft={clearDraft}
+        markRead={markRead}
+        editingPost={editingPost}
+        onPressDelete={handleDeletePost}
+        onPressRetry={handleRetrySend}
+        onPressRef={navigateToRef}
+        onGroupAction={performGroupAction}
+        goToDm={handleGoToDm}
+        setEditingPost={setEditingPost}
+        editPost={editPost}
+        negotiationMatch={negotiationStatus.matchedOrPending}
+        headerMode={headerMode}
+      />
+    </ChatOptionsProvider>
   ) : null;
 }
diff --git a/packages/app/hooks/useChannelNavigation.ts b/packages/app/hooks/useChannelNavigation.ts
@@ -7,8 +7,7 @@ import { useCallback } from 'react';
 import { RootStackParamList } from '../navigation/types';
 
 export const useChannelNavigation = ({ channelId }: { channelId: string }) => {
-  // Model context
-  const channelQuery = store.useChannelWithRelations({
+  const channelQuery = store.useChannel({
     id: channelId,
   });