This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/Application/Messages/Message/Message.tsx

130 lines
3.9 KiB
TypeScript
Raw Normal View History

import { useState, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import date from "date-and-time"
import type { MessageWithMember } from "../../../../models/Message"
import { MessageText } from "./MessageText"
import { Loader } from "../../../design/Loader"
import { MessageFile } from "./MessageFile"
import { useAuthentication } from "../../../../tools/authentication"
import { MessageOptions } from "./MessageOptions"
import { EditMessage } from "./EditMessage"
export interface MessageProps {
message: MessageWithMember
}
export const Message: React.FC<MessageProps> = (props) => {
const { message } = props
const textareaReference = useRef<HTMLTextAreaElement>(null)
const [isEditing, setIsEditing] = useState(false)
const { authentication, user } = useAuthentication()
const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
event,
) => {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault()
event.currentTarget.dispatchEvent(
new Event("submit", { cancelable: true, bubbles: true }),
)
}
}
const handleEdit = async (): Promise<void> => {
const newMessage = textareaReference.current?.value ?? message.value
if (
typeof newMessage === "string" &&
newMessage.length > 0 &&
newMessage !== message.value
) {
try {
await authentication.api.put(`/messages/${message.id}`, {
value: newMessage,
})
} catch {}
}
handleEditMode()
}
const handleEditMode = (): void => {
setIsEditing((oldIsEditing) => {
return !oldIsEditing
})
}
return (
<div
data-cy={`message-${message.id}`}
className="group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900"
>
<Link href={`/application/users/${message.member.user.id}`}>
<div className="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center">
<div className="h-10 w-10 drop-shadow-md">
2022-12-13 11:38:07 +01:00
<Image
quality={100}
className="rounded-full"
2022-12-13 11:38:07 +01:00
src={
message.member.user.logo == null
? "/images/data/user-default.png"
2022-12-13 11:38:07 +01:00
: message.member.user.logo
}
alt={"Users's profil picture"}
width={50}
height={50}
draggable={false}
/>
</div>
2022-12-13 11:38:07 +01:00
</div>
</Link>
<div className="relative w-full whitespace-pre-wrap break-words break-all">
<div className="flex w-max items-center">
<Link href={`/application/users/${message.member.user.id}`}>
2022-12-13 11:38:07 +01:00
<span
data-cy="message-member-user-name"
className="font-bold text-gray-900 dark:text-gray-200"
2022-12-13 11:38:07 +01:00
>
{message.member.user.name}
</span>
</Link>
<span
data-cy="message-date"
className="ml-4 select-none text-xs text-gray-500 dark:text-gray-200"
>
{date.format(new Date(message.createdAt), "DD/MM/YYYY - HH:mm:ss")}
</span>
</div>
2022-08-31 21:44:33 +02:00
{message.member.userId === user.id && (
<MessageOptions
message={message}
editMode={isEditing ? ":white_check_mark:" : ":pencil2:"}
2022-08-31 21:44:33 +02:00
handleEdit={isEditing ? handleEdit : handleEditMode}
/>
)}
{message.type === "text" ? (
<>
{isEditing ? (
2022-08-31 21:44:33 +02:00
<EditMessage
message={message}
textareaRef={textareaReference}
handleEdit={handleEdit}
handleKeyDown={handleTextareaKeyDown}
/>
) : (
<MessageText message={message} />
)}
</>
) : message.type === "file" ? (
<MessageFile message={message} />
) : (
<Loader />
)}
</div>
</div>
)
}