diff options
Diffstat (limited to 'src/view')
40 files changed, 213 insertions, 144 deletions
diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index c74c2aa33..3e2c9c1bf 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -9,6 +9,7 @@ import {usePalette} from 'lib/hooks/usePalette' import {useStores} from 'state/index' import {useAnalytics} from 'lib/analytics/analytics' import {SplashScreen} from './SplashScreen' +import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' enum ScreenState { S_LoginOrCreateAccount, @@ -19,6 +20,7 @@ enum ScreenState { export const LoggedOut = observer(function LoggedOutImpl() { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {screen} = useAnalytics() const [screenState, setScreenState] = React.useState<ScreenState>( ScreenState.S_LoginOrCreateAccount, @@ -26,8 +28,8 @@ export const LoggedOut = observer(function LoggedOutImpl() { React.useEffect(() => { screen('Login') - store.shell.setMinimalShellMode(true) - }, [store, screen]) + setMinimalShellMode(true) + }, [screen, setMinimalShellMode]) if ( store.session.isResumingSession || diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx index a36544a03..bec1dc236 100644 --- a/src/view/com/auth/Onboarding.tsx +++ b/src/view/com/auth/Onboarding.tsx @@ -8,14 +8,16 @@ import {useStores} from 'state/index' import {Welcome} from './onboarding/Welcome' import {RecommendedFeeds} from './onboarding/RecommendedFeeds' import {RecommendedFollows} from './onboarding/RecommendedFollows' +import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' export const Onboarding = observer(function OnboardingImpl() { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() React.useEffect(() => { - store.shell.setMinimalShellMode(true) - }, [store]) + setMinimalShellMode(true) + }, [setMinimalShellMode]) const next = () => store.onboarding.next() const skip = () => store.onboarding.skip() diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index b4d257816..1037007b7 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -38,7 +38,7 @@ export const FeedPage = observer(function FeedPageImpl({ const store = useStores() const pal = usePalette('default') const {isDesktop} = useWebMediaQueries() - const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store) + const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll() const {screen, track} = useAnalytics() const headerOffset = useHeaderOffset() const scrollElRef = React.useRef<FlatList>(null) diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx index d5de87081..9848ce2d5 100644 --- a/src/view/com/pager/FeedsTabBarMobile.tsx +++ b/src/view/com/pager/FeedsTabBarMobile.tsx @@ -13,21 +13,23 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {s} from 'lib/styles' import {HITSLOP_10} from 'lib/constants' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import Animated from 'react-native-reanimated' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {useSetDrawerOpen} from '#/state/shell/drawer-open' export const FeedsTabBar = observer(function FeedsTabBarImpl( props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, ) { const pal = usePalette('default') const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const items = useHomeTabs(store.preferences.pinnedFeeds) const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3) - const {headerMinimalShellTransform} = useMinimalShellMode() + const {minimalShellMode, headerMinimalShellTransform} = useMinimalShellMode() const onPressAvi = React.useCallback(() => { - store.shell.openDrawer() - }, [store]) + setDrawerOpen(true) + }, [setDrawerOpen]) return ( <Animated.View @@ -36,7 +38,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl( pal.border, styles.tabBar, headerMinimalShellTransform, - store.shell.minimalShellMode && styles.disabled, + minimalShellMode && styles.disabled, ]}> <View style={[pal.view, styles.topBar]}> <View style={[pal.view]}> diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 8e957728b..0b8015aa9 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -17,6 +17,7 @@ import {NavigationProp} from 'lib/routes/types' import {BACK_HITSLOP} from 'lib/constants' import {isNative} from 'platform/detection' import {ImagesLightbox} from 'state/models/ui/shell' +import {useSetDrawerOpen} from '#/state/shell' export const ProfileSubpageHeader = observer(function HeaderImpl({ isLoading, @@ -42,6 +43,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({ avatarType: UserAvatarType }>) { const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation<NavigationProp>() const {isMobile} = useWebMediaQueries() const pal = usePalette('default') @@ -56,8 +58,8 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({ }, [navigation]) const onPressMenu = React.useCallback(() => { - store.shell.openDrawer() - }, [store]) + setDrawerOpen(true) + }, [setDrawerOpen]) const onPressAvi = React.useCallback(() => { if ( diff --git a/src/view/com/search/HeaderWithInput.tsx b/src/view/com/search/HeaderWithInput.tsx index 6bd1b2f00..1a6b427c6 100644 --- a/src/view/com/search/HeaderWithInput.tsx +++ b/src/view/com/search/HeaderWithInput.tsx @@ -8,10 +8,10 @@ import {Text} from 'view/com/util/text/Text' import {MagnifyingGlassIcon} from 'lib/icons' import {useTheme} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' -import {useStores} from 'state/index' import {useAnalytics} from 'lib/analytics/analytics' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {HITSLOP_10} from 'lib/constants' +import {useSetDrawerOpen} from '#/state/shell' interface Props { isInputFocused: boolean @@ -33,7 +33,7 @@ export function HeaderWithInput({ onSubmitQuery, showMenu = true, }: Props) { - const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const theme = useTheme() const pal = usePalette('default') const {track} = useAnalytics() @@ -42,8 +42,8 @@ export function HeaderWithInput({ const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') - store.shell.openDrawer() - }, [track, store]) + setDrawerOpen(true) + }, [track, setDrawerOpen]) const onPressCancelSearchInner = React.useCallback(() => { onPressCancelSearch() diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx index 4eff38a31..c871d9404 100644 --- a/src/view/com/util/SimpleViewHeader.tsx +++ b/src/view/com/util/SimpleViewHeader.tsx @@ -10,11 +10,11 @@ import { import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useNavigation} from '@react-navigation/native' import {CenteredView} from './Views' -import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useAnalytics} from 'lib/analytics/analytics' import {NavigationProp} from 'lib/routes/types' +import {useSetDrawerOpen} from '#/state/shell' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -27,7 +27,7 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({ style?: StyleProp<ViewStyle> }>) { const pal = usePalette('default') - const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation<NavigationProp>() const {track} = useAnalytics() const {isMobile} = useWebMediaQueries() @@ -43,8 +43,8 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({ const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') - store.shell.openDrawer() - }, [track, store]) + setDrawerOpen(true) + }, [track, setDrawerOpen]) const Container = isMobile ? View : CenteredView return ( diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 4cc9efb78..adf2e4f08 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -5,13 +5,13 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useNavigation} from '@react-navigation/native' import {CenteredView} from './Views' import {Text} from './text/Text' -import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useAnalytics} from 'lib/analytics/analytics' import {NavigationProp} from 'lib/routes/types' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import Animated from 'react-native-reanimated' +import {useSetDrawerOpen} from '#/state/shell' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -33,7 +33,7 @@ export const ViewHeader = observer(function ViewHeaderImpl({ renderButton?: () => JSX.Element }) { const pal = usePalette('default') - const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation<NavigationProp>() const {track} = useAnalytics() const {isDesktop, isTablet} = useWebMediaQueries() @@ -48,8 +48,8 @@ export const ViewHeader = observer(function ViewHeaderImpl({ const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') - store.shell.openDrawer() - }, [track, store]) + setDrawerOpen(true) + }, [track, setDrawerOpen]) if (isDesktop) { if (showOnDesktop) { diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx index 32f9e13e1..74d293ef4 100644 --- a/src/view/screens/AppPasswords.tsx +++ b/src/view/screens/AppPasswords.tsx @@ -16,20 +16,22 @@ import {useAnalytics} from 'lib/analytics/analytics' import {useFocusEffect} from '@react-navigation/native' import {ViewHeader} from '../com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'> export const AppPasswords = withAuthRequired( observer(function AppPasswordsImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {screen} = useAnalytics() const {isTabletOrDesktop} = useWebMediaQueries() useFocusEffect( React.useCallback(() => { screen('AppPasswords') - store.shell.setMinimalShellMode(false) - }, [screen, store]), + setMinimalShellMode(false) + }, [screen, setMinimalShellMode]), ) const onAdd = React.useCallback(async () => { diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx index e80eba905..712172c3b 100644 --- a/src/view/screens/CommunityGuidelines.tsx +++ b/src/view/screens/CommunityGuidelines.tsx @@ -5,10 +5,10 @@ import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' -import {useStores} from 'state/index' import {ScrollView} from 'view/com/util/Views' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -16,12 +16,12 @@ type Props = NativeStackScreenProps< > export const CommunityGuidelinesScreen = (_props: Props) => { const pal = usePalette('default') - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx index 9de4dc9e7..816c1c1ee 100644 --- a/src/view/screens/CopyrightPolicy.tsx +++ b/src/view/screens/CopyrightPolicy.tsx @@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' -import {useStores} from 'state/index' import {ScrollView} from 'view/com/util/Views' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'CopyrightPolicy'> export const CopyrightPolicyScreen = (_props: Props) => { const pal = usePalette('default') - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 3ef5b4d86..169660a8f 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -27,12 +27,14 @@ import {FeedSourceModel} from 'state/models/content/feed-source' import {FlatList} from 'view/com/util/Views' import {useFocusEffect} from '@react-navigation/native' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'> export const FeedsScreen = withAuthRequired( observer<Props>(function FeedsScreenImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {isMobile, isTabletOrDesktop} = useWebMediaQueries() const myFeeds = store.me.myFeeds const [query, setQuery] = React.useState<string>('') @@ -43,14 +45,14 @@ export const FeedsScreen = withAuthRequired( useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) myFeeds.setup() const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh()) return () => { softResetSub.remove() } - }, [store, myFeeds]), + }, [store, myFeeds, setMinimalShellMode]), ) React.useEffect(() => { // watch for changes to saved/pinned feeds diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index d8bf4f637..c58175327 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -14,6 +14,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' import {useStores} from 'state/index' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {FeedPage} from 'view/com/feeds/FeedPage' +import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' export const POLL_FREQ = 30e3 // 30sec @@ -21,6 +22,8 @@ type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'> export const HomeScreen = withAuthRequired( observer(function HomeScreenImpl({}: Props) { const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() + const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() const pagerRef = React.useRef<PagerRef>(null) const [selectedPage, setSelectedPage] = React.useState(0) const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([]) @@ -61,21 +64,21 @@ export const HomeScreen = withAuthRequired( useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - store.shell.setIsDrawerSwipeDisabled(selectedPage > 0) + setMinimalShellMode(false) + setDrawerSwipeDisabled(selectedPage > 0) return () => { - store.shell.setIsDrawerSwipeDisabled(false) + setDrawerSwipeDisabled(false) } - }, [store, selectedPage]), + }, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]), ) const onPageSelected = React.useCallback( (index: number) => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) setSelectedPage(index) - store.shell.setIsDrawerSwipeDisabled(index > 0) + setDrawerSwipeDisabled(index > 0) }, - [store, setSelectedPage], + [setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode], ) const onPressSelected = React.useCallback(() => { diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index 8b952a564..a68a3b5e3 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/src/view/screens/LanguageSettings.tsx @@ -18,6 +18,7 @@ import {useAnalytics} from 'lib/analytics/analytics' import {useFocusEffect} from '@react-navigation/native' import {LANGUAGES} from 'lib/../locale/languages' import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'> @@ -28,12 +29,13 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl( const store = useStores() const {isTabletOrDesktop} = useWebMediaQueries() const {screen, track} = useAnalytics() + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { screen('Settings') - store.shell.setMinimalShellMode(false) - }, [screen, store]), + setMinimalShellMode(false) + }, [screen, setMinimalShellMode]), ) const onPressContentLanguages = React.useCallback(() => { diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index c798b9087..a64b0ca3b 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'> export const ListsScreen = withAuthRequired( observer(function ListsScreenImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {isMobile} = useWebMediaQueries() const navigation = useNavigation<NavigationProp>() @@ -32,9 +34,9 @@ export const ListsScreen = withAuthRequired( useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) listsLists.refresh() - }, [store, listsLists]), + }, [listsLists, setMinimalShellMode]), ) const onPressNewList = React.useCallback(() => { diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index 6ae61888d..f524279a5 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -5,26 +5,26 @@ import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ScrollView} from '../com/util/Views' -import {useStores} from 'state/index' import {s} from 'lib/styles' import {ViewHeader} from '../com/util/ViewHeader' import {Text} from '../com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {getEntries} from '#/logger/logDump' import {ago} from 'lib/strings/time' +import {useSetMinimalShellMode} from '#/state/shell' export const LogScreen = observer(function Log({}: NativeStackScreenProps< CommonNavigatorParams, 'Log' >) { const pal = usePalette('default') - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const [expanded, setExpanded] = React.useState<string[]>([]) useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) const toggler = (id: string) => () => { diff --git a/src/view/screens/Moderation.tsx b/src/view/screens/Moderation.tsx index d24bc145a..142f3bce8 100644 --- a/src/view/screens/Moderation.tsx +++ b/src/view/screens/Moderation.tsx @@ -17,20 +17,22 @@ import {Text} from '../com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useAnalytics} from 'lib/analytics/analytics' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'> export const ModerationScreen = withAuthRequired( observer(function Moderation({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {screen, track} = useAnalytics() const {isTabletOrDesktop} = useWebMediaQueries() useFocusEffect( React.useCallback(() => { screen('Moderation') - store.shell.setMinimalShellMode(false) - }, [screen, store]), + setMinimalShellMode(false) + }, [screen, setMinimalShellMode]), ) const onPressContentFiltering = React.useCallback(() => { diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index f302c96b5..0dc3b706b 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' import {ProfileCard} from 'view/com/profile/ProfileCard' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -31,6 +32,7 @@ export const ModerationBlockedAccounts = withAuthRequired( observer(function ModerationBlockedAccountsImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {isTabletOrDesktop} = useWebMediaQueries() const {screen} = useAnalytics() const blockedAccounts = useMemo( @@ -41,9 +43,9 @@ export const ModerationBlockedAccounts = withAuthRequired( useFocusEffect( React.useCallback(() => { screen('BlockedAccounts') - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) blockedAccounts.refresh() - }, [screen, store, blockedAccounts]), + }, [screen, setMinimalShellMode, blockedAccounts]), ) const onRefresh = React.useCallback(() => { diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index 6a48d88ae..8794c6d17 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'> export const ModerationModlistsScreen = withAuthRequired( observer(function ModerationModlistsScreenImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {isMobile} = useWebMediaQueries() const navigation = useNavigation<NavigationProp>() @@ -32,9 +34,9 @@ export const ModerationModlistsScreen = withAuthRequired( useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) mutelists.refresh() - }, [store, mutelists]), + }, [mutelists, setMinimalShellMode]), ) const onPressNewList = React.useCallback(() => { diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index 20bd21f37..2fa27ee54 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' import {ProfileCard} from 'view/com/profile/ProfileCard' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -31,6 +32,7 @@ export const ModerationMutedAccounts = withAuthRequired( observer(function ModerationMutedAccountsImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {isTabletOrDesktop} = useWebMediaQueries() const {screen} = useAnalytics() const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store]) @@ -38,9 +40,9 @@ export const ModerationMutedAccounts = withAuthRequired( useFocusEffect( React.useCallback(() => { screen('MutedAccounts') - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) mutedAccounts.refresh() - }, [screen, store, mutedAccounts]), + }, [screen, setMinimalShellMode, mutedAccounts]), ) const onRefresh = React.useCallback(() => { diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx index cb52da58b..c2125756c 100644 --- a/src/view/screens/NotFound.tsx +++ b/src/view/screens/NotFound.tsx @@ -10,18 +10,18 @@ import {Text} from '../com/util/text/Text' import {Button} from 'view/com/util/forms/Button' import {NavigationProp} from 'lib/routes/types' import {usePalette} from 'lib/hooks/usePalette' -import {useStores} from 'state/index' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' export const NotFoundScreen = () => { const pal = usePalette('default') const navigation = useNavigation<NavigationProp>() - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) const canGoBack = navigation.canGoBack() diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index e1137ae9d..cd482bd1c 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -21,6 +21,7 @@ import {s, colors} from 'lib/styles' import {useAnalytics} from 'lib/analytics/analytics' import {isWeb} from 'platform/detection' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps< NotificationsTabNavigatorParams, @@ -29,8 +30,8 @@ type Props = NativeStackScreenProps< export const NotificationsScreen = withAuthRequired( observer(function NotificationsScreenImpl({}: Props) { const store = useStores() - const [onMainScroll, isScrolledDown, resetMainScroll] = - useOnMainScroll(store) + const setMinimalShellMode = useSetMinimalShellMode() + const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll() const scrollElRef = React.useRef<FlatList>(null) const {screen} = useAnalytics() const pal = usePalette('default') @@ -60,7 +61,7 @@ export const NotificationsScreen = withAuthRequired( // = useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) logger.debug('NotificationsScreen: Updating feed') const softResetSub = store.onScreenSoftReset(onPressLoadLatest) store.me.notifications.update() @@ -70,7 +71,7 @@ export const NotificationsScreen = withAuthRequired( softResetSub.remove() store.me.notifications.markAllRead() } - }, [store, screen, onPressLoadLatest]), + }, [store, screen, onPressLoadLatest, setMinimalShellMode]), ) useTabFocusEffect( diff --git a/src/view/screens/PostLikedBy.tsx b/src/view/screens/PostLikedBy.tsx index fb44f1f9b..2f45908b3 100644 --- a/src/view/screens/PostLikedBy.tsx +++ b/src/view/screens/PostLikedBy.tsx @@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {ViewHeader} from '../com/util/ViewHeader' import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {useStores} from 'state/index' import {makeRecordUri} from 'lib/strings/url-helpers' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'> export const PostLikedByScreen = withAuthRequired(({route}: Props) => { - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {name, rkey} = route.params const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/PostRepostedBy.tsx b/src/view/screens/PostRepostedBy.tsx index 19f0af18b..abe03467a 100644 --- a/src/view/screens/PostRepostedBy.tsx +++ b/src/view/screens/PostRepostedBy.tsx @@ -5,19 +5,19 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' -import {useStores} from 'state/index' import {makeRecordUri} from 'lib/strings/url-helpers' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'> export const PostRepostedByScreen = withAuthRequired(({route}: Props) => { - const store = useStores() const {name, rkey} = route.params const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 8bb279be8..0bdd06269 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -15,6 +15,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {clamp} from 'lodash' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {logger} from '#/logger' +import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell' const SHELL_FOOTER_HEIGHT = 44 @@ -22,6 +23,8 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'> export const PostThreadScreen = withAuthRequired( observer(function PostThreadScreenImpl({route}: Props) { const store = useStores() + const minimalShellMode = useMinimalShellMode() + const setMinimalShellMode = useSetMinimalShellMode() const safeAreaInsets = useSafeAreaInsets() const {name, rkey} = route.params const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) @@ -33,7 +36,7 @@ export const PostThreadScreen = withAuthRequired( useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) const threadCleanup = view.registerListeners() InteractionManager.runAfterInteractions(() => { @@ -47,7 +50,7 @@ export const PostThreadScreen = withAuthRequired( return () => { threadCleanup() } - }, [store, view]), + }, [view, setMinimalShellMode]), ) const onPressReply = React.useCallback(() => { @@ -80,7 +83,7 @@ export const PostThreadScreen = withAuthRequired( treeView={!!store.preferences.thread.lab_treeViewEnabled} /> </View> - {isMobile && !store.shell.minimalShellMode && ( + {isMobile && !minimalShellMode && ( <View style={[ styles.prompt, diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx index 0067b460b..f709c9fda 100644 --- a/src/view/screens/PrivacyPolicy.tsx +++ b/src/view/screens/PrivacyPolicy.tsx @@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' -import {useStores} from 'state/index' import {ScrollView} from 'view/com/util/Views' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'> export const PrivacyPolicyScreen = (_props: Props) => { const pal = usePalette('default') - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index f183ebbc2..9a25612ad 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -30,11 +30,13 @@ import {FeedSourceModel} from 'state/models/content/feed-source' import {useSetTitle} from 'lib/hooks/useSetTitle' import {combinedDisplayName} from 'lib/strings/display-names' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'> export const ProfileScreen = withAuthRequired( observer(function ProfileScreenImpl({route}: Props) { const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {screen, track} = useAnalytics() const viewSelectorRef = React.useRef<ViewSelectorHandle>(null) const name = route.params.name === 'me' ? store.me.did : route.params.name @@ -69,7 +71,7 @@ export const ProfileScreen = withAuthRequired( React.useCallback(() => { const softResetSub = store.onScreenSoftReset(onSoftReset) let aborted = false - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) const feedCleanup = uiState.feed.registerListeners() if (!hasSetup) { uiState.setup().then(() => { @@ -84,7 +86,7 @@ export const ProfileScreen = withAuthRequired( feedCleanup() softResetSub.remove() } - }, [store, onSoftReset, uiState, hasSetup]), + }, [store, onSoftReset, uiState, hasSetup, setMinimalShellMode]), ) // events diff --git a/src/view/screens/ProfileFeedLikedBy.tsx b/src/view/screens/ProfileFeedLikedBy.tsx index 2e9d12aae..4972116f3 100644 --- a/src/view/screens/ProfileFeedLikedBy.tsx +++ b/src/view/screens/ProfileFeedLikedBy.tsx @@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {ViewHeader} from '../com/util/ViewHeader' import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {useStores} from 'state/index' import {makeRecordUri} from 'lib/strings/url-helpers' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeedLikedBy'> export const ProfileFeedLikedByScreen = withAuthRequired(({route}: Props) => { - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {name, rkey} = route.params const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey) useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index e2f95fbe4..49f55bf46 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {ViewHeader} from '../com/util/ViewHeader' import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' -import {useStores} from 'state/index' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'> export const ProfileFollowersScreen = withAuthRequired(({route}: Props) => { - const store = useStores() const {name} = route.params + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index f70944f55..4f0ff7d67 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {ViewHeader} from '../com/util/ViewHeader' import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' -import {useStores} from 'state/index' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'> export const ProfileFollowsScreen = withAuthRequired(({route}: Props) => { - const store = useStores() const {name} = route.params + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 594e9fd29..b84732d53 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -45,6 +45,7 @@ import {makeProfileLink, makeListLink} from 'lib/routes/links' import {ComposeIcon2} from 'lib/icons' import {ListItems} from 'view/com/lists/ListItems' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_MOD = ['About'] @@ -105,6 +106,7 @@ export const ProfileListScreenInner = observer( listOwnerDid, }: Props & {listOwnerDid: string}) { const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const {rkey} = route.params const feedSectionRef = React.useRef<SectionRef>(null) const aboutSectionRef = React.useRef<SectionRef>(null) @@ -124,13 +126,13 @@ export const ProfileListScreenInner = observer( useFocusEffect( useCallback(() => { - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) list.loadMore(true).then(() => { if (list.isCuratelist) { feed.setup() } }) - }, [store, list, feed]), + }, [setMinimalShellMode, list, feed]), ) const onPressAddUser = useCallback(() => { diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 18bbf06c6..487f56643 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -27,6 +27,7 @@ import * as Toast from 'view/com/util/Toast' import {Haptics} from 'lib/haptics' import {TextLink} from 'view/com/util/Link' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' const HITSLOP_TOP = { top: 20, @@ -48,6 +49,7 @@ export const SavedFeeds = withAuthRequired( const store = useStores() const {isMobile, isTabletOrDesktop} = useWebMediaQueries() const {screen} = useAnalytics() + const setMinimalShellMode = useSetMinimalShellMode() const savedFeeds = useMemo(() => { const model = new SavedFeedsModel(store) @@ -57,9 +59,9 @@ export const SavedFeeds = withAuthRequired( useFocusEffect( useCallback(() => { screen('SavedFeeds') - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) savedFeeds.refresh() - }, [screen, store, savedFeeds]), + }, [screen, setMinimalShellMode, savedFeeds]), ) return ( diff --git a/src/view/screens/SearchMobile.tsx b/src/view/screens/SearchMobile.tsx index b80c1667f..c1df58ffd 100644 --- a/src/view/screens/SearchMobile.tsx +++ b/src/view/screens/SearchMobile.tsx @@ -27,15 +27,18 @@ import {ProfileCard} from 'view/com/profile/ProfileCard' import {usePalette} from 'lib/hooks/usePalette' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {isAndroid, isIOS} from 'platform/detection' +import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'> export const SearchScreen = withAuthRequired( observer<Props>(function SearchScreenImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() + const setIsDrawerSwipeDisabled = useSetDrawerSwipeDisabled() const scrollViewRef = React.useRef<ScrollView>(null) const flatListRef = React.useRef<FlatList>(null) - const [onMainScroll] = useOnMainScroll(store) + const [onMainScroll] = useOnMainScroll() const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false) const [query, setQuery] = React.useState<string>('') const autocompleteView = React.useMemo<UserAutocompleteModel>( @@ -75,8 +78,8 @@ export const SearchScreen = withAuthRequired( setQuery('') autocompleteView.setActive(false) setSearchUIModel(undefined) - store.shell.setIsDrawerSwipeDisabled(false) - }, [setQuery, autocompleteView, store]) + setIsDrawerSwipeDisabled(false) + }, [setQuery, autocompleteView, setIsDrawerSwipeDisabled]) const onSubmitQuery = React.useCallback(() => { if (query.length === 0) { @@ -86,8 +89,8 @@ export const SearchScreen = withAuthRequired( const model = new SearchUIModel(store) model.fetch(query) setSearchUIModel(model) - store.shell.setIsDrawerSwipeDisabled(true) - }, [query, setSearchUIModel, store]) + setIsDrawerSwipeDisabled(true) + }, [query, setSearchUIModel, store, setIsDrawerSwipeDisabled]) const onSoftReset = React.useCallback(() => { scrollViewRef.current?.scrollTo({x: 0, y: 0}) @@ -102,7 +105,7 @@ export const SearchScreen = withAuthRequired( softResetSub.remove() } - store.shell.setMinimalShellMode(false) + setMinimalShellMode(false) autocompleteView.setup() if (!foafs.hasData) { foafs.fetch() @@ -112,7 +115,14 @@ export const SearchScreen = withAuthRequired( } return cleanup - }, [store, autocompleteView, foafs, suggestedActors, onSoftReset]), + }, [ + store, + autocompleteView, + foafs, + suggestedActors, + onSoftReset, + setMinimalShellMode, + ]), ) const onPress = useCallback(() => { diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 3f498ba85..3f957f3ff 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -46,6 +46,7 @@ import Clipboard from '@react-native-clipboard/clipboard' import {makeProfileLink} from 'lib/routes/links' import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' // TEMPORARY (APP-700) // remove after backend testing finishes @@ -58,6 +59,7 @@ export const SettingsScreen = withAuthRequired( observer(function Settings({}: Props) { const pal = usePalette('default') const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() const navigation = useNavigation<NavigationProp>() const {isMobile} = useWebMediaQueries() const {screen, track} = useAnalytics() @@ -88,8 +90,8 @@ export const SettingsScreen = withAuthRequired( useFocusEffect( React.useCallback(() => { screen('Settings') - store.shell.setMinimalShellMode(false) - }, [screen, store]), + setMinimalShellMode(false) + }, [screen, setMinimalShellMode]), ) const onPressAddAccount = React.useCallback(() => { diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx index dc00d473d..7106b4136 100644 --- a/src/view/screens/Support.tsx +++ b/src/view/screens/Support.tsx @@ -3,23 +3,23 @@ import {View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' -import {useStores} from 'state/index' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {CenteredView} from 'view/com/util/Views' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {HELP_DESK_URL} from 'lib/constants' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'> export const SupportScreen = (_props: Props) => { - const store = useStores() const pal = usePalette('default') + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx index 09b2a7f22..b7a388b65 100644 --- a/src/view/screens/TermsOfService.tsx +++ b/src/view/screens/TermsOfService.tsx @@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' -import {useStores} from 'state/index' import {ScrollView} from 'view/com/util/Views' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'> export const TermsOfServiceScreen = (_props: Props) => { const pal = usePalette('default') - const store = useStores() + const setMinimalShellMode = useSetMinimalShellMode() useFocusEffect( React.useCallback(() => { - store.shell.setMinimalShellMode(false) - }, [store]), + setMinimalShellMode(false) + }, [setMinimalShellMode]), ) return ( diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index c2d307f59..7f5e6c5e5 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -43,11 +43,13 @@ import {NavigationProp} from 'lib/routes/types' import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' import {isWeb} from 'platform/detection' import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format' +import {useSetDrawerOpen} from '#/state/shell' export const DrawerContent = observer(function DrawerContentImpl() { const theme = useTheme() const pal = usePalette('default') const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation<NavigationProp>() const {track} = useAnalytics() const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = @@ -62,7 +64,7 @@ export const DrawerContent = observer(function DrawerContentImpl() { (tab: string) => { track('Menu:ItemClicked', {url: tab}) const state = navigation.getState() - store.shell.closeDrawer() + 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') { @@ -83,7 +85,7 @@ export const DrawerContent = observer(function DrawerContentImpl() { } } }, - [store, track, navigation], + [store, track, navigation, setDrawerOpen], ) const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab]) @@ -110,20 +112,20 @@ export const DrawerContent = observer(function DrawerContentImpl() { const onPressLists = React.useCallback(() => { track('Menu:ItemClicked', {url: 'Lists'}) navigation.navigate('Lists') - store.shell.closeDrawer() - }, [navigation, track, store.shell]) + setDrawerOpen(false) + }, [navigation, track, setDrawerOpen]) const onPressModeration = React.useCallback(() => { track('Menu:ItemClicked', {url: 'Moderation'}) navigation.navigate('Moderation') - store.shell.closeDrawer() - }, [navigation, track, store.shell]) + setDrawerOpen(false) + }, [navigation, track, setDrawerOpen]) const onPressSettings = React.useCallback(() => { track('Menu:ItemClicked', {url: 'Settings'}) navigation.navigate('Settings') - store.shell.closeDrawer() - }, [navigation, track, store.shell]) + setDrawerOpen(false) + }, [navigation, track, setDrawerOpen]) const onPressFeedback = React.useCallback(() => { track('Menu:FeedbackClicked') @@ -437,13 +439,14 @@ const InviteCodes = observer(function InviteCodesImpl({ }) { const {track} = useAnalytics() const store = useStores() + const setDrawerOpen = useSetDrawerOpen() const pal = usePalette('default') const {invitesAvailable} = store.me const onPress = React.useCallback(() => { track('Menu:ItemClicked', {url: '#invite-codes'}) - store.shell.closeDrawer() + setDrawerOpen(false) store.shell.openModal({name: 'invite-codes'}) - }, [store, track]) + }, [store, track, setDrawerOpen]) return ( <TouchableOpacity testID="menuItemInviteCodes" diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index c4e3790ad..d360ceead 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -37,7 +37,7 @@ export const BottomBar = observer(function BottomBarImpl({ const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = useNavigationTabState() - const {footerMinimalShellTransform} = useMinimalShellMode() + const {minimalShellMode, footerMinimalShellTransform} = useMinimalShellMode() const {notifications} = store.me const onPressTab = React.useCallback( @@ -83,7 +83,7 @@ export const BottomBar = observer(function BottomBarImpl({ pal.border, {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)}, footerMinimalShellTransform, - store.shell.minimalShellMode && styles.disabled, + minimalShellMode && styles.disabled, ]}> <Btn testID="bottomBarHomeBtn" diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index b564f99f8..703edf27a 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -6,6 +6,7 @@ import { StyleSheet, useWindowDimensions, View, + BackHandler, } from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {Drawer} from 'react-native-drawer-layout' @@ -18,7 +19,6 @@ import {DrawerContent} from './Drawer' import {Composer} from './Composer' import {useTheme} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' -import * as backHandler from 'lib/routes/back-handler' import {RoutesContainer, TabsNavigator} from '../../Navigation' import {isStateAtTabRoot} from 'lib/routes/helpers' import { @@ -26,9 +26,18 @@ import { initialWindowMetrics, } from 'react-native-safe-area-context' import {useOTAUpdate} from 'lib/hooks/useOTAUpdate' +import { + useIsDrawerOpen, + useSetDrawerOpen, + useIsDrawerSwipeDisabled, +} from '#/state/shell' +import {isAndroid} from 'platform/detection' const ShellInner = observer(function ShellInnerImpl() { const store = useStores() + const isDrawerOpen = useIsDrawerOpen() + const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() + const setIsDrawerOpen = useSetDrawerOpen() useOTAUpdate() // this hook polls for OTA updates every few seconds const winDim = useWindowDimensions() const safeAreaInsets = useSafeAreaInsets() @@ -38,20 +47,26 @@ const ShellInner = observer(function ShellInnerImpl() { ) const renderDrawerContent = React.useCallback(() => <DrawerContent />, []) const onOpenDrawer = React.useCallback( - () => store.shell.openDrawer(), - [store], + () => setIsDrawerOpen(true), + [setIsDrawerOpen], ) const onCloseDrawer = React.useCallback( - () => store.shell.closeDrawer(), - [store], + () => setIsDrawerOpen(false), + [setIsDrawerOpen], ) const canGoBack = useNavigationState(state => !isStateAtTabRoot(state)) React.useEffect(() => { - const listener = backHandler.init(store) + let listener = {remove() {}} + if (isAndroid) { + listener = BackHandler.addEventListener('hardwareBackPress', () => { + setIsDrawerOpen(false) + return store.shell.closeAnyActiveElement() + }) + } return () => { - listener() + listener.remove() } - }, [store]) + }, [store, setIsDrawerOpen]) return ( <> @@ -59,14 +74,12 @@ const ShellInner = observer(function ShellInnerImpl() { <ErrorBoundary> <Drawer renderDrawerContent={renderDrawerContent} - open={store.shell.isDrawerOpen} + open={isDrawerOpen} onOpen={onOpenDrawer} onClose={onCloseDrawer} swipeEdgeWidth={winDim.width / 2} swipeEnabled={ - !canGoBack && - store.session.hasSession && - !store.shell.isDrawerSwipeDisabled + !canGoBack && store.session.hasSession && !isDrawerSwipeDisabled }> <TabsNavigator /> </Drawer> diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 3f2fed69b..843d0b284 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -17,18 +17,22 @@ import {BottomBarWeb} from './bottom-bar/BottomBarWeb' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' import {useAuxClick} from 'lib/hooks/useAuxClick' +import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' const ShellInner = observer(function ShellInnerImpl() { const store = useStores() + const isDrawerOpen = useIsDrawerOpen() + const setDrawerOpen = useSetDrawerOpen() const {isDesktop, isMobile} = useWebMediaQueries() const navigator = useNavigation<NavigationProp>() useAuxClick() useEffect(() => { navigator.addListener('state', () => { + setDrawerOpen(false) store.shell.closeAnyActiveElement() }) - }, [navigator, store.shell]) + }, [navigator, store.shell, setDrawerOpen]) const showBottomBar = isMobile && !store.onboarding.isActive const showSideNavs = @@ -57,9 +61,9 @@ const ShellInner = observer(function ShellInnerImpl() { {showBottomBar && <BottomBarWeb />} <ModalsContainer /> <Lightbox /> - {!isDesktop && store.shell.isDrawerOpen && ( + {!isDesktop && isDrawerOpen && ( <TouchableOpacity - onPress={() => store.shell.closeDrawer()} + onPress={() => setDrawerOpen(false)} style={styles.drawerMask} accessibilityLabel="Close navigation footer" accessibilityHint="Closes bottom navigation bar"> |