Improve login flow

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "cSpell.words": [
+        "Pixelfed"
+    ]
 }

src/app/(public)/login.tsx

@@ -1,80 +1,50 @@
-import { Link, router, useNavigation } from 'expo-router'
+import { Link } from 'expo-router'
 import {
-  Text,
   View,
-  Form,
   Button,
   YStack,
   Image,
-  Label,
-  Input,
-  Separator,
-  XStack,
 } from 'tamagui'
-import { useAuth } from '@state/AuthProvider'
-import { ActivityIndicator, Platform, SafeAreaView } from 'react-native'
-import { useEffect, useState } from 'react'
+import { Platform, SafeAreaView, StyleSheet } from 'react-native'
 import { StatusBar } from 'expo-status-bar'
 
 export default function Login() {
-  const [server, setServer] = useState('pixelfed.social')
-  const [loading, setLoading] = useState(true)
-
-  const { login, isLoading } = useAuth()
-
-  const handleLogin = () => {
-    login(server)
-  }
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setLoading(false)
-    }, 2000)
-
-    return () => clearTimeout(timer)
-  }, [])
-
   return (
-    <SafeAreaView
-      style={{
-        backgroundColor: 'black',
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-      edges={['top']}
-    >
+    <SafeAreaView style={styles.background} >
       <StatusBar style="light" />
-      {isLoading || loading ? (
-        <View m="$5">
-          <ActivityIndicator style={'light'} />
+      <YStack flexGrow={1} w="100%" px="$5">
+        <View flexGrow={1} justifyContent="center" alignItems="center">
+          <Image
+            source={require('../../../assets/icon.png')}
+            width={140}
+            height={140}
+          />
         </View>
-      ) : (
-        <YStack flexGrow={1} w="100%" px="$5">
-          <View flexGrow={1} justifyContent="center" alignItems="center">
-            <Image
-              source={require('../../../assets/icon.png')}
-              width={140}
-              height={140}
-            />
-          </View>
 
-          <YStack flexDirection="row" mb={Platform.OS === 'ios' ? 0 : '$5'}>
-            <Link href="/selectServer" asChild>
-              <Button
-                size="$6"
-                theme="gray"
-                themeInverse={true}
-                color="white"
-                fontWeight="bold"
-                flexGrow={1}
-              >
-                Login
-              </Button>
-            </Link>
-          </YStack>
+        <YStack flexDirection="row" mb={Platform.OS === 'ios' ? 0 : '$5'}>
+          <Link href="/selectServer" asChild>
+            <Button
+              size="$6"
+              theme="gray"
+              themeInverse={true}
+              color="white"
+              fontWeight="bold"
+              flexGrow={1}
+            >
+              Login
+            </Button>
+          </Link>
         </YStack>
-      )}
+      </YStack>
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'black',
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+})

src/app/(public)/manualLogin.tsx

@@ -1,23 +1,19 @@
-import { Link, router, Stack, useNavigation, useRouter } from 'expo-router'
+import { Stack, useRouter } from 'expo-router'
 import {
   Text,
-  View,
   Form,
   Button,
   YStack,
   Label,
-  Input,
-  Separator,
-  XStack,
+  Input
 } from 'tamagui'
 import { useAuth } from '@state/AuthProvider'
-import { ActivityIndicator, SafeAreaView } from 'react-native'
-import { useEffect, useState } from 'react'
+import { SafeAreaView, StyleSheet } from 'react-native'
+import { useState } from 'react'
 import { StatusBar } from 'expo-status-bar'
 
 export default function Login() {
   const [server, setServer] = useState('')
-  const [loading, setLoading] = useState(true)
   const router = useRouter()
 
   const { login, isLoading } = useAuth()
@@ -27,19 +23,8 @@ export default function Login() {
   }
 
   return (
-    <SafeAreaView
-      style={{
-        backgroundColor: 'black',
-        flex: 1,
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-      }}
-    >
-      <Stack.Screen
-        options={{
-          headerShown: false,
-        }}
-      />
+    <SafeAreaView style={styles.background} >
+      <Stack.Screen options={{ headerShown: false }} />
       <StatusBar style="light" />
 
       <YStack w="100%" px="$5">
@@ -83,3 +68,12 @@ export default function Login() {
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'black',
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  }
+})

src/app/(public)/selectServer.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useMemo } from 'react'
-import { Text, View, Button, YStack, Image, XStack } from 'tamagui'
+import { StyleSheet } from 'react-native'
+import { Text, View, Button, YStack, XStack } from 'tamagui'
 import {
-  ActivityIndicator,
-  Alert,
   FlatList,
   Keyboard,
+  ListRenderItemInfo,
   SafeAreaView,
   TextInput,
   TouchableOpacity,
@@ -18,6 +18,7 @@ import { getOpenServers } from 'src/lib/api'
 import { enforceLen, prettyCount } from 'src/utils'
 import FastImage from 'react-native-fast-image'
 import { PressableOpacity } from 'react-native-pressable-opacity'
+import { PixelfedServer } from 'src/lib/api-types'
 
 export default function Register() {
   const { data } = useQuery({
@@ -31,7 +32,7 @@ export default function Register() {
 
   const [searchQuery, setSearchQuery] = useState('')
 
-  const handleLogin = (server) => {
+  const handleLogin = (server: string) => {
     login(server)
   }
 
@@ -46,7 +47,7 @@ export default function Register() {
     )
   }, [data, searchQuery])
 
-  const RenderItem = ({ item }) => (
+  const RenderItem = ({ item }: ListRenderItemInfo<PixelfedServer>) => (
     <Button
       onPress={() => handleLogin(item.domain)}
       px="$2"
@@ -101,7 +102,7 @@ export default function Register() {
   )
 
   return (
-    <SafeAreaView edges={['top']} style={{ flex: 1, backgroundColor: 'black' }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'black' }}>
       <StatusBar style="light" />
       <Stack.Screen options={{ headerShown: false }} />
       <View justifyContent="center" alignItems="center" mb="$5">
@@ -155,7 +156,7 @@ export default function Register() {
   )
 }
 
-const styles = {
+const styles = StyleSheet.create({
   searchContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -187,4 +188,4 @@ const styles = {
     right: 30,
     zIndex: 2,
   },
-}
+})

src/app/_layout.tsx

@@ -1,25 +1,22 @@
 import Feather from '@expo/vector-icons/Feather'
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { TamaguiProvider } from 'tamagui'
 import { config } from '../../tamagui.config'
 import { ToastProvider, ToastViewport } from '@tamagui/toast'
 import { useFonts } from 'expo-font'
-import { Stack, useRouter, ErrorBoundary, Slot } from 'expo-router'
+import { Stack, useRouter } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
 import React, { useEffect } from 'react'
 import AuthProvider from '../state/AuthProvider'
-import { useColorScheme, type AppStateStatus, Platform, LogBox } from 'react-native'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { type AppStateStatus, Platform, LogBox } from 'react-native'
 import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query'
 import { useAppState } from 'src/hooks/useAppState'
 import { useOnlineManager } from 'src/hooks/useOnlineManager'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
 import { ShareIntentProvider } from 'expo-share-intent'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { VideoProvider } from 'src/hooks/useVideoProvider'
 import * as Notifications from 'expo-notifications'
-import Constants from 'expo-constants'
 
 export const unstable_settings = {
   initialRouteName: '/login',
@@ -92,8 +89,6 @@ export default function RootLayoutWithContext() {
 }
 
 function RootLayoutNav() {
-  const colorScheme = useColorScheme()
-  const { left, top, right } = useSafeAreaInsets()
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <AuthProvider>
@@ -106,7 +101,7 @@ function RootLayoutNav() {
                     <Stack>
                       <Stack.Screen
                         name="(auth)/(tabs)"
-                        options={{ headerShown: false, backBehavior: 'order' }}
+                        options={{ headerShown: false }}
                       />
                       <Stack.Screen
                         name="(public)/login"

src/lib/api-types.d.ts

@@ -202,6 +202,15 @@ export type Status = {
   poll: Poll | null
 }
 
+export type PixelfedServer = {
+  domain: string
+  header_thumbnail: string
+  version: string
+  short_description: string
+  user_count: number
+  last_seen_at: Timestamp
+}
+
 /* ========================== Infinite query types ========================== */
 
 export type PaginatedStatus = {

src/lib/api.ts

@@ -1,7 +1,7 @@
 import { objectToForm } from 'src/requests'
 import { Storage } from 'src/state/cache'
 import { parseLinkHeader } from 'src/utils'
-import type { PaginatedStatus, Relationship } from './api-types'
+import type { PaginatedStatus, PixelfedServer, Relationship } from './api-types'
 
 export function randomKey(length: number) {
   let result = ''
@@ -393,7 +393,7 @@ export async function getStatusRepliesById(id: string, page) {
   return res
 }
 
-export async function getOpenServers() {
+export async function getOpenServers(): Promise<Array<PixelfedServer>> {
   const response = await fetch(
     'https://pixelfed.org/api/v1/mobile-app/servers/open.json',
     {