Addressing review feedback: tidy nav-item types and shared map
- Move LeftNavItem type declaration below the import block in LeftNav.tsx
(it was wedged between two imports).
- Extract the identical Home/Search/Messages/Notifications/MyProfile ->
nav-item maps from BottomBar.tsx and Drawer.tsx into a single
src/lib/routes/tab-to-nav-item.ts.
This commit is contained in:
@@ -0,0 +1,17 @@
|
|||||||
|
export type SharedNavTab =
|
||||||
|
| 'Home'
|
||||||
|
| 'Search'
|
||||||
|
| 'Messages'
|
||||||
|
| 'Notifications'
|
||||||
|
| 'MyProfile'
|
||||||
|
|
||||||
|
export const TAB_TO_NAV_ITEM: Record<
|
||||||
|
SharedNavTab,
|
||||||
|
'home' | 'search' | 'chat' | 'notifications' | 'profile'
|
||||||
|
> = {
|
||||||
|
Home: 'home',
|
||||||
|
Search: 'search',
|
||||||
|
Messages: 'chat',
|
||||||
|
Notifications: 'notifications',
|
||||||
|
MyProfile: 'profile',
|
||||||
|
}
|
||||||
@@ -10,6 +10,7 @@ import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
|
|||||||
import {type PressableScale} from '#/lib/custom-animations/PressableScale'
|
import {type PressableScale} from '#/lib/custom-animations/PressableScale'
|
||||||
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
|
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
|
||||||
import {getTabState, TabState} from '#/lib/routes/helpers'
|
import {getTabState, TabState} from '#/lib/routes/helpers'
|
||||||
|
import {type SharedNavTab, TAB_TO_NAV_ITEM} from '#/lib/routes/tab-to-nav-item'
|
||||||
import {type NavigationProp} from '#/lib/routes/types'
|
import {type NavigationProp} from '#/lib/routes/types'
|
||||||
import {sanitizeHandle} from '#/lib/strings/handles'
|
import {sanitizeHandle} from '#/lib/strings/handles'
|
||||||
import {colors} from '#/lib/styles'
|
import {colors} from '#/lib/styles'
|
||||||
@@ -134,24 +135,6 @@ let DrawerProfileCard = ({
|
|||||||
DrawerProfileCard = memo(DrawerProfileCard)
|
DrawerProfileCard = memo(DrawerProfileCard)
|
||||||
export {DrawerProfileCard}
|
export {DrawerProfileCard}
|
||||||
|
|
||||||
type DrawerTabOption =
|
|
||||||
| 'Home'
|
|
||||||
| 'Search'
|
|
||||||
| 'Messages'
|
|
||||||
| 'Notifications'
|
|
||||||
| 'MyProfile'
|
|
||||||
|
|
||||||
const DRAWER_TAB_TO_NAV_ITEM: Record<
|
|
||||||
DrawerTabOption,
|
|
||||||
'home' | 'search' | 'chat' | 'notifications' | 'profile'
|
|
||||||
> = {
|
|
||||||
Home: 'home',
|
|
||||||
Search: 'search',
|
|
||||||
Messages: 'chat',
|
|
||||||
Notifications: 'notifications',
|
|
||||||
MyProfile: 'profile',
|
|
||||||
}
|
|
||||||
|
|
||||||
let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
|
let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const insets = useSafeAreaInsets()
|
const insets = useSafeAreaInsets()
|
||||||
@@ -173,9 +156,9 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
|
|||||||
// =
|
// =
|
||||||
|
|
||||||
const onPressTab = useCallback(
|
const onPressTab = useCallback(
|
||||||
(tab: DrawerTabOption, surface: 'drawer' | 'drawerHeader' = 'drawer') => {
|
(tab: SharedNavTab, surface: 'drawer' | 'drawerHeader' = 'drawer') => {
|
||||||
ax.metric('nav:click', {
|
ax.metric('nav:click', {
|
||||||
item: DRAWER_TAB_TO_NAV_ITEM[tab],
|
item: TAB_TO_NAV_ITEM[tab],
|
||||||
surface,
|
surface,
|
||||||
})
|
})
|
||||||
const state = navigation.getState()
|
const state = navigation.getState()
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransfo
|
|||||||
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
|
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
|
||||||
import {clamp} from '#/lib/numbers'
|
import {clamp} from '#/lib/numbers'
|
||||||
import {getTabState, TabState} from '#/lib/routes/helpers'
|
import {getTabState, TabState} from '#/lib/routes/helpers'
|
||||||
|
import {type SharedNavTab, TAB_TO_NAV_ITEM} from '#/lib/routes/tab-to-nav-item'
|
||||||
import {emitSoftReset} from '#/state/events'
|
import {emitSoftReset} from '#/state/events'
|
||||||
import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
|
import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
|
||||||
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
|
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
|
||||||
@@ -55,19 +56,6 @@ import {useActorStatus} from '#/features/liveNow'
|
|||||||
import {useDemoMode} from '#/storage/hooks/demo-mode'
|
import {useDemoMode} from '#/storage/hooks/demo-mode'
|
||||||
import {styles} from './BottomBarStyles'
|
import {styles} from './BottomBarStyles'
|
||||||
|
|
||||||
type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
|
|
||||||
|
|
||||||
const TAB_TO_NAV_ITEM: Record<
|
|
||||||
TabOptions,
|
|
||||||
'home' | 'search' | 'chat' | 'notifications' | 'profile'
|
|
||||||
> = {
|
|
||||||
Home: 'home',
|
|
||||||
Search: 'search',
|
|
||||||
Messages: 'chat',
|
|
||||||
Notifications: 'notifications',
|
|
||||||
MyProfile: 'profile',
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BottomBar({navigation}: BottomTabBarProps) {
|
export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
const {hasSession, currentAccount} = useSession()
|
const {hasSession, currentAccount} = useSession()
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
@@ -102,7 +90,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
|||||||
}, [requestSwitchToAccount, closeAllActiveElements])
|
}, [requestSwitchToAccount, closeAllActiveElements])
|
||||||
|
|
||||||
const onPressTab = useCallback(
|
const onPressTab = useCallback(
|
||||||
(tab: TabOptions) => {
|
(tab: SharedNavTab) => {
|
||||||
ax.metric('nav:click', {
|
ax.metric('nav:click', {
|
||||||
item: TAB_TO_NAV_ITEM[tab],
|
item: TAB_TO_NAV_ITEM[tab],
|
||||||
surface: 'bottomBar',
|
surface: 'bottomBar',
|
||||||
|
|||||||
@@ -86,6 +86,7 @@ import {useAgeAssurance} from '#/ageAssurance'
|
|||||||
import {useAnalytics} from '#/analytics'
|
import {useAnalytics} from '#/analytics'
|
||||||
import {useActorStatus} from '#/features/liveNow'
|
import {useActorStatus} from '#/features/liveNow'
|
||||||
import {router} from '#/routes'
|
import {router} from '#/routes'
|
||||||
|
import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
|
||||||
|
|
||||||
type LeftNavItem =
|
type LeftNavItem =
|
||||||
| 'home'
|
| 'home'
|
||||||
@@ -97,7 +98,6 @@ type LeftNavItem =
|
|||||||
| 'saved'
|
| 'saved'
|
||||||
| 'profile'
|
| 'profile'
|
||||||
| 'settings'
|
| 'settings'
|
||||||
import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
|
|
||||||
|
|
||||||
const LARGE_ELEMENT_SIZE = 48
|
const LARGE_ELEMENT_SIZE = 48
|
||||||
const NAV_ICON_WIDTH = 28
|
const NAV_ICON_WIDTH = 28
|
||||||
|
|||||||
Reference in New Issue
Block a user