conversations bar UI completed

17coincooker · Sep 10, 2023 · ce540c6 · ce540c6
1 parent abe1c32
commit ce540c6
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/app/conversations/components/ConversationBox.tsx b/app/conversations/components/ConversationBox.tsx
@@ -2,12 +2,12 @@
 
 import { useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Conversation, Message, User } from '@prisma/client';
 import { format } from 'date-fns';
 import { useSession } from 'next-auth/react';
 import clsx from 'clsx';
 import { FullConversationTypes } from '@/app/types';
 import useOtherUser from '@/app/hooks/useOtherUser';
+import Avatar from '@/app/components/Avatar';
 
 interface ConversationBoxProps {
   conversation: FullConversationTypes;
@@ -18,7 +18,8 @@ const ConversationBox: React.FC<ConversationBoxProps> = ({
   conversation,
   selected,
 }) => {
-  const otherUsers = useOtherUser(conversation);
+  const otherUser = useOtherUser(conversation);
+
   const router = useRouter();
   const session = useSession();
 
@@ -54,9 +55,44 @@ const ConversationBox: React.FC<ConversationBoxProps> = ({
       return lastMessage.body;
     }
 
-    return 'Started a conversation';
+    return 'Start a chat...';
   }, [lastMessage]);
 
-  return <div>ConversationBox</div>;
+  return (
+    <div
+      onClick={handleClick}
+      className={clsx(
+        'w-full relative flex items-center space-x-3 hover:bg-neutral-100 rounded-lg transition cursor-pointer p-3',
+        selected ? 'bg-neutral-100' : 'bg-white'
+      )}
+    >
+      <Avatar user={otherUser} />
+
+      <div className="min-w-0 flex-1">
+        <div className="focus:outline-none">
+          <div className="flex justify-between items-center mb-1">
+            <p className="text-md font-medium text-gray-900">
+              {conversation.name || otherUser.name}
+            </p>
+
+            {lastMessage?.createdAt && (
+              <p className="text-xs text-gray-400">
+                {format(new Date(lastMessage.createdAt), 'p')}
+              </p>
+            )}
+          </div>
+
+          <p
+            className={clsx(
+              'truncate text-sm',
+              hasSeen ? 'text-gray-500' : 'text-black font-medium'
+            )}
+          >
+            {lastMessageText}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
 };
 export default ConversationBox;
diff --git a/app/hooks/useOtherUser.ts b/app/hooks/useOtherUser.ts
@@ -11,11 +11,11 @@ const useOtherUser = (
   const otherUser = useMemo(() => {
     const currentUserEmail = session?.data?.user?.email;
 
-    const otherUsers = conversation.users.filter(
+    const otherUser = conversation.users.filter(
       (user) => user.email !== currentUserEmail
     );
 
-    return otherUsers;
+    return otherUser[0];
   }, [session?.data?.user?.email, conversation.users]);
 
   return otherUser;