polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix date format

This commit is contained in:
Guillaume Dorce 2022-09-30 12:32:29 +02:00
parent 3e622bfcb6
commit a6a6738e4b
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/Message.tsx
View File

@ -2,7 +2,7 @@ import { FaThumbsUp } from 'react-icons/fa';
import Avatar from '@components/Avatar'; import Avatar from '@components/Avatar';
import PopupMenu from './PopupMenu'; import PopupMenu from './PopupMenu';
const Image = ({ image }: {image: string}) => { const Image = ({ image }: { image: string }) => {
if (image === '' || image === null) { if (image === '' || image === null) {
return null; return null;
} }
@ -14,14 +14,14 @@ const Image = ({ image }: {image: string}) => {
); );
}; };
const Text = ({ text }: {text: string}) => { const Text = ({ text }: { text: string }) => {
if (text === '') { if (text === '') {
return null; return null;
} }
return <div className="text-white message">{text}</div>; return <div className="text-white message">{text}</div>;
}; };
const Likes = ({ likes }: {likes: number}) => { const Likes = ({ likes }: { likes: number }) => {
return ( return (
<div className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer"> <div className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer">
<FaThumbsUp className="fill-red-light text-xl w-10 h-10 p-2.5" /> <FaThumbsUp className="fill-red-light text-xl w-10 h-10 p-2.5" />
@ -32,7 +32,10 @@ const Likes = ({ likes }: {likes: number}) => {
const Message = ({ message }: any) => { const Message = ({ message }: any) => {
return ( return (
<> <>
<div className="flex bg-grey-dark rounded-xl w-full max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark" id={"messageId" + message.id}> <div
className="flex bg-grey-dark rounded-xl w-full max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark"
id={'messageId' + message.id}
>
{message.author && <Avatar user={message.author} />} {message.author && <Avatar user={message.author} />}
<div className="flex flex-col gap-2 relative flex-grow"> <div className="flex flex-col gap-2 relative flex-grow">
<div className="flex justify-between"> <div className="flex justify-between">
@ -43,10 +46,17 @@ const Message = ({ message }: any) => {
</div> </div>
<Text text={message.content} /> <Text text={message.content} />
<Image image={message.image} /> <Image image={message.image} />
<div className="text-grey-light date">{message.createdAt}</div> <div className="text-grey-light date">
{new Date(message.createdAt).toLocaleDateString(undefined, {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})}
</div>
<Likes likes={2} /> <Likes likes={2} />
</div> </div>
</div> </div>
</> </>
); );