Merge pull request #4206 from tloncorp/po/tlon-3007-fix-go-to-group-b…

…utton-in-preview-sheet

group previews: fix go to groups button

.eslintrc.cjs

@@ -71,6 +71,11 @@ module.exports = {
         message:
           'Please use the useTypedReset() hook instead of importing reset from @react-navigation/native for type safety.',
       },
+      {
+        selector: 'ImportDeclaration > Literal[value=/^packages/]',
+        message:
+          'Do not import directly from the "packages" directory. Use the package name (or relative path, if within the same package) instead.',
+      },
     ],
   },
 };

packages/app/features/top/ChatListScreen.tsx

@@ -14,6 +14,7 @@ import {
   ChatOptionsProvider,
   ChatOptionsSheet,
   ChatOptionsSheetMethods,
+  GroupPreviewAction,
   GroupPreviewSheet,
   InviteUsersSheet,
   NavBarView,
@@ -27,6 +28,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 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';
@@ -91,6 +93,7 @@ export function ChatListScreenView({
   const { data: chats } = store.useCurrentChats({
     enabled: isFocused,
   });
+  const { performGroupAction } = useGroupActions();
 
   const currentUser = useCurrentUserId();
 
@@ -286,6 +289,14 @@ export function ChatListScreenView({
     setShowSearchInput(!showSearchInput);
   }, [showSearchInput]);
 
+  const handleGroupAction = useCallback(
+    (action: GroupPreviewAction, group: db.Group) => {
+      performGroupAction(action, group);
+      setSelectedGroupId(null);
+    },
+    [performGroupAction]
+  );
+
   return (
     <RequestsProvider
       usePostReference={store.usePostReference}
@@ -345,6 +356,7 @@ export function ChatListScreenView({
             open={!!selectedGroup}
             onOpenChange={handleGroupPreviewSheetOpenChange}
             group={selectedGroup ?? undefined}
+            onActionComplete={handleGroupAction}
           />
           <InviteUsersSheet
             open={inviteSheetGroup !== null}

packages/app/features/top/UserProfileScreen.tsx

@@ -3,6 +3,7 @@ import type * as db from '@tloncorp/shared/db';
 import * as store from '@tloncorp/shared/store';
 import {
   AppDataContextProvider,
+  GroupPreviewAction,
   GroupPreviewSheet,
   NavigationProvider,
   UserProfileScreenView,
@@ -11,6 +12,7 @@ import { useState } from 'react';
 import { useCallback } from 'react';
 
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
+import { useGroupActions } from '../../hooks/useGroupActions';
 import { RootStackParamList } from '../../navigation/types';
 import { useResetToDm } from '../../navigation/utils';
 import { useConnectionStatus } from './useConnectionStatus';
@@ -24,6 +26,7 @@ export function UserProfileScreen({ route: { params }, navigation }: Props) {
   const connectionStatus = useConnectionStatus(userId);
   const [selectedGroup, setSelectedGroup] = useState<db.Group | null>(null);
   const resetToDm = useResetToDm();
+  const { performGroupAction } = useGroupActions();
 
   const handleGoToDm = useCallback(
     async (participants: string[]) => {
@@ -43,6 +46,14 @@ export function UserProfileScreen({ route: { params }, navigation }: Props) {
     navigation.push('EditProfile');
   }, [navigation]);
 
+  const handleGroupAction = useCallback(
+    (action: GroupPreviewAction, group: db.Group) => {
+      setSelectedGroup(null);
+      performGroupAction(action, group);
+    },
+    [performGroupAction]
+  );
+
   return (
     <AppDataContextProvider
       currentUserId={currentUserId}
@@ -60,6 +71,7 @@ export function UserProfileScreen({ route: { params }, navigation }: Props) {
           open={selectedGroup !== null}
           onOpenChange={handleGroupPreviewSheetOpenChange}
           group={selectedGroup ?? undefined}
+          onActionComplete={handleGroupAction}
         />
       </NavigationProvider>
     </AppDataContextProvider>

packages/app/fixtures/ActionSheet/GroupPreviewSheet.fixture.tsx

@@ -45,6 +45,7 @@ export default Object.fromEntries(
         open={true}
         onOpenChange={() => {}}
         group={group}
+        onActionComplete={() => {}}
       />,
     ];
   })

packages/app/hooks/useGroupActions.tsx

@@ -5,24 +5,19 @@ import { useCallback } from 'react';
 import { useGroupNavigation } from './useGroupNavigation';
 
 export const useGroupActions = () => {
-  const { goToChannel, goToHome } = useGroupNavigation();
+  const { goToHome, goToGroupChannels } = useGroupNavigation();
 
   const performGroupAction = useCallback(
     async (action: GroupPreviewAction, updatedGroup: db.Group) => {
-      if (action === 'goTo' && updatedGroup.lastPost?.channelId) {
-        const channel = await db.getChannel({
-          id: updatedGroup.lastPost.channelId,
-        });
-        if (channel) {
-          goToChannel(channel);
-        }
+      if (action === 'goTo') {
+        goToGroupChannels(updatedGroup.id);
       }
 
       if (action === 'joined') {
         goToHome();
       }
     },
-    [goToChannel, goToHome]
+    [goToGroupChannels, goToHome]
   );
 
   return {

packages/app/hooks/useGroupNavigation.ts

@@ -3,12 +3,14 @@ import * as db from '@tloncorp/shared/db';
 import { useCallback } from 'react';
 
 import { RootStackParamList } from '../navigation/types';
+import { useResetToGroup } from '../navigation/utils';
 
 export const useGroupNavigation = () => {
   const navigation = useNavigation<
     // @ts-expect-error - TODO: pass navigation handlers into context
     NativeStackNavigationProp<RootStackParamList, 'Channel' | 'Post'>
   >();
+  const resetToGroup = useResetToGroup();
 
   const goToChannel = useCallback(
     async (
@@ -24,6 +26,13 @@ export const useGroupNavigation = () => {
     [navigation]
   );
 
+  const goToGroupChannels = useCallback(
+    async (groupId: string) => {
+      resetToGroup(groupId);
+    },
+    [resetToGroup]
+  );
+
   const goToHome = useCallback(() => {
     navigation.navigate('ChatList');
   }, [navigation]);
@@ -39,5 +48,6 @@ export const useGroupNavigation = () => {
     goToChannel,
     goToHome,
     goToContactHostedGroups,
+    goToGroupChannels,
   };
 };

packages/app/navigation/utils.ts

@@ -80,6 +80,17 @@ export function useResetToDm() {
   };
 }
 
+export function useResetToGroup() {
+  const reset = useTypedReset();
+
+  return function resetToGroup(groupId: string) {
+    reset([
+      { name: 'ChatList' },
+      { name: 'GroupChannels', params: { groupId } },
+    ]);
+  };
+}
+
 export function screenNameFromChannelId(channelId: string) {
   return logic.isDmChannelId(channelId)
     ? 'DM'

packages/app/package.json

@@ -4,6 +4,9 @@
   "main": "index.ts",
   "private": true,
   "scripts": {
+    "lint": "eslint ./",
+    "lint:fix": "eslint ./ --fix --quiet",
+    "lint:format": "prettier ./ --write",
     "test": "vitest --watch false"
   },
   "dependencies": {

packages/ui/src/components/ContentReference/ContentReference.tsx

@@ -2,7 +2,7 @@
 import { ContentReference } from '@tloncorp/shared/api';
 import * as db from '@tloncorp/shared/db';
 import { getChannelType } from '@tloncorp/shared/urbit';
-import React, { useState } from 'react';
+import React from 'react';
 import { ComponentProps, useCallback } from 'react';
 import { View, XStack, styled } from 'tamagui';
 
@@ -11,7 +11,6 @@ import { useRequests } from '../../contexts/requests';
 import { ContactAvatar, GroupAvatar } from '../Avatar';
 import { useContactName } from '../ContactNameV2';
 import { GalleryContentRenderer } from '../GalleryPost';
-import { GroupPreviewSheet } from '../GroupPreviewSheet';
 import { IconType } from '../Icon';
 import { ListItem } from '../ListItem';
 import { useBoundHandler } from '../ListItem/listItemUtils';
@@ -76,28 +75,21 @@ export function PostReferenceLoader({
   postId: string;
   replyId?: string;
 }) {
-  const [selectedGroup, setSelectedGroup] = useState<db.Group | null>(null);
   const { usePostReference, useChannel, useGroup } = useRequests();
   const postQuery = usePostReference({
     postId: replyId ? replyId : postId,
     channelId: channelId,
   });
   const { data: channel } = useChannel({ id: channelId });
   const { data: group } = useGroup(channel?.groupId ?? '');
-  const { onPressRef } = useNavigation();
+  const { onPressRef, onPressGroupRef } = useNavigation();
   const handlePress = useCallback(async () => {
     if (channel && postQuery.data && group && group.currentUserIsMember) {
       onPressRef?.(channel, postQuery.data);
     } else if (group) {
-      setSelectedGroup(group ?? null);
+      onPressGroupRef?.(group);
     }
-  }, [channel, onPressRef, postQuery.data, group]);
-
-  const handleGroupPreviewSheetOpenChange = useCallback((open: boolean) => {
-    if (!open) {
-      setSelectedGroup(null);
-    }
-  }, []);
+  }, [channel, onPressRef, postQuery.data, group, onPressGroupRef]);
 
   return (
     <>
@@ -111,12 +103,6 @@ export function PostReferenceLoader({
         onPress={openOnPress ? handlePress : undefined}
         {...props}
       />
-
-      <GroupPreviewSheet
-        open={selectedGroup !== null}
-        onOpenChange={handleGroupPreviewSheetOpenChange}
-        group={selectedGroup ?? undefined}
-      />
     </>
   );
 }

packages/ui/src/components/GroupPreviewSheet.tsx

@@ -16,7 +16,7 @@ import { LoadingSpinner } from './LoadingSpinner';
 interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onActionComplete?: (action: GroupPreviewAction, group: db.Group) => void;
+  onActionComplete: (action: GroupPreviewAction, group: db.Group) => void;
   group?: db.Group;
 }
 
@@ -44,7 +44,11 @@ function GroupPreviewSheetComponent({
 
   const actionHandler = useCallback(
     (action: GroupPreviewAction, updatedGroup: db.Group) => {
-      onActionComplete?.(action, updatedGroup);
+      // Delay the action complete callback to allow the sheet to close.
+      // If we don't do this the app will crash.
+      setTimeout(() => {
+        onActionComplete?.(action, updatedGroup);
+      }, 100);
       onOpenChange(false);
     },
     [onActionComplete, onOpenChange]