feat: экран поиска пользователей
This commit is contained in:
85
apps/frontend/app/(tabs)/two.tsx
Normal file
85
apps/frontend/app/(tabs)/two.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user