website/components/Application/Messages/Message/Message.tsx

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">
            <Image
              quality={100}
              className="rounded-full"
              src={
                message.member.user.logo == null
                  ? "/images/data/user-default.png"
                  : message.member.user.logo
              }
              alt={"Users's profil picture"}
              width={50}
              height={50}
              draggable={false}
            />
          </div>
        </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}`}>
            <span
              data-cy="message-member-user-name"
              className="font-bold text-gray-900 dark:text-gray-200"
            >
              {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>

        {message.member.userId === user.id && (
          <MessageOptions
            message={message}
            editMode={isEditing ? ":white_check_mark:" : ":pencil2:"}
            handleEdit={isEditing ? handleEdit : handleEditMode}
          />
        )}

        {message.type === "text" ? (
          <>
            {isEditing ? (
              <EditMessage
                message={message}
                textareaRef={textareaReference}
                handleEdit={handleEdit}
                handleKeyDown={handleTextareaKeyDown}
              />
            ) : (
              <MessageText message={message} />
            )}
          </>
        ) : message.type === "file" ? (
          <MessageFile message={message} />
        ) : (
          <Loader />
        )}
      </div>
    </div>
  )
}