Merge remote-tracking branch 'origin' into eric/persistent-state

* origin: Extract shell state into separate context (#1824) Correct meta tag attributes (#1829)
bluesky-social · Nov 7, 2023 · d9fa42f · d9fa42f
2 parents c5e2a63 + bfe196b
commit d9fa42f
Show file tree

Hide file tree

Showing 52 changed files with 343 additions and 213 deletions.
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
@@ -176,8 +176,8 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
   {% block html_head_extra -%}{%- endblock %}
-  <meta name="application-name" name="Bluesky">
-  <meta name="generator" name="bskyweb">
+  <meta name="application-name" content="Bluesky">
+  <meta name="generator" content="bskyweb">
 </head>
 <body>
 {%- block body_all %}

diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -25,6 +25,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()
 
@@ -81,7 +82,9 @@ function App() {
 
   return (
     <PersistedStateProvider data={persistedState}>
-      <InnerApp />
+      <ShellStateProvider>
+        <InnerApp />
+      </ShellStateProvider>
     </PersistedStateProvider>
   )
 }

diff --git a/src/App.web.tsx b/src/App.web.tsx
@@ -20,6 +20,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 InnerApp = observer(function AppImpl() {
   const persisted = usePersisted()
@@ -71,7 +72,9 @@ function App() {
 
   return (
     <PersistedStateProvider data={persistedState}>
-      <InnerApp />
+      <ShellStateProvider>
+        <InnerApp />
+      </ShellStateProvider>
     </PersistedStateProvider>
   )
 }

diff --git a/src/lib/hooks/useAccountSwitcher.ts b/src/lib/hooks/useAccountSwitcher.ts
@@ -6,15 +6,16 @@ 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,
   (v: boolean) => void,
   (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]

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
@@ -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,

diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts
@@ -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]),
   ]
 }
diff --git a/src/lib/routes/back-handler.ts b/src/lib/routes/back-handler.ts
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
@@ -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) {

diff --git a/src/state/shell/drawer-open.tsx b/src/state/shell/drawer-open.tsx
@@ -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)
+}
diff --git a/src/state/shell/drawer-swipe-disabled.tsx b/src/state/shell/drawer-swipe-disabled.tsx
@@ -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)
+}
diff --git a/src/state/shell/index.tsx b/src/state/shell/index.tsx
@@ -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>
+  )
+}
diff --git a/src/state/shell/minimal-mode.tsx b/src/state/shell/minimal-mode.tsx
@@ -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)
+}
diff --git 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,15 +20,16 @@ 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,
   )
 
   React.useEffect(() => {
     screen('Login')
-    store.shell.setMinimalShellMode(true)
-  }, [store, screen])
+    setMinimalShellMode(true)
+  }, [screen, setMinimalShellMode])
 
   if (
     store.session.isResumingSession ||