zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Close active elems (react-query refactor) (#1926)

Browse source 
* Refactor closeAny and closeAllActiveElements

* Add close lightbox

* Switch to hooks

* Fixes
This commit is contained in:
Paul Frazee 2023-11-16 08:18:59 -08:00 • committed by GitHub
parent 0de8d40981
commit a84b2f9f2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 101 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/view/shell/index.tsx
View file

@ -1,5 +1,4 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {StatusBar} from 'expo-status-bar'
import {
DimensionValue,
@ -11,7 +10,6 @@ import {
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {Drawer} from 'react-native-drawer-layout'
import {useNavigationState} from '@react-navigation/native'
import {useStores} from 'state/index'
import {ModalsContainer} from 'view/com/modals/Modal'
import {Lightbox} from 'view/com/lightbox/Lightbox'
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
@ -32,15 +30,13 @@ import {
useIsDrawerSwipeDisabled,
} from '#/state/shell'
import {isAndroid} from 'platform/detection'
import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
import {useCloseAnyActiveElement} from '#/state/util'
const ShellInner = observer(function ShellInnerImpl() {
const store = useStores()
function ShellInner() {
const isDrawerOpen = useIsDrawerOpen()
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
const setIsDrawerOpen = useSetDrawerOpen()
const {closeModal} = useModalControls()
useOTAUpdate() // this hook polls for OTA updates every few seconds
const winDim = useWindowDimensions()
const safeAreaInsets = useSafeAreaInsets()
@ -59,20 +55,19 @@ const ShellInner = observer(function ShellInnerImpl() {
)
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
const {hasSession} = useSession()
const closeAnyActiveElement = useCloseAnyActiveElement()
React.useEffect(() => {
let listener = {remove() {}}
if (isAndroid) {
listener = BackHandler.addEventListener('hardwareBackPress', () => {
setIsDrawerOpen(false)
closeModal()
return store.shell.closeAnyActiveElement()
return closeAnyActiveElement()
})
}
return () => {
listener.remove()
}
}, [store, setIsDrawerOpen, closeModal])
}, [closeAnyActiveElement])
return (
<>
@ -94,9 +89,9 @@ const ShellInner = observer(function ShellInnerImpl() {
<Lightbox />
</>
)
})
}
export const Shell: React.FC = observer(function ShellImpl() {
export const Shell: React.FC = function ShellImpl() {
const pal = usePalette('default')
const theme = useTheme()
return (
@ -109,7 +104,7 @@ export const Shell: React.FC = observer(function ShellImpl() {
</View>
</SafeAreaProvider>
)
})
}
const styles = StyleSheet.create({
outerContainer: {

16
src/view/shell/index.web.tsx
View file

@ -1,7 +1,6 @@
import React, {useEffect} from 'react'
import {observer} from 'mobx-react-lite'
import {View, StyleSheet, TouchableOpacity} from 'react-native'
import {useStores} from 'state/index'
import {DesktopLeftNav} from './desktop/LeftNav'
import {DesktopRightNav} from './desktop/RightNav'
import {ErrorBoundary} from '../com/util/ErrorBoundary'
@ -23,28 +22,25 @@ import {
useSetDrawerOpen,
useOnboardingState,
} from '#/state/shell'
import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
import {useCloseAllActiveElements} from '#/state/util'
const ShellInner = observer(function ShellInnerImpl() {
const store = useStores()
function ShellInner() {
const isDrawerOpen = useIsDrawerOpen()
const setDrawerOpen = useSetDrawerOpen()
const {closeModal} = useModalControls()
const onboardingState = useOnboardingState()
const {isDesktop, isMobile} = useWebMediaQueries()
const navigator = useNavigation<NavigationProp>()
const {hasSession} = useSession()
const closeAllActiveElements = useCloseAllActiveElements()
useAuxClick()
useEffect(() => {
navigator.addListener('state', () => {
setDrawerOpen(false)
closeModal()
store.shell.closeAnyActiveElement()
closeAllActiveElements()
})
}, [navigator, store.shell, setDrawerOpen, closeModal])
}, [navigator, closeAllActiveElements])
const showBottomBar = isMobile && !onboardingState.isActive
const showSideNavs = !isMobile && hasSession && !onboardingState.isActive
@ -78,7 +74,7 @@ const ShellInner = observer(function ShellInnerImpl() {
)}
</View>
)
})
}
export const Shell: React.FC = observer(function ShellImpl() {
const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)