polynux
/
pchl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

display correctly avatar, username and time

This commit is contained in:
Guillaume Dorce 2024-02-04 16:17:58 +01:00
parent 78ef06fbae
commit 599896ed57
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Members/Chat/Message.tsx
View File

@ -1,5 +1,6 @@
import type { MessagesResponse, UsersResponse } from "../../../types/pb_types"; import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
import Avatar from "../Avatar"; import Avatar from "../Avatar";
import { FaRegClock } from "react-icons/fa";
export type MessageExpand = MessagesResponse<{ export type MessageExpand = MessagesResponse<{
author: UsersResponse; author: UsersResponse;
@ -7,13 +8,23 @@ export type MessageExpand = MessagesResponse<{
export default function Message({ message }: { message: MessageExpand }) { export default function Message({ message }: { message: MessageExpand }) {
console.log(message); if (!message.expand) return null;
const author = message.expand.author;
const avatarUrl = author.avatar ? import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100` : undefined;
const date = new Date(message.created);
const dateStr = `${date.getHours()}:${date.getMinutes()}`;
return ( return (
<div className='flex flex-col items-start justify-center' key={message.id}> <div className='flex justify-start p-4' key={message.id}>
{message.expand && <Avatar author={message.expand.author} /> } {message.expand && <Avatar avatarUrl={avatarUrl} firstName={author.firstname} lastName={author.lastname} />}
<div className='p-2 bg-gray-100 rounded-md '> <div className='flex flex-col items-start justify-center'>
<p>{message.content}</p> <div className='flex items-center my-4 ml-2 gap-2'>
<p className="pr-2 py-2 border-b border-gray-200 text-xl text-gray-600">{author.firstname} {author.lastname}</p>
<p className="flex gap-2 items-center"><FaRegClock />{dateStr}</p>
</div>
<div className='p-2 bg-gray-100 rounded-md '>
<p>{message.content}</p>
</div>
</div> </div>
</div> </div>
) )