feat: add message preview component

src/components/Messages/Message.tsx

@@ -1,3 +1,4 @@
+import Preview from '@components/Messages/Preview';
 import MessageComposer from '@components/Shared/MessageComposer';
 import MessagesList from '@components/Shared/MessagesList';
 import { Card } from '@components/UI/Card';
@@ -14,19 +15,17 @@ import { useAppStore } from 'src/store/app';
 import { useMessageStore } from 'src/store/message';
 
 const Message: FC = () => {
-  const { push, query } = useRouter();
-  const address = query.address as string;
+  const { query } = useRouter();
+  const address = (query.address as string).toLowerCase();
   const currentProfile = useAppStore((state) => state.currentProfile);
-  const messageState = useMessageStore((state) => state);
-  const { conversations } = messageState;
+  const conversations = useMessageStore((state) => state.conversations);
   const selectedConversation = conversations.get(address);
+  // TODO(elise): Move messageProfiles and previewMessages to their own ConversationList component.
+  const messageProfiles = useMessageStore((state) => state.messageProfiles);
+  const previewMessages = useMessageStore((state) => state.previewMessages);
   const { messages } = useGetMessages(selectedConversation);
   const { sendMessage } = useSendMessage(selectedConversation);
 
-  const onConversationSelected = (address: string) => {
-    push(address ? `/messages/${address}` : '/messages/');
-  };
-
   if (!isFeatureEnabled('messages', currentProfile?.id)) {
     return <Custom404 />;
   }
@@ -47,16 +46,12 @@ const Message: FC = () => {
             <div className="text-xs">All messages</div>
           </div>
           <div>
-            {Array.from(conversations.keys()).map((address: string) => {
-              return (
-                <div
-                  onClick={() => onConversationSelected(address)}
-                  key={`convo_${address}`}
-                  className="border p-5 text-xs"
-                >
-                  {address}
-                </div>
-              );
+            {Array.from(messageProfiles.values()).map((profile, index) => {
+              const message = previewMessages.get(profile.ownedBy.toLowerCase());
+              if (!message) {
+                return null;
+              }
+              return <Preview key={`${profile.ownedBy}_${index}`} profile={profile} message={message} />;
             })}
           </div>
         </Card>

src/components/Messages/Preview.tsx

@@ -0,0 +1,60 @@
+import type { Profile } from '@generated/types';
+import { BadgeCheckIcon } from '@heroicons/react/solid';
+import getAvatar from '@lib/getAvatar';
+import isVerified from '@lib/isVerified';
+import type { Message } from '@xmtp/xmtp-js';
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import React from 'react';
+
+dayjs.extend(relativeTime);
+
+interface Props {
+  profile: Profile;
+  message: Message;
+}
+
+const Preview: FC<Props> = ({ profile, message }) => {
+  const router = useRouter();
+
+  const onConversationSelected = (address: string) => {
+    router.push(address ? `/messages/${address}` : '/messages');
+  };
+
+  return (
+    <div onClick={() => onConversationSelected(profile.ownedBy)}>
+      <div className="flex justify-between pb-4 space-x-1.5">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center space-x-3">
+            <Link href={`/u/${profile?.handle}`}>
+              <img
+                src={getAvatar(profile)}
+                loading="lazy"
+                className={clsx('w-10 h-10', 'bg-gray-200 rounded-full border dark:border-gray-700/80')}
+                height={40}
+                width={40}
+                alt={profile?.handle}
+              />
+            </Link>
+            <div>
+              <div className="flex gap-1 items-center max-w-sm truncate">
+                <div className={clsx('text-md')}>{profile?.name ?? profile?.handle}</div>
+                {isVerified(profile?.id) && <BadgeCheckIcon className="w-4 h-4 text-brand" />}
+              </div>
+              <span className="text-sm text-gray-500">{message.content}</span>
+            </div>
+          </div>
+        </div>
+        {message.sent && (
+          <span className="text-xs text-gray-500">{dayjs(new Date(message.sent)).fromNow()}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Preview;

src/components/Messages/index.tsx

@@ -1,26 +1,56 @@
+import { useQuery } from '@apollo/client';
+import Preview from '@components/Messages/Preview';
 import { Card } from '@components/UI/Card';
 import { GridItemEight, GridItemFour, GridLayout } from '@components/UI/GridLayout';
 import MetaTags from '@components/utils/MetaTags';
+import type { Profile } from '@generated/types';
+import { ProfilesDocument } from '@generated/types';
 import isFeatureEnabled from '@lib/isFeatureEnabled';
-import type { Conversation, Stream } from '@xmtp/xmtp-js';
+import type { Conversation, Message } from '@xmtp/xmtp-js';
 import { Client } from '@xmtp/xmtp-js';
-import { useRouter } from 'next/router';
 import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { APP_NAME } from 'src/constants';
 import Custom404 from 'src/pages/404';
+import Custom500 from 'src/pages/500';
 import { useAppStore } from 'src/store/app';
 import { useMessageStore } from 'src/store/message';
 import { useSigner } from 'wagmi';
 
 const Messages: FC = () => {
   const { data: signer } = useSigner();
   const currentProfile = useAppStore((state) => state.currentProfile);
-  const [stream, setStream] = useState<Stream<Conversation>>();
-  const messageState = useMessageStore((state) => state);
-  const { client, setClient, conversations, setConversations, messages, setMessages, setLoading } =
-    messageState;
-  const router = useRouter();
+  const client = useMessageStore((state) => state.client);
+  const setClient = useMessageStore((state) => state.setClient);
+  const isMessagesEnabled = isFeatureEnabled('messages', currentProfile?.id);
+
+  const conversations = useMessageStore((state) => state.conversations);
+  const setConversations = useMessageStore((state) => state.setConversations);
+  const messageProfiles = useMessageStore((state) => state.messageProfiles);
+  const setMessageProfiles = useMessageStore((state) => state.setMessageProfiles);
+  const previewMessages = useMessageStore((state) => state.previewMessages);
+  const setPreviewMessages = useMessageStore((state) => state.setPreviewMessages);
+
+  const peerAddresses = Array.from(conversations.keys());
+  const { error: profilesError } = useQuery(ProfilesDocument, {
+    // TODO(elise): Right now this is capped at 50 profiles. We'll want to paginate.
+    variables: {
+      request: { ownedBy: peerAddresses, limit: 50 }
+    },
+    skip: !currentProfile?.id || peerAddresses.length === 0,
+    onCompleted: (data) => {
+      if (!data?.profiles?.items?.length) {
+        return;
+      }
+      const profiles = data.profiles.items as Profile[];
+      const newMessageProfiles = new Map(messageProfiles);
+      for (const profile of profiles) {
+        const peerAddress = (profile.ownedBy as string).toLowerCase();
+        newMessageProfiles.set(peerAddress, profile);
+      }
+      setMessageProfiles(newMessageProfiles);
+    }
+  });
 
   useEffect(() => {
     const initXmtpClient = async () => {
@@ -29,67 +59,64 @@ const Messages: FC = () => {
         setClient(xmtp);
       }
     };
-    if (isFeatureEnabled('messages', currentProfile?.id)) {
+    if (isMessagesEnabled) {
       initXmtpClient();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [signer]);
 
   useEffect(() => {
-    if (!client || !isFeatureEnabled('messages', currentProfile?.id)) {
+    if (!isMessagesEnabled || !client) {
       return;
     }
 
-    async function listConversations() {
-      setLoading(true);
+    const fetchMostRecentMessage = async (
+      convo: Conversation
+    ): Promise<{ address: string; message?: Message }> => {
+      const peerAddress = convo.peerAddress.toLowerCase();
+      // TODO(elise): Add sort direction on XMTP's side so we can grab only the most recent message.
+      const newMessages = await convo.messages({ limit: 1 });
+      if (newMessages.length <= 0) {
+        return { address: peerAddress };
+      }
+      return { address: peerAddress, message: newMessages[0] };
+    };
+
+    const listConversations = async () => {
+      const newPreviewMessages = new Map(previewMessages);
+      const newConversations = new Map(conversations);
       const convos = (await client?.conversations?.list()) || [];
-      Promise.all(
+      const previews = await Promise.all(
         convos.map(async (convo) => {
-          if (convo.peerAddress !== currentProfile?.ownedBy) {
-            conversations.set(convo.peerAddress, convo);
-            setConversations(new Map(conversations));
-          }
+          newConversations.set(convo.peerAddress.toLowerCase(), convo);
+          return await fetchMostRecentMessage(convo);
         })
-      ).then(() => {
-        setLoading(false);
-      });
-    }
-    const streamConversations = async () => {
-      const newStream = (await client?.conversations?.stream()) || [];
-      setStream(newStream);
-      for await (const convo of newStream) {
-        if (convo.peerAddress !== currentProfile?.ownedBy) {
-          const newMessages = await convo.messages();
-          messages.set(convo.peerAddress, newMessages);
-          setMessages(new Map(messages));
-          conversations.set(convo.peerAddress, convo);
-          setConversations(new Map(conversations));
+      );
+      for (const preview of previews) {
+        if (preview.message) {
+          newPreviewMessages.set(preview.address, preview.message);
         }
       }
+      setPreviewMessages(newPreviewMessages);
+      setConversations(newConversations);
     };
-    listConversations();
-    streamConversations();
 
-    return () => {
-      const closeStream = async () => {
-        if (!stream) {
-          return;
-        }
-        await stream.return();
-      };
-      closeStream();
-    };
+    listConversations();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client]);
 
-  const onConversationSelected = (address: string) => {
-    router.push(address ? `/messages/${address}` : '/messages/');
-  };
-
-  if (!isFeatureEnabled('messages', currentProfile?.id)) {
+  if (!isMessagesEnabled) {
     return <Custom404 />;
   }
 
+  if (profilesError) {
+    return <Custom500 />;
+  }
+
+  if (previewMessages?.size <= 0 || messageProfiles?.size <= 0) {
+    return null;
+  }
+
   return (
     <GridLayout>
       <MetaTags title={`Messages • ${APP_NAME}`} />
@@ -108,16 +135,12 @@ const Messages: FC = () => {
             <div className="text-xs">All messages</div>
           </div>
           <div>
-            {Array.from(conversations.keys()).map((convo: string) => {
-              return (
-                <div
-                  onClick={() => onConversationSelected(convo)}
-                  key={`convo_${convo}`}
-                  className="border p-5 text-xs"
-                >
-                  {convo}
-                </div>
-              );
+            {Array.from(messageProfiles.values()).map((profile, index) => {
+              const message = previewMessages.get(profile.ownedBy.toLowerCase());
+              if (!message) {
+                return null;
+              }
+              return <Preview key={`${profile.ownedBy}_${index}`} profile={profile} message={message} />;
             })}
           </div>
         </Card>

src/components/utils/hooks/useGetMessages.tsx

@@ -12,7 +12,7 @@ const useGetMessages = (conversation?: Conversation) => {
     }
     const loadMessages = async () => {
       const newMessages = await conversation.messages();
-      messages.set(conversation.peerAddress, newMessages);
+      messages.set(conversation.peerAddress.toLowerCase(), newMessages);
       setMessages(new Map(messages));
     };
     loadMessages();