Fix tsc

src/lib/hooks/usePermissions.ts

@@ -38,7 +38,7 @@ export function useCameraPermission() {
   const [cameraPermissionStatus] = Camera.useCameraPermissions()
 
   const requestCameraAccessIfNeeded = async () => {
-    if (cameraPermissionStatus.granted) {
+    if (cameraPermissionStatus?.granted) {
       return true
     } else {
       openPermissionAlert('camera')

src/lib/routes/helpers.ts

@@ -15,7 +15,7 @@ import {State, NavigationProp} from './types'
 // }
 
 export function getCurrentRoute(state: State) {
-  let node = state.routes[state.index]
+  let node = state.routes[state.index || 0]
   while (node.state?.routes && typeof node.state?.index === 'number') {
     node = node.state?.routes[node.state?.index]
   }

src/lib/routes/types.ts

@@ -19,14 +19,26 @@ export type HomeTabNavigatorParams = CommonNavigatorParams & {
   Home: undefined
 }
 
-export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
-  Notifications: undefined
+export type HomeDrawerNavigatorParams = {
+  HomeInner: undefined
 }
 
 export type SearchTabNavigatorParams = CommonNavigatorParams & {
   Search: undefined
 }
 
+export type SearchDrawerNavigatorParams = {
+  SearchInner: undefined
+}
+
+export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
+  Notifications: undefined
+}
+
+export type NotificationsDrawerNavigatorParams = {
+  NotificationsInner: undefined
+}
+
 // NOTE
 // this isn't strictly correct but it should be close enough
 // a TS wizard might be able to get this 100%

src/routes.tsx

@@ -6,8 +6,11 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
 
 import {
   HomeTabNavigatorParams,
-  NotificationsTabNavigatorParams,
+  HomeDrawerNavigatorParams,
   SearchTabNavigatorParams,
+  SearchDrawerNavigatorParams,
+  NotificationsTabNavigatorParams,
+  NotificationsDrawerNavigatorParams,
   State,
 } from 'lib/routes/types'
 
@@ -27,11 +30,12 @@ import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
 import {DebugScreen} from './view/screens/Debug'
 import {LogScreen} from './view/screens/Log'
 
-const HomeDrawer = createDrawerNavigator()
+const HomeDrawer = createDrawerNavigator<HomeDrawerNavigatorParams>()
 const HomeTab = createNativeStackNavigator<HomeTabNavigatorParams>()
-const SearchDrawer = createDrawerNavigator()
+const SearchDrawer = createDrawerNavigator<SearchDrawerNavigatorParams>()
 const SearchTab = createNativeStackNavigator<SearchTabNavigatorParams>()
-const NotificationsDrawer = createDrawerNavigator()
+const NotificationsDrawer =
+  createDrawerNavigator<NotificationsDrawerNavigatorParams>()
 const NotificationsTab =
   createNativeStackNavigator<NotificationsTabNavigatorParams>()
 const Tab = createBottomTabNavigator()
@@ -139,7 +143,7 @@ function buildStateObject(stack: string, route: string, params: RouteParams) {
   }
 }
 
-function commonScreens(Stack: ReturnType<typeof createNativeStackNavigator>) {
+function commonScreens(Stack: typeof HomeTab) {
   return (
     <>
       <Stack.Screen name="Settings" component={SettingsScreen} />
@@ -183,6 +187,31 @@ function HomeTabNavigator() {
   )
 }
 
+function SearchDrawerNavigator() {
+  const drawerContent = React.useCallback(props => <Drawer {...props} />, [])
+  return (
+    <SearchDrawer.Navigator
+      drawerContent={drawerContent}
+      screenOptions={{swipeEdgeWidth: 300, headerShown: false}}>
+      <SearchDrawer.Screen name="SearchInner" component={SearchScreen} />
+    </SearchDrawer.Navigator>
+  )
+}
+
+function SearchTabNavigator() {
+  return (
+    <SearchTab.Navigator
+      screenOptions={{
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+      }}>
+      <SearchTab.Screen name="Search" component={SearchDrawerNavigator} />
+      {commonScreens(SearchTab as typeof HomeTab)}
+    </SearchTab.Navigator>
+  )
+}
+
 function NotificationsDrawerNavigator() {
   const drawerContent = React.useCallback(props => <Drawer {...props} />, [])
   return (
@@ -209,36 +238,11 @@ function NotificationsTabNavigator() {
         name="Notifications"
         component={NotificationsDrawerNavigator}
       />
-      {commonScreens(NotificationsTab)}
+      {commonScreens(NotificationsTab as typeof HomeTab)}
     </NotificationsTab.Navigator>
   )
 }
 
-function SearchDrawerNavigator() {
-  const drawerContent = React.useCallback(props => <Drawer {...props} />, [])
-  return (
-    <SearchDrawer.Navigator
-      drawerContent={drawerContent}
-      screenOptions={{swipeEdgeWidth: 300, headerShown: false}}>
-      <SearchDrawer.Screen name="SearchInner" component={SearchScreen} />
-    </SearchDrawer.Navigator>
-  )
-}
-
-function SearchTabNavigator() {
-  return (
-    <SearchTab.Navigator
-      screenOptions={{
-        gestureEnabled: true,
-        fullScreenGestureEnabled: true,
-        headerShown: false,
-      }}>
-      <SearchTab.Screen name="Search" component={SearchDrawerNavigator} />
-      {commonScreens(SearchTab)}
-    </SearchTab.Navigator>
-  )
-}
-
 export function TabsNavigator() {
   const tabBar = React.useCallback(props => <BottomBar {...props} />, [])
   return (

src/view/com/util/Link.tsx

@@ -117,8 +117,11 @@ function onPressInner(
     shouldHandle = e ? !e.defaultPrevented : true
   } else if (
     !e.defaultPrevented && // onPress prevented default
+    // @ts-ignore Web only -prf
     !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+    // @ts-ignore Web only -prf
     (e.button == null || e.button === 0) && // ignore everything but left clicks
+    // @ts-ignore Web only -prf
     [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc.
   ) {
     e.preventDefault()

src/view/screens/Home.tsx

@@ -3,7 +3,10 @@ import {FlatList, View} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
-import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
+import {
+  NativeStackScreenProps,
+  HomeDrawerNavigatorParams,
+} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
@@ -17,7 +20,7 @@ import {ComposeIcon2} from 'lib/icons'
 
 const HEADER_HEIGHT = 42
 
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
+type Props = NativeStackScreenProps<HomeDrawerNavigatorParams, 'HomeInner'>
 export const HomeScreen = observer(function Home(_opts: Props) {
   const store = useStores()
   const onMainScroll = useOnMainScroll(store)

src/view/screens/Notifications.tsx

@@ -4,7 +4,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import useAppState from 'react-native-appstate-hook'
 import {
   NativeStackScreenProps,
-  NotificationsTabNavigatorParams,
+  NotificationsDrawerNavigatorParams,
 } from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
@@ -15,10 +15,11 @@ import {useAnalytics} from 'lib/analytics'
 
 const NOTIFICATIONS_POLL_INTERVAL = 15e3
 
-export const NotificationsScreen = ({}: NativeStackScreenProps<
-  NotificationsTabNavigatorParams,
-  'Notifications'
->) => {
+type Props = NativeStackScreenProps<
+  NotificationsDrawerNavigatorParams,
+  'NotificationsInner'
+>
+export const NotificationsScreen = ({}: Props) => {
   const store = useStores()
   const onMainScroll = useOnMainScroll(store)
   const scrollElRef = React.useRef<FlatList>(null)

src/view/screens/ProfileFollows.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'

src/view/screens/Search.tsx

@@ -15,7 +15,7 @@ import {
 import {ScrollView} from '../com/util/Views'
 import {
   NativeStackScreenProps,
-  SearchTabNavigatorParams,
+  SearchDrawerNavigatorParams,
 } from 'lib/routes/types'
 import {observer} from 'mobx-react-lite'
 import {UserAvatar} from '../com/util/UserAvatar'
@@ -34,8 +34,8 @@ import {useAnalytics} from 'lib/analytics'
 const MENU_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
 const FIVE_MIN = 5 * 60 * 1e3
 
-type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
-export const SearchScreen = observer(({}: Props) => {
+type Props = NativeStackScreenProps<SearchDrawerNavigatorParams, 'SearchInner'>
+export const SearchScreen = observer<Props>(({}: Props) => {
   const pal = usePalette('default')
   const store = useStores()
   const {track} = useAnalytics()

src/view/screens/Settings.tsx

@@ -32,250 +32,246 @@ import {AccountData} from 'state/models/session'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
 
-export const SettingsScreen = observer(
-  function Settings({}: NativeStackScreenProps<
-    CommonNavigatorParams,
-    'Settings'
-  >) {
-    const theme = useTheme()
-    const pal = usePalette('default')
-    const store = useStores()
-    const navigation = useNavigation<NavigationProp>()
-    const {screen, track} = useAnalytics()
-    const [isSwitching, setIsSwitching] = React.useState(false)
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
+export const SettingsScreen = observer(function Settings({}: Props) {
+  const theme = useTheme()
+  const pal = usePalette('default')
+  const store = useStores()
+  const navigation = useNavigation<NavigationProp>()
+  const {screen, track} = useAnalytics()
+  const [isSwitching, setIsSwitching] = React.useState(false)
 
-    useFocusEffect(
-      React.useCallback(() => {
-        screen('Settings')
-        store.shell.setMinimalShellMode(false)
-      }, [screen, store]),
-    )
+  useFocusEffect(
+    React.useCallback(() => {
+      screen('Settings')
+      store.shell.setMinimalShellMode(false)
+    }, [screen, store]),
+  )
 
-    const onPressSwitchAccount = async (acct: AccountData) => {
-      track('Settings:SwitchAccountButtonClicked')
-      setIsSwitching(true)
-      if (await store.session.resumeSession(acct)) {
-        setIsSwitching(false)
-        navigation.navigate('HomeTab')
-        navigation.dispatch(StackActions.popToTop())
-        Toast.show(`Signed in as ${acct.displayName || acct.handle}`)
-        return
-      }
+  const onPressSwitchAccount = async (acct: AccountData) => {
+    track('Settings:SwitchAccountButtonClicked')
+    setIsSwitching(true)
+    if (await store.session.resumeSession(acct)) {
       setIsSwitching(false)
-      Toast.show('Sorry! We need you to enter your password.')
       navigation.navigate('HomeTab')
       navigation.dispatch(StackActions.popToTop())
-      store.session.clear()
-    }
-    const onPressAddAccount = () => {
-      track('Settings:AddAccountButtonClicked')
-      store.session.clear()
-    }
-    const onPressChangeHandle = () => {
-      track('Settings:ChangeHandleButtonClicked')
-      store.shell.openModal({
-        name: 'change-handle',
-        onChanged() {
-          setIsSwitching(true)
-          store.session.reloadFromServer().then(
-            () => {
-              setIsSwitching(false)
-              Toast.show('Your handle has been updated')
-            },
-            err => {
-              store.log.error(
-                'Failed to reload from server after handle update',
-                {err},
-              )
-              setIsSwitching(false)
-            },
-          )
-        },
-      })
-    }
-    const onPressSignout = () => {
-      track('Settings:SignOutButtonClicked')
-      store.session.logout()
-    }
-    const onPressDeleteAccount = () => {
-      store.shell.openModal({name: 'delete-account'})
+      Toast.show(`Signed in as ${acct.displayName || acct.handle}`)
+      return
     }
+    setIsSwitching(false)
+    Toast.show('Sorry! We need you to enter your password.')
+    navigation.navigate('HomeTab')
+    navigation.dispatch(StackActions.popToTop())
+    store.session.clear()
+  }
+  const onPressAddAccount = () => {
+    track('Settings:AddAccountButtonClicked')
+    store.session.clear()
+  }
+  const onPressChangeHandle = () => {
+    track('Settings:ChangeHandleButtonClicked')
+    store.shell.openModal({
+      name: 'change-handle',
+      onChanged() {
+        setIsSwitching(true)
+        store.session.reloadFromServer().then(
+          () => {
+            setIsSwitching(false)
+            Toast.show('Your handle has been updated')
+          },
+          err => {
+            store.log.error(
+              'Failed to reload from server after handle update',
+              {err},
+            )
+            setIsSwitching(false)
+          },
+        )
+      },
+    })
+  }
+  const onPressSignout = () => {
+    track('Settings:SignOutButtonClicked')
+    store.session.logout()
+  }
+  const onPressDeleteAccount = () => {
+    store.shell.openModal({name: 'delete-account'})
+  }
 
-    return (
-      <View style={[s.hContentRegion]} testID="settingsScreen">
-        <ViewHeader title="Settings" />
-        <ScrollView style={s.hContentRegion}>
-          <View style={styles.spacer20} />
-          <View style={[s.flexRow, styles.heading]}>
-            <Text type="xl-bold" style={pal.text}>
-              Signed in as
-            </Text>
-            <View style={s.flex1} />
+  return (
+    <View style={[s.hContentRegion]} testID="settingsScreen">
+      <ViewHeader title="Settings" />
+      <ScrollView style={s.hContentRegion}>
+        <View style={styles.spacer20} />
+        <View style={[s.flexRow, styles.heading]}>
+          <Text type="xl-bold" style={pal.text}>
+            Signed in as
+          </Text>
+          <View style={s.flex1} />
+        </View>
+        {isSwitching ? (
+          <View style={[pal.view, styles.linkCard]}>
+            <ActivityIndicator />
           </View>
-          {isSwitching ? (
+        ) : (
+          <Link
+            href={`/profile/${store.me.handle}`}
+            title="Your profile"
+            noFeedback>
             <View style={[pal.view, styles.linkCard]}>
-              <ActivityIndicator />
-            </View>
-          ) : (
-            <Link
-              href={`/profile/${store.me.handle}`}
-              title="Your profile"
-              noFeedback>
-              <View style={[pal.view, styles.linkCard]}>
-                <View style={styles.avi}>
-                  <UserAvatar
-                    size={40}
-                    displayName={store.me.displayName}
-                    handle={store.me.handle || ''}
-                    avatar={store.me.avatar}
-                  />
-                </View>
-                <View style={[s.flex1]}>
-                  <Text type="md-bold" style={pal.text} numberOfLines={1}>
-                    {store.me.displayName || store.me.handle}
-                  </Text>
-                  <Text type="sm" style={pal.textLight} numberOfLines={1}>
-                    {store.me.handle}
-                  </Text>
-                </View>
-                <TouchableOpacity
-                  testID="signOutBtn"
-                  onPress={isSwitching ? undefined : onPressSignout}>
-                  <Text type="lg" style={pal.link}>
-                    Sign out
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            </Link>
-          )}
-          {store.session.switchableAccounts.map(account => (
-            <TouchableOpacity
-              testID={`switchToAccountBtn-${account.handle}`}
-              key={account.did}
-              style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
-              onPress={
-                isSwitching ? undefined : () => onPressSwitchAccount(account)
-              }>
               <View style={styles.avi}>
                 <UserAvatar
                   size={40}
-                  displayName={account.displayName}
-                  handle={account.handle || ''}
-                  avatar={account.aviUrl}
+                  displayName={store.me.displayName}
+                  handle={store.me.handle || ''}
+                  avatar={store.me.avatar}
                 />
               </View>
               <View style={[s.flex1]}>
-                <Text type="md-bold" style={pal.text}>
-                  {account.displayName || account.handle}
+                <Text type="md-bold" style={pal.text} numberOfLines={1}>
+                  {store.me.displayName || store.me.handle}
                 </Text>
-                <Text type="sm" style={pal.textLight}>
-                  {account.handle}
+                <Text type="sm" style={pal.textLight} numberOfLines={1}>
+                  {store.me.handle}
                 </Text>
               </View>
-              <AccountDropdownBtn handle={account.handle} />
-            </TouchableOpacity>
-          ))}
+              <TouchableOpacity
+                testID="signOutBtn"
+                onPress={isSwitching ? undefined : onPressSignout}>
+                <Text type="lg" style={pal.link}>
+                  Sign out
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </Link>
+        )}
+        {store.session.switchableAccounts.map(account => (
           <TouchableOpacity
-            testID="switchToNewAccountBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressAddAccount}>
-            <View style={[styles.iconContainer, pal.btn]}>
-              <FontAwesomeIcon
-                icon="plus"
-                style={pal.text as FontAwesomeIconStyle}
+            testID={`switchToAccountBtn-${account.handle}`}
+            key={account.did}
+            style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
+            onPress={
+              isSwitching ? undefined : () => onPressSwitchAccount(account)
+            }>
+            <View style={styles.avi}>
+              <UserAvatar
+                size={40}
+                displayName={account.displayName}
+                handle={account.handle || ''}
+                avatar={account.aviUrl}
               />
             </View>
-            <Text type="lg" style={pal.text}>
-              Add account
-            </Text>
+            <View style={[s.flex1]}>
+              <Text type="md-bold" style={pal.text}>
+                {account.displayName || account.handle}
+              </Text>
+              <Text type="sm" style={pal.textLight}>
+                {account.handle}
+              </Text>
+            </View>
+            <AccountDropdownBtn handle={account.handle} />
           </TouchableOpacity>
-
-          <View style={styles.spacer20} />
-
-          <Text type="xl-bold" style={[pal.text, styles.heading]}>
-            Advanced
+        ))}
+        <TouchableOpacity
+          testID="switchToNewAccountBtn"
+          style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+          onPress={isSwitching ? undefined : onPressAddAccount}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <FontAwesomeIcon
+              icon="plus"
+              style={pal.text as FontAwesomeIconStyle}
+            />
+          </View>
+          <Text type="lg" style={pal.text}>
+            Add account
           </Text>
-          <TouchableOpacity
-            testID="changeHandleBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressChangeHandle}>
-            <View style={[styles.iconContainer, pal.btn]}>
-              <FontAwesomeIcon
-                icon="at"
-                style={pal.text as FontAwesomeIconStyle}
-              />
-            </View>
-            <Text type="lg" style={pal.text}>
-              Change my handle
-            </Text>
-          </TouchableOpacity>
+        </TouchableOpacity>
 
-          <View style={styles.spacer20} />
+        <View style={styles.spacer20} />
 
-          <Text type="xl-bold" style={[pal.text, styles.heading]}>
-            Danger zone
+        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+          Advanced
+        </Text>
+        <TouchableOpacity
+          testID="changeHandleBtn"
+          style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+          onPress={isSwitching ? undefined : onPressChangeHandle}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <FontAwesomeIcon
+              icon="at"
+              style={pal.text as FontAwesomeIconStyle}
+            />
+          </View>
+          <Text type="lg" style={pal.text}>
+            Change my handle
           </Text>
-          <TouchableOpacity
-            style={[pal.view, styles.linkCard]}
-            onPress={onPressDeleteAccount}>
-            <View
-              style={[
-                styles.iconContainer,
-                theme.colorScheme === 'dark'
-                  ? styles.trashIconContainerDark
-                  : styles.trashIconContainerLight,
-              ]}>
-              <FontAwesomeIcon
-                icon={['far', 'trash-can']}
-                style={
-                  theme.colorScheme === 'dark'
-                    ? styles.dangerDark
-                    : styles.dangerLight
-                }
-                size={21}
-              />
-            </View>
-            <Text
-              type="lg"
+        </TouchableOpacity>
+
+        <View style={styles.spacer20} />
+
+        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+          Danger zone
+        </Text>
+        <TouchableOpacity
+          style={[pal.view, styles.linkCard]}
+          onPress={onPressDeleteAccount}>
+          <View
+            style={[
+              styles.iconContainer,
+              theme.colorScheme === 'dark'
+                ? styles.trashIconContainerDark
+                : styles.trashIconContainerLight,
+            ]}>
+            <FontAwesomeIcon
+              icon={['far', 'trash-can']}
               style={
                 theme.colorScheme === 'dark'
                   ? styles.dangerDark
                   : styles.dangerLight
-              }>
-              Delete my account
-            </Text>
-          </TouchableOpacity>
-
-          <View style={styles.spacer20} />
-
-          <Text type="xl-bold" style={[pal.text, styles.heading]}>
-            Developer tools
+              }
+              size={21}
+            />
+          </View>
+          <Text
+            type="lg"
+            style={
+              theme.colorScheme === 'dark'
+                ? styles.dangerDark
+                : styles.dangerLight
+            }>
+            Delete my account
           </Text>
-          <Link
-            style={[pal.view, styles.linkCardNoIcon]}
-            href="/sys/log"
-            title="System log">
-            <Text type="lg" style={pal.text}>
-              System log
-            </Text>
-          </Link>
-          <Link
-            style={[pal.view, styles.linkCardNoIcon]}
-            href="/sys/debug"
-            title="Debug tools">
-            <Text type="lg" style={pal.text}>
-              Storybook
-            </Text>
-          </Link>
-          <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
-            Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
+        </TouchableOpacity>
+
+        <View style={styles.spacer20} />
+
+        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+          Developer tools
+        </Text>
+        <Link
+          style={[pal.view, styles.linkCardNoIcon]}
+          href="/sys/log"
+          title="System log">
+          <Text type="lg" style={pal.text}>
+            System log
           </Text>
-          <View style={s.footerSpacer} />
-        </ScrollView>
-      </View>
-    )
-  },
-)
+        </Link>
+        <Link
+          style={[pal.view, styles.linkCardNoIcon]}
+          href="/sys/debug"
+          title="Debug tools">
+          <Text type="lg" style={pal.text}>
+            Storybook
+          </Text>
+        </Link>
+        <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
+          Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
+        </Text>
+        <View style={s.footerSpacer} />
+      </ScrollView>
+    </View>
+  )
+})
 
 function AccountDropdownBtn({handle}: {handle: string}) {
   const store = useStores()