fix messages date format
This commit is contained in:
parent
cc46fbaf95
commit
f117394f47
@ -1,19 +1,27 @@
|
|||||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
|
import { isDateToday } from "@root/utils/date";
|
||||||
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
unAuthenticated?: boolean;
|
unAuthenticated?: boolean;
|
||||||
isSelf: boolean;
|
isSelf: boolean;
|
||||||
text: string;
|
text: string;
|
||||||
time: string;
|
createdAt: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChatMessage({ unAuthenticated = false, isSelf, text, time }: Props) {
|
export default function ChatMessage({ unAuthenticated = false, isSelf, text, createdAt }: Props) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||||
|
|
||||||
const messageBackgroundColor = isSelf ? "white" : unAuthenticated ? "#EFF0F5" : theme.palette.grey2.main;
|
const messageBackgroundColor = isSelf ? "white" : unAuthenticated ? "#EFF0F5" : theme.palette.grey2.main;
|
||||||
|
|
||||||
|
const date = new Date(createdAt);
|
||||||
|
const time = date.toLocaleString([], {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
...(!isDateToday(date) && { year: "2-digit", month: "2-digit", day: "2-digit" })
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@ -33,6 +41,7 @@ export default function ChatMessage({ unAuthenticated = false, isSelf, text, tim
|
|||||||
order: isSelf ? 1 : 2,
|
order: isSelf ? 1 : 2,
|
||||||
color: theme.palette.grey2.main,
|
color: theme.palette.grey2.main,
|
||||||
mb: "-4px",
|
mb: "-4px",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
}}
|
}}
|
||||||
>{time}</Typography>
|
>{time}</Typography>
|
||||||
<Box
|
<Box
|
||||||
|
@ -228,7 +228,7 @@ export default function Chat({ sx }: Props) {
|
|||||||
unAuthenticated
|
unAuthenticated
|
||||||
key={message.id}
|
key={message.id}
|
||||||
text={message.message}
|
text={message.message}
|
||||||
time={new Date(message.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
|
createdAt={message.created_at}
|
||||||
isSelf={sessionData.sessionId === message.user_id}
|
isSelf={sessionData.sessionId === message.user_id}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
@ -250,7 +250,7 @@ export default function SupportChat() {
|
|||||||
<ChatMessage
|
<ChatMessage
|
||||||
key={message.id}
|
key={message.id}
|
||||||
text={message.message}
|
text={message.message}
|
||||||
time={new Date(message.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
|
createdAt={message.created_at}
|
||||||
isSelf={ticket.user === message.user_id}
|
isSelf={ticket.user === message.user_id}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
7
src/utils/date.ts
Normal file
7
src/utils/date.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export function isDateToday(date: Date): boolean {
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
return date.getTime() > today.getTime();
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user