154 lines
3.4 KiB
JavaScript
154 lines
3.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { Dimensions, StyleSheet, Text, View } from "react-native";
|
|
import MasonryList from "@react-native-seoul/masonry-list";
|
|
import CartCard from "../../components/cart/CartCard";
|
|
const width = Dimensions.get("window").width;
|
|
|
|
const cartList1 = [
|
|
{
|
|
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
|
|
min: 20,
|
|
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
|
|
per: "pieces",
|
|
price: 200,
|
|
promo: 30,
|
|
rate: 4.2,
|
|
raterTotal: 200,
|
|
shopId: "1234",
|
|
sold: 340,
|
|
},
|
|
{
|
|
img: "https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
|
|
min: 20,
|
|
name: "product 1",
|
|
per: "pieces",
|
|
price: 200,
|
|
shopId: "1233",
|
|
sold: 340,
|
|
},
|
|
{
|
|
img: "https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
|
|
min: 20,
|
|
name: "product 1",
|
|
per: "pieces",
|
|
price: 200,
|
|
shopId: "1234",
|
|
sold: 340,
|
|
},
|
|
];
|
|
|
|
const Cart = ({ cartList }) => {
|
|
const [cartSort, setcartSort] = useState([]);
|
|
console.log(cartSort);
|
|
|
|
useEffect(() => {
|
|
const cartSorted = cartList.reduce((acc, item) => {
|
|
const shopId = item.shopId;
|
|
const existingShop = acc.find((shop) => shop.shopname === shopId);
|
|
|
|
if (existingShop) {
|
|
// Shop already exists, add the item to its cartItems array
|
|
existingShop.cartItems.push(item);
|
|
} else {
|
|
// Shop doesn't exist, create a new shop object
|
|
acc.push({ shopname: shopId, cartItems: [item] });
|
|
}
|
|
|
|
return acc;
|
|
}, []);
|
|
setcartSort(cartSorted);
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerText}>CART</Text>
|
|
</View>
|
|
<View style={styles.wrapper}>
|
|
<MasonryList
|
|
data={cartSort}
|
|
keyExtractor={(item) => item.id}
|
|
style={styles.list}
|
|
numColumns={1}
|
|
showsVerticalScrollIndicator={false}
|
|
renderItem={({ item }) => <CartCard cart={item} />}
|
|
containerStyle={styles.container1}
|
|
contentContainerStyle={styles.content}
|
|
onEndReachedThreshold={0.1}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#ffffff",
|
|
padding: 10,
|
|
height: "100%",
|
|
width: width,
|
|
},
|
|
header: {
|
|
width: "100%",
|
|
top: 0,
|
|
height: 50,
|
|
marginLeft:15
|
|
},
|
|
container1: {
|
|
width: "100%",
|
|
},
|
|
content: {
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
},
|
|
headerText: {
|
|
textAlign: "left",
|
|
width: "100%",
|
|
fontWeight: "600",
|
|
fontSize: 16,
|
|
},
|
|
footer: {
|
|
bottom: 0,
|
|
width: "100%",
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
card: {
|
|
width: "100%",
|
|
borderWidth: 1,
|
|
borderColor: "#dddd",
|
|
justifyContent: "center",
|
|
padding: 15,
|
|
paddingVertical: 10,
|
|
borderRadius: 10,
|
|
marginVertical: 2,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
body: {
|
|
fontSize: 16,
|
|
// fontWeight: "600",
|
|
marginTop: 5,
|
|
},
|
|
date: {
|
|
fontSize: 12,
|
|
// fontWeight: "600",
|
|
color: "#797979",
|
|
marginTop: 10,
|
|
},
|
|
});
|
|
export default Cart;
|