87 lines
2.6 KiB
React
87 lines
2.6 KiB
React
import { TouchableOpacity } from 'react-native'
|
|
import React from 'react'
|
|
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
|
|
import { HeartIcon } from 'react-native-heroicons/outline'
|
|
import { HeartIcon as SolidHeartIcon } from 'react-native-heroicons/solid'
|
|
import { getFavorites } from '../api'
|
|
|
|
/**
|
|
* A reusable favorite/wishlist button component
|
|
*
|
|
* @param {Object} props Component props
|
|
* @param {boolean} props.isFavorite Whether the item is in favorites
|
|
* @param {Function} props.onToggleFavorite Function to call when toggling favorite state
|
|
* @param {number} props.size Icon size
|
|
* @param {string} props.activeColor Color when active
|
|
* @param {string} props.inactiveColor Color when inactive
|
|
* @param {Object} props.style Additional styles for the container
|
|
* @param {number} props.productId The ID of the product
|
|
* @returns {React.Component} Favorite button component
|
|
*/
|
|
const FavoriteButton = ({ isFavorite, onToggleFavorite, size = 25, style, productId }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [favoriteState, setFavoriteState] = useState(isFavorite);
|
|
|
|
// Update favorite state when isFavorite prop changes
|
|
useEffect(() => {
|
|
setFavoriteState(isFavorite);
|
|
}, [isFavorite]);
|
|
|
|
// Check favorite status when component mounts
|
|
useEffect(() => {
|
|
const checkFavoriteStatus = async () => {
|
|
if (productId) {
|
|
try {
|
|
const favorites = await getFavorites();
|
|
const isFavorited = favorites.some(fav => fav.id === productId);
|
|
setFavoriteState(isFavorited);
|
|
} catch (error) {
|
|
console.error('Error checking favorite status:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
checkFavoriteStatus();
|
|
}, [productId]);
|
|
|
|
const handlePress = async () => {
|
|
if (!onToggleFavorite) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
await onToggleFavorite();
|
|
// Update local state after successful toggle
|
|
setFavoriteState(!favoriteState);
|
|
} catch (error) {
|
|
console.error('Error toggling favorite:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={handlePress}
|
|
disabled={loading}
|
|
style={[
|
|
style,
|
|
{
|
|
width: wp('10%'),
|
|
height: wp('10%'),
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}
|
|
]}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator size="small" color="red" />
|
|
) : favoriteState ? (
|
|
<SolidHeartIcon size={wp('6%')} color="red" />
|
|
) : (
|
|
<HeartIcon size={wp('6%')} color="black" />
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
export default FavoriteButton; |