PWI: Refactor Shell (#1989)

* Vendor createNativeStackNavigator for further tweaks

* Completely disable withAuthRequired

* Render LoggedOut for protected routes

* Move web shell into the navigator

* Simplify the logic

* Add login modal

* Delete withAuthRequired

* Reset app state on session change

* Move TS suppression

1 files changed, 131 insertions, 134 deletions

diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx
index c03275f5d..8f6e2f729 100644
--- a/src/view/screens/ModerationBlockedAccounts.tsx
+++ b/src/view/screens/ModerationBlockedAccounts.tsx
@@ -10,7 +10,6 @@ import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {Text} from '../com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {useAnalytics} from 'lib/analytics/analytics'
@@ -30,146 +29,144 @@ type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'ModerationBlockedAccounts'
 >
-export const ModerationBlockedAccounts = withAuthRequired(
-  function ModerationBlockedAccountsImpl({}: Props) {
-    const pal = usePalette('default')
-    const {_} = useLingui()
-    const setMinimalShellMode = useSetMinimalShellMode()
-    const {isTabletOrDesktop} = useWebMediaQueries()
-    const {screen} = useAnalytics()
-    const [isPTRing, setIsPTRing] = React.useState(false)
-    const {
-      data,
-      isFetching,
-      isError,
-      error,
-      refetch,
-      hasNextPage,
-      fetchNextPage,
-      isFetchingNextPage,
-    } = useMyBlockedAccountsQuery()
-    const isEmpty = !isFetching && !data?.pages[0]?.blocks.length
-    const profiles = React.useMemo(() => {
-      if (data?.pages) {
-        return data.pages.flatMap(page => page.blocks)
-      }
-      return []
-    }, [data])
+export function ModerationBlockedAccounts({}: Props) {
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const setMinimalShellMode = useSetMinimalShellMode()
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {screen} = useAnalytics()
+  const [isPTRing, setIsPTRing] = React.useState(false)
+  const {
+    data,
+    isFetching,
+    isError,
+    error,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useMyBlockedAccountsQuery()
+  const isEmpty = !isFetching && !data?.pages[0]?.blocks.length
+  const profiles = React.useMemo(() => {
+    if (data?.pages) {
+      return data.pages.flatMap(page => page.blocks)
+    }
+    return []
+  }, [data])
 
-    useFocusEffect(
-      React.useCallback(() => {
-        screen('BlockedAccounts')
-        setMinimalShellMode(false)
-      }, [screen, setMinimalShellMode]),
-    )
+  useFocusEffect(
+    React.useCallback(() => {
+      screen('BlockedAccounts')
+      setMinimalShellMode(false)
+    }, [screen, setMinimalShellMode]),
+  )
 
-    const onRefresh = React.useCallback(async () => {
-      setIsPTRing(true)
-      try {
-        await refetch()
-      } catch (err) {
-        logger.error('Failed to refresh my muted accounts', {error: err})
-      }
-      setIsPTRing(false)
-    }, [refetch, setIsPTRing])
+  const onRefresh = React.useCallback(async () => {
+    setIsPTRing(true)
+    try {
+      await refetch()
+    } catch (err) {
+      logger.error('Failed to refresh my muted accounts', {error: err})
+    }
+    setIsPTRing(false)
+  }, [refetch, setIsPTRing])
 
-    const onEndReached = React.useCallback(async () => {
-      if (isFetching || !hasNextPage || isError) return
+  const onEndReached = React.useCallback(async () => {
+    if (isFetching || !hasNextPage || isError) return
 
-      try {
-        await fetchNextPage()
-      } catch (err) {
-        logger.error('Failed to load more of my muted accounts', {error: err})
-      }
-    }, [isFetching, hasNextPage, isError, fetchNextPage])
+    try {
+      await fetchNextPage()
+    } catch (err) {
+      logger.error('Failed to load more of my muted accounts', {error: err})
+    }
+  }, [isFetching, hasNextPage, isError, fetchNextPage])
 
-    const renderItem = ({
-      item,
-      index,
-    }: {
-      item: ActorDefs.ProfileView
-      index: number
-    }) => (
-      <ProfileCard
-        testID={`blockedAccount-${index}`}
-        key={item.did}
-        profile={item}
-      />
-    )
-    return (
-      <CenteredView
+  const renderItem = ({
+    item,
+    index,
+  }: {
+    item: ActorDefs.ProfileView
+    index: number
+  }) => (
+    <ProfileCard
+      testID={`blockedAccount-${index}`}
+      key={item.did}
+      profile={item}
+    />
+  )
+  return (
+    <CenteredView
+      style={[
+        styles.container,
+        isTabletOrDesktop && styles.containerDesktop,
+        pal.view,
+        pal.border,
+      ]}
+      testID="blockedAccountsScreen">
+      <ViewHeader title={_(msg`Blocked Accounts`)} showOnDesktop />
+      <Text
+        type="sm"
         style={[
-          styles.container,
-          isTabletOrDesktop && styles.containerDesktop,
-          pal.view,
-          pal.border,
-        ]}
-        testID="blockedAccountsScreen">
-        <ViewHeader title={_(msg`Blocked Accounts`)} showOnDesktop />
-        <Text
-          type="sm"
-          style={[
-            styles.description,
-            pal.text,
-            isTabletOrDesktop && styles.descriptionDesktop,
-          ]}>
-          <Trans>
-            Blocked accounts cannot reply in your threads, mention you, or
-            otherwise interact with you. You will not see their content and they
-            will be prevented from seeing yours.
-          </Trans>
-        </Text>
-        {isEmpty ? (
-          <View style={[pal.border, !isTabletOrDesktop && styles.flex1]}>
-            {isError ? (
-              <ErrorScreen
-                title="Oops!"
-                message={cleanError(error)}
-                onPressTryAgain={refetch}
-              />
-            ) : (
-              <View style={[styles.empty, pal.viewLight]}>
-                <Text type="lg" style={[pal.text, styles.emptyText]}>
-                  <Trans>
-                    You have not blocked any accounts yet. To block an account,
-                    go to their profile and selected "Block account" from the
-                    menu on their account.
-                  </Trans>
-                </Text>
-              </View>
-            )}
-          </View>
-        ) : (
-          <FlatList
-            style={[!isTabletOrDesktop && styles.flex1]}
-            data={profiles}
-            keyExtractor={(item: ActorDefs.ProfileView) => item.did}
-            refreshControl={
-              <RefreshControl
-                refreshing={isPTRing}
-                onRefresh={onRefresh}
-                tintColor={pal.colors.text}
-                titleColor={pal.colors.text}
-              />
-            }
-            onEndReached={onEndReached}
-            renderItem={renderItem}
-            initialNumToRender={15}
-            // FIXME(dan)
+          styles.description,
+          pal.text,
+          isTabletOrDesktop && styles.descriptionDesktop,
+        ]}>
+        <Trans>
+          Blocked accounts cannot reply in your threads, mention you, or
+          otherwise interact with you. You will not see their content and they
+          will be prevented from seeing yours.
+        </Trans>
+      </Text>
+      {isEmpty ? (
+        <View style={[pal.border, !isTabletOrDesktop && styles.flex1]}>
+          {isError ? (
+            <ErrorScreen
+              title="Oops!"
+              message={cleanError(error)}
+              onPressTryAgain={refetch}
+            />
+          ) : (
+            <View style={[styles.empty, pal.viewLight]}>
+              <Text type="lg" style={[pal.text, styles.emptyText]}>
+                <Trans>
+                  You have not blocked any accounts yet. To block an account, go
+                  to their profile and selected "Block account" from the menu on
+                  their account.
+                </Trans>
+              </Text>
+            </View>
+          )}
+        </View>
+      ) : (
+        <FlatList
+          style={[!isTabletOrDesktop && styles.flex1]}
+          data={profiles}
+          keyExtractor={(item: ActorDefs.ProfileView) => item.did}
+          refreshControl={
+            <RefreshControl
+              refreshing={isPTRing}
+              onRefresh={onRefresh}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
+          onEndReached={onEndReached}
+          renderItem={renderItem}
+          initialNumToRender={15}
+          // FIXME(dan)
 
-            ListFooterComponent={() => (
-              <View style={styles.footer}>
-                {(isFetching || isFetchingNextPage) && <ActivityIndicator />}
-              </View>
-            )}
-            // @ts-ignore our .web version only -prf
-            desktopFixedHeight
-          />
-        )}
-      </CenteredView>
-    )
-  },
-)
+          ListFooterComponent={() => (
+            <View style={styles.footer}>
+              {(isFetching || isFetchingNextPage) && <ActivityIndicator />}
+            </View>
+          )}
+          // @ts-ignore our .web version only -prf
+          desktopFixedHeight
+        />
+      )}
+    </CenteredView>
+  )
+}
 
 const styles = StyleSheet.create({
   container: {