GroupListItem, ChatList: show latest channel name

tloncorp · Jun 4, 2024 · 9a2f4ce · 9a2f4ce
1 parent 9a7c264
commit 9a2f4ce
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/packages/shared/src/db/types.ts b/packages/shared/src/db/types.ts
@@ -38,7 +38,10 @@ export type ContactPinnedGroups = Contact['pinnedGroups'];
 export type Unread = BaseModel<'unreads'>;
 // TODO: We need to include unread count here because it's  returned by the chat
 // list query, but doesn't feel great.
-export type Group = BaseModel<'groups'> & { unreadCount?: number | null };
+export type Group = BaseModel<'groups'> & {
+  unreadCount?: number | null;
+  lastChannel?: string | null;
+};
 export type ClientMeta = Pick<
   Group,
   | 'title'

diff --git a/packages/ui/src/components/ChatList.tsx b/packages/ui/src/components/ChatList.tsx
@@ -164,6 +164,7 @@ const ChatListItem = React.memo(function ChatListItemComponent({
             ...model.group,
             unreadCount: model.unread?.count,
             lastPost: model.lastPost,
+            lastChannel: model.title,
           }}
           borderRadius="$m"
           {...props}

diff --git a/packages/ui/src/components/GroupListItem/GroupListItemContent.tsx b/packages/ui/src/components/GroupListItem/GroupListItemContent.tsx
@@ -1,7 +1,7 @@
 import type * as db from '@tloncorp/shared/dist/db';
 import { useMemo } from 'react';
 
-import { Text, XStack } from '../../core';
+import { XStack } from '../../core';
 import { Badge } from '../Badge';
 import ContactName from '../ContactName';
 import { Icon } from '../Icon';
@@ -32,9 +32,11 @@ export default function GroupListItemContent({
       />
       <ListItem.MainContent>
         <ListItem.Title>{model.title}</ListItem.Title>
-        <ListItem.Subtitle marginVertical={'$xs'}>
-          {model.lastPost && model.lastPost.channelId}
-        </ListItem.Subtitle>
+        {model.lastPost && (
+          <ListItem.Subtitle marginVertical={'$xs'}>
+            {model.lastChannel}
+          </ListItem.Subtitle>
+        )}
         {!isPending && model.lastPost ? (
           <XStack gap="$s" alignItems="center">
             <Icon