frontend/Search.js
2024-02-08 09:10:53 -05:00

72 lines
2.7 KiB
JavaScript

import React, { useState } from 'react';
import { View, Text, TextInput, Button, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useTailwind } from 'tailwind-rn';
import moment from 'moment';
import Icon from 'react-native-vector-icons/FontAwesome'
import { Swit } from './Home';
function SearchScreen({ navigation }) {
const tailwind = useTailwind();
const [userId, setUserId] = useState('');
// query is the search term entered by the user
const [query, setQuery] = useState('');
// userResults and switResults are the search results
const [userResults, setUserResults] = useState([]);
const [switResults, setSwitResults] = useState([]);
async function search() {
// Get the user's token
const token = await AsyncStorage.getItem('token');
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
const id = await AsyncStorage.getItem('userId');
setUserId(id);
// Fetch user search results
const userResponse = await fetch(`${apiUrl}/api/v1/app/user/search/?q=${query}`, {
headers: { 'Authorization': token },
});
const userData = await userResponse.json();
console.warn(userData)
setUserResults(userData);
// Fetch swit search results
const switResponse = await fetch(`${apiUrl}/api/v1/app/swit/search/?q=${query}`, {
headers: { 'Authorization': token },
});
const switData = await switResponse.json();
console.warn(switData)
setSwitResults(switData);
}
return (
<View >
<TextInput value={query} onChangeText={text => setQuery(text)} />
<Button title="Search" onPress={search} />
<Text>User Results</Text>
{userResults.slice(0, 2).map(user => (
// Display user result, which includes profile picture, display name, username, and bio
// This is a placeholder and needs to be replaced with actual components
<Text key={user._id}>{user.username}</Text>
))}
{userResults.length > 2 && <Button title="Show More" onPress={() => navigation.navigate('UserSearchResults', { query })} />}
<Text>Swit Results</Text>
{switResults.slice(0, 10).map(swit => (
// Display swit result, which includes the swit content
// This is a placeholder and needs to be replaced with actual components
<View style={tailwind('p-4')}>
<Swit swit={swit} navigation={navigation} userId={userId} setSwits={setSwitResults} swits={switResults}/>
</View>
))}
{switResults.length > 10 && <Button title="Show More" onPress={() => navigation.navigate('SwitSearchResults', { query })} />}
</View>
);
}
export default SearchScreen;