GroupMembersScreen, ProfileSheet: wire up navigate to DM

tloncorp · Oct 7, 2024 · 91496e5 · 91496e5
1 parent 88f9796
commit 91496e5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 23 deletions.
diff --git a/packages/app/features/groups/GroupMembersScreen.tsx b/packages/app/features/groups/GroupMembersScreen.tsx
@@ -1,18 +1,20 @@
+import { CommonActions } from '@react-navigation/native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import * as store from '@tloncorp/shared/dist/store';
 import { GroupMembersScreenView } from '@tloncorp/ui';
+import { useCallback } from 'react';
 
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { useGroupContext } from '../../hooks/useGroupContext';
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { GroupSettingsStackParamList } from '../../navigation/types';
 
-
 type Props = NativeStackScreenProps<
   GroupSettingsStackParamList,
   'GroupMembers'
 >;
 
-export function GroupMembersScreen(props: Props) {
-  const { groupId } = props.route.params;
+export function GroupMembersScreen({ route, navigation }: Props) {
+  const { groupId } = route.params;
   const {
     groupMembers,
     groupRoles,
@@ -30,9 +32,28 @@ export function GroupMembersScreen(props: Props) {
 
   const currentUserId = useCurrentUserId();
 
+  const handleGoToDm = useCallback(
+    async (participants: string[]) => {
+      const dmChannel = await store.upsertDmChannel({
+        participants,
+      });
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 1,
+          routes: [
+            { name: 'ChatList' },
+            { name: 'Channel', params: { channel: dmChannel } },
+          ],
+        })
+      );
+    },
+    [navigation]
+  );
+
   return (
     <GroupMembersScreenView
-      goBack={props.navigation.goBack}
+      goBack={() => navigation.goBack()}
+      onPressGoToDm={(contactId: string) => handleGoToDm([contactId])}
       members={groupMembers}
       roles={groupRoles}
       currentUserId={currentUserId}

diff --git a/packages/ui/src/components/GroupMembersScreenView.tsx b/packages/ui/src/components/GroupMembersScreenView.tsx
@@ -24,6 +24,7 @@ export function GroupMembersScreenView({
   onPressUnban,
   onPressAcceptJoinRequest,
   onPressRejectJoinRequest,
+  onPressGoToDm,
 }: {
   goBack: () => void;
   members: db.ChatMember[];
@@ -37,6 +38,7 @@ export function GroupMembersScreenView({
   onPressUnban: (contactId: string) => void;
   onPressAcceptJoinRequest: (contactId: string) => void;
   onPressRejectJoinRequest: (contactId: string) => void;
+  onPressGoToDm: (contactId: string) => void;
 }) {
   const { bottom } = useSafeAreaInsets();
   const [selectedContact, setSelectedContact] = useState<string | null>(null);
@@ -207,6 +209,7 @@ export function GroupMembersScreenView({
           onPressKick={() => onPressKick(selectedContact)}
           onPressBan={() => onPressBan(selectedContact)}
           onPressUnban={() => onPressUnban(selectedContact)}
+          onPressGoToDm={() => onPressGoToDm(selectedContact)}
         />
       )}
       {selectedContact !== null && selectedIsRequest && (

diff --git a/packages/ui/src/components/ProfileBlock.tsx b/packages/ui/src/components/ProfileBlock.tsx
@@ -14,12 +14,7 @@ export const ProfileBlock = ({
 >) => {
   const contact = useContact(contactId);
   return contact?.coverImage ? (
-    <ProfileCover
-      width={'100%'}
-      aspectRatio={1}
-      uri={contact.coverImage}
-      {...props}
-    >
+    <ProfileCover width={'100%'} uri={contact.coverImage} {...props}>
       <YStack flex={1} justifyContent="flex-end">
         <ProfileRow
           contactId={contactId}

diff --git a/packages/ui/src/components/ProfileSheet.tsx b/packages/ui/src/components/ProfileSheet.tsx
@@ -1,9 +1,7 @@
 import * as db from '@tloncorp/shared/dist/db';
 import * as store from '@tloncorp/shared/dist/store';
 import { useCallback } from 'react';
-import { Text } from 'tamagui';
 
-import { useNavigation } from '../contexts';
 import { useCurrentUserId } from '../contexts/appDataContext';
 import { ActionGroup, ActionSheet, createActionGroups } from './ActionSheet';
 import { Button } from './Button';
@@ -38,6 +36,7 @@ export function ProfileSheet({
   onPressBan,
   onPressUnban,
   onPressKick,
+  onPressGoToDm,
 }: {
   contact?: db.Contact;
   contactId: string;
@@ -49,11 +48,10 @@ export function ProfileSheet({
   onPressKick?: () => void;
   onPressBan?: () => void;
   onPressUnban?: () => void;
+  onPressGoToDm?: () => void;
 }) {
   const currentUserId = useCurrentUserId();
 
-  const { onPressGoToDm } = useNavigation();
-
   const handleBlock = useCallback(() => {
     if (contact && contact.isBlocked) {
       store.unblockUser(contactId);
@@ -63,19 +61,17 @@ export function ProfileSheet({
     onOpenChange(false);
   }, [contact, contactId, onOpenChange]);
 
-  const handleGoToDm = useCallback(async () => {
-    onPressGoToDm?.([contactId]);
-    onOpenChange(false);
-  }, [contactId, onPressGoToDm, onOpenChange]);
-
   const isAdminnable = currentUserIsAdmin && currentUserId !== contactId;
 
   const actions: ActionGroup[] = createActionGroups(
     [
       'neutral',
       {
         title: 'Send message',
-        action: () => handleGoToDm,
+        action: () => {
+          onPressGoToDm?.();
+          onOpenChange(false);
+        },
         endIcon: 'ChevronRight',
       },
       {
@@ -119,8 +115,8 @@ export function ProfileSheet({
     <ActionSheet
       open={open}
       onOpenChange={onOpenChange}
-      snapPointsMode="percent"
-      snapPoints={[90]}
+      // snapPointsMode="percent"
+      // snapPoints={[90]}
     >
       <ActionSheet.ScrollableContent>
         <ActionSheet.ContentBlock>