Add to cart in react native - react-native

Question

I am creating my first professional react native app for a new start up, I like to do so.
This is based om a Product delarship.
Since I am not able to Pass the checked products to the Cart Page. Please Help me to do future.
I just created it in expo for react-native
Please Help me
Please Help I am stuck here.
import React from "react";
import styled from "styled-components";
import { Dimensions } from "react-native";
import { StatusBar } from "expo-status-bar";
import MedCard from "../components/MidCard";
import ProductName from "../components/Prices";
import Price from "../components/Prices";
import { LinearGradient } from "expo-linear-gradient";
import {
StyleSheet,
Button,
Text,
View,
TouchableOpacity,
ScrollView,
Image,
ActivityIndicator,
TextInput,
Alert,
} from "react-native";
import {
MaterialIcons,
AntDesign,
Ionicons,
MaterialCommunityIcons,
} from "#expo/vector-icons";
import { color } from "react-native-reanimated";
class Pulsars extends React.Component {
constructor(props) {
super(props);
this.state = {
selectAll: false,
cartItemsIsLoading: false,
cartItems: [
/* Sample data from walmart */
{
itemId: "1",
name: "Orid Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81f17QBywiL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "2",
name: "Orid Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81f17QBywiL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "3",
name: "Toor Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81ieFDa5gHL._SY550_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "4",
name: "Toor Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81ieFDa5gHL._SY550_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "5",
name: "Gram Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/udhayam-gram-dal-228x228-1.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "6",
name: "Gram Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/udhayam-gram-dal-228x228-1.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "7",
name: "Moong Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/12/819D8piBVKL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "8",
name: "Moong Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/12/819D8piBVKL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
],
};
}
selectHandler = (index, value) => {
const newItems = [...this.state.cartItems]; // clone the array
newItems[index]["checked"] = value == 1 ? 0 : 1; // set the new value
this.setState({ cartItems: newItems }); // set new state
};
selectHandlerAll = (value) => {
const newItems = [...this.state.cartItems]; // clone the array
newItems.map((item, index) => {
newItems[index]["checked"] = value == true ? 0 : 1; // set the new value
});
this.setState({
cartItems: newItems,
selectAll: value == true ? false : true,
}); // set new state
};
deleteHandler = (index) => {
Alert.alert(
"Are you sure you want to delete this item from your cart?",
"",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel",
},
{
text: "Delete",
onPress: () => {
let updatedCart = this.state.cartItems; /* Clone it first */
updatedCart.splice(
index,
1
); /* Remove item from the cloned cart state */
this.setState(updatedCart); /* Update the state */
},
},
],
{ cancelable: false }
);
};
quantityHandler = (action, index) => {
const newItems = [...this.state.cartItems]; // clone the array
let currentQty = newItems[index]["qty"];
if (action == "more") {
newItems[index]["qty"] = currentQty + 5;
} else if (action == "less") {
newItems[index]["qty"] = currentQty > 5 ? currentQty - 5 : 5;
}
this.setState({ cartItems: newItems }); // set new state
};
subtotalPrice = () => {
const { cartItems } = this.state;
if (cartItems) {
return cartItems.reduce(
(sum, item) =>
sum + (item.checked == 1 ? item.qty * item.salePrice : 0),
0
);
}
return 0;
};
render() {
const styles = StyleSheet.create({
centerElement: { justifyContent: "center", alignItems: "center" },
});
const { cartItems, cartItemsIsLoading, selectAll } = this.state;
return (
<View style={{ flex: 1, backgroundColor: "#f6f6f6" }}>
<View
style={{
flexDirection: "row",
backgroundColor: "#fff",
marginBottom: 10,
}}
>
<View style={[styles.centerElement, { width: 50, height: 50 }]}>
<Ionicons name="ios-cart" size={25} color="#000" />
</View>
<View style={[styles.centerElement, { height: 50 }]}>
<Text style={{ fontSize: 18, color: "#000" }}>Shopping Cart</Text>
</View>
</View>
{cartItemsIsLoading ? (
<View style={[styles.centerElement, { height: 300 }]}>
<ActivityIndicator size="large" color="#ef5739" />
</View>
) : (
<ScrollView>
{cartItems &&
cartItems.map((item, i) => (
<View
key={i}
style={{
flexDirection: "row",
backgroundColor: "#fff",
marginBottom: 2,
height: 120,
}}
>
<View style={[styles.centerElement, { width: 60 }]}>
<TouchableOpacity
style={[styles.centerElement, { width: 32, height: 32 }]}
onPress={() => this.selectHandler(i, item.checked)}
>
<Ionicons
name={
item.checked == 1
? "ios-checkmark-circle"
: "ios-checkmark-circle-outline"
}
size={25}
color={item.checked == 1 ? "#0faf9a" : "#aaaaaa"}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: "row",
flexGrow: 1,
flexShrink: 1,
alignSelf: "center",
}}
>
<TouchableOpacity
onPress={() => {
/*this.props.navigation.navigate('ProductDetails', {productDetails: item})*/
}}
style={{ paddingRight: 10 }}
>
<Image
source={{ uri: item.thumbnailImage }}
style={[
styles.centerElement,
{ height: 60, width: 60, backgroundColor: "#eeeeee" },
]}
/>
</TouchableOpacity>
<View
style={{
flexGrow: 1,
flexShrink: 1,
alignSelf: "center",
}}
>
<Text numberOfLines={1} style={{ fontSize: 15 }}>
{item.name}
</Text>
<Text numberOfLines={1} style={{ color: "#8f8f8f" }}>
{item.quantity}
</Text>
<Text numberOfLines={1} style={{ color: "#333333" }}>
₹{item.qty * item.salePrice}
</Text>
<Text>{item.status}</Text>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
onPress={() => this.quantityHandler("less", i)}
style={{ borderWidth: 1, borderColor: "#cccccc" }}
>
<MaterialIcons
name="remove"
size={22}
color="#cccccc"
/>
</TouchableOpacity>
<Text
style={{
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: "#cccccc",
paddingHorizontal: 7,
paddingTop: 3,
color: "#bbbbbb",
fontSize: 13,
}}
>
{item.qty}
</Text>
<TouchableOpacity
onPress={() => this.quantityHandler("more", i)}
style={{ borderWidth: 1, borderColor: "#cccccc" }}
>
<MaterialIcons name="add" size={22} color="#cccccc" />
</TouchableOpacity>
</View>
</View>
</View>
<View style={[styles.centerElement, { width: 60 }]}>
<TouchableOpacity
style={[styles.centerElement, { width: 32, height: 32 }]}
onPress={() => this.deleteHandler(i)}
>
<Ionicons name="md-trash" size={25} color="#ee4d2d" />
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
)}
{!cartItemsIsLoading && (
<View
style={{
backgroundColor: "#fff",
borderTopWidth: 2,
borderColor: "#f6f6f6",
paddingVertical: 5,
}}
>
<View style={{ flexDirection: "row" }}>
<View style={[styles.centerElement, { width: 60 }]}>
<View
style={[styles.centerElement, { width: 32, height: 32 }]}
></View>
</View>
<View
style={{
flexDirection: "row",
flexGrow: 1,
flexShrink: 1,
justifyContent: "space-between",
alignItems: "center",
}}
></View>
</View>
<View style={{ flexDirection: "row" }}>
<View style={[styles.centerElement, { width: 60 }]}>
<TouchableOpacity
style={[styles.centerElement, { width: 32, height: 32 }]}
onPress={() => this.selectHandlerAll(selectAll)}
>
<Ionicons
name={
selectAll == true
? "ios-checkmark-circle"
: "ios-checkmark-circle-outline"
}
size={25}
color={selectAll == true ? "#0faf9a" : "#aaaaaa"}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: "row",
flexGrow: 1,
flexShrink: 1,
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text>Select All</Text>
<View
style={{
flexDirection: "row",
paddingRight: 20,
alignItems: "center",
}}
>
<Text style={{ color: "#8f8f8f" }}>SubTotal: </Text>
<Text>₹{this.subtotalPrice().toFixed(2)}</Text>
</View>
</View>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end",
height: 32,
paddingRight: 20,
alignItems: "center",
}}
>
<TouchableOpacity
style={[
styles.centerElement,
{
backgroundColor: "#0faf9a",
width: 100,
height: 25,
borderRadius: 5,
},
]}
onPress={() => console.log("test")}
>
<Text style={{ color: "#ffffff" }}>Add to Cart</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
);
}
}
export default Pulsars;