82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
|
|
export default function CartButton() {
|
|
const router = useRouter();
|
|
const [cartCount, setCartCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
loadCartCount();
|
|
|
|
// Refresh cart count khi focus
|
|
const interval = setInterval(loadCartCount, 3000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const loadCartCount = async () => {
|
|
try {
|
|
const token = await AsyncStorage.getItem('token');
|
|
if (!token) return;
|
|
|
|
const response = await fetch('http://YOUR_API_URL:8080/api/cart', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success && data.data.cartItems) {
|
|
const totalItems = data.data.cartItems.reduce(
|
|
(sum: number, item: any) => sum + item.quantity,
|
|
0
|
|
);
|
|
setCartCount(totalItems);
|
|
}
|
|
} catch (error) {
|
|
console.error('Load cart count error:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.container}
|
|
onPress={() => router.push('/cart')}
|
|
>
|
|
<Ionicons name="cart-outline" size={24} color="#333" />
|
|
{cartCount > 0 && (
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>
|
|
{cartCount > 99 ? '99+' : cartCount}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'relative',
|
|
padding: 8,
|
|
},
|
|
badge: {
|
|
position: 'absolute',
|
|
top: 4,
|
|
right: 4,
|
|
backgroundColor: '#FF6B6B',
|
|
borderRadius: 10,
|
|
minWidth: 18,
|
|
height: 18,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 4,
|
|
},
|
|
badgeText: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
fontWeight: 'bold',
|
|
},
|
|
}); |