Move screen options into each screen

2025-01-03 13:10:23 +01:00 · 2022-12-03 16:50:54 +01:00 · 2022-12-03 16:50:54 +01:00 · 6a9f951dba
commit 6a9f951dba
parent ddfd3a830d
9 changed files with 203 additions and 232 deletions
--- a/src/screens/Tabs/Shared/Account.tsx
+++ b/src/screens/Tabs/Shared/Account.tsx
@ -1,6 +1,6 @@
 import menuAccount from '@components/contextMenu/account'
 import menuShare from '@components/contextMenu/share'
-import { HeaderRight } from '@components/Header'
+import { HeaderLeft, HeaderRight } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import SegmentedControl from '@react-native-community/segmented-control'
@ -33,6 +33,12 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
  const mAccount = menuAccount({ type: 'account', openChange: true, account })
  useEffect(() => {
    navigation.setOptions({
+      headerTransparent: true,
+      headerStyle: {
+        backgroundColor: `rgba(255, 255, 255, 0)`
+      },
+      title: '',
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
      headerRight: () => {
        return (
          <DropdownMenu.Root>
--- a/src/screens/Tabs/Shared/AccountInLists.tsx
+++ b/src/screens/Tabs/Shared/AccountInLists.tsx
@ -10,7 +10,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SectionList, Text, View } from 'react-native'
+import { SectionList, View } from 'react-native'

 const TabSharedAccountInLists: React.FC<
  TabSharedStackScreenProps<'Tab-Shared-Account-In-Lists'>
@ -27,7 +27,6 @@ const TabSharedAccountInLists: React.FC<
    navigation.setOptions({
      presentation: 'modal',
      title: t('shared.accountInLists.name', { username: account.username }),
-      headerLeft: () => null,
      headerRight: () => {
        return (
          <HeaderRight
@ -49,8 +48,8 @@ const TabSharedAccountInLists: React.FC<
      id: 'out',
      title: t('shared.accountInLists.notInLists'),
      data:
-        listsQuery.data?.filter(
-          ({ id }) => !accountInListsQuery.data?.filter(d => d.id === id).length
+        listsQuery?.data?.filter(
+          ({ id }) => !accountInListsQuery?.data?.filter(d => d.id === id)?.length
        ) || []
    }
  ]
--- a/src/screens/Tabs/Shared/Attachments.tsx
+++ b/src/screens/Tabs/Shared/Attachments.tsx
@ -1,27 +1,57 @@
+import { HeaderLeft } from '@components/Header'
+import { ParseEmojis } from '@components/Parse'
+import CustomText from '@components/Text'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import React from 'react'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useEffect } from 'react'
+import { Trans } from 'react-i18next'

-const TabSharedAttachments: React.FC<
-  TabSharedStackScreenProps<'Tab-Shared-Attachments'>
-> = ({
+const TabSharedAttachments: React.FC<TabSharedStackScreenProps<'Tab-Shared-Attachments'>> = ({
+  navigation,
  route: {
    params: { account }
  }
 }) => {
+  const { colors } = useTheme()
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
+      headerTitle: () => (
+        <CustomText numberOfLines={1}>
+          <Trans
+            i18nKey='screenTabs:shared.attachments.name'
+            components={[
+              <ParseEmojis
+                content={account.display_name || account.username}
+                emojis={account.emojis}
+                fontBold
+              />,
+              <CustomText
+                fontStyle='M'
+                style={{ color: colors.primaryDefault }}
+                fontWeight='Bold'
+              />
+            ]}
+          />
+        </CustomText>
+      )
+    })
+  }, [])
+
  const queryKey: QueryKeyTimeline = [
    'Timeline',
    { page: 'Account_Attachments', account: account.id }
  ]
+
  return (
    <Timeline
      queryKey={queryKey}
      customProps={{
-        renderItem: ({ item }) => (
-          <TimelineDefault item={item} queryKey={queryKey} />
-        )
+        renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
      }}
    />
  )
--- a/src/screens/Tabs/Shared/Hashtag.tsx
+++ b/src/screens/Tabs/Shared/Hashtag.tsx
@ -1,5 +1,5 @@
 import haptics from '@components/haptics'
-import { HeaderRight } from '@components/Header'
+import { HeaderLeft, HeaderRight } from '@components/Header'
 import { displayMessage } from '@components/Message'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
@ -18,6 +18,13 @@ const TabSharedHashtag: React.FC<TabSharedStackScreenProps<'Tab-Shared-Hashtag'>
    params: { hashtag }
  }
 }) => {
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
+      title: `#${decodeURIComponent(hashtag)}`
+    })
+  }, [])
+
  const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Hashtag', hashtag }]

  const { theme } = useTheme()
--- a/src/screens/Tabs/Shared/History.tsx
+++ b/src/screens/Tabs/Shared/History.tsx
@ -1,3 +1,4 @@
+import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import { ParseEmojis } from '@components/Parse'
 import ComponentSeparator from '@components/Separator'
@ -9,7 +10,8 @@ import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'

@ -23,6 +25,7 @@ const ContentView = ({
  last: boolean
 }) => {
  const { colors } = useTheme()
+
  return (
    <>
      <View
@ -37,16 +40,11 @@ const ContentView = ({
        ) : null}
        {history.poll
          ? history.poll.options.map((option, index) => (
-              <View
-                key={index}
-                style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
-              >
+              <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
                <View style={{ flex: 1, flexDirection: 'row' }}>
                  <Icon
                    style={{
-                      paddingTop:
-                        StyleConstants.Font.LineHeight.M -
-                        StyleConstants.Font.Size.M,
+                      paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
                      marginRight: StyleConstants.Spacing.S
                    }}
                    name='Circle'
@ -54,17 +52,13 @@ const ContentView = ({
                    color={colors.disabled}
                  />
                  <CustomText style={{ flex: 1 }}>
-                    <ParseEmojis
-                      content={option.title}
-                      emojis={history.poll?.emojis}
-                    />
+                    <ParseEmojis content={option.title} emojis={history.poll?.emojis} />
                  </CustomText>
                </View>
              </View>
            ))
          : null}
-        {Array.isArray(history.media_attachments) &&
-        history.media_attachments.length ? (
+        {Array.isArray(history.media_attachments) && history.media_attachments.length ? (
          <TimelineAttachment status={history} />
        ) : null}
      </View>
@ -73,15 +67,22 @@ const ContentView = ({
  )
 }

-const TabSharedHistory: React.FC<
-  TabSharedStackScreenProps<'Tab-Shared-History'>
-> = ({
+const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>> = ({
+  navigation,
  route: {
    params: { id }
  }
 }) => {
+  const { t } = useTranslation('screenTabs')
  const { data } = useStatusHistory({ id })

+  useEffect(() => {
+    navigation.setOptions({
+      title: t('shared.history.name'),
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+    })
+  }, [])
+
  return (
    <ScrollView>
      {data && data.length > 0
@ -90,12 +91,7 @@ const TabSharedHistory: React.FC<
            .reverse()
            .map((d, i) =>
              i !== 0 ? (
-                <ContentView
-                  key={i}
-                  history={d}
-                  first={i === 1}
-                  last={i === data.length - 1}
-                />
+                <ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
              ) : null
            )
        : null}
--- a/src/screens/Tabs/Shared/Search.tsx
+++ b/src/screens/Tabs/Shared/Search.tsx
@ -1,5 +1,6 @@
 import ComponentAccount from '@components/Account'
 import ComponentHashtag from '@components/Hashtag'
+import { HeaderLeft } from '@components/Header'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
@ -7,18 +8,80 @@ import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useMemo } from 'react'
+import { debounce } from 'lodash'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { KeyboardAvoidingView, Platform, SectionList, StyleSheet, View } from 'react-native'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  SectionList,
+  StyleSheet,
+  TextInput,
+  View
+} from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'

 const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>> = ({
+  navigation,
  route: {
    params: { text }
  }
 }) => {
  const { t } = useTranslation('screenTabs')
-  const { colors } = useTheme()
+  const { colors, mode } = useTheme()
+
+  useEffect(() => {
+    navigation.setOptions({
+      ...(Platform.OS === 'ios'
+        ? {
+            headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+          }
+        : { headerLeft: () => null }),
+      headerTitle: () => {
+        const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, {
+          trailing: true
+        })
+        return (
+          <View
+            style={{
+              flexBasis: '80%',
+              flexDirection: 'row',
+              alignItems: 'center'
+            }}
+          >
+            <TextInput
+              editable={false}
+              style={{
+                fontSize: StyleConstants.Font.Size.M,
+                color: colors.primaryDefault
+              }}
+              defaultValue={t('shared.search.header.prefix')}
+            />
+            <TextInput
+              accessibilityRole='search'
+              keyboardAppearance={mode}
+              style={{
+                fontSize: StyleConstants.Font.Size.M,
+                flex: 1,
+                color: colors.primaryDefault,
+                paddingLeft: StyleConstants.Spacing.XS
+              }}
+              autoFocus
+              onChangeText={onChangeText}
+              autoCapitalize='none'
+              autoCorrect={false}
+              clearButtonMode='never'
+              keyboardType='web-search'
+              onSubmitEditing={({ nativeEvent: { text } }) => navigation.setParams({ text })}
+              placeholder={t('shared.search.header.placeholder')}
+              placeholderTextColor={colors.secondary}
+              returnKeyType='go'
+            />
+          </View>
+        )
+      }
+    })
+  }, [])

  const mapKeyToTranslations = {
    accounts: t('shared.search.sections.accounts'),
--- a/src/screens/Tabs/Shared/Toot.tsx
+++ b/src/screens/Tabs/Shared/Toot.tsx
@ -1,24 +1,34 @@
+import { HeaderLeft } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
-import { useNavigation } from '@react-navigation/native'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { FlatList } from 'react-native'
 import { InfiniteQueryObserver, useQueryClient } from 'react-query'

 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
+  navigation,
  route: {
    params: { toot, rootQueryKey }
  }
 }) => {
+  const { t } = useTranslation('screenTabs')
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: t('shared.toot.name'),
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+    })
+  }, [])
+
  const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]

  const flRef = useRef<FlatList>(null)

  const [itemsLength, setItemsLength] = useState(0)
  const scrolled = useRef(false)
-  const navigation = useNavigation()
  const queryClient = useQueryClient()
  const observer = new InfiniteQueryObserver(queryClient, {
    queryKey,
--- a/src/screens/Tabs/Shared/Users.tsx
+++ b/src/screens/Tabs/Shared/Users.tsx
@ -1,58 +1,57 @@
 import ComponentAccount from '@components/Account'
+import { HeaderLeft } from '@components/Header'
 import ComponentSeparator from '@components/Separator'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
-import React, { useCallback } from 'react'
-import { StyleSheet } from 'react-native'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { FlatList } from 'react-native-gesture-handler'

-const TabSharedUsers = React.memo(
-  ({ route: { params } }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => {
-    const queryKey: QueryKeyUsers = ['Users', params]
-    const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
-      useUsersQuery({
-        ...queryKey[1],
-        options: {
-          getPreviousPageParam: firstPage =>
-            firstPage.links?.prev && { since_id: firstPage.links.next },
-          getNextPageParam: lastPage =>
-            lastPage.links?.next && { max_id: lastPage.links.next }
-        }
-      })
-    const flattenData = data?.pages
-      ? data.pages.flatMap(page => [...page.body])
-      : []
+const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
+  navigation,
+  route: { params }
+}) => {
+  const { t } = useTranslation('screenTabs')
+  useEffect(() => {
+    navigation.setOptions({
+      title: t(`shared.users.${params.reference}.${params.type}`, { count: params.count }),
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+    })
+  }, [])

-    const onEndReached = useCallback(
-      () => hasNextPage && !isFetchingNextPage && fetchNextPage(),
-      [hasNextPage, isFetchingNextPage]
-    )
+  const queryKey: QueryKeyUsers = ['Users', params]
+  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({
+    ...queryKey[1],
+    options: {
+      getPreviousPageParam: firstPage =>
+        firstPage.links?.prev && { since_id: firstPage.links.next },
+      getNextPageParam: lastPage => lastPage.links?.next && { max_id: lastPage.links.next }
+    }
+  })
+  const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []

-    return (
-      <FlatList
-        windowSize={7}
-        data={flattenData}
-        style={styles.flatList}
-        renderItem={({ item }) => (
-          <ComponentAccount account={item} />
-        )}
-        onEndReached={onEndReached}
-        onEndReachedThreshold={0.75}
-        ItemSeparatorComponent={ComponentSeparator}
-        maintainVisibleContentPosition={{
-          minIndexForVisible: 0,
-          autoscrollToTopThreshold: 2
-        }}
-      />
-    )
-  },
-  () => true
-)
+  const onEndReached = useCallback(
+    () => hasNextPage && !isFetchingNextPage && fetchNextPage(),
+    [hasNextPage, isFetchingNextPage]
+  )

-const styles = StyleSheet.create({
-  flatList: {
-    minHeight: '100%'
-  }
-})
+  return (
+    <FlatList
+      windowSize={7}
+      data={flattenData}
+      style={{
+        minHeight: '100%'
+      }}
+      renderItem={({ item }) => <ComponentAccount account={item} />}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.75}
+      ItemSeparatorComponent={ComponentSeparator}
+      maintainVisibleContentPosition={{
+        minIndexForVisible: 0,
+        autoscrollToTopThreshold: 2
+      }}
+    />
+  )
+}

 export default TabSharedUsers
--- a/src/screens/Tabs/Shared/index.tsx
+++ b/src/screens/Tabs/Shared/index.tsx
@ -1,6 +1,3 @@
-import { HeaderCenter, HeaderLeft } from '@components/Header'
-import { ParseEmojis } from '@components/Parse'
-import CustomText from '@components/Text'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import TabSharedAccount from '@screens/Tabs/Shared/Account'
 import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
@ -9,13 +6,9 @@ import TabSharedHistory from '@screens/Tabs/Shared/History'
 import TabSharedSearch from '@screens/Tabs/Shared/Search'
 import TabSharedToot from '@screens/Tabs/Shared/Toot'
 import TabSharedUsers from '@screens/Tabs/Shared/Users'
-import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { debounce } from 'lodash'
 import React from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { Platform, TextInput, View } from 'react-native'
+import { useTranslation } from 'react-i18next'
 import TabSharedAccountInLists from './AccountInLists'

 const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNavigator> }) => {
@ -23,167 +16,35 @@ const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNaviga
  const { t } = useTranslation('screenTabs')

  return (
-    <Stack.Group
-      screenOptions={({ navigation }) => ({
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-      })}
-    >
+    <Stack.Group>
      <Stack.Screen
        key='Tab-Shared-Account'
        name='Tab-Shared-Account'
        component={TabSharedAccount}
-        options={({
-          navigation,
-          route: {
-            params: { account }
-          }
-        }: TabSharedStackScreenProps<'Tab-Shared-Account'>) => {
-          return {
-            headerTransparent: true,
-            headerStyle: {
-              backgroundColor: `rgba(255, 255, 255, 0)`
-            },
-            title: '',
-            headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />
-          }
-        }}
      />
-
      <Stack.Screen
        key='Tab-Shared-Account-In-Lists'
        name='Tab-Shared-Account-In-Lists'
        component={TabSharedAccountInLists}
      />
-
      <Stack.Screen
        key='Tab-Shared-Attachments'
        name='Tab-Shared-Attachments'
        component={TabSharedAttachments}
-        options={({
-          route: {
-            params: { account }
-          }
-        }: TabSharedStackScreenProps<'Tab-Shared-Attachments'>) => {
-          return {
-            headerTitle: () => (
-              <CustomText numberOfLines={1}>
-                <Trans
-                  i18nKey='screenTabs:shared.attachments.name'
-                  components={[
-                    <ParseEmojis
-                      content={account.display_name || account.username}
-                      emojis={account.emojis}
-                      fontBold
-                    />,
-                    <CustomText
-                      fontStyle='M'
-                      style={{ color: colors.primaryDefault }}
-                      fontWeight='Bold'
-                    />
-                  ]}
-                />
-              </CustomText>
-            )
-          }
-        }}
      />
-
      <Stack.Screen
        key='Tab-Shared-Hashtag'
        name='Tab-Shared-Hashtag'
        component={TabSharedHashtag}
-        options={({ route }: TabSharedStackScreenProps<'Tab-Shared-Hashtag'>) => ({
-          title: `#${decodeURIComponent(route.params.hashtag)}`
-        })}
      />
-
      <Stack.Screen
        key='Tab-Shared-History'
        name='Tab-Shared-History'
        component={TabSharedHistory}
-        options={{ title: t('screenTabs:shared.history.name') }}
-      />
-
-      <Stack.Screen
-        key='Tab-Shared-Search'
-        name='Tab-Shared-Search'
-        component={TabSharedSearch}
-        options={({ navigation }: TabSharedStackScreenProps<'Tab-Shared-Search'>) => ({
-          ...(Platform.OS === 'ios'
-            ? {
-                headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-              }
-            : { headerLeft: () => null }),
-          headerTitle: () => {
-            const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, {
-              trailing: true
-            })
-            return (
-              <View
-                style={{
-                  flexBasis: '80%',
-                  flexDirection: 'row',
-                  alignItems: 'center'
-                }}
-              >
-                <TextInput
-                  editable={false}
-                  style={{
-                    fontSize: StyleConstants.Font.Size.M,
-                    color: colors.primaryDefault
-                  }}
-                  defaultValue={t('shared.search.header.prefix')}
-                />
-                <TextInput
-                  accessibilityRole='search'
-                  keyboardAppearance={mode}
-                  style={{
-                    fontSize: StyleConstants.Font.Size.M,
-                    flex: 1,
-                    color: colors.primaryDefault,
-                    paddingLeft: StyleConstants.Spacing.XS
-                  }}
-                  autoFocus
-                  onChangeText={onChangeText}
-                  autoCapitalize='none'
-                  autoCorrect={false}
-                  clearButtonMode='never'
-                  keyboardType='web-search'
-                  onSubmitEditing={({ nativeEvent: { text } }) => navigation.setParams({ text })}
-                  placeholder={t('shared.search.header.placeholder')}
-                  placeholderTextColor={colors.secondary}
-                  returnKeyType='go'
-                />
-              </View>
-            )
-          }
-        })}
-      />
-
-      <Stack.Screen
-        key='Tab-Shared-Toot'
-        name='Tab-Shared-Toot'
-        component={TabSharedToot}
-        options={{ title: t('shared.toot.name') }}
-      />
-
-      <Stack.Screen
-        key='Tab-Shared-Users'
-        name='Tab-Shared-Users'
-        component={TabSharedUsers}
-        options={({
-          route: {
-            params: { reference, type, count }
-          }
-        }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => ({
-          title: t(`shared.users.${reference}.${type}`, { count }),
-          ...(Platform.OS === 'android' && {
-            headerCenter: () => (
-              <HeaderCenter content={t(`shared.users.${reference}.${type}`, { count })} />
-            )
-          })
-        })}
      />
+      <Stack.Screen key='Tab-Shared-Search' name='Tab-Shared-Search' component={TabSharedSearch} />
+      <Stack.Screen key='Tab-Shared-Toot' name='Tab-Shared-Toot' component={TabSharedToot} />
+      <Stack.Screen key='Tab-Shared-Users' name='Tab-Shared-Users' component={TabSharedUsers} />
    </Stack.Group>
  )
 }