91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
||
|
import { View, Text, Button } from 'react-native';
|
||
|
import { useTailwind } from 'tailwind-rn';
|
||
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||
|
|
||
|
function UserProfileScreen({ route, navigation }) {
|
||
|
const { userId } = route.params; // get the user ID from the parameters
|
||
|
const [username, setUsername] = useState('');
|
||
|
const [following, setFollowing] = useState([]);
|
||
|
const tailwind = useTailwind();
|
||
|
|
||
|
console.log(userId)
|
||
|
|
||
|
async function fetchUserData() {
|
||
|
const token = await AsyncStorage.getItem('token');
|
||
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
||
|
|
||
|
const response = await fetch(`${apiUrl}/api/v1/app/user/data/${userId}`, {
|
||
|
headers: { 'Authorization': token },
|
||
|
});
|
||
|
|
||
|
if (!response.ok) {
|
||
|
console.error(`Error: ${response.status}`);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const user = await response.json();
|
||
|
console.warn("user: ", user)
|
||
|
setUsername(user.username);
|
||
|
setFollowing(user.following.count);
|
||
|
}
|
||
|
|
||
|
useEffect(() => {
|
||
|
fetchUserData();
|
||
|
}, []);
|
||
|
|
||
|
async function followUser() {
|
||
|
const token = await AsyncStorage.getItem('token');
|
||
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
||
|
|
||
|
console.log(userId)
|
||
|
const response = await fetch(`${apiUrl}/api/v1/app/user/follow/${userId}`, {
|
||
|
method: 'POST',
|
||
|
headers: { 'Authorization': token },
|
||
|
});
|
||
|
const data = await response.json();
|
||
|
setFollowing(data.count);
|
||
|
console.log('followed')
|
||
|
// Update the user state to reflect the new following status
|
||
|
}
|
||
|
|
||
|
|
||
|
async function unfollowUser() {
|
||
|
const token = await AsyncStorage.getItem('token');
|
||
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
||
|
|
||
|
const response = await fetch(`$[apiUrl}/api/v1/app/user/unfollow/${userId}`, {
|
||
|
method: 'POST',
|
||
|
headers: { 'Authorization': token },
|
||
|
});
|
||
|
if (response.ok) {
|
||
|
const data = await response.json();
|
||
|
console.warn(data)
|
||
|
setFollowing(data.count)
|
||
|
}
|
||
|
|
||
|
|
||
|
// Update the user state to reflect the new following status
|
||
|
|
||
|
}
|
||
|
|
||
|
if (!username) return null;
|
||
|
|
||
|
return (
|
||
|
<View style={tailwind('p-4')}>
|
||
|
<Text style={tailwind('text-lg')}>@{username}</Text>
|
||
|
{/* Display the user's swits here */}
|
||
|
<Button title="Follow" onPress={followUser} />
|
||
|
<Button title="Unfollow" onPress={unfollowUser} />
|
||
|
<Text>Following: {following}</Text>
|
||
|
|
||
|
<Button
|
||
|
title="Message"
|
||
|
onPress={() => navigation.navigate('Conversation', { userId })}
|
||
|
/>
|
||
|
</View>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default UserProfileScreen;
|