add names to conversation view and set header styles
Change-Id: Ic34b2cea754a5a82224a9fbf158b0126c7e44a5e
diff --git a/client/src/components/SendMessageForm.tsx b/client/src/components/SendMessageForm.tsx
index f57ea1b..7230dd0 100644
--- a/client/src/components/SendMessageForm.tsx
+++ b/client/src/components/SendMessageForm.tsx
@@ -15,10 +15,13 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Divider, InputBase } from '@mui/material';
+import { InputBase } from '@mui/material';
import { Stack } from '@mui/system';
-import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
+import { Account, ConversationMember } from 'jami-web-common';
+import { ChangeEvent, FormEvent, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { translateEnumeration, TranslateEnumerationOptions } from '../utils/translations';
import {
RecordVideoMessageButton,
RecordVoiceMessageButton,
@@ -28,11 +31,14 @@
} from './Button';
type SendMessageFormProps = {
+ account: Account;
+ members: ConversationMember[];
onSend: (message: string) => void;
};
export default function SendMessageForm(props: SendMessageFormProps) {
const [currentMessage, setCurrentMessage] = useState('');
+ const placeholder = usePlaceholder(props.account, props.members);
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -49,43 +55,56 @@
);
return (
- <Stack padding="30px 16px 0px 16px">
- <Divider
- sx={{
- bordeTop: '1px solid #E5E5E5',
- }}
- />
- <Stack
- component="form"
- onSubmit={handleSubmit}
- direction="row"
- alignItems="center"
- flexGrow={1}
- spacing="20px"
- padding="16px 0px"
- >
- <UploadFileButton />
- <RecordVoiceMessageButton />
- <RecordVideoMessageButton />
-
- <Stack flexGrow={1}>
- <InputBase
- placeholder="Write something nice"
- value={currentMessage}
- onChange={handleInputChange}
- sx={{
- fontSize: '15px',
- color: 'black',
- '& ::placeholder': {
- color: '#7E7E7E',
- opacity: 1,
- },
- }}
- />
- </Stack>
- <SelectEmojiButton onEmojiSelected={onEmojiSelected} />
- {currentMessage && <SendMessageButton type="submit" />}
+ <Stack component="form" onSubmit={handleSubmit} direction="row" alignItems="center" spacing="20px">
+ <UploadFileButton />
+ <RecordVoiceMessageButton />
+ <RecordVideoMessageButton />
+ <Stack flexGrow={1}>
+ <InputBase
+ placeholder={placeholder}
+ value={currentMessage}
+ onChange={handleInputChange}
+ sx={{
+ fontSize: '15px',
+ color: 'black',
+ '& ::placeholder': {
+ color: '#7E7E7E',
+ opacity: 1,
+ textOverflow: 'ellipsis',
+ },
+ }}
+ />
</Stack>
+ <SelectEmojiButton onEmojiSelected={onEmojiSelected} />
+ {currentMessage && <SendMessageButton type="submit" />}
</Stack>
);
}
+
+const usePlaceholder = (account: Account, members: ConversationMember[]) => {
+ const { t } = useTranslation();
+
+ return useMemo(() => {
+ const options: TranslateEnumerationOptions<ConversationMember> = {
+ elementPartialKey: 'member',
+ getElementValue: (member) => getMemberName(member),
+ translaters: [
+ () =>
+ // The user is chatting with themself
+ t('message_input_placeholder_one', { member0: account?.getDisplayName() }),
+ (interpolations) => t('message_input_placeholder_one', interpolations),
+ (interpolations) => t('message_input_placeholder_two', interpolations),
+ (interpolations) => t('message_input_placeholder_three', interpolations),
+ (interpolations) => t('message_input_placeholder_four', interpolations),
+ (interpolations) => t('message_input_placeholder_more', interpolations),
+ ],
+ };
+
+ return translateEnumeration<ConversationMember>(members, options);
+ }, [account, members, t]);
+};
+
+const getMemberName = (member: ConversationMember) => {
+ const contact = member.contact;
+ return contact.getDisplayName();
+};