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;