129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import React, { useState, useCallback, useEffect } from 'react';
|
|
import {TextInput, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
|
|
import { ThemedView } from '@/components/ThemedView';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { getUserData } from '@/components/services/securestorage/UserData';
|
|
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import debounce from 'lodash.debounce';
|
|
import type { User, Relationship, RelationshipData } from '@/components/Types';
|
|
|
|
const RequestRelationship: React.FC<{ onRequestSent: (data: RelationshipData) => void }> = ({ onRequestSent }) => {
|
|
const scheme = useColorScheme() ?? 'light';
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [searchResults, setSearchResults] = useState<User[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [currentUserId, setCurrentUserId] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchCurrentUser = async () => {
|
|
const userData = await getUserData();
|
|
if (userData) {
|
|
setCurrentUserId(userData.id);
|
|
}
|
|
};
|
|
fetchCurrentUser();
|
|
}, []);
|
|
|
|
const searchUsers = useCallback(
|
|
debounce(async (term: string) => {
|
|
if (term.length < 3) {
|
|
setSearchResults([]);
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/users/getUserByName?usersName=${encodeURIComponent(term)}`, {
|
|
headers: {
|
|
'x-api-key': process.env.EXPO_PUBLIC_API_KEY ?? '',
|
|
},
|
|
});
|
|
if (!response.ok) throw new Error('Search failed');
|
|
const data = await response.json();
|
|
setSearchResults(data);
|
|
} catch (error) {
|
|
console.error('Error searching users:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, 300),
|
|
[]
|
|
);
|
|
|
|
const handleSearch = (text: string) => {
|
|
setSearchTerm(text);
|
|
searchUsers(text);
|
|
};
|
|
|
|
const sendRequest = async (targetUserId: number) => {
|
|
if (!currentUserId) return;
|
|
try {
|
|
const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/relationships/createRequest`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'x-api-key': process.env.EXPO_PUBLIC_API_KEY ?? '',
|
|
},
|
|
body: JSON.stringify({ userId: currentUserId, targetUserId }),
|
|
});
|
|
if (!response.ok) throw new Error('Request failed');
|
|
const data: RelationshipData = await response.json();
|
|
onRequestSent(data);
|
|
} catch (error) {
|
|
console.error('Error sending relationship request:', error);
|
|
}
|
|
};
|
|
|
|
const renderUserItem = ({ item }: { item: User }) => (
|
|
<TouchableOpacity style={styles.userItem} onPress={() => sendRequest(item.id)}>
|
|
<ThemedText>{item.fullName}</ThemedText>
|
|
<ThemedText>{item.appleEmail}</ThemedText>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<TextInput
|
|
style={[
|
|
styles.searchInput,
|
|
{color: Colors[scheme].text}
|
|
]}
|
|
placeholder="Search users..."
|
|
value={searchTerm}
|
|
onChangeText={handleSearch}
|
|
/>
|
|
{isLoading ? (
|
|
<ActivityIndicator />
|
|
) : (
|
|
<FlatList
|
|
data={searchResults}
|
|
renderItem={renderUserItem}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
ListEmptyComponent={<ThemedText>No users found</ThemedText>}
|
|
/>
|
|
)}
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
searchInput: {
|
|
height: 40,
|
|
borderColor: 'gray',
|
|
borderWidth: 1,
|
|
marginBottom: 20,
|
|
paddingHorizontal: 10,
|
|
},
|
|
userItem: {
|
|
padding: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: 'gray',
|
|
},
|
|
});
|
|
|
|
export default RequestRelationship;
|