Merge branch 'main' into internationalization

bluesky-social · Nov 8, 2023 · a3851b2 · a3851b2
2 parents 80944a8 + 96d8faf
commit a3851b2
Show file tree

Hide file tree

Showing 73 changed files with 971 additions and 448 deletions.
diff --git a/__mocks__/sentry-expo.js b/__mocks__/sentry-expo.js
@@ -1,10 +1,3 @@
 jest.mock('sentry-expo', () => ({
   init: () => jest.fn(),
-  Native: {
-    ReactNativeTracing: jest.fn().mockImplementation(() => ({
-      start: jest.fn(),
-      stop: jest.fn(),
-    })),
-    ReactNavigationInstrumentation: jest.fn(),
-  },
 }))
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
@@ -10,7 +10,8 @@ import {QueryClientProvider} from '@tanstack/react-query'
 
 import 'view/icons'
 
-import {withSentry} from 'lib/sentry'
+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {s} from 'lib/styles'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
@@ -20,10 +21,12 @@ 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()
 
-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -46,7 +49,7 @@ const App = observer(function AppImpl() {
   }
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={rootStore.shell.colorMode}>
+      <ThemeProvider theme={colorMode}>
         <RootSiblingParent>
           <analytics.Provider>
             <RootStoreProvider value={rootStore}>
@@ -62,4 +65,22 @@ const App = observer(function AppImpl() {
   )
 })
 
-export default withSentry(App)
+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ShellStateProvider>
+      <InnerApp />
+    </ShellStateProvider>
+  )
+}
+
+export default App
diff --git a/src/App.web.tsx b/src/App.web.tsx
@@ -8,6 +8,8 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 
 import 'view/icons'
 
+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import * as analytics from 'lib/analytics/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from 'view/shell/index'
@@ -17,8 +19,10 @@ import {queryClient} from 'lib/react-query'
 import {i18n} from '@lingui/core'
 import {I18nProvider} from '@lingui/react'
 import {defaultLocale, dynamicActivate} from './locale/i18n'
+import {Provider as ShellStateProvider} from 'state/shell'
 
-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -39,7 +43,7 @@ const App = observer(function AppImpl() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={rootStore.shell.colorMode}>
+      <ThemeProvider theme={colorMode}>
         <RootSiblingParent>
           <analytics.Provider>
             <RootStoreProvider value={rootStore}>
@@ -57,4 +61,22 @@ const App = observer(function AppImpl() {
   )
 })
 
+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ShellStateProvider>
+      <InnerApp />
+    </ShellStateProvider>
+  )
+}
+
 export default App
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
@@ -34,7 +34,6 @@ import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from './state'
-import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
 import {JSX} from 'react/jsx-runtime'
 import {timeout} from 'lib/async/timeout'
@@ -478,12 +477,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
         )
         console.log(`Time to first paint: ${initMs} ms`)
         logModuleInitTrace()
-
-        // Register the navigation container with the Sentry instrumentation (only works on native)
-        if (isNative) {
-          const routingInstrumentation = getRoutingInstrumentation()
-          routingInstrumentation.registerNavigationContainer(navigationRef)
-        }
       }}>
       {children}
     </NavigationContainer>

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/lib/sentry.ts b/src/lib/sentry.ts
@@ -1,52 +1,8 @@
-import {isNative, isWeb} from 'platform/detection'
-import {FC} from 'react'
-import * as Sentry from 'sentry-expo'
+import {init} from 'sentry-expo'
 
-// Sentry Initialization
-
-export const getRoutingInstrumentation = () => {
-  return new Sentry.Native.ReactNavigationInstrumentation() // initialize this in `onReady` prop of NavigationContainer
-}
-
-Sentry.init({
+init({
   dsn: 'https://05bc3789bf994b81bd7ce20c86ccd3ae@o4505071687041024.ingest.sentry.io/4505071690514432',
   enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode.
   debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
   environment: __DEV__ ? 'development' : 'production', // Set the environment
-  // @ts-ignore exists but not in types, see https://docs.sentry.io/platforms/react-native/configuration/options/#enableAutoPerformanceTracking
-  enableAutoPerformanceTracking: true, // Enable auto performance tracking
-  tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production
-  _experiments: {
-    // The sampling rate for profiling is relative to TracesSampleRate.
-    // In this case, we'll capture profiles for 50% of transactions.
-    profilesSampleRate: 0.5,
-  },
-  integrations: isNative
-    ? [
-        new Sentry.Native.ReactNativeTracing({
-          shouldCreateSpanForRequest: url => {
-            // Do not create spans for outgoing requests to a `/logs` endpoint as it is too noisy due to expo
-            return !url.match(/\/logs$/)
-          },
-          routingInstrumentation: getRoutingInstrumentation(),
-        }),
-      ]
-    : [], // no integrations for web, yet
 })
-
-// if web, use Browser client, otherwise use Native client
-export function getSentryClient() {
-  if (isWeb) {
-    return Sentry.Browser
-  }
-  return Sentry.Native
-}
-
-// wrap root App component with Sentry for automatic touch event tracking and performance monitoring
-export function withSentry(Component: FC) {
-  if (isWeb) {
-    return Component // .wrap is not required or available for web
-  }
-  const sentryClient = getSentryClient()
-  return sentryClient.wrap(Component)
-}
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
@@ -164,6 +164,7 @@ export const s = StyleSheet.create({
   flexRow: {flexDirection: 'row'},
   flexCol: {flexDirection: 'column'},
   flex1: {flex: 1},
+  flexGrow1: {flexGrow: 1},
   alignCenter: {alignItems: 'center'},
   alignBaseline: {alignItems: 'baseline'},