Archived
1
0

feat: экран поиска пользователей

This commit is contained in:
Vlad0sEnIgma345
2025-11-27 08:41:23 +03:00
parent 98a0704c55
commit d6ae0cf92c

View File

@ -0,0 +1,85 @@
import React, { useState } from 'react';
import {
TextInput,
View as RNView,
TouchableOpacity,
Alert,
ActivityIndicator,
} from 'react-native';
import { useRouter } from 'expo-router';
import { Text, View } from '@/components/Themed';
import { useColorScheme } from '@/components/useColorScheme';
import Colors from '@/constants/Colors';
import { usersApi } from '@/lib/api';
import { Search, User } from 'lucide-react-native';
export default function SearchScreen() {
const [searchQuery, setSearchQuery] = useState('');
const [loading, setLoading] = useState(false);
const colorScheme = useColorScheme();
const colors = Colors[colorScheme ?? 'light'];
const router = useRouter();
const handleSearch = async () => {
const query = searchQuery.trim();
if (!query) {
Alert.alert('Ошибка', 'Введите имя пользователя');
return;
}
setLoading(true);
try {
const user = await usersApi.getUserByName(query);
// Переходим к профилю пользователя по его ID
router.push(`/user/${user.id}` as any);
setSearchQuery('');
} catch (error: any) {
Alert.alert('Пользователь не найден', error.message || 'Пользователь с таким именем не существует');
} finally {
setLoading(false);
}
};
return (
<View className="flex-1 pt-16">
<RNView className="p-4">
<RNView className="flex-row gap-3 items-center">
<TextInput
className="flex-1 h-12 border rounded-lg px-4 text-base"
style={{ color: colors.text, borderColor: colors.tabIconDefault }}
placeholder="Введите имя пользователя..."
placeholderTextColor={colors.tabIconDefault}
value={searchQuery}
onChangeText={setSearchQuery}
onSubmitEditing={handleSearch}
returnKeyType="search"
editable={!loading}
/>
<TouchableOpacity
onPress={handleSearch}
disabled={loading || !searchQuery.trim()}
className="w-12 h-12 rounded-lg justify-center items-center"
style={{
backgroundColor: colors.tint,
opacity: loading || !searchQuery.trim() ? 0.5 : 1,
}}
>
{loading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Search size={20} color="#fff" />
)}
</TouchableOpacity>
</RNView>
</RNView>
<View className="flex-1 items-center justify-center p-5">
<User size={64} color={colors.tabIconDefault} />
<Text className="text-2xl font-bold mt-4 mb-3">Поиск пользователей</Text>
<Text className="text-base text-center leading-6" style={{ color: colors.tabIconDefault }}>
Введите имя пользователя в поле выше и нажмите поиск, чтобы просмотреть его профиль
</Text>
</View>
</View>
);
}