slawk0/relay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved ContactsList.tsx UI, return last message id for

Browse Source
This commit is contained in:
slawk0
2025-01-05 22:07:01 +01:00
parent 33ffc2aeb4
commit 1f7aedb0ca
6 changed files with 108 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/chat/chatArea/MessagesArea.tsx
View File

@@ -111,6 +111,7 @@ function MessagesArea() {
type: 'direct',
last_active: new Date().toString(),
last_message: msg.message,
last_message_id: msg.message_id,
last_message_sender: msg.sender,
last_message_time: new Date().toString(),
},
@@ -153,6 +154,7 @@ function MessagesArea() {
type: 'direct',
last_active: new Date().toString(),
last_message: msg.message,
last_message_id: msg.message_id,
last_message_sender: msg.sender,
last_message_time: new Date().toString(),
},
@@ -184,6 +186,18 @@ function MessagesArea() {
(message) => message.message_id !== msg.message_id,
),
);
setContactsList((prevContacts) => {
return prevContacts.map((contact) =>
contact.last_message_id === msg.message_id
? {
...contact,
last_active: new Date().toString(),
last_message: 'message deleted',
last_message_time: new Date().toString(),
}
: contact,
);
});
},
);

142
client/src/components/chat/leftSidebar/ContactsList.tsx
View File

@@ -12,7 +12,7 @@ import {
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog.tsx';
import { Dot, Paperclip } from 'lucide-react';
import { Ellipsis, Paperclip } from 'lucide-react';
import LastActiveTime from '@/components/chat/leftSidebar/LastActiveTime.tsx';
import { ContactsProps } from '@/types/types.ts';
import { useChat } from '@/context/chat/useChat.ts';
@@ -96,14 +96,14 @@ function ContactsList() {
const ContactItem = ({ contact }: { contact: ContactsProps }) => (
<li
className="m-1 flex p-2 hover:bg-zinc-900 cursor-pointer transition-colors rounded-lg justify-between items-center min-h-[40px]"
className="m-1 flex p-2 hover:bg-zinc-900 cursor-pointer transition-colors rounded-lg justify-between items-start min-h-[40px]"
onClick={() => {
initializeContact(contact);
updateContactStatus(contact, true);
}}
>
<div className="flex">
<div className=" flex flex-col">
<div className="flex flex-col w-full">
<div className="flex items-center justify-between">
<div className="flex items-center">
<span className="text-lg">{contact.username}</span>
{contact.type === 'group' && (
@@ -113,81 +113,77 @@ function ContactsList() {
className="ml-2 invert w-5"
/>
)}
<p className="text-center text-2xl text-red-300 leading-none">
{contact.read ? '•' : '•'}
</p>
</div>
<div className="flex">
<span className="text-sm text-gray-500 text-left">
{contact.last_message?.length > 0 ? (
contact.last_message?.length > 15 ? (
<div className="flex">
{contact.last_message?.substring(0, 12) + '...'}
<Dot className="text-gray-200" />
</div>
) : (
<div className="flex">
{contact.last_message} <Dot className="text-gray-200" />
</div>
)
) : contact.last_message_time ? (
<div className="flex">
<Paperclip className="w-4 mr-1" /> attachment
<Dot className="text-gray-200" />
</div>
) : null}
</span>
<LastActiveTime contact={contact} />
</div>
</div>
</div>
<div className="w-4 h-4 flex items-center justify-center ml-2">
<p className="text-center text-2xl text-red-200 leading-none">
{contact.read ? '' : '•'}
</p>
</div>
{contact.type === 'group' ? (
<AlertDialog>
<AlertDialogTrigger asChild>
{contact.type === 'group' ? (
<AlertDialog>
<AlertDialogTrigger asChild>
<button
onClick={(e) => e.stopPropagation()}
className="flex-shrink-0 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center text-gray-500"
>
x
</button>
</AlertDialogTrigger>
<AlertDialogContent className="bg-zinc-950">
<AlertDialogHeader>
<AlertDialogTitle className="text-white">
Leave Group?
</AlertDialogTitle>
<AlertDialogDescription className="text-white">
Are you sure you want to leave this group?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.stopPropagation();
removeContact(contact.id, contact.conversation_id);
}}
className="bg-red-600 hover:bg-red-500"
>
Leave Group
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
) : (
<button
onClick={(e) => e.stopPropagation()}
className="flex-shrink-0 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center text-gray-500"
onClick={(e) => {
e.stopPropagation();
removeContact(contact.id, contact.conversation_id);
}}
className="flex-shrink-0 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center text-gray-700"
>
x
</button>
</AlertDialogTrigger>
<AlertDialogContent className="bg-zinc-950">
<AlertDialogHeader>
<AlertDialogTitle className="text-white">
Leave Group?
</AlertDialogTitle>
<AlertDialogDescription className="text-white">
Are you sure you want to leave this group?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.stopPropagation();
removeContact(contact.id, contact.conversation_id);
}}
className="bg-red-600 hover:bg-red-500"
>
Leave Group
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
) : (
<button
onClick={(e) => {
e.stopPropagation();
removeContact(contact.id, contact.conversation_id);
}}
className="flex-shrink-0 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center text-gray-500"
>
x
</button>
)}
)}
</div>
<div className="flex items-center justify-between text-sm text-gray-500">
<div className="flex items-center">
{contact.last_message?.length > 0 ? (
contact.last_message?.length > 16 ? (
<div className="flex items-center">
{contact.last_message?.substring(0, 16)}
<Ellipsis className="w-3 mt-2" />
</div>
) : (
contact.last_message
)
) : contact.last_message_time ? (
<div className="flex items-center">
<Paperclip className="w-4" /> attachment
</div>
) : null}
</div>
<LastActiveTime contact={contact} />
</div>
</div>
</li>
);

6
client/src/components/chat/leftSidebar/LastActiveTime.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { formatDistanceToNow, differenceInSeconds } from 'date-fns';
import { differenceInSeconds, formatDistanceToNowStrict } from 'date-fns';
import { ContactsProps } from '@/types/types.ts';
@@ -23,7 +23,7 @@ const LastActiveTime = ({ contact }: LastActiveTimeProps) => {
return;
}
setTimeAgo(formatDistanceToNow(lastActiveDate));
setTimeAgo(formatDistanceToNowStrict(lastActiveDate));
};
updateTime();
@@ -32,7 +32,7 @@ const LastActiveTime = ({ contact }: LastActiveTimeProps) => {
return () => clearInterval(intervalId);
}, [contact?.last_message]);
return <span className="text-sm text-gray-500">{timeAgo}</span>;
return <span className="text-xs font-bold text-gray-500">{timeAgo}</span>;
};
export default LastActiveTime;

1
client/src/types/types.ts
View File

@@ -23,6 +23,7 @@ export type ContactsProps = {
conversation_id: string;
last_active: string;
last_message: string;
last_message_id: number;
last_message_time: string;
last_message_sender: string;
};

4
client/src/utils/ProtectedRoutes.tsx
View File

@@ -4,13 +4,13 @@ import { AuthContext } from './AuthProvider';
import LoadingScreen from '../components/LoadingScreen';
function ProtectedRoutes() {
const { authorized } = useContext(AuthContext);
const { authorized, user } = useContext(AuthContext);
if (authorized === null) {
return <LoadingScreen />;
}
return authorized ? <Outlet /> : <Navigate to="/login" replace />;
return authorized && user ? <Outlet /> : <Navigate to="/login" replace />;
}
export default ProtectedRoutes;

54
server/db/db.js
View File

@@ -631,40 +631,22 @@ async function insertContact(initiatorId, receiverId, contactUsername, read) {
return null;
}
// Retrieve the last message, last active time, and last message sender
const lastMessageQuery = `
SELECT DISTINCT ON (m.conversation_id)
m.content AS last_message,
m.sent_at AS last_message_time,
a.username AS last_message_sender
FROM Messages m
JOIN Accounts a ON m.user_id = a.user_id
WHERE m.conversation_id = $1
ORDER BY m.conversation_id, m.sent_at DESC
`;
const lastMessageResult = await client.query(lastMessageQuery, [
conversation_id,
]);
let lastMessage, lastMessageTime, lastMessageSender;
// Retrieve the last message and related information
const latestMessage = await getLatestMessage(conversation_id);
if (lastMessageResult.rows.length > 0) {
lastMessage = lastMessageResult.rows[0].last_message;
lastMessageTime = lastMessageResult.rows[0].last_message_time;
lastMessageSender = lastMessageResult.rows[0].last_message_sender;
}
// Return formatted result with contact's user_id, last message, last active time, and last message sender
// Return formatted result with all message information including message_id
return {
id: contact.contact_id,
user_id: receiverId, // Now using the contact's user_id instead of the initiator's
user_id: receiverId,
username: contactUsername,
last_active: contact.last_active,
conversation_id: contact.conversation_id,
type: "direct",
read: contact.read,
last_message: lastMessage || null,
last_message_time: lastMessageTime || null,
last_message_sender: lastMessageSender || null,
last_message_id: latestMessage.message_id,
last_message: latestMessage.last_message,
last_message_time: latestMessage.last_message_time,
last_message_sender: latestMessage.last_message_sender,
};
} catch (error) {
console.error("Failed to insert contact:", error);
@@ -675,6 +657,7 @@ async function insertContact(initiatorId, receiverId, contactUsername, read) {
async function getLatestMessage(conversation_id) {
const query = `
SELECT DISTINCT ON (m.conversation_id)
m.message_id,
m.content AS last_message,
m.sent_at AS last_message_time,
a.username AS last_message_sender
@@ -689,13 +672,15 @@ async function getLatestMessage(conversation_id) {
const result = await client.query(query, [conversation_id]);
return {
last_message: result.rows[0].last_message || null,
last_message_time: result.rows[0].last_message_time || null,
last_message_sender: result.rows[0].last_message_sender || null,
message_id: result.rows[0]?.message_id || null,
last_message: result.rows[0]?.last_message || null,
last_message_time: result.rows[0]?.last_message_time || null,
last_message_sender: result.rows[0]?.last_message_sender || null,
};
} catch (error) {
console.error("Failed to get latest message:", error);
return {
message_id: null,
last_message: null,
last_message_time: null,
last_message_sender: null,
@@ -764,11 +749,9 @@ async function getContacts(user_id) {
`;
try {
// Execute the query with the user_id parameter
const contactsResult = await client.query(contactsQuery, [user_id]);
console.log(contactsResult.rows); // Debugging: log the results to verify
// Map the results to a more friendly format and fetch the latest message for each conversation
// Map the results to include the latest message and message_id
const contacts = await Promise.all(
contactsResult.rows.map(async (row) => {
const latestMessage = await getLatestMessage(row.conversation_id);
@@ -780,9 +763,10 @@ async function getContacts(user_id) {
conversation_id: row.conversation_id,
type: row.type,
read: row.read,
last_message: latestMessage.last_message || null,
last_message_time: latestMessage.last_message_time || null,
last_message_sender: latestMessage.last_message_sender || null,
last_message_id: latestMessage.message_id,
last_message: latestMessage.last_message,
last_message_time: latestMessage.last_message_time,
last_message_sender: latestMessage.last_message_sender,
};
}),
);