fix: add i18n keys and fix require changes

Signed-off-by: clegirar <clemntgirard@gmail.com>

js/packages/components/dropdowns/members/AddConversationBoosterButton.priv.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '@ui-kitten/components'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import beapi from '@berty/api'
@@ -13,14 +14,18 @@ import { MemberTransport } from './MemberTransport.priv'
 const AddConversationBoosterButton: React.FC = () => {
 	const colors = useThemeColor()
 	const { padding, margin } = useStyles()
+	const { t } = useTranslation()
+
 	return (
 		<TouchableOpacity style={[padding.medium, styles.container]}>
 			<View style={[styles.content]}>
 				<MemberTransport
 					memberStatus={beapi.protocol.GroupDeviceStatus.Type.TypePeerConnected}
 					memberUserType='replication'
 				/>
-				<UnifiedText style={[margin.left.medium]}>Add a conversation booster</UnifiedText>
+				<UnifiedText style={[margin.left.medium]}>
+					{t('chat.multi-member-settings.members-dropdown.conversation-booster')}
+				</UnifiedText>
 			</View>
 			<Icon name='arrow-ios-forward' width={20} height={20} fill={colors['main-text']} />
 		</TouchableOpacity>

js/packages/components/dropdowns/members/MemberName.priv.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '@ui-kitten/components'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
 
 import { UnifiedText } from '@berty/components/shared-components/UnifiedText'
@@ -13,15 +14,16 @@ interface MemberNameProps extends IMemberUserTypes {
 
 const MemberUserTypes: React.FC<IMemberUserTypes> = ({ memberUserType = 'user' }) => {
 	const { margin, text } = useStyles()
+	const { t } = useTranslation()
 
 	let value, icon
 	switch (memberUserType) {
 		case 'replication':
-			value = 'Replication node'
+			value = t('chat.multi-member-settings.members-dropdown.replication-type')
 			icon = 'server'
 			break
 		case 'user':
-			value = 'User device'
+			value = t('chat.multi-member-settings.members-dropdown.user-type')
 			icon = 'message-circle'
 			break
 	}

js/packages/components/dropdowns/members/MembersDropdown.tsx

@@ -35,10 +35,10 @@ const MemberItem: React.FC<MemberItemProps> = ({ onPress, convPK, item }) => {
 
 	React.useEffect(() => {
 		const f = async () => {
-			const _peer = await dispatch(
+			const peerFromMemberPK = await dispatch(
 				getPeerFromMemberPK({ memberPK: item.publicKey, convPK: item.conversationPublicKey }),
 			)
-			setPeer(_peer.payload as PeerNetworkStatus)
+			setPeer(peerFromMemberPK.payload as PeerNetworkStatus)
 		}
 
 		f()
@@ -67,13 +67,12 @@ export const MembersDropdown: React.FC<MembersDropdownProps> = props => {
 	const [value, setValue] = React.useState<string>('')
 
 	const lowSearchValue = value.toLowerCase()
-	const searchCheck = React.useCallback(
-		searchIn => searchIn.toLowerCase().includes(lowSearchValue),
-		[lowSearchValue],
-	)
 	const searchMembers = React.useMemo(
-		() => (value.length ? pickBy(props.items, val => searchCheck(val.displayName)) : props.items),
-		[props.items, searchCheck, value],
+		() =>
+			value.length
+				? pickBy(props.items, val => val.displayName?.toLowerCase().includes(lowSearchValue))
+				: props.items,
+		[lowSearchValue, props.items, value.length],
 	)
 
 	return (

js/packages/components/dropdowns/members/MembersDropdownHeader.priv.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 
 import { SmallClearableInput } from '@berty/components'
@@ -14,13 +15,14 @@ export const MembersDropdownHeader: React.FC<MembersDropdownHeaderProps> = ({
 	setInputValue,
 }) => {
 	const { margin } = useStyles()
+	const { t } = useTranslation()
 
 	return (
 		<View style={[margin.horizontal.medium]}>
 			<SmallClearableInput
 				value={inputValue}
 				onChangeText={setInputValue}
-				placeholder='Search member'
+				placeholder={t('chat.multi-member-settings.members-dropdown.search-placeholder')}
 				iconName='search-outline'
 			/>
 		</View>

js/packages/i18n/locale/en-US/messages.json

@@ -413,9 +413,15 @@
 			"title": "Conversation settings",
 			"media-button": "Medias, links & docs",
 			"members-button": {
-				"title": "Network Status Members ({{count}})"
+				"title": "Members Network Status ({{count}})"
 			},
 			"add-member-button": "Add member",
+			"members-dropdown": {
+				"search-placeholder": "Search member",
+				"conversation-booster": "Add a conversation booster",
+				"replication-type": "Replication node",
+				"user-type": "User device"
+			},
 			"invite-button": "Invite by link",
 			"save-button": "Save conversation on server"
 		},