diff --git a/src/components/Richtext/RichTextContainer.tsx b/src/components/Richtext/RichTextContainer.tsx index efc69297b..d63f50ec1 100644 --- a/src/components/Richtext/RichTextContainer.tsx +++ b/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(state => state.userState); - + const {settings} = useSelector(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 (
@@ -57,7 +63,7 @@ export const RichTextContainer: React.FC = () => { onOpenCreatePost={handleOpenCreatePost} alias={alias} name={user?.name} - placeholder={i18n.t('Home.RichText.Placeholder')} + placeholder={textPlaceholder} /> [] = [ }, { id: 'ru', - title: 'Russian', + title: 'русский язык', }, ]; diff --git a/src/components/atoms/Search/SearchBox.tsx b/src/components/atoms/Search/SearchBox.tsx index f2419dd98..33a12ec43 100644 --- a/src/components/atoms/Search/SearchBox.tsx +++ b/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,11 +11,12 @@ 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 = ({ color = SearchBoxColor.PRIMARY, ariaLabel = 'search-box', - placeholder = i18n.t('Home.Search.Placeholder'), outlined = false, onSubmit, iconPosition = 'start', @@ -22,9 +24,9 @@ const SearchBox: React.FC = ({ ...props }) => { const classes = useStyles({outlined, hidden}); - + const {settings} = useSelector(state => state.configState); const [input, setInput] = useState(''); - + const [textPlaceholder, setTextPlaceholder] = useState(''); const handleChange = (event: React.ChangeEvent) => { setInput(event.target.value); }; @@ -51,6 +53,10 @@ const SearchBox: React.FC = ({ } }; + useEffect(() => { + setTextPlaceholder(i18n.t('Home.Search.Placeholder')); + }, [settings.language]); + return ( = ({ className={classes.input} value={input} onChange={handleChange} - placeholder={placeholder} + placeholder={textPlaceholder} inputProps={{'aria-label': ariaLabel}} {...props} />