Restructure some files

2025-06-05 22:19:13 +02:00 · 2020-12-29 16:19:04 +01:00
parent b92a01e2a4
commit e841409523
18 changed files with 331 additions and 285 deletions
--- a/src/Index.tsx
+++ b/src/Index.tsx
@@ -1,37 +1,30 @@
-import 'react-native-gesture-handler'
+import client from '@api/client'
+import { Feather } from '@expo/vector-icons'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import {
  NavigationContainer,
  NavigationContainerRef
 } from '@react-navigation/native'
-
-import * as Analytics from 'expo-firebase-analytics'
-import React, { useEffect, useRef, useState } from 'react'
-import { StatusBar } from 'react-native'
-import Toast from 'react-native-toast-message'
-import { Feather } from '@expo/vector-icons'
-
 import ScreenLocal from '@screens/Local'
 import ScreenPublic from '@screens/Public'
 import ScreenNotifications from '@screens/Notifications'
 import ScreenMe from '@screens/Me'
-
-import { themes } from '@utils/styles/themes'
-import { useTheme } from '@utils/styles/ThemeManager'
-import getCurrentTab from '@utils/getCurrentTab'
-import { toast, toastConfig } from '@components/toast'
-import { useTranslation } from 'react-i18next'
-import { useDispatch, useSelector } from 'react-redux'
+import { timelineFetch } from '@utils/fetches/timelineFetch'
 import {
  getLocalNotification,
  getLocalUrl,
  updateLocalAccountPreferences,
  updateNotification
 } from '@utils/slices/instancesSlice'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { themes } from '@utils/styles/themes'
+import { toast, toastConfig } from '@components/toast'
+import * as Analytics from 'expo-firebase-analytics'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { StatusBar } from 'react-native'
+import Toast from 'react-native-toast-message'
+import { useDispatch, useSelector } from 'react-redux'
 import { useInfiniteQuery } from 'react-query'
-import client from './api/client'
-import { timelineFetch } from './utils/fetches/timelineFetch'
-import { useNetInfo } from '@react-native-community/netinfo'

 const Tab = createBottomTabNavigator<RootStackParamList>()

@@ -50,25 +43,27 @@ export interface Props {
 const Index: React.FC<Props> = ({ localCorrupt }) => {
  const dispatch = useDispatch()
  const localInstance = useSelector(getLocalUrl)
-  const { i18n } = useTranslation()
  const { mode, theme } = useTheme()
  enum barStyle {
    light = 'dark-content',
    dark = 'light-content'
  }

-  const isConnected = useNetInfo().isConnected
-  const [firstRender, setFirstRender] = useState(false)
-  useEffect(() => {
-    if (firstRender) {
-      // bug in netInfo on first render as false
-      if (isConnected !== false) {
-        toast({ type: 'error', content: '手机🈚️网络', autoHide: false })
-      }
-    } else {
-      setFirstRender(true)
-    }
-  }, [isConnected, firstRender])
+  const routeNameRef = useRef<string | undefined>()
+  const navigationRef = useRef<NavigationContainerRef>(null)
+
+  // const isConnected = useNetInfo().isConnected
+  // const [firstRender, setFirstRender] = useState(false)
+  // useEffect(() => {
+  //   if (firstRender) {
+  //     // bug in netInfo on first render as false
+  //     if (isConnected !== false) {
+  //       toast({ type: 'error', content: '手机🈚️网络', autoHide: false })
+  //     }
+  //   } else {
+  //     setFirstRender(true)
+  //   }
+  // }, [isConnected, firstRender])

  // On launch display login credentials corrupt information
  useEffect(() => {
@@ -84,8 +79,8 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
  }, [localCorrupt])

  // On launch check if there is any unread announcements
-  const navigationRef = useRef<NavigationContainerRef>(null)
  useEffect(() => {
+    console.log('Checking announcements')
    localInstance &&
      client({
        method: 'get',
@@ -99,7 +94,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
            })
          }
        })
-        .catch(() => null)
+        .catch(() => {})
  }, [])

  // On launch check if there is any unread noficiations
@@ -145,104 +140,149 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
    }
  }, [])

+  // Callbacks
+  const navigationContainerOnReady = useCallback(
+    () =>
+      (routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name),
+    []
+  )
+  const navigationContainerOnStateChange = useCallback(() => {
+    const previousRouteName = routeNameRef.current
+    const currentRouteName = navigationRef.current?.getCurrentRoute()?.name
+
+    if (previousRouteName !== currentRouteName) {
+      Analytics.setCurrentScreen(currentRouteName)
+    }
+
+    routeNameRef.current = currentRouteName
+  }, [])
+  const tabNavigatorScreenOptions = useCallback(
+    ({ route }) => ({
+      tabBarIcon: ({
+        focused,
+        color,
+        size
+      }: {
+        focused: boolean
+        color: string
+        size: number
+      }) => {
+        let name: any
+        let updateColor: string = color
+        switch (route.name) {
+          case 'Screen-Local':
+            name = 'home'
+            break
+          case 'Screen-Public':
+            name = 'globe'
+            !focused && (updateColor = theme.secondary)
+            break
+          case 'Screen-Post':
+            name = 'plus'
+            break
+          case 'Screen-Notifications':
+            name = 'bell'
+            break
+          case 'Screen-Me':
+            name = focused ? 'meh' : 'smile'
+            !focused && (updateColor = theme.secondary)
+            break
+          default:
+            name = 'alert-octagon'
+            break
+        }
+        return <Feather name={name} size={size} color={updateColor} />
+      }
+    }),
+    []
+  )
+  const tabNavigatorTabBarOptions = useMemo(
+    () => ({
+      activeTintColor: theme.primary,
+      inactiveTintColor: localInstance ? theme.secondary : theme.disabled,
+      showLabel: false
+    }),
+    []
+  )
+  const tabScreenLocalListeners = useCallback(
+    () => ({
+      tabPress: (e: any) => {
+        if (!localInstance) {
+          e.preventDefault()
+        }
+      }
+    }),
+    []
+  )
+  const tabScreenComposeListeners = useCallback(
+    ({ navigation }) => ({
+      tabPress: (e: any) => {
+        e.preventDefault()
+        if (localInstance) {
+          navigation.navigate('Screen-Shared-Compose')
+        }
+      }
+    }),
+    []
+  )
+  const tabScreenComposeComponent = useCallback(() => null, [])
+  const tabScreenNotificationsListeners = useCallback(
+    () => ({
+      tabPress: (e: any) => {
+        if (!localInstance) {
+          e.preventDefault()
+        }
+      }
+    }),
+    []
+  )
+  const tabScreenNotificationsOptions = useMemo(
+    () => ({
+      tabBarBadge: prevNotification && prevNotification.unread ? '' : undefined,
+      tabBarBadgeStyle: {
+        transform: [{ scale: 0.5 }],
+        backgroundColor: theme.red
+      }
+    }),
+    []
+  )
+
  return (
    <>
      <StatusBar barStyle={barStyle[mode]} />
      <NavigationContainer
        ref={navigationRef}
        theme={themes[mode]}
-        key={i18n.language}
-        onStateChange={state => {
-          Analytics.setCurrentScreen(state?.routes[state.index].name)
-        }}
+        // key={i18n.language}
+        onReady={navigationContainerOnReady}
+        onStateChange={navigationContainerOnStateChange}
      >
        <Tab.Navigator
          initialRouteName={localInstance ? 'Screen-Local' : 'Screen-Public'}
-          screenOptions={({ route }) => ({
-            tabBarIcon: ({ focused, color, size }) => {
-              let name: any
-              let updateColor: string = color
-              switch (route.name) {
-                case 'Screen-Local':
-                  name = 'home'
-                  break
-                case 'Screen-Public':
-                  name = 'globe'
-                  !focused && (updateColor = theme.secondary)
-                  break
-                case 'Screen-Post':
-                  name = 'plus'
-                  break
-                case 'Screen-Notifications':
-                  name = 'bell'
-                  break
-                case 'Screen-Me':
-                  name = focused ? 'meh' : 'smile'
-                  !focused && (updateColor = theme.secondary)
-                  break
-                default:
-                  name = 'alert-octagon'
-                  break
-              }
-              return <Feather name={name} size={size} color={updateColor} />
-            }
-          })}
-          tabBarOptions={{
-            activeTintColor: theme.primary,
-            inactiveTintColor: localInstance ? theme.secondary : theme.disabled,
-            showLabel: false
-          }}
+          screenOptions={tabNavigatorScreenOptions}
+          tabBarOptions={tabNavigatorTabBarOptions}
        >
          <Tab.Screen
            name='Screen-Local'
            component={ScreenLocal}
-            listeners={({ navigation }) => ({
-              tabPress: e => {
-                if (!localInstance) {
-                  e.preventDefault()
-                }
-              }
-            })}
+            listeners={tabScreenLocalListeners}
          />
          <Tab.Screen name='Screen-Public' component={ScreenPublic} />
          <Tab.Screen
            name='Screen-Post'
-            listeners={({ navigation }) => ({
-              tabPress: e => {
-                e.preventDefault()
-                if (localInstance) {
-                  navigation.navigate(getCurrentTab(navigation), {
-                    screen: 'Screen-Shared-Compose'
-                  })
-                }
-              }
-            })}
-          >
-            {() => null}
-          </Tab.Screen>
+            component={tabScreenComposeComponent}
+            listeners={tabScreenComposeListeners}
+          />
          <Tab.Screen
            name='Screen-Notifications'
            component={ScreenNotifications}
-            options={{
-              tabBarBadge:
-                prevNotification && prevNotification.unread ? '' : undefined,
-              tabBarBadgeStyle: {
-                transform: [{ scale: 0.5 }],
-                backgroundColor: theme.red
-              }
-            }}
-            listeners={() => ({
-              tabPress: e => {
-                if (!localInstance) {
-                  e.preventDefault()
-                }
-              }
-            })}
+            listeners={tabScreenNotificationsListeners}
+            options={tabScreenNotificationsOptions}
          />
          <Tab.Screen name='Screen-Me' component={ScreenMe} />
        </Tab.Navigator>

-        <Toast ref={(ref: any) => Toast.setRef(ref)} config={toastConfig} />
+        <Toast ref={Toast.setRef} config={toastConfig} />
      </NavigationContainer>
    </>
  )
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@@ -3,7 +3,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'

 export interface Props {
@@ -11,8 +11,13 @@ export interface Props {
  iconFrontColor?: ColorDefinitions

  title: string
+  description?: string
  content?: string

+  switchValue?: boolean
+  switchDisabled?: boolean
+  switchOnValueChange?: () => void
+
  iconBack?: 'chevron-right' | 'check'
  iconBackColor?: ColorDefinitions

@@ -24,7 +29,11 @@ const MenuRow: React.FC<Props> = ({
  iconFront,
  iconFrontColor = 'primary',
  title,
+  description,
  content,
+  switchValue,
+  switchDisabled,
+  switchOnValueChange,
  iconBack,
  iconBackColor = 'secondary',
  loading = false,
@@ -61,45 +70,59 @@ const MenuRow: React.FC<Props> = ({
              style={styles.iconFront}
            />
          )}
-          <Text
-            style={[styles.text, { color: theme.primary }]}
-            numberOfLines={1}
-          >
-            {title}
-          </Text>
-        </View>
-        {(content || iconBack) && (
-          <View style={styles.back}>
-            {content && content.length ? (
-              <>
-                <Text
-                  style={[
-                    styles.content,
-                    {
-                      color: theme.secondary,
-                      opacity: !iconBack && loading ? 0 : 1
-                    }
-                  ]}
-                  numberOfLines={1}
-                >
-                  {content}
-                </Text>
-                {loading && !iconBack && loadingSpinkit}
-              </>
+          <View style={styles.main}>
+            <Text
+              style={[styles.title, { color: theme.primary }]}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            {description ? (
+              <Text style={[styles.description, { color: theme.secondary }]}>
+                {description}
+              </Text>
            ) : null}
-            {iconBack && (
-              <>
-                <Feather
-                  name={iconBack}
-                  size={StyleConstants.Font.Size.M + 2}
-                  color={theme[iconBackColor]}
-                  style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
-                />
-                {loading && loadingSpinkit}
-              </>
-            )}
          </View>
-        )}
+        </View>
+
+        <View style={styles.back}>
+          {content && content.length ? (
+            <>
+              <Text
+                style={[
+                  styles.content,
+                  {
+                    color: theme.secondary,
+                    opacity: !iconBack && loading ? 0 : 1
+                  }
+                ]}
+                numberOfLines={1}
+              >
+                {content}
+              </Text>
+              {loading && !iconBack && loadingSpinkit}
+            </>
+          ) : null}
+          {switchValue !== undefined ? (
+            <Switch
+              value={switchValue}
+              onValueChange={switchOnValueChange}
+              disabled={switchDisabled}
+              trackColor={{ true: theme.blue, false: theme.disabled }}
+            />
+          ) : null}
+          {iconBack ? (
+            <>
+              <Feather
+                name={iconBack}
+                size={StyleConstants.Font.Size.M + 2}
+                color={theme[iconBackColor]}
+                style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
+              />
+              {loading && loadingSpinkit}
+            </>
+          ) : null}
+        </View>
      </View>
    </Pressable>
  )
@@ -131,10 +154,16 @@ const styles = StyleSheet.create({
  iconFront: {
    marginRight: 8
  },
-  text: {
-    flex: 1,
+  main: {
+    flex: 1
+  },
+  title: {
    ...StyleConstants.FontStyle.M
  },
+  description: {
+    ...StyleConstants.FontStyle.S,
+    marginTop: StyleConstants.Spacing.XS
+  },
  content: {
    ...StyleConstants.FontStyle.M
  },
--- a/src/components/ParseContent.tsx
+++ b/src/components/ParseContent.tsx
@@ -76,6 +76,7 @@ const renderNode = ({
      }
    } else {
      const domain = href.split(new RegExp(/:\/\/(.[^\/]+)/))
+      // Need example here
      const content = node.children && node.children[0].data
      const shouldBeTag =
        tags && tags.filter(tag => `#${tag.name}` === content).length > 0
--- a/src/components/Timelines.tsx
+++ b/src/components/Timelines.tsx
@@ -9,7 +9,6 @@ import sharedScreens from '@screens/Shared/sharedScreens'
 import { getLocalUrl, getRemoteUrl } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
-import getCurrentTab from '@utils/getCurrentTab'
 import { HeaderRight } from './Header'
 import { TabView } from 'react-native-tab-view'

@@ -28,9 +27,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
  const [segment, setSegment] = useState(0)

  const onPressSearch = useCallback(() => {
-    navigation.navigate(getCurrentTab(navigation), {
-      screen: 'Screen-Shared-Search'
-    })
+    navigation.navigate('Screen-Shared-Search')
  }, [])

  const routes = content
--- a/src/components/Timelines/Timeline/Shared/Actions.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actions.tsx
@@ -8,7 +8,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { toast } from '@components/toast'
 import { StyleConstants } from '@utils/styles/constants'
 import { useNavigation } from '@react-navigation/native'
-import getCurrentTab from '@utils/getCurrentTab'
 import { findIndex } from 'lodash'
 import { TimelineData } from '../../Timeline'

@@ -124,13 +123,10 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {

  const onPressReply = useCallback(
    () =>
-      navigation.navigate(getCurrentTab(navigation), {
-        screen: 'Screen-Shared-Compose',
-        params: {
-          type: 'reply',
-          incomingStatus: status,
-          visibilityLock: status.visibility === 'direct'
-        }
+      navigation.navigate('Screen-Shared-Compose', {
+        type: 'reply',
+        incomingStatus: status,
+        visibilityLock: status.visibility === 'direct'
      }),
    []
  )
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx
@@ -5,7 +5,6 @@ import { useMutation, useQueryClient } from 'react-query'
 import client from '@api/client'
 import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
 import { toast } from '@components/toast'
-import getCurrentTab from '@utils/getCurrentTab'
 import { TimelineData } from '@root/components/Timelines/Timeline'
 import { findIndex } from 'lodash'

@@ -155,9 +154,9 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
                    .then(res => {
                      queryClient.invalidateQueries(queryKey)
                      setBottomSheetVisible(false)
-                      navigation.navigate(getCurrentTab(navigation), {
-                        screen: 'Screen-Shared-Compose',
-                        params: { type: 'edit', incomingStatus: res.body }
+                      navigation.navigate('Screen-Shared-Compose', {
+                        type: 'edit',
+                        incomingStatus: res.body
                      })
                    })
                    .catch(() => {
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -63,7 +63,7 @@ const ToastBase = ({ config }: { config: Config }) => {
    <SafeAreaView
      style={[
        styles.base,
-        { backgroundColor: theme.background, shadowColor: theme.primary }
+        { backgroundColor: theme.background, borderBottomColor: theme.primary }
      ]}
    >
      <View style={styles.container}>
@@ -97,15 +97,14 @@ const toastConfig = {
 const styles = StyleSheet.create({
  base: {
    width: '100%',
-    shadowOpacity: 1,
-    shadowRadius: 6
+    borderBottomWidth: 1
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
-    padding: StyleConstants.Spacing.M
+    padding: StyleConstants.Spacing.L
  },
  texts: {
    marginLeft: StyleConstants.Spacing.S
--- a/src/i18n/zh/screens/meSettings.ts
+++ b/src/i18n/zh/screens/meSettings.ts
@@ -29,6 +29,10 @@ export default {
    cache: {
      heading: '清空缓存'
    },
+    analytics: {
+      heading: '帮助我们改进',
+      description: '允许我们收集不与用户相关联的使用信息'
+    },
    copyrights: {
      heading: '版权信息'
    },
--- a/src/screens/Me/Settings.tsx
+++ b/src/screens/Me/Settings.tsx
@@ -1,20 +1,22 @@
-import prettyBytes from 'pretty-bytes'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ActionSheetIOS, StyleSheet, Text } from 'react-native'
-import { CacheManager } from 'react-native-expo-image-cache'
-import { useDispatch, useSelector } from 'react-redux'
 import { MenuContainer, MenuRow } from '@components/Menu'
 import {
+  changeAnalytics,
  changeBrowser,
  changeLanguage,
  changeTheme,
+  getSettingsAnalytics,
  getSettingsBrowser,
  getSettingsLanguage,
  getSettingsTheme
 } from '@utils/slices/settingsSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import prettyBytes from 'pretty-bytes'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ActionSheetIOS, StyleSheet, Text } from 'react-native'
+import { CacheManager } from 'react-native-expo-image-cache'
+import { useDispatch, useSelector } from 'react-redux'

 const ScreenMeSettings: React.FC = () => {
  const { t, i18n } = useTranslation('meSettings')
@@ -22,6 +24,7 @@ const ScreenMeSettings: React.FC = () => {
  const settingsLanguage = useSelector(getSettingsLanguage)
  const settingsTheme = useSelector(getSettingsTheme)
  const settingsBrowser = useSelector(getSettingsBrowser)
+  const settingsAnalytics = useSelector(getSettingsAnalytics)
  const dispatch = useDispatch()

  const [cacheSize, setCacheSize] = useState<number>()
@@ -132,6 +135,14 @@ const ScreenMeSettings: React.FC = () => {
            setCacheSize(0)
          }}
        />
+        <MenuRow
+          title={t('content.analytics.heading')}
+          description={t('content.analytics.description')}
+          switchValue={settingsAnalytics}
+          switchOnValueChange={() =>
+            dispatch(changeAnalytics(!settingsAnalytics))
+          }
+        />
        <MenuRow
          title={t('content.copyrights.heading')}
          iconBack='chevron-right'
--- a/src/screens/Shared/Account/Information/Actions.tsx
+++ b/src/screens/Shared/Account/Information/Actions.tsx
@@ -3,7 +3,6 @@ import client from '@root/api/client'
 import Button from '@root/components/Button'
 import { toast } from '@root/components/toast'
 import { relationshipFetch } from '@root/utils/fetches/relationshipFetch'
-import getCurrentTab from '@root/utils/getCurrentTab'
 import { StyleConstants } from '@root/utils/styles/constants'
 import { useTheme } from '@root/utils/styles/ThemeManager'
 import React, { useEffect, useMemo } from 'react'
@@ -130,12 +129,9 @@ const AccountInformationActions: React.FC<Props> = ({ account }) => {
          content='mail'
          round
          onPress={() =>
-            navigation.navigate(getCurrentTab(navigation), {
-              screen: 'Screen-Shared-Compose',
-              params: {
-                type: 'conversation',
-                incomingStatus: { account }
-              }
+            navigation.navigate('Screen-Shared-Compose', {
+              type: 'conversation',
+              incomingStatus: { account }
            })
          }
          style={styles.actionConversation}
--- a/src/screens/Shared/Account/Nav.tsx
+++ b/src/screens/Shared/Account/Nav.tsx
@@ -63,14 +63,14 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
            <Emojis
              content={account?.display_name || account?.username}
              emojis={account.emojis}
-              size='L'
+              size='M'
              fontBold={true}
            />
          ) : (
            <Text
              style={{
                color: theme.primary,
-                ...StyleConstants.FontStyle.L,
+                ...StyleConstants.FontStyle.M,
                fontWeight: StyleConstants.Font.Weight.Bold
              }}
            >
--- a/src/screens/Shared/Compose.tsx
+++ b/src/screens/Shared/Compose.tsx
@@ -1,3 +1,12 @@
+import client from '@api/client'
+import { HeaderLeft, HeaderRight } from '@components/Header'
+import { store } from '@root/store'
+import formatText from '@screens/Shared/Compose/formatText'
+import ComposeRoot from '@screens/Shared/Compose/Root'
+import { getLocalAccountPreferences } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import * as Crypto from 'expo-crypto'
 import React, {
  createContext,
  createRef,
@@ -10,7 +19,6 @@ import React, {
  useState
 } from 'react'
 import {
-  ActivityIndicator,
  Alert,
  Keyboard,
  KeyboardAvoidingView,
@@ -20,19 +28,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
-import * as Crypto from 'expo-crypto'
-
-import { store } from '@root/store'
-import ComposeRoot from '@screens/Shared/Compose/Root'
-import client from '@api/client'
-import { getLocalAccountPreferences } from '@utils/slices/instancesSlice'
-import { HeaderLeft, HeaderRight } from '@components/Header'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
-import formatText from '@screens/Shared/Compose/formatText'
 import { useQueryClient } from 'react-query'
-import Toast from 'react-native-toast-message'
-import { toastConfig } from '@root/components/toast'

 const Stack = createNativeStackNavigator()

@@ -583,6 +579,15 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
    [isSubmitting, rawCount, totalTextCount]
  )

+  const screenComponent = useCallback(
+    () => (
+      <ComposeContext.Provider value={{ composeState, composeDispatch }}>
+        <ComposeRoot />
+      </ComposeContext.Provider>
+    ),
+    []
+  )
+
  return (
    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
      <SafeAreaView
@@ -591,17 +596,10 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
      >
        <Stack.Navigator>
          <Stack.Screen
-            name='PostMain'
+            name='Screen-Shared-Compose-Root'
            options={{ headerLeft, headerCenter, headerRight }}
-          >
-            {() => (
-              <ComposeContext.Provider
-                value={{ composeState, composeDispatch }}
-              >
-                <ComposeRoot />
-              </ComposeContext.Provider>
-            )}
-          </Stack.Screen>
+            component={screenComponent}
+          />
        </Stack.Navigator>
      </SafeAreaView>
    </KeyboardAvoidingView>
--- a/src/utils/getCurrentTab.ts
+++ b/src/utils/getCurrentTab.ts
@@ -1,8 +0,0 @@
-const getCurrentTab = (navigation: any) => {
-  const { length, [length - 1]: last } =
-    navigation.dangerouslyGetState().history ||
-    navigation.dangerouslyGetParent()?.dangerouslyGetState().history
-  return `Screen-${last.key.split(new RegExp(/Screen-(.*?)-/))[1]}`
-}
-
-export default getCurrentTab
--- a/src/utils/slices/settingsSlice.ts
+++ b/src/utils/slices/settingsSlice.ts
@@ -1,61 +1,28 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
-
 import { RootState } from '@root/store'
-// import client from 'src/api/client'
+import * as Analytics from 'expo-firebase-analytics'

 export type SettingsState = {
  language: 'zh' | 'en' | undefined
  theme: 'light' | 'dark' | 'auto'
  browser: 'internal' | 'external'
+  analytics: boolean
 }

 const initialState = {
  language: undefined,
  theme: 'auto',
-  browser: 'internal'
+  browser: 'internal',
+  analytics: false
 }

-// export const updateLocal = createAsyncThunk(
-//   'instances/updateLocal',
-//   async ({
-//     url,
-//     token
-//   }: {
-//     url?: InstancesState['local']['url']
-//     token?: InstancesState['local']['token']
-//   }) => {
-//     if (!url || !token) {
-//       return initialStateLocal
-//     }
-
-//     const {
-//       body: { id }
-//     } = await client({
-//       method: 'get',
-//       instance: 'remote',
-//       instanceUrl: url,
-//       endpoint: `accounts/verify_credentials`,
-//       headers: { Authorization: `Bearer ${token}` }
-//     })
-
-//     const { body: preferences } = await client({
-//       method: 'get',
-//       instance: 'remote',
-//       instanceUrl: url,
-//       endpoint: `preferences`,
-//       headers: { Authorization: `Bearer ${token}` }
-//     })
-
-//     return {
-//       url,
-//       token,
-//       account: {
-//         id,
-//         preferences
-//       }
-//     }
-//   }
-// )
+export const changeAnalytics = createAsyncThunk(
+  'settings/changeAnalytics',
+  async (newValue: SettingsState['analytics']) => {
+    await Analytics.setAnalyticsCollectionEnabled(newValue)
+    return newValue
+  }
+)

 const settingsSlice = createSlice({
  name: 'settings',
@@ -79,17 +46,19 @@ const settingsSlice = createSlice({
    ) => {
      state.browser = action.payload
    }
+  },
+  extraReducers: builder => {
+    builder.addCase(changeAnalytics.fulfilled, (state, action) => {
+      state.analytics = action.payload
+    })
  }
-  // extraReducers: builder => {
-  //   builder.addCase(updateLocal.fulfilled, (state, action) => {
-  //     state.local = action.payload
-  //   })
-  // }
 })

 export const getSettingsLanguage = (state: RootState) => state.settings.language
 export const getSettingsTheme = (state: RootState) => state.settings.theme
 export const getSettingsBrowser = (state: RootState) => state.settings.browser
+export const getSettingsAnalytics = (state: RootState) =>
+  state.settings.analytics

 export const {
  changeLanguage,