From 4b102de9925e0858a0e389af9dea851a62d312a6 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 22 Apr 2024 12:25:42 -0700 Subject: [PATCH] Remove the drawer from the shell --- package.json | 1 - src/screens/Hashtag.tsx | 6 +- src/state/shell/drawer-open.tsx | 25 - src/state/shell/drawer-swipe-disabled.tsx | 24 - src/state/shell/index.tsx | 42 +- src/state/util.ts | 18 +- src/view/com/home/HomeHeaderLayoutMobile.tsx | 8 +- src/view/com/profile/ProfileSubpageHeader.tsx | 31 +- src/view/com/util/SimpleViewHeader.tsx | 13 +- src/view/com/util/ViewHeader.tsx | 6 +- src/view/screens/Home.tsx | 16 +- src/view/screens/Profile.tsx | 12 +- src/view/screens/Search/Search.tsx | 11 +- src/view/shell/Drawer.tsx | 731 ------------------ src/view/shell/index.tsx | 34 +- src/view/shell/index.web.tsx | 49 +- 16 files changed, 54 insertions(+), 973 deletions(-) delete mode 100644 src/state/shell/drawer-open.tsx delete mode 100644 src/state/shell/drawer-swipe-disabled.tsx delete mode 100644 src/view/shell/Drawer.tsx diff --git a/package.json b/package.json index da0260a725..ebf8759d4c 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ "@react-native-menu/menu": "^0.8.0", "@react-native-picker/picker": "2.6.1", "@react-navigation/bottom-tabs": "^6.5.7", - "@react-navigation/drawer": "^6.6.2", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@segment/analytics-next": "^1.51.3", diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 34539f5102..185eeb7b8d 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -16,7 +16,7 @@ import {sanitizeHandle} from 'lib/strings/handles' import {enforceLen} from 'lib/strings/helpers' import {isNative, isWeb} from 'platform/detection' import {useSearchPostsQuery} from 'state/queries/search-posts' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from 'state/shell' +import {useSetMinimalShellMode} from 'state/shell' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' import {CenteredView} from '#/view/com/util/Views' @@ -65,7 +65,6 @@ export default function HashtagScreen({ const [activeTab, setActiveTab] = React.useState(0) const setMinimalShellMode = useSetMinimalShellMode() - const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() useFocusEffect( React.useCallback(() => { @@ -76,10 +75,9 @@ export default function HashtagScreen({ const onPageSelected = React.useCallback( (index: number) => { setMinimalShellMode(false) - setDrawerSwipeDisabled(index > 0) setActiveTab(index) }, - [setDrawerSwipeDisabled, setMinimalShellMode], + [setMinimalShellMode], ) const sections = React.useMemo(() => { diff --git a/src/state/shell/drawer-open.tsx b/src/state/shell/drawer-open.tsx deleted file mode 100644 index 061ff53d7e..0000000000 --- a/src/state/shell/drawer-open.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' - -type StateContext = boolean -type SetContext = (v: boolean) => void - -const stateContext = React.createContext(false) -const setContext = React.createContext((_: boolean) => {}) - -export function Provider({children}: React.PropsWithChildren<{}>) { - const [state, setState] = React.useState(false) - - return ( - - {children} - - ) -} - -export function useIsDrawerOpen() { - return React.useContext(stateContext) -} - -export function useSetDrawerOpen() { - return React.useContext(setContext) -} diff --git a/src/state/shell/drawer-swipe-disabled.tsx b/src/state/shell/drawer-swipe-disabled.tsx deleted file mode 100644 index d3f09f2a8b..0000000000 --- a/src/state/shell/drawer-swipe-disabled.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' - -type StateContext = boolean -type SetContext = (v: boolean) => void - -const stateContext = React.createContext(false) -const setContext = React.createContext((_: boolean) => {}) - -export function Provider({children}: React.PropsWithChildren<{}>) { - const [state, setState] = React.useState(false) - return ( - - {children} - - ) -} - -export function useIsDrawerSwipeDisabled() { - return React.useContext(stateContext) -} - -export function useSetDrawerSwipeDisabled() { - return React.useContext(setContext) -} diff --git a/src/state/shell/index.tsx b/src/state/shell/index.tsx index 07909c0001..efd9380220 100644 --- a/src/state/shell/index.tsx +++ b/src/state/shell/index.tsx @@ -1,40 +1,30 @@ import React from 'react' -import {Provider as ShellLayoutProvder} from './shell-layout' -import {Provider as DrawerOpenProvider} from './drawer-open' -import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled' -import {Provider as MinimalModeProvider} from './minimal-mode' + import {Provider as ColorModeProvider} from './color-mode' -import {Provider as OnboardingProvider} from './onboarding' import {Provider as ComposerProvider} from './composer' +import {Provider as MinimalModeProvider} from './minimal-mode' +import {Provider as OnboardingProvider} from './onboarding' +import {Provider as ShellLayoutProvder} from './shell-layout' import {Provider as TickEveryMinuteProvider} from './tick-every-minute' -export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open' -export { - useIsDrawerSwipeDisabled, - useSetDrawerSwipeDisabled, -} from './drawer-swipe-disabled' +export {useSetThemePrefs, useThemePrefs} from './color-mode' +export {useComposerControls, useComposerState} from './composer' export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode' -export {useThemePrefs, useSetThemePrefs} from './color-mode' -export {useOnboardingState, useOnboardingDispatch} from './onboarding' -export {useComposerState, useComposerControls} from './composer' +export {useOnboardingDispatch, useOnboardingState} from './onboarding' export {useTickEveryMinute} from './tick-every-minute' export function Provider({children}: React.PropsWithChildren<{}>) { return ( - - - - - - - {children} - - - - - - + + + + + {children} + + + + ) } diff --git a/src/state/util.ts b/src/state/util.ts index f65d14a84c..e396076a47 100644 --- a/src/state/util.ts +++ b/src/state/util.ts @@ -1,9 +1,9 @@ import {useCallback} from 'react' + +import {useDialogStateControlContext} from '#/state/dialogs' import {useLightboxControls} from './lightbox' import {useModalControls} from './modals' import {useComposerControls} from './shell/composer' -import {useSetDrawerOpen} from './shell/drawer-open' -import {useDialogStateControlContext} from '#/state/dialogs' /** * returns true if something was closed @@ -14,7 +14,6 @@ export function useCloseAnyActiveElement() { const {closeModal} = useModalControls() const {closeComposer} = useComposerControls() const {closeAllDialogs} = useDialogStateControlContext() - const setDrawerOpen = useSetDrawerOpen() return useCallback(() => { if (closeLightbox()) { return true @@ -28,9 +27,8 @@ export function useCloseAnyActiveElement() { if (closeAllDialogs()) { return true } - setDrawerOpen(false) return false - }, [closeLightbox, closeModal, closeComposer, setDrawerOpen, closeAllDialogs]) + }, [closeLightbox, closeModal, closeComposer, closeAllDialogs]) } /** @@ -41,18 +39,10 @@ export function useCloseAllActiveElements() { const {closeAllModals} = useModalControls() const {closeComposer} = useComposerControls() const {closeAllDialogs: closeAlfDialogs} = useDialogStateControlContext() - const setDrawerOpen = useSetDrawerOpen() return useCallback(() => { closeLightbox() closeAllModals() closeComposer() closeAlfDialogs() - setDrawerOpen(false) - }, [ - closeLightbox, - closeAllModals, - closeComposer, - closeAlfDialogs, - setDrawerOpen, - ]) + }, [closeLightbox, closeAllModals, closeComposer, closeAlfDialogs]) } diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 78fa9af865..95b49912e1 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -7,7 +7,6 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' import {HITSLOP_10} from 'lib/constants' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' @@ -28,15 +27,10 @@ export function HomeHeaderLayoutMobile({ }) { const pal = usePalette('default') const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() const {headerHeight} = useShellLayout() const {headerMinimalShellTransform} = useMinimalShellMode() const {hasSession} = useSession() - const onPressAvi = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - return ( ) { - const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation() const {_} = useLingui() const {isMobile} = useWebMediaQueries() @@ -59,10 +58,6 @@ export function ProfileSubpageHeader({ } }, [navigation]) - const onPressMenu = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - const onPressAvi = React.useCallback(() => { if ( avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride) @@ -88,7 +83,7 @@ export function ProfileSubpageHeader({ ]}> }>) { const pal = usePalette('default') - const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation() const {track} = useAnalytics() const {isMobile} = useWebMediaQueries() @@ -43,8 +42,8 @@ export function SimpleViewHeader({ const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') - setDrawerOpen(true) - }, [track, setDrawerOpen]) + // TODO + }, [track]) const Container = isMobile ? View : CenteredView return ( diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 63a2b3de39..85476de15a 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -6,7 +6,6 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {useSetDrawerOpen} from '#/state/shell' import {useAnalytics} from 'lib/analytics/analytics' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {usePalette} from 'lib/hooks/usePalette' @@ -39,7 +38,6 @@ export function ViewHeader({ }) { const pal = usePalette('default') const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation() const {track} = useAnalytics() const {isDesktop, isTablet} = useWebMediaQueries() @@ -55,8 +53,8 @@ export function ViewHeader({ const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') - setDrawerOpen(true) - }, [track, setDrawerOpen]) + // TODO + }, [track]) if (isDesktop) { if (showOnDesktop) { diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 3eaa1b8757..84a101df4e 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -13,11 +13,7 @@ import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' import {usePreferencesQuery} from '#/state/queries/preferences' import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' import {useSession} from '#/state/session' -import { - useMinimalShellMode, - useSetDrawerSwipeDisabled, - useSetMinimalShellMode, -} from '#/state/shell' +import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell' import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' import {useOTAUpdates} from 'lib/hooks/useOTAUpdates' import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' @@ -94,15 +90,10 @@ function HomeScreenReady({ const {hasSession} = useSession() const setMinimalShellMode = useSetMinimalShellMode() - const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() useFocusEffect( React.useCallback(() => { setMinimalShellMode(false) - setDrawerSwipeDisabled(selectedIndex > 0) - return () => { - setDrawerSwipeDisabled(false) - } - }, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]), + }, [setMinimalShellMode]), ) useFocusEffect( @@ -139,12 +130,11 @@ function HomeScreenReady({ const onPageSelected = React.useCallback( (index: number) => { setMinimalShellMode(false) - setDrawerSwipeDisabled(index > 0) const feed = allFeeds[index] setSelectedFeed(feed) lastPagerReportedIndexRef.current = index }, - [setDrawerSwipeDisabled, setSelectedFeed, setMinimalShellMode, allFeeds], + [setSelectedFeed, setMinimalShellMode, allFeeds], ) const onPageSelecting = React.useCallback( diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index c7f5a6627a..0298496b49 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -19,7 +19,7 @@ import {useModerationOpts} from '#/state/queries/preferences' import {useProfileQuery} from '#/state/queries/profile' import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {getAgent, useSession} from '#/state/session' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' +import {useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' import {useAnalytics} from 'lib/analytics/analytics' import {useSetTitle} from 'lib/hooks/useSetTitle' @@ -154,7 +154,6 @@ function ProfileScreenLoaded({ }) const [currentPage, setCurrentPage] = React.useState(0) const {_} = useLingui() - const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() const [scrollViewTag, setScrollViewTag] = React.useState(null) @@ -280,15 +279,6 @@ function ProfileScreenLoaded({ }, [setMinimalShellMode, screen, currentPage, scrollSectionToTop]), ) - useFocusEffect( - React.useCallback(() => { - setDrawerSwipeDisabled(currentPage > 0) - return () => { - setDrawerSwipeDisabled(false) - } - }, [setDrawerSwipeDisabled, currentPage]), - ) - // events // = diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 099174b9b3..ddbdfbee11 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -37,8 +37,7 @@ import { useSuggestedFollowsQuery, } from '#/state/queries/suggested-follows' import {useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' +import {useSetMinimalShellMode} from '#/state/shell' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import { NativeStackScreenProps, @@ -396,7 +395,6 @@ function SearchScreenUserResults({ export function SearchScreenInner({query}: {query?: string}) { const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() - const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() const {hasSession} = useSession() const {isDesktop} = useWebMediaQueries() const [activeTab, setActiveTab] = React.useState(0) @@ -405,10 +403,9 @@ export function SearchScreenInner({query}: {query?: string}) { const onPageSelected = React.useCallback( (index: number) => { setMinimalShellMode(false) - setDrawerSwipeDisabled(index > 0) setActiveTab(index) }, - [setDrawerSwipeDisabled, setMinimalShellMode], + [setMinimalShellMode], ) const sections = React.useMemo(() => { @@ -535,7 +532,6 @@ export function SearchScreen( const {_} = useLingui() const pal = usePalette('default') const {track} = useAnalytics() - const setDrawerOpen = useSetDrawerOpen() const moderationOpts = useModerationOpts() const search = useActorAutocompleteFn() const setMinimalShellMode = useSetMinimalShellMode() @@ -592,8 +588,7 @@ export function SearchScreen( const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') - setDrawerOpen(true) - }, [track, setDrawerOpen]) + }, [track]) const onPressCancelSearch = React.useCallback(() => { scrollToTopWeb() diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx deleted file mode 100644 index 3972797b76..0000000000 --- a/src/view/shell/Drawer.tsx +++ /dev/null @@ -1,731 +0,0 @@ -import React, {ComponentProps} from 'react' -import { - Linking, - SafeAreaView, - ScrollView, - StyleProp, - StyleSheet, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {StackActions, useNavigation} from '@react-navigation/native' - -import {emitSoftReset} from '#/state/events' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' -import {useProfileQuery} from '#/state/queries/profile' -import {SessionAccount, useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell' -import {useAnalytics} from 'lib/analytics/analytics' -import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' -import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' -import {usePalette} from 'lib/hooks/usePalette' -import { - BellIcon, - BellIconSolid, - CogIcon, - HandIcon, - HashtagIcon, - HomeIcon, - HomeIconSolid, - ListIcon, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, - UserIcon, - UserIconSolid, -} from 'lib/icons' -import {getTabState, TabState} from 'lib/routes/helpers' -import {NavigationProp} from 'lib/routes/types' -import {pluralize} from 'lib/strings/helpers' -import {colors, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isWeb} from 'platform/detection' -import {NavSignupCard} from '#/view/shell/NavSignupCard' -import {formatCountShortOnly} from 'view/com/util/numeric/format' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {useTheme as useAlfTheme} from '#/alf' -import {TextLink} from '../com/util/Link' - -let DrawerProfileCard = ({ - account, - onPressProfile, -}: { - account: SessionAccount - onPressProfile: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - const {data: profile} = useProfileQuery({did: account.did}) - - return ( - - - - {profile?.displayName || account.handle} - - - @{account.handle} - - - - {formatCountShortOnly(profile?.followersCount ?? 0)} - {' '} - {pluralize(profile?.followersCount || 0, 'follower')} ·{' '} - - - {formatCountShortOnly(profile?.followsCount ?? 0)} - {' '} - following - - - - ) -} -DrawerProfileCard = React.memo(DrawerProfileCard) -export {DrawerProfileCard} - -let DrawerContent = ({}: {}): React.ReactNode => { - const theme = useTheme() - const t = useAlfTheme() - const pal = usePalette('default') - const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() - const navigation = useNavigation() - const {track} = useAnalytics() - const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = - useNavigationTabState() - const {hasSession, currentAccount} = useSession() - - // events - // = - - const onPressTab = React.useCallback( - (tab: string) => { - track('Menu:ItemClicked', {url: tab}) - const state = navigation.getState() - setDrawerOpen(false) - if (isWeb) { - // hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh - if (tab === 'MyProfile') { - navigation.navigate('Profile', {name: currentAccount!.handle}) - } else { - // @ts-ignore must be Home, Search, Notifications, or MyProfile - navigation.navigate(tab) - } - } else { - const tabState = getTabState(state, tab) - if (tabState === TabState.InsideAtRoot) { - emitSoftReset() - } else if (tabState === TabState.Inside) { - navigation.dispatch(StackActions.popToTop()) - } else { - // @ts-ignore must be Home, Search, Notifications, or MyProfile - navigation.navigate(`${tab}Tab`) - } - } - }, - [track, navigation, setDrawerOpen, currentAccount], - ) - - const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab]) - - const onPressSearch = React.useCallback( - () => onPressTab('Search'), - [onPressTab], - ) - - const onPressNotifications = React.useCallback( - () => onPressTab('Notifications'), - [onPressTab], - ) - - const onPressProfile = React.useCallback(() => { - onPressTab('MyProfile') - }, [onPressTab]) - - const onPressMyFeeds = React.useCallback( - () => onPressTab('Feeds'), - [onPressTab], - ) - - const onPressLists = React.useCallback(() => { - track('Menu:ItemClicked', {url: 'Lists'}) - navigation.navigate('Lists') - setDrawerOpen(false) - }, [navigation, track, setDrawerOpen]) - - const onPressModeration = React.useCallback(() => { - track('Menu:ItemClicked', {url: 'Moderation'}) - navigation.navigate('Moderation') - setDrawerOpen(false) - }, [navigation, track, setDrawerOpen]) - - const onPressSettings = React.useCallback(() => { - track('Menu:ItemClicked', {url: 'Settings'}) - navigation.navigate('Settings') - setDrawerOpen(false) - }, [navigation, track, setDrawerOpen]) - - const onPressFeedback = React.useCallback(() => { - track('Menu:FeedbackClicked') - Linking.openURL( - FEEDBACK_FORM_URL({ - email: currentAccount?.email, - handle: currentAccount?.handle, - }), - ) - }, [track, currentAccount]) - - const onPressHelp = React.useCallback(() => { - track('Menu:HelpClicked') - Linking.openURL(HELP_DESK_URL) - }, [track]) - - // rendering - // = - - return ( - - - - {hasSession && currentAccount ? ( - - - - ) : ( - - - - )} - - {hasSession ? ( - <> - - - - - - - - - - - ) : ( - <> - - - - - )} - - - - - - - - - - - - - - - - ) -} -DrawerContent = React.memo(DrawerContent) -export {DrawerContent} - -let DrawerFooter = ({ - onPressFeedback, - onPressHelp, -}: { - onPressFeedback: () => void - onPressHelp: () => void -}): React.ReactNode => { - const theme = useTheme() - const pal = usePalette('default') - const {_} = useLingui() - return ( - - - - - Feedback - - - - - Help - - - - ) -} -DrawerFooter = React.memo(DrawerFooter) - -interface MenuItemProps extends ComponentProps { - icon: JSX.Element - label: string - count?: string - bold?: boolean -} - -let SearchMenuItem = ({ - isActive, - onPress, -}: { - isActive: boolean - onPress: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - } - size={24} - strokeWidth={1.7} - /> - ) : ( - } - size={24} - strokeWidth={1.7} - /> - ) - } - label={_(msg`Search`)} - accessibilityLabel={_(msg`Search`)} - accessibilityHint="" - bold={isActive} - onPress={onPress} - /> - ) -} -SearchMenuItem = React.memo(SearchMenuItem) - -let HomeMenuItem = ({ - isActive, - onPress, -}: { - isActive: boolean - onPress: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - } - size="24" - strokeWidth={3.25} - /> - ) : ( - } - size="24" - strokeWidth={3.25} - /> - ) - } - label={_(msg`Home`)} - accessibilityLabel={_(msg`Home`)} - accessibilityHint="" - bold={isActive} - onPress={onPress} - /> - ) -} -HomeMenuItem = React.memo(HomeMenuItem) - -let NotificationsMenuItem = ({ - isActive, - onPress, -}: { - isActive: boolean - onPress: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - const numUnreadNotifications = useUnreadNotifications() - return ( - } - size="24" - strokeWidth={1.7} - /> - ) : ( - } - size="24" - strokeWidth={1.7} - /> - ) - } - label={_(msg`Notifications`)} - accessibilityLabel={_(msg`Notifications`)} - accessibilityHint={ - numUnreadNotifications === '' - ? '' - : _(msg`${numUnreadNotifications} unread`) - } - count={numUnreadNotifications} - bold={isActive} - onPress={onPress} - /> - ) -} -NotificationsMenuItem = React.memo(NotificationsMenuItem) - -let FeedsMenuItem = ({ - isActive, - onPress, -}: { - isActive: boolean - onPress: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - - ) : ( - - ) - } - label={_(msg`Feeds`)} - accessibilityLabel={_(msg`Feeds`)} - accessibilityHint="" - bold={isActive} - onPress={onPress} - /> - ) -} -FeedsMenuItem = React.memo(FeedsMenuItem) - -let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - } - label={_(msg`Lists`)} - accessibilityLabel={_(msg`Lists`)} - accessibilityHint="" - onPress={onPress} - /> - ) -} -ListsMenuItem = React.memo(ListsMenuItem) - -let ModerationMenuItem = ({ - onPress, -}: { - onPress: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - } - label={_(msg`Moderation`)} - accessibilityLabel={_(msg`Moderation`)} - accessibilityHint="" - onPress={onPress} - /> - ) -} -ModerationMenuItem = React.memo(ModerationMenuItem) - -let ProfileMenuItem = ({ - isActive, - onPress, -}: { - isActive: boolean - onPress: () => void -}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - } - size="26" - strokeWidth={1.5} - /> - ) : ( - } - size="26" - strokeWidth={1.5} - /> - ) - } - label={_(msg`Profile`)} - accessibilityLabel={_(msg`Profile`)} - accessibilityHint="" - onPress={onPress} - /> - ) -} -ProfileMenuItem = React.memo(ProfileMenuItem) - -let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => { - const {_} = useLingui() - const pal = usePalette('default') - return ( - } - size="26" - strokeWidth={1.75} - /> - } - label={_(msg`Settings`)} - accessibilityLabel={_(msg`Settings`)} - accessibilityHint="" - onPress={onPress} - /> - ) -} -SettingsMenuItem = React.memo(SettingsMenuItem) - -function MenuItem({ - icon, - label, - accessibilityLabel, - count, - bold, - onPress, -}: MenuItemProps) { - const pal = usePalette('default') - return ( - - - {icon} - {count ? ( - 2 - ? styles.menuItemCountHundreds - : count.length > 1 - ? styles.menuItemCountTens - : undefined, - ]}> - - {count} - - - ) : undefined} - - - {label} - - - ) -} - -const styles = StyleSheet.create({ - view: { - flex: 1, - paddingBottom: 50, - maxWidth: 300, - }, - viewDarkMode: { - backgroundColor: '#1B1919', - }, - main: { - paddingLeft: 20, - paddingTop: 20, - }, - smallSpacer: { - height: 20, - }, - - profileCardDisplayName: { - marginTop: 20, - paddingRight: 30, - }, - profileCardHandle: { - marginTop: 4, - paddingRight: 30, - }, - profileCardFollowers: { - marginTop: 16, - paddingRight: 10, - }, - - menuItem: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 16, - paddingRight: 10, - }, - menuItemIconWrapper: { - width: 24, - height: 24, - alignItems: 'center', - justifyContent: 'center', - marginRight: 12, - }, - menuItemCount: { - position: 'absolute', - width: 'auto', - right: -6, - top: -4, - backgroundColor: colors.blue3, - paddingHorizontal: 4, - paddingBottom: 1, - borderRadius: 6, - }, - menuItemCountTens: { - width: 25, - }, - menuItemCountHundreds: { - right: -12, - width: 34, - }, - menuItemCountLabel: { - fontSize: 12, - fontWeight: 'bold', - fontVariant: ['tabular-nums'], - color: colors.white, - }, - - inviteCodes: { - paddingLeft: 0, - paddingVertical: 8, - flexDirection: 'row', - }, - inviteCodesIcon: { - marginRight: 6, - flexShrink: 0, - marginTop: 2, - }, - - footer: { - flexWrap: 'wrap', - flexDirection: 'row', - gap: 8, - paddingRight: 20, - paddingTop: 20, - paddingLeft: 20, - }, - footerBtn: { - flexDirection: 'row', - alignItems: 'center', - padding: 10, - borderRadius: 25, - }, - footerBtnFeedback: { - paddingHorizontal: 20, - }, - footerBtnFeedbackLight: { - backgroundColor: '#DDEFFF', - }, - footerBtnFeedbackDark: { - backgroundColor: colors.blue6, - }, -}) diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 562abc56cb..89dea81d66 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -6,23 +6,15 @@ import { useWindowDimensions, View, } from 'react-native' -import {Drawer} from 'react-native-drawer-layout' import Animated from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' import * as NavigationBar from 'expo-navigation-bar' import {StatusBar} from 'expo-status-bar' -import {useNavigationState} from '@react-navigation/native' import {useSession} from '#/state/session' -import { - useIsDrawerOpen, - useIsDrawerSwipeDisabled, - useSetDrawerOpen, -} from '#/state/shell' import {useCloseAnyActiveElement} from '#/state/util' import {usePalette} from 'lib/hooks/usePalette' import * as notifications from 'lib/notifications/notifications' -import {isStateAtTabRoot} from 'lib/routes/helpers' import {useTheme} from 'lib/ThemeContext' import {isAndroid} from 'platform/detection' import {useDialogStateContext} from 'state/dialogs' @@ -34,29 +26,15 @@ import {SigninDialog} from '#/components/dialogs/Signin' import {Outlet as PortalOutlet} from '#/components/Portal' import {RoutesContainer, TabsNavigator} from '../../Navigation' import {Composer} from './Composer' -import {DrawerContent} from './Drawer' function ShellInner() { - const isDrawerOpen = useIsDrawerOpen() - const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() - const setIsDrawerOpen = useSetDrawerOpen() const winDim = useWindowDimensions() const safeAreaInsets = useSafeAreaInsets() const containerPadding = React.useMemo( () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}), [safeAreaInsets], ) - const renderDrawerContent = React.useCallback(() => , []) - const onOpenDrawer = React.useCallback( - () => setIsDrawerOpen(true), - [setIsDrawerOpen], - ) - const onCloseDrawer = React.useCallback( - () => setIsDrawerOpen(false), - [setIsDrawerOpen], - ) - const canGoBack = useNavigationState(state => !isStateAtTabRoot(state)) - const {hasSession, currentAccount} = useSession() + const {currentAccount} = useSession() const closeAnyActiveElement = useCloseAnyActiveElement() const {importantForAccessibility} = useDialogStateContext() // start undefined @@ -90,15 +68,7 @@ function ShellInner() { style={containerPadding} importantForAccessibility={importantForAccessibility}> - - - + diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 9dab23671f..6026a6a342 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -1,11 +1,7 @@ import React, {useEffect} from 'react' -import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {StyleSheet, View} from 'react-native' import {useNavigation} from '@react-navigation/native' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' -import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' import {useCloseAllActiveElements} from '#/state/util' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {NavigationProp} from 'lib/routes/types' @@ -13,23 +9,15 @@ import {colors, s} from 'lib/styles' import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {SigninDialog} from '#/components/dialogs/Signin' import {Outlet as PortalOutlet} from '#/components/Portal' -import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' import {FlatNavigator, RoutesContainer} from '../../Navigation' import {Lightbox} from '../com/lightbox/Lightbox' import {ModalsContainer} from '../com/modals/Modal' import {ErrorBoundary} from '../com/util/ErrorBoundary' import {Composer} from './Composer.web' -import {DrawerContent} from './Drawer' function ShellInner() { - const isDrawerOpen = useIsDrawerOpen() - const setDrawerOpen = useSetDrawerOpen() - const {isDesktop} = useWebMediaQueries() const navigator = useNavigation() const closeAllActiveElements = useCloseAllActiveElements() - const {_} = useLingui() - - useWebBodyScrollLock(isDrawerOpen) useEffect(() => { const unsubscribe = navigator.addListener('state', () => { @@ -49,24 +37,6 @@ function ShellInner() { - - {!isDesktop && isDrawerOpen && ( - { - // Only close if press happens outside of the drawer - if (ev.target === ev.currentTarget) { - setDrawerOpen(false) - } - }} - accessibilityLabel={_(msg`Close navigation footer`)} - accessibilityHint={_(msg`Closes bottom navigation bar`)}> - - - - - - - )} ) } @@ -89,21 +59,4 @@ const styles = StyleSheet.create({ bgDark: { backgroundColor: colors.black, // TODO }, - drawerMask: { - // @ts-ignore web only - position: 'fixed', - width: '100%', - height: '100%', - top: 0, - left: 0, - backgroundColor: 'rgba(0,0,0,0.25)', - }, - drawerContainer: { - display: 'flex', - // @ts-ignore web only - position: 'fixed', - top: 0, - left: 0, - height: '100%', - }, })