kendu/project_it207_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart

Browse Source
This commit is contained in:
kenduNMT
2025-11-14 14:44:46 +07:00
parent 0ca7536b70
commit f150a84cf0
10 changed files with 1581 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
app/(tabs)/cart.tsx Normal file
View File

@@ -0,0 +1,253 @@
import React from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ActivityIndicator,
Alert,
RefreshControl,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import { useCart } from '../../hooks/useCart';
import CartItemCard from '../../components/CartItemCard';
export default function CartScreen() {
const {
cart,
loading,
refreshing,
refreshCart,
updateQuantity,
removeItem,
clearCart,
} = useCart();
// Tự động refresh cart mỗi khi vào trang
useFocusEffect(
React.useCallback(() => {
console.log('=== CartScreen focused - Refreshing cart ===');
refreshCart();
}, [refreshCart])
);
const handleClearCart = () => {
Alert.alert(
'Xác nhận',
'Bạn có chắc muốn xóa tất cả sản phẩm trong giỏ hàng?',
[
{ text: 'Hủy', style: 'cancel' },
{
text: 'Xóa tất cả',
onPress: clearCart,
style: 'destructive'
},
]
);
};
const handleCheckout = () => {
Alert.alert('Thông báo', 'Chức năng thanh toán đang được phát triển');
};
const formatPrice = (price: number) => {
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: 'VND',
}).format(price);
};
if (loading && !cart) {
return (
<SafeAreaView style={styles.container}>
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#ff6b6b" />
<Text style={styles.loadingText}>Đang tải giỏ hàng...</Text>
</View>
</SafeAreaView>
);
}
if (!cart || cart.items.length === 0) {
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Giỏ hàng</Text>
</View>
<View style={styles.emptyContainer}>
<Ionicons name="cart-outline" size={100} color="#ccc" />
<Text style={styles.emptyText}>Giỏ hàng trống</Text>
<Text style={styles.emptySubtext}>
Hãy thêm sản phẩm vào giỏ hàng để mua sắm
</Text>
</View>
</SafeAreaView>
);
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Giỏ hàng</Text>
<TouchableOpacity onPress={handleClearCart} style={styles.clearButton}>
<Ionicons name="trash-outline" size={22} color="#ff4444" />
<Text style={styles.clearText}>Xóa tất cả</Text>
</TouchableOpacity>
</View>
<FlatList
data={cart.items}
keyExtractor={(item) => item.cartItemId.toString()}
renderItem={({ item }) => (
<CartItemCard
item={item}
onUpdateQuantity={updateQuantity}
onRemove={removeItem}
/>
)}
contentContainerStyle={styles.listContent}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={refreshCart}
colors={['#ff6b6b']}
/>
}
/>
<View style={styles.footer}>
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>Tổng số lượng:</Text>
<Text style={styles.summaryValue}>{cart.totalItems} sản phẩm</Text>
</View>
<View style={styles.summaryRow}>
<Text style={styles.totalLabel}>Tổng tiền:</Text>
<Text style={styles.totalValue}>
{formatPrice(cart.totalAmount)}
</Text>
</View>
<TouchableOpacity
style={styles.checkoutButton}
onPress={handleCheckout}
>
<Text style={styles.checkoutText}>Thanh toán</Text>
<Ionicons name="arrow-forward" size={20} color="#fff" />
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 16,
backgroundColor: '#fff',
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0',
},
headerTitle: {
fontSize: 24,
fontWeight: '700',
color: '#333',
},
clearButton: {
flexDirection: 'row',
alignItems: 'center',
padding: 8,
},
clearText: {
fontSize: 14,
color: '#ff4444',
marginLeft: 4,
fontWeight: '500',
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
loadingText: {
marginTop: 12,
fontSize: 16,
color: '#666',
},
emptyContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 32,
},
emptyText: {
fontSize: 20,
fontWeight: '600',
color: '#666',
marginTop: 16,
},
emptySubtext: {
fontSize: 14,
color: '#999',
marginTop: 8,
textAlign: 'center',
},
listContent: {
padding: 16,
},
footer: {
backgroundColor: '#fff',
padding: 16,
borderTopWidth: 1,
borderTopColor: '#e0e0e0',
},
summaryRow: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 12,
},
summaryLabel: {
fontSize: 15,
color: '#666',
},
summaryValue: {
fontSize: 15,
color: '#333',
fontWeight: '500',
},
totalLabel: {
fontSize: 18,
fontWeight: '600',
color: '#333',
},
totalValue: {
fontSize: 20,
fontWeight: '700',
color: '#ff6b6b',
},
checkoutButton: {
backgroundColor: '#ff6b6b',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 16,
borderRadius: 12,
marginTop: 16,
},
checkoutText: {
fontSize: 17,
fontWeight: '700',
color: '#fff',
marginRight: 8,
},
});

65
app/(tabs)/products/[id].tsx
View File

@@ -1,18 +1,19 @@
import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useState } from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Image,
ActivityIndicator,
TouchableOpacity,
Dimensions,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useCart } from '../../../hooks/useCart';
import { useProduct } from '../../../hooks/useProducts';
import { Ionicons } from '@expo/vector-icons';
const { width } = Dimensions.get('window');
@@ -22,6 +23,8 @@ export default function ProductDetailScreen() {
const productId = typeof id === 'string' ? parseInt(id) : null;
const { product, loading, error } = useProduct(productId);
const { addToCart } = useCart();
const [isAddingToCart, setIsAddingToCart] = useState(false);
const formatPrice = (price: number) => {
return new Intl.NumberFormat('vi-VN', {
@@ -38,6 +41,19 @@ export default function ProductDetailScreen() {
});
};
const handleAddToCart = async () => {
if (!product || product.stockQuantity <= 0) {
return;
}
setIsAddingToCart(true);
try {
await addToCart(product.productId, 1);
} finally {
setIsAddingToCart(false);
}
};
if (loading) {
return (
<SafeAreaView style={styles.container}>
@@ -167,16 +183,36 @@ export default function ProductDetailScreen() {
{/* Bottom Action Buttons */}
<View style={styles.bottomActions}>
<TouchableOpacity
style={[styles.actionButton, styles.addToCartButton]}
disabled={product.stockQuantity === 0}
style={[
styles.actionButton,
styles.addToCartButton,
(product.stockQuantity === 0 || isAddingToCart) && styles.actionButtonDisabled
]}
onPress={handleAddToCart}
disabled={product.stockQuantity === 0 || isAddingToCart}
>
{isAddingToCart ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Ionicons name="cart-outline" size={24} color="#fff" />
)}
<Text style={styles.actionButtonText}>
{product.stockQuantity > 0 ? 'Thêm vào giỏ' : 'Hết hàng'}
{isAddingToCart
? 'Đang thêm...'
: product.stockQuantity > 0
? 'Thêm vào giỏ'
: 'Hết hàng'}
</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.actionButton, styles.buyNowButton]}>
<TouchableOpacity
style={[
styles.actionButton,
styles.buyNowButton,
product.stockQuantity === 0 && styles.actionButtonDisabled
]}
disabled={product.stockQuantity === 0}
>
<Ionicons name="flash-outline" size={24} color="#fff" />
<Text style={styles.actionButtonText}>Mua ngay</Text>
</TouchableOpacity>
@@ -344,6 +380,9 @@ const styles = StyleSheet.create({
fontWeight: '600',
color: '#fff',
},
actionButtonDisabled: {
opacity: 0.5,
},
loadingContainer: {
flex: 1,
justifyContent: 'center',

200
components/CartItemCard.tsx Normal file
View File

@@ -0,0 +1,200 @@
import React from 'react';
import {
View,
Text,
Image,
StyleSheet,
TouchableOpacity,
Alert,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { CartItem } from '../services/cart';
interface CartItemCardProps {
item: CartItem;
onUpdateQuantity: (cartItemId: number, quantity: number) => Promise<boolean>;
onRemove: (cartItemId: number) => Promise<boolean>;
}
export default function CartItemCard({
item,
onUpdateQuantity,
onRemove,
}: CartItemCardProps) {
const handleDecrease = async () => {
if (item.quantity > 1) {
const success = await onUpdateQuantity(item.cartItemId, item.quantity - 1);
if (!success) {
Alert.alert('Lỗi', 'Không thể cập nhật số lượng');
}
} else {
Alert.alert(
'Xác nhận',
'Bạn có muốn xóa sản phẩm này khỏi giỏ hàng?',
[
{ text: 'Hủy', style: 'cancel' },
{
text: 'Xóa',
onPress: async () => {
const success = await onRemove(item.cartItemId);
if (!success) {
Alert.alert('Lỗi', 'Không thể xóa sản phẩm');
}
},
style: 'destructive'
},
]
);
}
};
const handleIncrease = async () => {
const success = await onUpdateQuantity(item.cartItemId, item.quantity + 1);
if (!success) {
Alert.alert('Lỗi', 'Không thể cập nhật số lượng');
}
};
const handleRemove = () => {
Alert.alert(
'Xác nhận',
'Bạn có chắc muốn xóa sản phẩm này?',
[
{ text: 'Hủy', style: 'cancel' },
{
text: 'Xóa',
onPress: async () => {
const success = await onRemove(item.cartItemId);
if (!success) {
Alert.alert('Lỗi', 'Không thể xóa sản phẩm');
}
},
style: 'destructive'
},
]
);
};
const formatPrice = (price: number) => {
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: 'VND',
}).format(price);
};
return (
<View style={styles.container}>
<Image
source={{ uri: item.productImage }}
style={styles.image}
resizeMode="cover"
/>
<View style={styles.info}>
<Text style={styles.name} numberOfLines={2}>
{item.productName}
</Text>
<Text style={styles.price}>{formatPrice(item.price)}</Text>
<View style={styles.footer}>
<View style={styles.quantityContainer}>
<TouchableOpacity
style={styles.quantityButton}
onPress={handleDecrease}
>
<Ionicons name="remove" size={18} color="#333" />
</TouchableOpacity>
<Text style={styles.quantity}>{item.quantity}</Text>
<TouchableOpacity
style={styles.quantityButton}
onPress={handleIncrease}
>
<Ionicons name="add" size={18} color="#333" />
</TouchableOpacity>
</View>
<Text style={styles.subtotal}>{formatPrice(item.subtotal)}</Text>
</View>
</View>
<TouchableOpacity style={styles.deleteButton} onPress={handleRemove}>
<Ionicons name="trash-outline" size={20} color="#ff4444" />
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: '#fff',
padding: 12,
marginBottom: 12,
borderRadius: 12,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
image: {
width: 80,
height: 80,
borderRadius: 8,
backgroundColor: '#f0f0f0',
},
info: {
flex: 1,
marginLeft: 12,
justifyContent: 'space-between',
},
name: {
fontSize: 15,
fontWeight: '600',
color: '#333',
marginBottom: 4,
},
price: {
fontSize: 14,
color: '#ff6b6b',
fontWeight: '500',
},
footer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 8,
},
quantityContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f5f5f5',
borderRadius: 6,
paddingHorizontal: 4,
},
quantityButton: {
width: 28,
height: 28,
justifyContent: 'center',
alignItems: 'center',
},
quantity: {
fontSize: 15,
fontWeight: '600',
color: '#333',
minWidth: 30,
textAlign: 'center',
},
subtotal: {
fontSize: 16,
fontWeight: '700',
color: '#ff6b6b',
},
deleteButton: {
padding: 8,
justifyContent: 'flex-start',
},
});

153
components/ProductCard.tsx
View File

@@ -1,7 +1,9 @@
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ProductResponse } from '../services/product';
import { useRouter } from 'expo-router';
import { useCart } from '../hooks/useCart';
interface ProductCardProps {
product: ProductResponse;
@@ -9,11 +11,28 @@ interface ProductCardProps {
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
const router = useRouter();
const { addToCart } = useCart();
const [isAdding, setIsAdding] = useState(false);
const handlePress = () => {
router.push(`/products/${product.productId}`);
};
const handleAddToCart = async (e: any) => {
e.stopPropagation(); // Ngăn chặn việc navigate khi click vào nút giỏ hàng
if (product.stockQuantity <= 0) {
return; // Không cho thêm vào giỏ nếu hết hàng
}
setIsAdding(true);
try {
await addToCart(product.productId, 1);
} finally {
setIsAdding(false);
}
};
const formatPrice = (price: number) => {
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
@@ -23,30 +42,60 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
return (
<TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
<View style={styles.imageContainer}>
<Image
source={{ uri: product.imageUrl || 'https://via.placeholder.com/150' }}
style={styles.image}
resizeMode="cover"
/>
{/* Category Badge */}
<View style={styles.categoryBadge}>
<Text style={styles.categoryText}>{product.categoryName}</Text>
</View>
{/* Out of Stock Overlay */}
{product.stockQuantity <= 0 && (
<View style={styles.outOfStockOverlay}>
<Text style={styles.outOfStockText}>HẾT HÀNG</Text>
</View>
)}
</View>
<View style={styles.content}>
<Text style={styles.productName} numberOfLines={2}>
{product.productName}
</Text>
<Text style={styles.categoryName} numberOfLines={1}>
{product.categoryName}
</Text>
<View style={styles.priceContainer}>
<View style={styles.footer}>
<View style={styles.priceSection}>
<Text style={styles.price}>{formatPrice(product.price)}</Text>
{product.stockQuantity > 0 ? (
<View style={styles.stockBadge}>
{product.stockQuantity > 0 && (
<Text style={styles.stockText}>Còn {product.stockQuantity}</Text>
</View>
) : (
<View style={[styles.stockBadge, styles.outOfStock]}>
<Text style={[styles.stockText, styles.outOfStockText]}>Hết hàng</Text>
</View>
)}
</View>
{/* Add to Cart Button */}
<TouchableOpacity
style={[
styles.addButton,
product.stockQuantity <= 0 && styles.addButtonDisabled,
]}
onPress={handleAddToCart}
disabled={product.stockQuantity <= 0 || isAdding}
activeOpacity={0.7}
>
{isAdding ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Ionicons
name="cart-outline"
size={22}
color={product.stockQuantity <= 0 ? '#999' : '#fff'}
/>
)}
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
);
@@ -65,11 +114,46 @@ const styles = StyleSheet.create({
elevation: 3,
overflow: 'hidden',
},
image: {
imageContainer: {
position: 'relative',
width: '100%',
height: 200,
},
image: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0',
},
categoryBadge: {
position: 'absolute',
top: 12,
left: 12,
backgroundColor: 'rgba(255, 107, 107, 0.95)',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 6,
},
categoryText: {
fontSize: 12,
color: '#fff',
fontWeight: '600',
},
outOfStockOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
outOfStockText: {
fontSize: 18,
fontWeight: '700',
color: '#fff',
letterSpacing: 2,
},
content: {
padding: 12,
},
@@ -77,39 +161,44 @@ const styles = StyleSheet.create({
fontSize: 16,
fontWeight: '600',
color: '#333',
marginBottom: 4,
},
categoryName: {
fontSize: 13,
color: '#666',
marginBottom: 8,
minHeight: 44,
},
priceContainer: {
footer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
priceSection: {
flex: 1,
},
price: {
fontSize: 18,
fontWeight: '700',
color: '#e91e63',
},
stockBadge: {
backgroundColor: '#4caf50',
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 4,
color: '#ff6b6b',
marginBottom: 2,
},
stockText: {
fontSize: 12,
color: '#fff',
color: '#4caf50',
fontWeight: '500',
},
outOfStock: {
backgroundColor: '#f44336',
addButton: {
width: 44,
height: 44,
backgroundColor: '#ff6b6b',
borderRadius: 22,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#ff6b6b',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 4,
},
outOfStockText: {
color: '#fff',
addButtonDisabled: {
backgroundColor: '#ccc',
shadowOpacity: 0,
},
});

106
hooks/useAuth.ts
View File

@@ -0,0 +1,106 @@
import { useState, useEffect, useCallback } from 'react';
import { Alert } from 'react-native';
import * as authService from '../services/auth';
interface User {
userId: number;
email: string;
}
export const useAuth = () => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [isAuthenticated, setIsAuthenticated] = useState(false);
// Kiểm tra trạng thái đăng nhập khi khởi động
useEffect(() => {
checkAuthStatus();
}, []);
const checkAuthStatus = async () => {
try {
const authenticated = await authService.isAuthenticated();
setIsAuthenticated(authenticated);
if (authenticated) {
const userData = await authService.getUser();
setUser(userData);
}
} catch (error) {
console.error('Check auth status error:', error);
} finally {
setLoading(false);
}
};
const login = async (email: string, password: string) => {
try {
const response = await authService.login(email, password);
setUser({
userId: response.userId,
email: response.email,
});
setIsAuthenticated(true);
Alert.alert('Thành công', 'Đăng nhập thành công!');
return true;
} catch (error: any) {
console.error('Login error:', error);
Alert.alert('Lỗi', error.message || 'Đăng nhập thất bại');
return false;
}
};
const register = async (email: string, password: string) => {
try {
const response = await authService.register(email, password);
// Sau khi đăng ký thành công, tự động đăng nhập
if (response.token) {
await authService.saveAuthData(response);
setUser({
userId: response.userId,
email: response.email,
});
setIsAuthenticated(true);
}
Alert.alert('Thành công', 'Đăng ký thành công!');
return true;
} catch (error: any) {
console.error('Register error:', error);
Alert.alert('Lỗi', error.message || 'Đăng ký thất bại');
return false;
}
};
const logout = async () => {
try {
const token = await authService.getAuthToken();
if (token) {
await authService.logout(token);
}
setUser(null);
setIsAuthenticated(false);
Alert.alert('Thành công', 'Đăng xuất thành công!');
return true;
} catch (error: any) {
console.error('Logout error:', error);
Alert.alert('Lỗi', 'Đăng xuất thất bại');
return false;
}
};
return {
user,
loading,
isAuthenticated,
login,
register,
logout,
checkAuthStatus,
};
};

162
hooks/useCart.ts
View File

@@ -0,0 +1,162 @@
import { useCallback, useEffect, useState } from 'react';
import { Alert } from 'react-native';
import * as authService from '../services/auth';
import cartService, { AddToCartRequest, CartResponse } from '../services/cart';
export const useCart = () => {
const [cart, setCart] = useState<CartResponse | null>(null);
const [loading, setLoading] = useState(false);
const [refreshing, setRefreshing] = useState(false);
// Lấy userId từ auth service
const getUserId = async (): Promise<number | null> => {
try {
const isAuthenticated = await authService.isAuthenticated();
if (!isAuthenticated) {
console.log('User is not authenticated');
return null;
}
const user = await authService.getUser();
console.log('getUserId - User data:', user);
if (user && typeof user.userId === 'number') {
return user.userId;
}
if (user) {
console.warn('User exists but userId is missing or invalid:', user);
}
return null;
} catch (error) {
console.error('Error getting userId:', error);
return null;
}
};
// Tải giỏ hàng
const loadCart = useCallback(async () => {
try {
setLoading(true);
const userId = await getUserId();
if (!userId) {
setCart(null);
return;
}
const data = await cartService.getCart(userId);
setCart(data);
} catch (error: any) {
console.error('Load cart error:', error);
const errorMessage = error?.message || '';
if (errorMessage.includes('404') || errorMessage.includes('Not Found') || errorMessage.includes('not found')) {
setCart(null);
} else if (!errorMessage.includes('User not logged in')) {
console.warn('Failed to load cart:', errorMessage);
}
} finally {
setLoading(false);
}
}, []);
// Refresh giỏ hàng
const refreshCart = useCallback(async () => {
try {
setRefreshing(true);
await loadCart();
} finally {
setRefreshing(false);
}
}, [loadCart]);
// Thêm sản phẩm vào giỏ hàng
const addToCart = useCallback(async (productId: number, quantity: number = 1) => {
try {
console.log('=== useCart: addToCart START ===', { productId, quantity });
const userId = await getUserId();
if (!userId) {
Alert.alert('Thông báo', 'Vui lòng đăng nhập để thêm vào giỏ hàng');
return false;
}
const updatedCart = await cartService.addToCart(userId, { productId, quantity });
console.log('=== useCart: addToCart SUCCESS - Setting cart ===', updatedCart);
setCart(updatedCart); // Cập nhật state ngay lập tức
Alert.alert('Thành công', 'Đã thêm sản phẩm vào giỏ hàng');
return true;
} catch (error: any) {
console.error('=== useCart: addToCart ERROR ===', error);
Alert.alert('Lỗi', 'Không thể thêm sản phẩm vào giỏ hàng');
return false;
}
}, []);
// Cập nhật số lượng sản phẩm
const updateQuantity = useCallback(async (cartItemId: number, quantity: number) => {
try {
const userId = await getUserId();
if (!userId) return false;
const updatedCart = await cartService.updateCartItem(userId, cartItemId, { quantity });
setCart(updatedCart); // Cập nhật state ngay lập tức
return true;
} catch (error) {
console.error('Update quantity error:', error);
Alert.alert('Lỗi', 'Không thể cập nhật số lượng');
return false;
}
}, []);
// Xóa một sản phẩm
const removeItem = useCallback(async (cartItemId: number) => {
try {
const userId = await getUserId();
if (!userId) return false;
const updatedCart = await cartService.removeCartItem(userId, cartItemId);
setCart(updatedCart); // Cập nhật state ngay lập tức
Alert.alert('Thành công', 'Đã xóa sản phẩm khỏi giỏ hàng');
return true;
} catch (error) {
console.error('Remove item error:', error);
Alert.alert('Lỗi', 'Không thể xóa sản phẩm');
return false;
}
}, []);
// Xóa tất cả sản phẩm
const clearCart = useCallback(async () => {
try {
const userId = await getUserId();
if (!userId) return false;
await cartService.clearCart(userId);
setCart(null);
Alert.alert('Thành công', 'Đã xóa tất cả sản phẩm');
return true;
} catch (error) {
console.error('Clear cart error:', error);
Alert.alert('Lỗi', 'Không thể xóa giỏ hàng');
return false;
}
}, []);
// Load cart khi component mount
useEffect(() => {
loadCart();
}, [loadCart]);
return {
cart,
loading,
refreshing,
loadCart,
refreshCart,
addToCart,
updateQuantity,
removeItem,
clearCart,
};
};

195
services/api.ts
View File

@@ -0,0 +1,195 @@
import { API_CONFIG } from '../constants/Config';
import AsyncStorage from '@react-native-async-storage/async-storage';
const API_URL = API_CONFIG.BASE_URL;
interface RequestOptions extends RequestInit {
requireAuth?: boolean;
}
class ApiClient {
private baseURL: string;
constructor(baseURL: string) {
this.baseURL = baseURL;
}
/**
* Lấy token từ AsyncStorage
*/
private async getAuthToken(): Promise<string | null> {
try {
return await AsyncStorage.getItem('authToken');
} catch (error) {
console.error('Error getting auth token:', error);
return null;
}
}
/**
* Tạo headers cho request
*/
private async createHeaders(requireAuth: boolean = false): Promise<HeadersInit> {
const headers: HeadersInit = {
'Content-Type': 'application/json',
'Accept': 'application/json',
};
if (requireAuth) {
const token = await this.getAuthToken();
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
}
return headers;
}
/**
* Xử lý response
*/
private async handleResponse<T>(response: Response): Promise<T> {
if (!response.ok) {
let errorMessage = `Request failed: ${response.status} ${response.statusText}`;
try {
const errorData = await response.json();
errorMessage = errorData.message || errorData.error || errorMessage;
} catch {
const text = await response.text().catch(() => '');
errorMessage = text || errorMessage;
}
throw new Error(errorMessage);
}
// Xử lý response 204 No Content
if (response.status === 204) {
return {} as T;
}
return await response.json();
}
/**
* GET request
*/
async get<T>(endpoint: string, options: RequestOptions = {}): Promise<T> {
try {
const { requireAuth = false, ...fetchOptions } = options;
const headers = await this.createHeaders(requireAuth);
const response = await fetch(`${this.baseURL}${endpoint}`, {
method: 'GET',
headers,
...fetchOptions,
});
return await this.handleResponse<T>(response);
} catch (error) {
if (error instanceof TypeError && error.message.includes('fetch')) {
throw new Error('Không thể kết nối đến server. Vui lòng kiểm tra kết nối mạng.');
}
throw error;
}
}
/**
* POST request
*/
async post<T>(endpoint: string, data?: any, options: RequestOptions = {}): Promise<T> {
try {
const { requireAuth = false, ...fetchOptions } = options;
const headers = await this.createHeaders(requireAuth);
const response = await fetch(`${this.baseURL}${endpoint}`, {
method: 'POST',
headers,
body: data ? JSON.stringify(data) : undefined,
...fetchOptions,
});
return await this.handleResponse<T>(response);
} catch (error) {
if (error instanceof TypeError && error.message.includes('fetch')) {
throw new Error('Không thể kết nối đến server. Vui lòng kiểm tra kết nối mạng.');
}
throw error;
}
}
/**
* PUT request
*/
async put<T>(endpoint: string, data?: any, options: RequestOptions = {}): Promise<T> {
try {
const { requireAuth = false, ...fetchOptions } = options;
const headers = await this.createHeaders(requireAuth);
const response = await fetch(`${this.baseURL}${endpoint}`, {
method: 'PUT',
headers,
body: data ? JSON.stringify(data) : undefined,
...fetchOptions,
});
return await this.handleResponse<T>(response);
} catch (error) {
if (error instanceof TypeError && error.message.includes('fetch')) {
throw new Error('Không thể kết nối đến server. Vui lòng kiểm tra kết nối mạng.');
}
throw error;
}
}
/**
* DELETE request
*/
async delete<T>(endpoint: string, options: RequestOptions = {}): Promise<T> {
try {
const { requireAuth = false, ...fetchOptions } = options;
const headers = await this.createHeaders(requireAuth);
const response = await fetch(`${this.baseURL}${endpoint}`, {
method: 'DELETE',
headers,
...fetchOptions,
});
return await this.handleResponse<T>(response);
} catch (error) {
if (error instanceof TypeError && error.message.includes('fetch')) {
throw new Error('Không thể kết nối đến server. Vui lòng kiểm tra kết nối mạng.');
}
throw error;
}
}
/**
* PATCH request
*/
async patch<T>(endpoint: string, data?: any, options: RequestOptions = {}): Promise<T> {
try {
const { requireAuth = false, ...fetchOptions } = options;
const headers = await this.createHeaders(requireAuth);
const response = await fetch(`${this.baseURL}${endpoint}`, {
method: 'PATCH',
headers,
body: data ? JSON.stringify(data) : undefined,
...fetchOptions,
});
return await this.handleResponse<T>(response);
} catch (error) {
if (error instanceof TypeError && error.message.includes('fetch')) {
throw new Error('Không thể kết nối đến server. Vui lòng kiểm tra kết nối mạng.');
}
throw error;
}
}
}
// Export singleton instance
const api = new ApiClient(API_URL);
export default api;

359
services/auth.ts
View File

@@ -1,28 +1,277 @@
import AsyncStorage from '@react-native-async-storage/async-storage';
const API_URL = "http://192.168.2.141:8080/api/auth";
export async function register(email: string, password: string) {
export interface AuthResponse {
token: string;
userId: number;
email: string;
message?: string;
}
/**
* Decode base64Url string
* React Native compatible - không dùng atob
*/
function base64UrlDecode(str: string): string {
try {
// Replace URL-safe characters
let base64 = str.replace(/-/g, '+').replace(/_/g, '/');
// Add padding
while (base64.length % 4) {
base64 += '=';
}
// Try to use atob if available (browser environment)
if (typeof atob !== 'undefined') {
return atob(base64);
}
// For React Native - use Buffer or manual decode
// React Native có thể có Buffer từ polyfills
if (typeof Buffer !== 'undefined') {
return Buffer.from(base64, 'base64').toString('utf-8');
}
// Fallback: manual base64 decode (simple implementation)
// Chỉ hoạt động với ASCII characters
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
let result = '';
let i = 0;
str = str.replace(/[^A-Za-z0-9\+\/]/g, '');
while (i < str.length) {
const encoded1 = chars.indexOf(str.charAt(i++));
const encoded2 = chars.indexOf(str.charAt(i++));
const encoded3 = chars.indexOf(str.charAt(i++));
const encoded4 = chars.indexOf(str.charAt(i++));
const bitmap = (encoded1 << 18) | (encoded2 << 12) | (encoded3 << 6) | encoded4;
result += String.fromCharCode((bitmap >> 16) & 255);
if (encoded3 !== 64) result += String.fromCharCode((bitmap >> 8) & 255);
if (encoded4 !== 64) result += String.fromCharCode(bitmap & 255);
}
return result;
} catch (error) {
console.error('Error decoding base64:', error);
throw new Error('Không thể decode base64: ' + (error as Error).message);
}
}
/**
* Decode JWT token và lấy payload
*/
function decodeJWT(token: string): any {
try {
const parts = token.split('.');
if (parts.length !== 3) {
throw new Error('Token không đúng format JWT (phải có 3 phần)');
}
const payload = parts[1];
const decoded = base64UrlDecode(payload);
return JSON.parse(decoded);
} catch (error) {
console.error('Error decoding JWT:', error);
throw new Error('Không thể decode JWT token: ' + (error as Error).message);
}
}
export async function register(email: string, password: string): Promise<AuthResponse> {
const response = await fetch(`${API_URL}/register`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
});
if (!response.ok) throw new Error("Đăng ký thất bại");
return await response.json();
if (!response.ok) {
const error = await response.json().catch(() => ({ message: "Đăng ký thất bại" }));
throw new Error(error.message || "Đăng ký thất bại");
}
export async function login(email: string, password: string) {
const rawData = await response.json();
console.log('Register API raw response:', JSON.stringify(rawData, null, 2));
// Kiểm tra token
if (!rawData.token) {
throw new Error('Response không có token');
}
// Lấy userId từ response (server trả về kiểu Long)
let userId: number;
let userEmail: string = rawData.email || email;
// Lấy userId từ response - ưu tiên userId (camelCase) trước
if (rawData.userId !== undefined && rawData.userId !== null) {
userId = typeof rawData.userId === 'string' ? parseInt(rawData.userId, 10) : rawData.userId;
} else if (rawData.user_id !== undefined && rawData.user_id !== null) {
userId = typeof rawData.user_id === 'string' ? parseInt(rawData.user_id, 10) : rawData.user_id;
} else if (rawData.id !== undefined && rawData.id !== null) {
userId = typeof rawData.id === 'string' ? parseInt(rawData.id, 10) : rawData.id;
} else {
// Fallback: thử decode JWT token nếu không có trong response
console.warn('UserId không có trong response, thử decode JWT token...');
try {
const payload = decodeJWT(rawData.token);
console.log('JWT payload decoded (register):', payload);
userId = payload.userId || payload.user_id || payload.id || payload.sub;
if (typeof userId === 'string') {
userId = parseInt(userId, 10);
}
if (!userId && userId !== 0) {
throw new Error('Không tìm thấy userId trong JWT token');
}
if (payload.email) {
userEmail = payload.email;
}
console.log('Extracted userId from JWT token (register):', userId);
} catch (error: any) {
console.error('Error decoding JWT token (register):', error);
throw new Error(
'Không thể lấy userId từ response. ' +
'Response fields: ' + Object.keys(rawData).join(', ') + '. ' +
'Vui lòng đảm bảo server trả về userId trong AuthResponse.'
);
}
}
// Validate userId
if (userId === undefined || userId === null) {
throw new Error('UserId không tồn tại trong response');
}
if (isNaN(userId)) {
throw new Error('UserId không hợp lệ (phải là số): ' + userId);
}
console.log('Got userId from response (register):', userId, '(type: number)');
// Tạo AuthResponse với userId
const data: AuthResponse = {
token: rawData.token,
userId: userId,
email: userEmail,
};
console.log('Final register data:', data);
// Validate data
if (!data.token) {
throw new Error('Token không tồn tại trong response');
}
if (data.userId === undefined || data.userId === null) {
throw new Error('UserId không tồn tại');
}
await saveAuthData(data);
return data;
}
export async function login(email: string, password: string): Promise<AuthResponse> {
const response = await fetch(`${API_URL}/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
});
if (!response.ok) throw new Error("Đăng nhập thất bại");
return await response.json();
if (!response.ok) {
const error = await response.json().catch(() => ({ message: "Đăng nhập thất bại" }));
throw new Error(error.message || "Đăng nhập thất bại");
}
export async function logout(token: string) {
const rawData = await response.json();
console.log('Login API raw response:', JSON.stringify(rawData, null, 2));
// Kiểm tra token
if (!rawData.token) {
throw new Error('Response không có token');
}
// Lấy userId từ response (server trả về kiểu Long)
let userId: number;
let userEmail: string = rawData.email || email;
// Lấy userId từ response - ưu tiên userId (camelCase) trước
if (rawData.userId !== undefined && rawData.userId !== null) {
userId = typeof rawData.userId === 'string' ? parseInt(rawData.userId, 10) : rawData.userId;
} else if (rawData.user_id !== undefined && rawData.user_id !== null) {
userId = typeof rawData.user_id === 'string' ? parseInt(rawData.user_id, 10) : rawData.user_id;
} else if (rawData.id !== undefined && rawData.id !== null) {
userId = typeof rawData.id === 'string' ? parseInt(rawData.id, 10) : rawData.id;
} else {
// Fallback: thử decode JWT token nếu không có trong response
console.warn('UserId không có trong response, thử decode JWT token...');
try {
const payload = decodeJWT(rawData.token);
console.log('JWT payload decoded:', payload);
userId = payload.userId || payload.user_id || payload.id || payload.sub;
if (typeof userId === 'string') {
userId = parseInt(userId, 10);
}
if (!userId && userId !== 0) {
throw new Error('Không tìm thấy userId trong JWT token');
}
if (payload.email) {
userEmail = payload.email;
}
console.log('Extracted userId from JWT token:', userId);
} catch (error: any) {
console.error('Error decoding JWT token:', error);
throw new Error(
'Không thể lấy userId từ response. ' +
'Response fields: ' + Object.keys(rawData).join(', ') + '. ' +
'Vui lòng đảm bảo server trả về userId trong AuthResponse.'
);
}
}
// Validate userId
if (userId === undefined || userId === null) {
throw new Error('UserId không tồn tại trong response');
}
if (isNaN(userId)) {
throw new Error('UserId không hợp lệ (phải là số): ' + userId);
}
console.log('Got userId from response:', userId, '(type: number)');
// Tạo AuthResponse với userId
const data: AuthResponse = {
token: rawData.token,
userId: userId,
email: userEmail,
};
console.log('Final auth data:', data);
// Validate data
if (!data.token) {
throw new Error('Token không tồn tại trong response');
}
if (data.userId === undefined || data.userId === null) {
throw new Error('UserId không tồn tại');
}
// Lưu token và user info vào AsyncStorage
await saveAuthData(data);
return data;
}
export async function logout(token: string): Promise<boolean> {
try {
const response = await fetch(`${API_URL}/logout`, {
method: "POST",
headers: {
@@ -30,5 +279,101 @@ export async function logout(token: string) {
Authorization: `Bearer ${token}`,
},
});
// Xóa token và user info khỏi AsyncStorage
await clearAuthData();
return response.ok;
} catch (error) {
// Vẫn xóa dữ liệu local ngay cả khi API call thất bại
await clearAuthData();
return false;
}
}
/**
* Lưu thông tin auth vào AsyncStorage
*/
export async function saveAuthData(data: AuthResponse): Promise<void> {
try {
const userData = {
userId: data.userId,
email: data.email,
};
console.log('Saving auth data:', {
hasToken: !!data.token,
userId: data.userId,
email: data.email
});
await AsyncStorage.multiSet([
['authToken', data.token],
['user', JSON.stringify(userData)],
]);
// Verify data was saved
const savedUser = await AsyncStorage.getItem('user');
const savedToken = await AsyncStorage.getItem('authToken');
console.log('Auth data saved - User:', savedUser, 'Token exists:', !!savedToken);
if (!savedUser || !savedToken) {
throw new Error('Failed to save auth data');
}
} catch (error) {
console.error('Error saving auth data:', error);
throw new Error('Không thể lưu thông tin đăng nhập');
}
}
/**
* Xóa thông tin auth khỏi AsyncStorage
*/
export async function clearAuthData(): Promise<void> {
try {
await AsyncStorage.multiRemove(['authToken', 'user']);
} catch (error) {
console.error('Error clearing auth data:', error);
}
}
/**
* Lấy thông tin user từ AsyncStorage
*/
export async function getUser(): Promise<{ userId: number; email: string } | null> {
try {
const userStr = await AsyncStorage.getItem('user');
if (userStr) {
return JSON.parse(userStr);
}
return null;
} catch (error) {
console.error('Error getting user:', error);
return null;
}
}
/**
* Lấy auth token từ AsyncStorage
*/
export async function getAuthToken(): Promise<string | null> {
try {
return await AsyncStorage.getItem('authToken');
} catch (error) {
console.error('Error getting auth token:', error);
return null;
}
}
/**
* Kiểm tra user đã đăng nhập chưa
*/
export async function isAuthenticated(): Promise<boolean> {
try {
const token = await AsyncStorage.getItem('authToken');
const user = await AsyncStorage.getItem('user');
return !!(token && user);
} catch (error) {
return false;
}
}

93
services/cart.ts
View File

@@ -0,0 +1,93 @@
import api from './api';
export interface CartItem {
cartItemId: number;
productId: number;
productName: string;
productImage: string;
quantity: number;
price: number;
subtotal: number;
}
export interface CartResponse {
cartId: number;
userId: number;
items: CartItem[];
totalAmount: number;
totalItems: number;
createdAt: string;
}
export interface AddToCartRequest {
productId: number;
quantity: number;
}
export interface UpdateCartItemRequest {
quantity: number;
}
const cartService = {
// Thêm sản phẩm vào giỏ hàng
addToCart: async (userId: number, data: AddToCartRequest): Promise<CartResponse> => {
console.log('=== ADD TO CART REQUEST ===', { userId, data });
const response = await api.post<CartResponse>(
`/cart/${userId}`,
data,
{ requireAuth: true }
);
console.log('=== ADD TO CART RESPONSE ===', response);
return response;
},
// Lấy danh sách sản phẩm trong giỏ hàng
getCart: async (userId: number): Promise<CartResponse> => {
console.log('=== GET CART REQUEST ===', { userId });
const response = await api.get<CartResponse>(
`/cart/${userId}`,
{ requireAuth: true }
);
console.log('=== GET CART RESPONSE ===', response);
return response;
},
// Cập nhật số lượng sản phẩm
updateCartItem: async (
userId: number,
cartItemId: number,
data: UpdateCartItemRequest
): Promise<CartResponse> => {
console.log('=== UPDATE CART ITEM REQUEST ===', { userId, cartItemId, data });
const response = await api.put<CartResponse>(
`/cart/${userId}/items/${cartItemId}`,
data,
{ requireAuth: true }
);
console.log('=== UPDATE CART ITEM RESPONSE ===', response);
return response;
},
// Xóa một sản phẩm khỏi giỏ hàng
removeCartItem: async (userId: number, cartItemId: number): Promise<CartResponse> => {
console.log('=== REMOVE CART ITEM REQUEST ===', { userId, cartItemId });
const response = await api.delete<CartResponse>(
`/cart/${userId}/items/${cartItemId}`,
{ requireAuth: true }
);
console.log('=== REMOVE CART ITEM RESPONSE ===', response);
return response;
},
// Xóa tất cả sản phẩm khỏi giỏ hàng
clearCart: async (userId: number): Promise<void> => {
console.log('=== CLEAR CART REQUEST ===', { userId });
await api.delete<void>(
`/cart/${userId}/clear`,
{ requireAuth: true }
);
console.log('=== CLEAR CART SUCCESS ===');
},
};
export default cartService;

97
services/product.ts
View File

@@ -1,6 +1,4 @@
import { API_CONFIG } from '../constants/Config';
const API_URL = API_CONFIG.BASE_URL;
import api from './api';
export interface ProductResponse {
productId: number;
@@ -34,7 +32,6 @@ class ProductService {
sortBy: string = 'productId',
sortDir: 'asc' | 'desc' = 'asc'
): Promise<ProductListResponse> {
try {
const params = new URLSearchParams({
page: page.toString(),
size: size.toString(),
@@ -42,63 +39,14 @@ class ProductService {
sortDir,
});
const url = `${API_URL}/products?${params}`;
console.log('Fetching products from:', url);
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
});
if (!response.ok) {
let errorMessage = `Failed to fetch products: ${response.status} ${response.statusText}`;
try {
const errorData = await response.json();
errorMessage = errorData.message || errorData.error || errorMessage;
} catch {
// If response is not JSON, use the status text
const text = await response.text().catch(() => '');
errorMessage = text || errorMessage;
}
console.error('API Error:', {
status: response.status,
statusText: response.statusText,
url,
});
throw new Error(errorMessage);
}
const data = await response.json();
return data;
} catch (error) {
if (error instanceof TypeError && error.message.includes('fetch')) {
console.error('Network error - API may be unreachable:', error);
throw new Error('Không thể kết nối đến server. Vui lòng kiểm tra kết nối mạng.');
}
console.error('Error fetching products:', error);
throw error;
}
return await api.get<ProductListResponse>(`/products?${params}`);
}
/**
* Lấy chi tiết sản phẩm theo ID
*/
async getProductById(id: number): Promise<ProductResponse> {
try {
const response = await fetch(`${API_URL}/products/${id}`);
if (!response.ok) {
throw new Error('Product not found');
}
return await response.json();
} catch (error) {
console.error('Error fetching product:', error);
throw error;
}
return await api.get<ProductResponse>(`/products/${id}`);
}
/**
@@ -111,7 +59,6 @@ class ProductService {
sortBy: string = 'productId',
sortDir: 'asc' | 'desc' = 'asc'
): Promise<ProductListResponse> {
try {
const params = new URLSearchParams({
page: page.toString(),
size: size.toString(),
@@ -119,17 +66,7 @@ class ProductService {
sortDir,
});
const response = await fetch(`${API_URL}/products/category/${categoryId}?${params}`);
if (!response.ok) {
throw new Error('Failed to fetch products by category');
}
return await response.json();
} catch (error) {
console.error('Error fetching products by category:', error);
throw error;
}
return await api.get<ProductListResponse>(`/products/category/${categoryId}?${params}`);
}
/**
@@ -142,7 +79,6 @@ class ProductService {
sortBy: string = 'productId',
sortDir: 'asc' | 'desc' = 'asc'
): Promise<ProductListResponse> {
try {
const params = new URLSearchParams({
keyword,
page: page.toString(),
@@ -151,17 +87,7 @@ class ProductService {
sortDir,
});
const response = await fetch(`${API_URL}/products/search?${params}`);
if (!response.ok) {
throw new Error('Failed to search products');
}
return await response.json();
} catch (error) {
console.error('Error searching products:', error);
throw error;
}
return await api.get<ProductListResponse>(`/products/search?${params}`);
}
/**
@@ -173,7 +99,6 @@ class ProductService {
sortBy: string = 'productId',
sortDir: 'asc' | 'desc' = 'asc'
): Promise<ProductListResponse> {
try {
const params = new URLSearchParams({
page: page.toString(),
size: size.toString(),
@@ -181,17 +106,7 @@ class ProductService {
sortDir,
});
const response = await fetch(`${API_URL}/products/available?${params}`);
if (!response.ok) {
throw new Error('Failed to fetch available products');
}
return await response.json();
} catch (error) {
console.error('Error fetching available products:', error);
throw error;
}
return await api.get<ProductListResponse>(`/products/available?${params}`);
}
}