Created
July 2, 2024 14:32
-
-
Save goodwin64/28d446ecc4e187b13f8f0d97b74c8e53 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const SingleMessage: FC<Message & { highlight: boolean; index?: number }> = ({ | |
| id, | |
| author, | |
| createdAt, | |
| content, | |
| highlight, | |
| index, | |
| }) => { | |
| const [messageTime, setMessageTime] = useState<string>(() => | |
| calculateCommentTime(createdAt, new Date()), | |
| ); | |
| useEffect(() => { | |
| const updateCommentTime = () => { | |
| setMessageTime(calculateCommentTime(createdAt, new Date())); | |
| }; | |
| const interval = setInterval(updateCommentTime, 60 * 1000); | |
| return () => { | |
| clearInterval(interval); | |
| }; | |
| }, [createdAt]); | |
| const isUserFlashpack = author?.role === UserRole.Flashpack; | |
| return ( | |
| <CommentContainer | |
| data-testid={`thread-message-${index}`} | |
| id={commentAnchor({ id })} | |
| isFlashpack={isUserFlashpack} | |
| p={2} | |
| ml={{ md: isUserFlashpack ? 9 : 0, xs: isUserFlashpack ? 3 : 0 }} | |
| mr={{ md: !isUserFlashpack ? 9 : 0, xs: !isUserFlashpack ? 3 : 0 }} | |
| gap={1} | |
| highlight={highlight} | |
| > | |
| <Box display="flex" alignItems="baseline" gap={2}> | |
| <Typography variant="bodySingle">{author?.email}</Typography> | |
| </Box> | |
| <FormattedText sx={{ lineHeight: '20px', textAlign: 'left' }}> | |
| {content} | |
| </FormattedText> | |
| <Box display={'flex'} justifyContent="flex-end"> | |
| {/* chromatic ignore element because its always changing due to its relative nature */} | |
| <Typography component="span" data-chromatic="ignore" variant="label"> | |
| {messageTime} | |
| </Typography> | |
| </Box> | |
| </CommentContainer> | |
| ); | |
| }; | |
| export const calculateCommentTime = ( | |
| commentDateTimeIsoString: string, | |
| now: Date = new Date(), | |
| ): string => { | |
| const commentDate = new Date(commentDateTimeIsoString); | |
| const duration = intervalToDuration({ | |
| start: commentDate, | |
| end: now, | |
| }); | |
| const onlySeconds = | |
| [ | |
| duration.years, | |
| duration.months, | |
| duration.weeks, | |
| duration.days, | |
| duration.hours, | |
| duration.minutes, | |
| ].filter(Boolean).length === 0; | |
| if (onlySeconds) { | |
| return 'Just now'; | |
| } | |
| if (duration?.days && duration?.days > 0) { | |
| return format(commentDate, 'dd MMM yyyy - HH:mm'); | |
| } | |
| return `${formatDuration({ ...duration, seconds: 0 })} ago`; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment