feat: added i18n.useTranslation in components (#362)

Co-authored-by: Dmitrii Zuev <zuevda@10.215.207.221-vpn.dhcp.yndx.net>

Author: Johudo

src/components/ChangelogDialog/ChangelogDialog.tsx

@@ -37,22 +37,26 @@ function getNextId() {
     return nextId++;
 }
 
-export function ChangelogDialog({
-    open,
-    title = i18n('title'),
-    fullListLink,
-    items,
-    disableBodyScrollLock = true,
-    disableHeightTransition = true,
-    disableOutsideClick,
-    onClose,
-    onStoryClick,
-    onLinkClick,
-    onRetryClick,
-    loading,
-    error,
-    className,
-}: ChangelogDialogProps) {
+export function ChangelogDialog(props: ChangelogDialogProps) {
+    const {t} = i18n.useTranslation();
+
+    const {
+        open,
+        title = t('title'),
+        fullListLink,
+        items,
+        disableBodyScrollLock = true,
+        disableHeightTransition = true,
+        disableOutsideClick,
+        onClose,
+        onStoryClick,
+        onLinkClick,
+        onRetryClick,
+        loading,
+        error,
+        className,
+    } = props;
+
     const idRef = React.useRef<number>();
     idRef.current = idRef.current || getNextId();
     const dialogCaptionId = `changelog-dialog-title-${idRef.current}`;
@@ -71,7 +75,7 @@ export function ChangelogDialog({
             {fullListLink ? (
                 <Dialog.Body key="full-list-link">
                     <Link href={fullListLink} target="_blank">
-                        <span>{i18n('link_full_list')}</span>
+                        <span>{t('link_full_list')}</span>
                         <span className={b('full-list-link-icon')}>
                             <Icon data={ArrowUpRightFromSquare} size={14} />
                         </span>
@@ -98,7 +102,7 @@ export function ChangelogDialog({
                             />
                         ))
                     ) : (
-                        <div className={b('empty-placeholder')}>{i18n('label_empty')}</div>
+                        <div className={b('empty-placeholder')}>{t('label_empty')}</div>
                     ))}
             </Dialog.Body>
         </Dialog>

src/components/ChangelogDialog/components/ErrorContainer/ErrorContainer.tsx

@@ -10,19 +10,21 @@ interface ErrorContainerProps {
 }
 
 export function ErrorContainer({onRetryClick, error}: ErrorContainerProps) {
+    const {t} = i18n.useTranslation();
+
     const {title, description} = React.useMemo(() => {
         return error && typeof error === 'object' ? error : {};
     }, [error]);
 
     return (
         <Alert
-            title={title || i18n('label_error-title')}
+            title={title || t('label_error-title')}
             message={description}
             theme={'danger'}
             actions={
                 onRetryClick && [
                     {
-                        text: i18n('button_retry'),
+                        text: t('button_retry'),
                         handler: onRetryClick,
                     },
                 ]

src/components/ChangelogDialog/components/Item/Item.tsx

@@ -34,6 +34,8 @@ const formatLangDisplay = {
 };
 
 export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
+    const {t} = i18n.useTranslation();
+
     const handleLinkClick = React.useCallback(() => {
         if (onLinkClick && data.link) {
             onLinkClick(data.link);
@@ -70,7 +72,7 @@ export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
                 {formattedDate ? <div className={b('date')}>{formattedDate}</div> : null}
                 {data.isNew ? (
                     <Label className={b('label-new')} theme="info">
-                        {i18n('label_new')}
+                        {t('label_new')}
                     </Label>
                 ) : null}
             </div>
@@ -95,7 +97,7 @@ export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
                         target={'_blank'}
                         onClick={handleLinkClick}
                     >
-                        {i18n('action_read-more')}
+                        {t('action_read-more')}
                     </Button>
                 ) : null}
                 {data.storyId && onStoryClick ? (
@@ -104,7 +106,7 @@ export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
                         view="outlined-action"
                         onClick={handleStoryClick}
                     >
-                        {i18n('button_view_story')}
+                        {t('button_view_story')}
                         <Icon data={CirclePlay} size={14} />
                     </Button>
                 ) : null}

src/components/FormRow/FormRow.tsx

@@ -19,6 +19,8 @@ const FormRowComponent = ({
     children,
     direction = 'row',
 }: FormRowProps) => {
+    const {t} = i18n.useTranslation();
+
     const LabelComponent = fieldId ? 'label' : 'span';
 
     return (
@@ -32,7 +34,7 @@ const FormRowComponent = ({
                              
                             <sup
                                 className={b('required-mark')}
-                                aria-label={i18n('label_required-field')}
+                                aria-label={t('label_required-field')}
                             >
                                 *
                             </sup>

src/components/Notifications/Notifications.tsx

@@ -15,6 +15,8 @@ import './Notifications.scss';
 const b = block('notifications');
 
 export const Notifications = React.memo(function Notifications(props: NotificationsProps) {
+    const {t} = i18n.useTranslation();
+
     let content: JSX.Element;
 
     const visibleNotificationsCount = props.notifications.filter((n) => !n.archived).length;
@@ -53,7 +55,7 @@ export const Notifications = React.memo(function Notifications(props: Notificati
         );
     }
 
-    const title = <div className={b('head-title')}>{props.title || i18n('title')}</div>;
+    const title = <div className={b('head-title')}>{props.title || t('title')}</div>;
 
     return (
         <div className={b()} data-qa={props.qa}>

src/components/Notifications/NotificationsEmptyState.tsx

@@ -15,11 +15,13 @@ const nothingFoundSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="172" hei
 type Props = {image?: React.ReactNode; title?: React.ReactNode; content?: React.ReactNode};
 
 export const NotificationsEmptyState = React.memo(function NotificationsEmptyState(props: Props) {
+    const {t} = i18n.useTranslation();
+
     return (
         <div className={b('empty')}>
             {props.image ? props.image : <Icon data={nothingFoundSvg} size={172} />}
             <div className={b('empty-message')}>
-                <div className={b('empty-title')}>{props.title || i18n('no-notifications')}</div>
+                <div className={b('empty-title')}>{props.title || t('no-notifications')}</div>
                 {props.content ? (
                     <div className={b('empty-message-content')}>{props.content}</div>
                 ) : null}

src/components/Notifications/NotificationsErrorState.tsx

@@ -15,11 +15,13 @@ const errorSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="174" height="17
 type Props = {image?: React.ReactNode; title?: React.ReactNode; content?: React.ReactNode};
 
 export const NotificationsErrorState = React.memo(function NotificationsEmptyState(props: Props) {
+    const {t} = i18n.useTranslation();
+
     return (
         <div className={b('empty')}>
             {props.image ? props.image : <Icon data={errorSvg} width="174" height="172" />}
             <div className={b('empty-message')}>
-                <div className={b('empty-title')}>{props.title || i18n('notifications-error')}</div>
+                <div className={b('empty-title')}>{props.title || t('notifications-error')}</div>
                 {props.content ? (
                     <div className={b('empty-message-content')}>{props.content}</div>
                 ) : null}

src/components/Reactions/Reactions.tsx

@@ -162,6 +162,8 @@ export function Reactions<AddReactionRef extends HTMLElement = HTMLButtonElement
     renderAddReaction,
     renderReactionsContent,
 }: ReactionsProps<AddReactionRef>) {
+    const {t} = i18n.useTranslation();
+
     const addReactionButtonRef = React.useRef<HTMLButtonElement>(null);
     const addReactionRef = React.useRef<AddReactionRef>(null);
 
@@ -243,7 +245,7 @@ export function Reactions<AddReactionRef extends HTMLElement = HTMLButtonElement
             <Button
                 ref={addReactionButtonRef}
                 size={size}
-                aria-label={i18n('add-reaction')}
+                aria-label={t('add-reaction')}
                 aria-expanded={palettePopupOpened}
                 aria-haspopup={true}
                 aria-controls={popupId}
@@ -258,7 +260,7 @@ export function Reactions<AddReactionRef extends HTMLElement = HTMLButtonElement
                 </Button.Icon>
             </Button>
         );
-    }, [readOnly, renderAddReaction, size, onTogglePalettePopup, palettePopupOpened]);
+    }, [readOnly, renderAddReaction, size, onTogglePalettePopup, palettePopupOpened, t]);
 
     const addReactionPopup = readOnly ? null : (
         <Popup

src/components/Stories/components/StoriesLayout/StoriesLayout.tsx

@@ -40,6 +40,8 @@ export const StoriesLayout = ({
     handleGotoNext,
     handleGotoPrevious,
 }: StoriesLayoutProps) => {
+    const {t} = i18n.useTranslation();
+
     const currentStory = items[storyIndex];
 
     return (
@@ -99,7 +101,7 @@ export const StoriesLayout = ({
                                 {currentStory.url && (
                                     <div className={b('story-link-block')}>
                                         <Link href={currentStory.url} target={'_blank'}>
-                                            {i18n('label_more')}
+                                            {t('label_more')}
                                         </Link>
                                     </div>
                                 )}