Fix translation files and CallPending page
Remove i18next-parser from pre-push script because it was not
working properly.
Fix some translation entries.
Make some ALL_CAPS entries Sentence case.
GitLab: #149
Change-Id: I9d80933eefade3f04d9a81aa07bbb1b7a4503fe3
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index dbaef70..594a1cc 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -18,7 +18,7 @@
import { styled } from '@mui/material/styles';
import React, { useContext, useMemo } from 'react';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
import { WebRTCContext } from '../contexts/WebRTCProvider';
import { ExpandableButton, ExpandableButtonProps, ToggleIconButton } from './Button';
@@ -57,6 +57,7 @@
const ColoredCallButton = styled(
({
+ buttonColor,
...props
}: ExpandableButtonProps & {
buttonColor: ColoredCallButtonColor;
@@ -102,25 +103,26 @@
};
export const CallingScreenShareButton = (props: ExpandableButtonProps) => {
+ const { t } = useTranslation();
return (
<CallButton
aria-label="screen share"
Icon={ScreenShareArrowIcon}
expandMenuOptions={[
{
- description: <Trans i18nKey="share_screen" />,
+ description: t('share_screen'),
icon: <ScreenShareRegularIcon />,
},
{
- description: <Trans i18nKey="share_window" />,
+ description: t('share_window'),
icon: <WindowIcon />,
},
{
- description: <Trans i18nKey="share_screen_area" />,
+ description: t('share_screen_area'),
icon: <ScreenShareScreenAreaIcon />,
},
{
- description: <Trans i18nKey="share_file" />,
+ description: t('share_file'),
icon: <FileIcon />,
},
]}
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 91dd0f1..2f07076 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -29,7 +29,7 @@
import { Conversation } from 'jami-web-common';
import { QRCodeCanvas } from 'qrcode.react';
import { MouseEvent, useState } from 'react';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
import Modal from 'react-modal';
import { useNavigate, useParams } from 'react-router-dom';
@@ -95,6 +95,7 @@
const pathId = conversationId || contactId;
const isSelected = conversation.getDisplayUri() === pathId;
const navigate = useNavigate();
+ const { t } = useTranslation();
const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
@@ -161,9 +162,7 @@
<ListItemIcon>
<MessageIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_message" />
- </ListItemText>
+ <ListItemText>{t('conversation_message')}</ListItemText>
</MenuItem>
<MenuItem
onClick={() => {
@@ -173,9 +172,7 @@
<ListItemIcon>
<AudioCallIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_start_audiocall" />
- </ListItemText>
+ <ListItemText>{t('conversation_start_audiocall')}</ListItemText>
</MenuItem>
<MenuItem
@@ -186,9 +183,7 @@
<ListItemIcon>
<VideoCallIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_start_videocall" />
- </ListItemText>
+ <ListItemText>{t('conversation_start_videocall')}</ListItemText>
</MenuItem>
{isSelected && (
@@ -201,9 +196,7 @@
<ListItemIcon>
<CancelIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_close" />
- </ListItemText>
+ <ListItemText>{t('conversation_close')}</ListItemText>
</MenuItem>
)}
@@ -218,9 +211,7 @@
<ListItemIcon>
<ContactDetailsIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_details" />
- </ListItemText>
+ <ListItemText>{t('conversation_details')}</ListItemText>
</MenuItem>
<MenuItem
@@ -233,9 +224,7 @@
<ListItemIcon>
<BlockContactIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_block_contact" />
- </ListItemText>
+ <ListItemText>{t('conversation_block_contact')}</ListItemText>
</MenuItem>
<MenuItem
@@ -248,9 +237,7 @@
<ListItemIcon>
<RemoveContactIcon style={{ color: iconColor }} />
</ListItemIcon>
- <ListItemText>
- <Trans i18nKey="conversation_delete_contact" />
- </ListItemText>
+ <ListItemText>{t('conversation_delete_contact')}</ListItemText>
</MenuItem>
</Menu>
</div>
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 6276fa4..8373601 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -17,11 +17,13 @@
*/
import { Box, Button, Menu, MenuItem } from '@mui/material';
import { MouseEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useAuthContext } from '../contexts/AuthProvider';
export default function Header() {
+ const { t } = useTranslation();
const { logout } = useAuthContext();
const navigate = useNavigate();
@@ -39,7 +41,7 @@
<Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={goToContacts}>Contacts</MenuItem>
<MenuItem onClick={() => navigate('/settings')}>Account settings</MenuItem>
- <MenuItem onClick={logout}>Log out</MenuItem>
+ <MenuItem onClick={logout}>{t('logout')}</MenuItem>
</Menu>
</Box>
);
diff --git a/client/src/components/Input.tsx b/client/src/components/Input.tsx
index 40d55b6..b21b2d2 100644
--- a/client/src/components/Input.tsx
+++ b/client/src/components/Input.tsx
@@ -53,7 +53,7 @@
export type PasswordStatus = StrengthValueCode | 'registration_failed';
export type InputProps<StatusType extends NameStatus | PasswordStatus> = TextFieldProps & {
- status: StatusType;
+ status?: StatusType;
infoButtonProps?: IconButtonProps;
success?: boolean;
tooltipTitle: string;
@@ -63,7 +63,7 @@
infoButtonProps,
onChange: _onChange,
success,
- status,
+ status = 'default',
tooltipTitle,
...props
}: InputProps<NameStatus>) => {
@@ -142,7 +142,7 @@
onChange: _onChange,
success,
tooltipTitle,
- status,
+ status = 'default',
...props
}: InputProps<PasswordStatus>) => {
const { t } = useTranslation();