translation not change on search & post (#1283)

* myr-2110 : translation not change on search & post

* myr-000: change russian dropdown into cyrillic

* myr-000 : add todo improvement

Co-authored-by: kriptonhaz <31912747+kriptonhaz@users.noreply.github.com>

src/components/Richtext/RichTextContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useSelector} from 'react-redux';
 
 import dynamic from 'next/dynamic';
@@ -12,6 +12,7 @@ import {useQueryParams} from 'src/hooks/use-query-params.hooks';
 import {TimelineType} from 'src/interfaces/timeline';
 import i18n from 'src/locale';
 import {RootState} from 'src/reducers';
+import {ConfigState} from 'src/reducers/config/reducer';
 import {UserState} from 'src/reducers/user/reducer';
 
 const PostCreateContainer = dynamic(() => import('../PostCreate/PostCreate.container'), {
@@ -25,10 +26,11 @@ export const RichTextContainer: React.FC = () => {
   const {query} = useQueryParams();
 
   const {user, alias, anonymous} = useSelector<RootState, UserState>(state => state.userState);
-
+  const {settings} = useSelector<RootState, ConfigState>(state => state.configState);
   const [createPostOpened, setCreatePostOpened] = useState(false);
   const [openPromptDrawer, setOpenPromptDrawer] = useState(false);
 
+  const [textPlaceholder, setTextPlaceholder] = useState('');
   const handleOpenCreatePost = () => {
     if (anonymous) {
       setOpenPromptDrawer(true);
@@ -49,6 +51,10 @@ export const RichTextContainer: React.FC = () => {
   const handleCancel = () => {
     setOpenPromptDrawer(false);
   };
+  //TODO: to be improved
+  useEffect(() => {
+    setTextPlaceholder(i18n.t('Home.RichText.Placeholder'));
+  }, [settings.language]);
 
   return (
     <div className={style.box}>
@@ -57,7 +63,7 @@ export const RichTextContainer: React.FC = () => {
         onOpenCreatePost={handleOpenCreatePost}
         alias={alias}
         name={user?.name}
-        placeholder={i18n.t('Home.RichText.Placeholder')}
+        placeholder={textPlaceholder}
       />
       <PromptComponent
         title={'Create or Import Posts'}

src/components/Settings/default.ts

@@ -25,6 +25,6 @@ export const settingLanguageOptions: MenuOptions<LanguageSettingType>[] = [
   },
   {
     id: 'ru',
-    title: 'Russian',
+    title: 'русский язык',
   },
 ];

src/components/atoms/Search/SearchBox.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
 
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
@@ -10,21 +11,22 @@ import {SearchIcon} from '../Icons';
 
 import {debounce} from 'lodash';
 import i18n from 'src/locale';
+import {RootState} from 'src/reducers';
+import {ConfigState} from 'src/reducers/config/reducer';
 
 const SearchBox: React.FC<SearchBoxProps> = ({
   color = SearchBoxColor.PRIMARY,
   ariaLabel = 'search-box',
-  placeholder = i18n.t('Home.Search.Placeholder'),
   outlined = false,
   onSubmit,
   iconPosition = 'start',
   hidden = false,
   ...props
 }) => {
   const classes = useStyles({outlined, hidden});
-
+  const {settings} = useSelector<RootState, ConfigState>(state => state.configState);
   const [input, setInput] = useState('');
-
+  const [textPlaceholder, setTextPlaceholder] = useState('');
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInput(event.target.value);
   };
@@ -51,6 +53,10 @@ const SearchBox: React.FC<SearchBoxProps> = ({
     }
   };
 
+  useEffect(() => {
+    setTextPlaceholder(i18n.t('Home.Search.Placeholder'));
+  }, [settings.language]);
+
   return (
     <Grid
       container
@@ -66,7 +72,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({
         className={classes.input}
         value={input}
         onChange={handleChange}
-        placeholder={placeholder}
+        placeholder={textPlaceholder}
         inputProps={{'aria-label': ariaLabel}}
         {...props}
       />