WIP : msg read/unread feature WIP

shyamtala003 · May 2, 2024 · 1ba4f8f · 1ba4f8f
1 parent 04f268e
commit 1ba4f8f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 29 deletions.
diff --git a/src/components/messages/MessageElement.jsx b/src/components/messages/MessageElement.jsx
@@ -2,6 +2,8 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useAuth } from "../../stores/useAuth";
 import { useConversation } from "../../stores/useConversation";
+import { IoCheckmarkDoneSharp } from "react-icons/io5";
+
 dayjs.extend(relativeTime);
 
 const MessageElement = ({ message }) => {
@@ -26,8 +28,13 @@ const MessageElement = ({ message }) => {
  <div
  className={`chat-bubble text-white text-opacity-70 ${self ? "bg-gray-900" : "bg-gray-800"} `}>
  {message.message}
- <time className="block text-xs text-right opacity-50">
- {formattedTime}
+ <time className="flex justify-end items-center gap-1 text-xs ">
+ <span className="opacity-50">{formattedTime}</span>
+ {self && (
+ <IoCheckmarkDoneSharp
+ className={`text-base ${message?.read ? "text-green-300" : "text-gray-400"}`}
+ />
+ )}
  </time>
  </div>
  </div>

diff --git a/src/components/messages/MessageHeader.jsx b/src/components/messages/MessageHeader.jsx
@@ -7,7 +7,7 @@ const MessageHeader = () => {
  const isTyping = useTypingStatus(user._id);
 
  return (
- <div className="flex items-center justify-between px-4 py-3 sticky top-0 z-10 bg-black bg-opacity-80 backdrop-blur-md border-b border-white border-opacity-15">
+ <div className="flex items-center justify-between px-4 py-3 sticky top-0 z-10 bg-blur-dark border-b border-white border-opacity-15">
  <div className="flex items-center gap-2">
  <div className={`avatar ${isOnline && "online"}`}>
  <div className="w-10 rounded-full">

diff --git a/src/components/sidebar/ConversationItem.jsx b/src/components/sidebar/ConversationItem.jsx
@@ -26,37 +26,45 @@ const ConversationItem = memo(function ConversationItem({ user }) {
  return (
  <div
  onClick={setConversation}
- className="flex items-center px-2 py-3 transition-all duration-200 ease-in-out border-b border-white cursor-pointer border-opacity-20 hover:backdrop-blur-xl hover:rounded-lg hover:border-transparent">
- <div className="flex items-center gap-2">
- <div className={`avatar ${isOnline && "online"}`}>
- <div className="rounded-full w-11">
- <img src={user?.profilePicture} />
+ className="w-full flex items-center px-2 py-3 transition-all duration-200 ease-in-out border-b border-white cursor-pointer border-opacity-20 hover:backdrop-blur-xl hover:rounded-lg hover:border-transparent">
+ <div className="w-full flex items-center justify-between">
+ <div className="flex items-center gap-2 flex-1">
+ <div className={`avatar ${isOnline && "online"}`}>
+ <div className="rounded-full w-11">
+ <img src={user?.profilePicture} />
+ </div>
  </div>
- </div>
-
- <div className="flex flex-col items-start justify-center">
- <p className="text-white text-md capitalize">{user?.name}</p>
+ <div className="flex flex-col items-start justify-center">
+ <p className="text-white text-md capitalize">{user?.name}</p>
 
- {/* code for display last message */}
- <div
- className={`collapse ${
- !isTyping ? "collapse-open" : "collapse-close"
- }`}>
- <p className="p-0 text-[12px] font-medium text-gray collapse-content overflow-hidden text-ellipsis whitespace-nowrap">
- {user.lastMessage}
- </p>
- </div>
+ {/* code for display last message */}
+ <div
+ className={`collapse ${
+ !isTyping ? "collapse-open" : "collapse-close"
+ }`}>
+ <p
+ className={`p-0 text-[12px] ${user?.unreadMessageCount > 0 ? "text-white" : "text-gray "} font-medium collapse-content overflow-hidden text-ellipsis whitespace-nowrap`}>
+ {user.lastMessage}
+ </p>
+ </div>
 
- {/* code for typing status */}
- <div
- className={`collapse ${
- isTyping ? "collapse-open" : "collapse-close"
- }`}>
- <p className="p-0 text-sm font-semibold text-green-400 collapse-content">
- typing...
- </p>
+ {/* code for typing status */}
+ <div
+ className={`collapse ${
+ isTyping ? "collapse-open" : "collapse-close"
+ }`}>
+ <p className="p-0 text-sm font-semibold text-green-400 collapse-content">
+ typing...
+ </p>
+ </div>
  </div>
  </div>
+ {/* unread message count */}
+ {user?.unreadMessageCount > 0 && (
+ <span className="bg-blur-dark p-1 w-8 h-8 grid place-items-center rounded-full text-[10px] font-bold text-white">
+ {user?.unreadMessageCount}
+ </span>
+ )}
  </div>
  </div>
  );

diff --git a/src/index.css b/src/index.css
@@ -39,4 +39,7 @@ body {
  .bg-blur-secondary {
  @apply backdrop-blur-xl bg-white bg-opacity-10;
  }
+ .bg-blur-dark {
+ @apply bg-black bg-opacity-80 backdrop-blur-md;
+ }
 }