diff --git a/components/Application/Messages/Message/Message.tsx b/components/Application/Messages/Message/Message.tsx index 042f46f..f05a2ba 100644 --- a/components/Application/Messages/Message/Message.tsx +++ b/components/Application/Messages/Message/Message.tsx @@ -1,11 +1,16 @@ +import { useState, useRef } from 'react' import Image from 'next/image' import Link from 'next/link' import date from 'date-and-time' +import TextareaAutosize from 'react-textarea-autosize' +import useTranslation from 'next-translate/useTranslation' import { MessageWithMember } from '../../../../models/Message' import { MessageText } from './MessageText' import { Loader } from '../../../design/Loader' import { MessageFile } from './MessageFile' +import { Emoji } from '../../../Emoji' +import { useAuthentication } from '../../../../tools/authentication' export interface MessageProps { message: MessageWithMember @@ -14,9 +19,60 @@ export interface MessageProps { export const Message: React.FC = (props) => { const { message } = props + const textareaReference = useRef(null) + const [isEditing, setIsEditing] = useState(false) + const { t } = useTranslation() + const { authentication, user } = useAuthentication() + + const handleDeleteMessage = async (): Promise => { + try { + await authentication.api.delete(`/messages/${message.id}`) + } catch {} + } + + const handleTextareaKeyDown: React.KeyboardEventHandler = ( + event + ) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault() + event.currentTarget.dispatchEvent( + new Event('submit', { cancelable: true, bubbles: true }) + ) + } + } + + const handleEdit = async (): Promise => { + 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 handleEditSubmit: React.FormEventHandler = async ( + event + ) => { + event.preventDefault() + await handleEdit() + } + + const handleEditMode = (): void => { + setIsEditing((oldIsEditing) => { + return !oldIsEditing + }) + } + return (
@@ -40,7 +96,7 @@ export const Message: React.FC = (props) => {
-
+
+ {message.member.userId === user.id ? ( +
+ {message.type === 'text' ? ( +
+ +
+ ) : null} +
+ +
+
+ ) : null} {message.type === 'text' ? ( - + <> + {isEditing ? ( +
+ { + event.currentTarget.setSelectionRange( + event.currentTarget.value.length, + event.currentTarget.value.length + ) + }} + /> + + ) : ( + + )} + ) : message.type === 'file' ? ( ) : ( diff --git a/components/Application/SendMessage/SendMessage.tsx b/components/Application/SendMessage/SendMessage.tsx index 0945584..7e5dc56 100644 --- a/components/Application/SendMessage/SendMessage.tsx +++ b/components/Application/SendMessage/SendMessage.tsx @@ -96,7 +96,7 @@ export const SendMessage: React.FC = (props) => { onKeyDown={handleTextareaKeyDown} > = (props) => { - const { value, size } = props + const { value, size, tooltip = false } = props return ( { return <>{value} }} diff --git a/locales/en/application.json b/locales/en/application.json index 1371ad9..509114e 100644 --- a/locales/en/application.json +++ b/locales/en/application.json @@ -24,6 +24,7 @@ "saved-information": "The information have been saved.", "success-email-changed": "Please check your emails to confirm your new email address. You are now signed out.", "delete": "Delete", + "edit": "Edit", "signout": "Sign out", "signout-all-devices": "Sign out of all devices", "signin-with-an-account": "Sign in with an account", diff --git a/locales/fr/application.json b/locales/fr/application.json index 2e23f23..d6369e8 100644 --- a/locales/fr/application.json +++ b/locales/fr/application.json @@ -24,6 +24,7 @@ "saved-information": "Les informations ont été enregistrées.", "success-email-changed": "Veuillez vérifier vos emails pour confirmer votre nouvelle adresse email. Vous êtes maintenant déconnecté.", "delete": "Supprimer", + "edit": "Modifier", "signout": "Se déconnecter", "signout-all-devices": "Se déconnecter de tous les appareils", "signin-with-an-account": "Se connecter avec un compte", diff --git a/styles/global.css b/styles/global.css index ae67d0a..5e72eb6 100644 --- a/styles/global.css +++ b/styles/global.css @@ -43,3 +43,7 @@ body { scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color); z-index: 0; } + +.message-options { + @apply flex h-16 w-9 cursor-pointer items-center justify-center bg-gray-200 transition-colors hover:bg-gray-300 dark:bg-slate-900 hover:dark:bg-slate-800; +}