Change language working partially

Not all translatinos are updated

src/components/Menu/Container.tsx

@@ -4,11 +4,24 @@ import { useTheme } from 'src/utils/styles/ThemeManager'
 
 import constants from 'src/utils/styles/constants'
 
-const MenuContainer: React.FC = ({ ...props }) => {
+export interface Props {
+  children: React.ReactNode
+  marginTop?: boolean
+}
+
+const MenuContainer: React.FC<Props> = ({ ...props }) => {
   const { theme } = useTheme()
 
   return (
-    <View style={[styles.base, { borderTopColor: theme.separator }]}>
+    <View
+      style={[
+        styles.base,
+        {
+          borderTopColor: theme.separator,
+          marginTop: props.marginTop ? constants.GLOBAL_PAGE_PADDING : 0
+        }
+      ]}
+    >
       {props.children}
     </View>
   )
@@ -17,7 +30,7 @@ const MenuContainer: React.FC = ({ ...props }) => {
 const styles = StyleSheet.create({
   base: {
     borderTopWidth: 1,
-    marginBottom: constants.SPACING_M
+    marginBottom: constants.GLOBAL_PAGE_PADDING
   }
 })
 

src/components/Menu/Item.tsx

@@ -1,61 +1,82 @@
 import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
 import { Feather } from '@expo/vector-icons'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
 import constants from 'src/utils/styles/constants'
+import { ColorDefinitions } from 'src/utils/styles/themes'
 
 export interface Props {
-  icon?: string
+  iconFront?: string
+  iconFrontColor?: ColorDefinitions
   title: string
-  navigateTo?: string
-  navigateToParams?: {}
+  content?: string
+  iconBack?: 'chevron-right' | 'check'
+  iconBackColor?: ColorDefinitions
+  onPress?: () => void
 }
 
-const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
+const Core: React.FC<Props> = ({
+  iconFront,
+  iconFrontColor,
+  title,
+  content,
+  iconBack,
+  iconBackColor
+}) => {
   const { theme } = useTheme()
+  iconFrontColor = iconFrontColor || 'primary'
+  iconBackColor = iconBackColor || 'secondary'
 
   return (
     <View style={styles.core}>
-      {icon && (
-        <Feather
-          name={icon}
-          size={constants.FONT_SIZE_M + 2}
-          style={styles.iconLeading}
-          color={theme.primary}
-        />
-      )}
-      <Text style={{ color: theme.primary, fontSize: constants.FONT_SIZE_M }}>
-        {title}
-      </Text>
-      {navigateTo && (
-        <Feather
-          name='chevron-right'
-          size={24}
-          color={theme.secondary}
-          style={styles.iconNavigation}
-        />
-      )}
+      <View style={styles.front}>
+        {iconFront && (
+          <Feather
+            name={iconFront}
+            size={constants.FONT_SIZE_M + 2}
+            color={theme[iconFrontColor]}
+            style={styles.iconFront}
+          />
+        )}
+        <Text style={[styles.text, { color: theme.primary }]} numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+      <View style={styles.back}>
+        {content && (
+          <Text
+            style={[styles.content, { color: theme.secondary }]}
+            numberOfLines={1}
+          >
+            {content}
+          </Text>
+        )}
+        {iconBack && (
+          <Feather
+            name={iconBack}
+            size={constants.FONT_SIZE_M + 2}
+            color={theme[iconBackColor]}
+            style={styles.iconBack}
+          />
+        )}
+      </View>
     </View>
   )
 }
 
 const MenuItem: React.FC<Props> = ({ ...props }) => {
   const { theme } = useTheme()
-  const navigation = useNavigation()
 
-  return props.navigateTo ? (
+  return props.onPress ? (
     <Pressable
       style={[styles.base, { borderBottomColor: theme.separator }]}
-      onPress={() => {
-        navigation.navigate(props.navigateTo!, props.navigateToParams)
-      }}
+      onPress={props.onPress}
     >
       <Core {...props} />
     </Pressable>
   ) : (
-    <View style={styles.base}>
+    <View style={[styles.base, { borderBottomColor: theme.separator }]}>
       <Core {...props} />
     </View>
   )
@@ -69,15 +90,31 @@ const styles = StyleSheet.create({
   core: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
     paddingLeft: constants.GLOBAL_PAGE_PADDING,
     paddingRight: constants.GLOBAL_PAGE_PADDING
   },
-  iconLeading: {
+  front: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  back: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  iconFront: {
     marginRight: 8
   },
-  iconNavigation: {
-    marginLeft: 'auto'
+  text: {
+    fontSize: constants.FONT_SIZE_M
+  },
+  content: {
+    fontSize: constants.FONT_SIZE_M
+  },
+  iconBack: {
+    marginLeft: 8
   }
 })
 

src/components/Timelines.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { Dimensions, FlatList, StyleSheet, Text, View } from 'react-native'
+import { Dimensions, FlatList, StyleSheet, View } from 'react-native'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { useSelector } from 'react-redux'
@@ -7,8 +7,11 @@ import { Feather } from '@expo/vector-icons'
 
 import Timeline from './Timelines/Timeline'
 import sharedScreens from 'src/screens/Shared/sharedScreens'
-import { getRemoteUrl, InstancesState } from 'src/utils/slices/instancesSlice'
-import { RootState, store } from 'src/store'
+import {
+  getLocalUrl,
+  getRemoteUrl,
+  InstancesState
+} from 'src/utils/slices/instancesSlice'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
 import getCurrentTab from 'src/utils/getCurrentTab'
@@ -42,15 +45,10 @@ export interface Props {
 const Timelines: React.FC<Props> = ({ name, content }) => {
   const navigation = useNavigation()
   const { theme } = useTheme()
-  const localRegistered = useSelector(
-    (state: RootState) => state.instances.local.url
-  )
-  const publicDomain = getRemoteUrl(store.getState())
+  const localRegistered = useSelector(getLocalUrl)
+  const publicDomain = useSelector(getRemoteUrl)
   const [segment, setSegment] = useState(0)
   const [renderHeader, setRenderHeader] = useState(false)
-  const [segmentManuallyTriggered, setSegmentManuallyTriggered] = useState(
-    false
-  )
 
   useEffect(() => {
     const nbr = setTimeout(() => setRenderHeader(true), 50)
@@ -60,8 +58,6 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
   const horizontalPaging = useRef<FlatList>(null!)
 
   const onChangeSegment = useCallback(({ nativeEvent }) => {
-    setSegmentManuallyTriggered(true)
-    setSegment(nativeEvent.selectedSegmentIndex)
     horizontalPaging.current.scrollToIndex({
       index: nativeEvent.selectedSegmentIndex
     })
@@ -90,13 +86,8 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
     },
     [localRegistered]
   )
-  const flOnMomentumScrollEnd = useCallback(
-    () => setSegmentManuallyTriggered(false),
-    []
-  )
   const flOnScroll = useCallback(
     ({ nativeEvent }) =>
-      !segmentManuallyTriggered &&
       setSegment(
         nativeEvent.contentOffset.x <= Dimensions.get('window').width / 2
           ? 0
@@ -114,12 +105,13 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
           ...(renderHeader &&
             localRegistered && {
               headerCenter: () => (
-                <SegmentedControl
-                  values={[content[0].title, content[1].title]}
-                  selectedIndex={segment}
-                  onChange={onChangeSegment}
-                  style={{ width: 150, height: 30 }}
-                />
+                <View style={styles.segmentsContainer}>
+                  <SegmentedControl
+                    values={[content[0].title, content[1].title]}
+                    selectedIndex={segment}
+                    onChange={onChangeSegment}
+                  />
+                </View>
               ),
               headerRight: () => (
                 <Feather
@@ -147,7 +139,6 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
               keyExtractor={flKeyExtrator}
               getItemLayout={flGetItemLayout}
               showsHorizontalScrollIndicator={false}
-              onMomentumScrollEnd={flOnMomentumScrollEnd}
             />
           )
         }}
@@ -159,6 +150,9 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
 }
 
 const styles = StyleSheet.create({
+  segmentsContainer: {
+    flexBasis: '60%'
+  },
   flatList: {
     width: Dimensions.get('window').width,
     height: '100%'

src/components/Timelines/Timeline/Shared/ActionsStatus.tsx

@@ -8,17 +8,15 @@ import {
   Text,
   View
 } from 'react-native'
-import Toast from 'react-native-toast-message'
 import { useMutation, useQueryCache } from 'react-query'
 import { Feather } from '@expo/vector-icons'
-import { findIndex } from 'lodash'
 
 import client from 'src/api/client'
 import { getLocalAccountId } from 'src/utils/slices/instancesSlice'
-import { store } from 'src/store'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import constants from 'src/utils/styles/constants'
 import { toast } from 'src/components/toast'
+import { useSelector } from 'react-redux'
 
 const fireMutation = async ({
   id,
@@ -87,7 +85,7 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
   const iconColorAction = (state: boolean) =>
     state ? theme.primary : theme.secondary
 
-  const localAccountId = getLocalAccountId(store.getState())
+  const localAccountId = useSelector(getLocalAccountId)
   const [bottomSheetVisible, setBottomSheetVisible] = useState(false)
 
   const queryCache = useQueryCache()

src/components/Timelines/Timeline/Shared/Avatar.tsx

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: 8
+    borderRadius: 6
   }
 })
 

src/components/Timelines/Timeline/Shared/HeaderDefault.tsx

@@ -2,19 +2,18 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 import { Feather } from '@expo/vector-icons'
-import Toast from 'react-native-toast-message'
 import { useMutation, useQueryCache } from 'react-query'
 
 import Emojis from './Emojis'
 import relativeTime from 'src/utils/relativeTime'
 import client from 'src/api/client'
 import { getLocalAccountId, getLocalUrl } from 'src/utils/slices/instancesSlice'
-import { store } from 'src/store'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import constants from 'src/utils/styles/constants'
 import BottomSheet from 'src/components/BottomSheet'
 import BottomSheetRow from 'src/components/BottomSheet/Row'
 import { toast } from 'src/components/toast'
+import { useSelector } from 'react-redux'
 
 const fireMutation = async ({
   id,
@@ -115,8 +114,8 @@ const HeaderDefault: React.FC<Props> = ({
   const { theme } = useTheme()
 
   const navigation = useNavigation()
-  const localAccountId = getLocalAccountId(store.getState())
-  const localDomain = getLocalUrl(store.getState())
+  const localAccountId = useSelector(getLocalAccountId)
+  const localDomain = useSelector(getLocalUrl)
   const [since, setSince] = useState(relativeTime(created_at))
   const [modalVisible, setModalVisible] = useState(false)