Extract shell state into separate context (#1824)
* WIP * Add shell state * Integrate new shell state for drawer and minimal shell mode * Replace isDrawerSwipeDisabled * Split shell state into separate contexts to avoid needless re-renders * Fix typo --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>zio/stable
parent
7158157f5f
commit
bfe196bac5
|
@ -19,6 +19,7 @@ import * as analytics from 'lib/analytics/analytics'
|
|||
import * as Toast from 'view/com/util/Toast'
|
||||
import {queryClient} from 'lib/react-query'
|
||||
import {TestCtrls} from 'view/com/testing/TestCtrls'
|
||||
import {Provider as ShellStateProvider} from 'state/shell'
|
||||
|
||||
SplashScreen.preventAutoHideAsync()
|
||||
|
||||
|
@ -44,20 +45,22 @@ const App = observer(function AppImpl() {
|
|||
return null
|
||||
}
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider theme={rootStore.shell.colorMode}>
|
||||
<RootSiblingParent>
|
||||
<analytics.Provider>
|
||||
<RootStoreProvider value={rootStore}>
|
||||
<GestureHandlerRootView style={s.h100pct}>
|
||||
<TestCtrls />
|
||||
<Shell />
|
||||
</GestureHandlerRootView>
|
||||
</RootStoreProvider>
|
||||
</analytics.Provider>
|
||||
</RootSiblingParent>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
<ShellStateProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider theme={rootStore.shell.colorMode}>
|
||||
<RootSiblingParent>
|
||||
<analytics.Provider>
|
||||
<RootStoreProvider value={rootStore}>
|
||||
<GestureHandlerRootView style={s.h100pct}>
|
||||
<TestCtrls />
|
||||
<Shell />
|
||||
</GestureHandlerRootView>
|
||||
</RootStoreProvider>
|
||||
</analytics.Provider>
|
||||
</RootSiblingParent>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
</ShellStateProvider>
|
||||
)
|
||||
})
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@ import {Shell} from 'view/shell/index'
|
|||
import {ToastContainer} from 'view/com/util/Toast.web'
|
||||
import {ThemeProvider} from 'lib/ThemeContext'
|
||||
import {queryClient} from 'lib/react-query'
|
||||
import {Provider as ShellStateProvider} from 'state/shell'
|
||||
|
||||
const App = observer(function AppImpl() {
|
||||
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
|
||||
|
@ -34,20 +35,22 @@ const App = observer(function AppImpl() {
|
|||
}
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider theme={rootStore.shell.colorMode}>
|
||||
<RootSiblingParent>
|
||||
<analytics.Provider>
|
||||
<RootStoreProvider value={rootStore}>
|
||||
<SafeAreaProvider>
|
||||
<Shell />
|
||||
</SafeAreaProvider>
|
||||
<ToastContainer />
|
||||
</RootStoreProvider>
|
||||
</analytics.Provider>
|
||||
</RootSiblingParent>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
<ShellStateProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider theme={rootStore.shell.colorMode}>
|
||||
<RootSiblingParent>
|
||||
<analytics.Provider>
|
||||
<RootStoreProvider value={rootStore}>
|
||||
<SafeAreaProvider>
|
||||
<Shell />
|
||||
</SafeAreaProvider>
|
||||
<ToastContainer />
|
||||
</RootStoreProvider>
|
||||
</analytics.Provider>
|
||||
</RootSiblingParent>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
</ShellStateProvider>
|
||||
)
|
||||
})
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@ import {NavigationProp} from 'lib/routes/types'
|
|||
import {AccountData} from 'state/models/session'
|
||||
import {reset as resetNavigation} from '../../Navigation'
|
||||
import * as Toast from 'view/com/util/Toast'
|
||||
import {useSetDrawerOpen} from '#/state/shell/drawer-open'
|
||||
|
||||
export function useAccountSwitcher(): [
|
||||
boolean,
|
||||
|
@ -13,8 +14,8 @@ export function useAccountSwitcher(): [
|
|||
(acct: AccountData) => Promise<void>,
|
||||
] {
|
||||
const {track} = useAnalytics()
|
||||
|
||||
const store = useStores()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
const [isSwitching, setIsSwitching] = useState(false)
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
|
||||
|
@ -23,6 +24,7 @@ export function useAccountSwitcher(): [
|
|||
track('Settings:SwitchAccountButtonClicked')
|
||||
setIsSwitching(true)
|
||||
const success = await store.session.resumeSession(acct)
|
||||
setDrawerOpen(false)
|
||||
store.shell.closeAllActiveElements()
|
||||
if (success) {
|
||||
resetNavigation()
|
||||
|
@ -34,7 +36,7 @@ export function useAccountSwitcher(): [
|
|||
store.session.clear()
|
||||
}
|
||||
},
|
||||
[track, setIsSwitching, navigation, store],
|
||||
[track, setIsSwitching, navigation, store, setDrawerOpen],
|
||||
)
|
||||
|
||||
return [isSwitching, setIsSwitching, onPressSwitchAccount]
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react'
|
||||
import {autorun} from 'mobx'
|
||||
import {useStores} from 'state/index'
|
||||
import {
|
||||
Easing,
|
||||
interpolate,
|
||||
|
@ -9,8 +8,10 @@ import {
|
|||
withTiming,
|
||||
} from 'react-native-reanimated'
|
||||
|
||||
import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
|
||||
|
||||
export function useMinimalShellMode() {
|
||||
const store = useStores()
|
||||
const minimalShellMode = useMinimalShellModeState()
|
||||
const minimalShellInterp = useSharedValue(0)
|
||||
const footerMinimalShellTransform = useAnimatedStyle(() => {
|
||||
return {
|
||||
|
@ -38,7 +39,7 @@ export function useMinimalShellMode() {
|
|||
|
||||
React.useEffect(() => {
|
||||
return autorun(() => {
|
||||
if (store.shell.minimalShellMode) {
|
||||
if (minimalShellMode) {
|
||||
minimalShellInterp.value = withTiming(1, {
|
||||
duration: 125,
|
||||
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
|
||||
|
@ -50,9 +51,10 @@ export function useMinimalShellMode() {
|
|||
})
|
||||
}
|
||||
})
|
||||
}, [minimalShellInterp, store.shell.minimalShellMode])
|
||||
}, [minimalShellInterp, minimalShellMode])
|
||||
|
||||
return {
|
||||
minimalShellMode,
|
||||
footerMinimalShellTransform,
|
||||
headerMinimalShellTransform,
|
||||
fabMinimalShellTransform,
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import {useState, useCallback, useRef} from 'react'
|
||||
import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
|
||||
import {RootStoreModel} from 'state/index'
|
||||
import {s} from 'lib/styles'
|
||||
import {useWebMediaQueries} from './useWebMediaQueries'
|
||||
import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell'
|
||||
|
||||
const Y_LIMIT = 10
|
||||
|
||||
|
@ -19,12 +19,12 @@ export type OnScrollCb = (
|
|||
) => void
|
||||
export type ResetCb = () => void
|
||||
|
||||
export function useOnMainScroll(
|
||||
store: RootStoreModel,
|
||||
): [OnScrollCb, boolean, ResetCb] {
|
||||
export function useOnMainScroll(): [OnScrollCb, boolean, ResetCb] {
|
||||
let lastY = useRef(0)
|
||||
let [isScrolledDown, setIsScrolledDown] = useState(false)
|
||||
const {dyLimitUp, dyLimitDown} = useDeviceLimits()
|
||||
const minimalShellMode = useMinimalShellMode()
|
||||
const setMinimalShellMode = useSetMinimalShellMode()
|
||||
|
||||
return [
|
||||
useCallback(
|
||||
|
@ -33,13 +33,10 @@ export function useOnMainScroll(
|
|||
const dy = y - (lastY.current || 0)
|
||||
lastY.current = y
|
||||
|
||||
if (!store.shell.minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
|
||||
store.shell.setMinimalShellMode(true)
|
||||
} else if (
|
||||
store.shell.minimalShellMode &&
|
||||
(dy < dyLimitUp * -1 || y <= Y_LIMIT)
|
||||
) {
|
||||
store.shell.setMinimalShellMode(false)
|
||||
if (!minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
|
||||
setMinimalShellMode(true)
|
||||
} else if (minimalShellMode && (dy < dyLimitUp * -1 || y <= Y_LIMIT)) {
|
||||
setMinimalShellMode(false)
|
||||
}
|
||||
|
||||
if (
|
||||
|
@ -54,13 +51,19 @@ export function useOnMainScroll(
|
|||
setIsScrolledDown(false)
|
||||
}
|
||||
},
|
||||
[store.shell, dyLimitDown, dyLimitUp, isScrolledDown],
|
||||
[
|
||||
dyLimitDown,
|
||||
dyLimitUp,
|
||||
isScrolledDown,
|
||||
minimalShellMode,
|
||||
setMinimalShellMode,
|
||||
],
|
||||
),
|
||||
isScrolledDown,
|
||||
useCallback(() => {
|
||||
setIsScrolledDown(false)
|
||||
store.shell.setMinimalShellMode(false)
|
||||
setMinimalShellMode(false)
|
||||
lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf
|
||||
}, [store, setIsScrolledDown]),
|
||||
}, [setIsScrolledDown, setMinimalShellMode]),
|
||||
]
|
||||
}
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
import {isAndroid} from 'platform/detection'
|
||||
import {BackHandler} from 'react-native'
|
||||
import {RootStoreModel} from 'state/index'
|
||||
|
||||
export function init(store: RootStoreModel) {
|
||||
// only register back handler on android, otherwise it throws an error
|
||||
if (isAndroid) {
|
||||
const backHandler = BackHandler.addEventListener(
|
||||
'hardwareBackPress',
|
||||
() => {
|
||||
return store.shell.closeAnyActiveElement()
|
||||
},
|
||||
)
|
||||
return () => {
|
||||
backHandler.remove()
|
||||
}
|
||||
}
|
||||
return () => {}
|
||||
}
|
|
@ -266,9 +266,6 @@ export interface ComposerOpts {
|
|||
|
||||
export class ShellUiModel {
|
||||
colorMode: ColorMode = 'system'
|
||||
minimalShellMode = false
|
||||
isDrawerOpen = false
|
||||
isDrawerSwipeDisabled = false
|
||||
isModalActive = false
|
||||
activeModals: Modal[] = []
|
||||
isLightboxActive = false
|
||||
|
@ -313,10 +310,6 @@ export class ShellUiModel {
|
|||
}
|
||||
}
|
||||
|
||||
setMinimalShellMode(v: boolean) {
|
||||
this.minimalShellMode = v
|
||||
}
|
||||
|
||||
/**
|
||||
* returns true if something was closed
|
||||
* (used by the android hardware back btn)
|
||||
|
@ -334,10 +327,6 @@ export class ShellUiModel {
|
|||
this.closeComposer()
|
||||
return true
|
||||
}
|
||||
if (this.isDrawerOpen) {
|
||||
this.closeDrawer()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
|
@ -354,21 +343,6 @@ export class ShellUiModel {
|
|||
if (this.isComposerActive) {
|
||||
this.closeComposer()
|
||||
}
|
||||
if (this.isDrawerOpen) {
|
||||
this.closeDrawer()
|
||||
}
|
||||
}
|
||||
|
||||
openDrawer() {
|
||||
this.isDrawerOpen = true
|
||||
}
|
||||
|
||||
closeDrawer() {
|
||||
this.isDrawerOpen = false
|
||||
}
|
||||
|
||||
setIsDrawerSwipeDisabled(v: boolean) {
|
||||
this.isDrawerSwipeDisabled = v
|
||||
}
|
||||
|
||||
openModal(modal: Modal) {
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react'
|
||||
|
||||
type StateContext = boolean
|
||||
type SetContext = (v: boolean) => void
|
||||
|
||||
const stateContext = React.createContext<StateContext>(false)
|
||||
const setContext = React.createContext<SetContext>((_: boolean) => {})
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(false)
|
||||
return (
|
||||
<stateContext.Provider value={state}>
|
||||
<setContext.Provider value={setState}>{children}</setContext.Provider>
|
||||
</stateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useIsDrawerOpen() {
|
||||
return React.useContext(stateContext)
|
||||
}
|
||||
|
||||
export function useSetDrawerOpen() {
|
||||
return React.useContext(setContext)
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react'
|
||||
|
||||
type StateContext = boolean
|
||||
type SetContext = (v: boolean) => void
|
||||
|
||||
const stateContext = React.createContext<StateContext>(false)
|
||||
const setContext = React.createContext<SetContext>((_: boolean) => {})
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(false)
|
||||
return (
|
||||
<stateContext.Provider value={state}>
|
||||
<setContext.Provider value={setState}>{children}</setContext.Provider>
|
||||
</stateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useIsDrawerSwipeDisabled() {
|
||||
return React.useContext(stateContext)
|
||||
}
|
||||
|
||||
export function useSetDrawerSwipeDisabled() {
|
||||
return React.useContext(setContext)
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react'
|
||||
import {Provider as DrawerOpenProvider} from './drawer-open'
|
||||
import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'
|
||||
import {Provider as MinimalModeProvider} from './minimal-mode'
|
||||
|
||||
export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
|
||||
export {
|
||||
useIsDrawerSwipeDisabled,
|
||||
useSetDrawerSwipeDisabled,
|
||||
} from './drawer-swipe-disabled'
|
||||
export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
return (
|
||||
<DrawerOpenProvider>
|
||||
<DrawerSwipableProvider>
|
||||
<MinimalModeProvider>{children}</MinimalModeProvider>
|
||||
</DrawerSwipableProvider>
|
||||
</DrawerOpenProvider>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react'
|
||||
|
||||
type StateContext = boolean
|
||||
type SetContext = (v: boolean) => void
|
||||
|
||||
const stateContext = React.createContext<StateContext>(false)
|
||||
const setContext = React.createContext<SetContext>((_: boolean) => {})
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(false)
|
||||
return (
|
||||
<stateContext.Provider value={state}>
|
||||
<setContext.Provider value={setState}>{children}</setContext.Provider>
|
||||
</stateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useMinimalShellMode() {
|
||||
return React.useContext(stateContext)
|
||||
}
|
||||
|
||||
export function useSetMinimalShellMode() {
|
||||
return React.useContext(setContext)
|
||||
}
|
|
@ -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 ||
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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]}>
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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) => () => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)
|
||||
return () => {
|
||||
listener()
|
||||
let listener = {remove() {}}
|
||||
if (isAndroid) {
|
||||
listener = BackHandler.addEventListener('hardwareBackPress', () => {
|
||||
setIsDrawerOpen(false)
|
||||
return store.shell.closeAnyActiveElement()
|
||||
})
|
||||
}
|
||||
}, [store])
|
||||
return () => {
|
||||
listener.remove()
|
||||
}
|
||||
}, [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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue