647 lines
18 KiB
JavaScript
647 lines
18 KiB
JavaScript
import {
|
|
faArrowLeft,
|
|
faDeleteLeft,
|
|
faTrash,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
|
|
import { useIsFocused, useNavigation } from "@react-navigation/native";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Dimensions,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import MasonryList from "@react-native-seoul/masonry-list";
|
|
import ProductCard from "../../components/profile/my-favorite/ProductCard";
|
|
import ShopCard from "../../components/profile/my-favorite/ShopCard";
|
|
import { favorite } from "../../constants/favorites";
|
|
import Checkbox from "expo-checkbox";
|
|
// import { products } from "../../constants/product";
|
|
const Tab = createMaterialTopTabNavigator();
|
|
import Modal from "react-native-modal";
|
|
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import {
|
|
get_customer,
|
|
update_customer,
|
|
} from "../../services/api/controllers/customers";
|
|
|
|
function Products({ route }) {
|
|
const { products } = route.params;
|
|
const [prodLike, setprodLike] = useState([]);
|
|
const [all, setall] = useState(false);
|
|
const [product, setproduct] = useState(products ?? []);
|
|
const isFocused = useIsFocused();
|
|
|
|
console.log(products + "ey");
|
|
// console.log(prodLike);
|
|
const [isModalVisible, setModalVisible] = useState(false);
|
|
|
|
const [user, setuser] = useState([]);
|
|
const [error, seterror] = useState([]);
|
|
const [liked, setliked] = useState([]);
|
|
const [load, setload] = useState(false);
|
|
|
|
// useEffect(() => {
|
|
// // setrefresh(isrefresh);
|
|
// AsyncStorage.getItem("userData")
|
|
// .then((pass) => {
|
|
// // console.log("mm "+pass._id);
|
|
// const userDataArray = JSON.parse(pass);
|
|
// setuser(userDataArray);
|
|
// get_customer({ id: userDataArray[0]?._id })
|
|
// .then((result) => {
|
|
// // console.log(result.data);
|
|
|
|
// if (result.error) {
|
|
// seterror(result.error);
|
|
// } else {
|
|
// // const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
|
|
// // console.log( exists)
|
|
// // if (exists) {
|
|
// // console.log( "heyyyy")
|
|
|
|
// // setisLiked(true);
|
|
// // }
|
|
// setliked(result?.data?.favorites);
|
|
// setproduct(result?.data?.favorites.products);
|
|
|
|
// setload(true);
|
|
// }
|
|
// })
|
|
// .catch((error) => {
|
|
// // setError(error.message);
|
|
// console.log(error.message);
|
|
// })
|
|
// .finally(() => {
|
|
// // setprodIsLoading(false); // Set loading to false when done loading
|
|
// });
|
|
// })
|
|
// .catch((error) => {
|
|
// console.log(error + "weeewwww");
|
|
// });
|
|
// // console.log("get cutomer add :" + user[0]?.login_id);
|
|
// }, []);
|
|
useEffect(() => {
|
|
// setrefresh(isrefresh);
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
// console.log("mm "+pass._id);
|
|
const userDataArray = JSON.parse(pass);
|
|
setuser(userDataArray);
|
|
get_customer({ id: userDataArray[0]?._id })
|
|
.then((result) => {
|
|
// console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
// const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
|
|
// console.log( exists)
|
|
// if (exists) {
|
|
// console.log( "heyyyy")
|
|
|
|
// setisLiked(true);
|
|
// }
|
|
setliked(result?.data?.favorites);
|
|
setproduct(result?.data?.favorites.products?.reverse());
|
|
|
|
setload(true);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
// console.log("get cutomer add :" + user[0]?.login_id);
|
|
}, [isFocused]);
|
|
const toggleModal = () => {
|
|
setModalVisible(!isModalVisible);
|
|
};
|
|
|
|
const likeClick = (e) => {
|
|
setprodLike((prevLikes) => {
|
|
// Check if e is already included in prodLike
|
|
if (prevLikes.includes(e) && e != "all") {
|
|
// If e is already in the array, remove it
|
|
return prevLikes.filter((item) => item !== e);
|
|
} else {
|
|
// If e is not in the array, add it to the beginning
|
|
return [e, ...prevLikes];
|
|
}
|
|
});
|
|
};
|
|
const deleteItem = () => {
|
|
toggleModal();
|
|
|
|
if (all === true) {
|
|
setproduct([]);
|
|
// const updatedFavorites = liked.map((favorite) => {
|
|
// const updatedProduct = [];
|
|
// return { ...favorite, products: updatedProduct };
|
|
// });
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: {
|
|
products: [],
|
|
vendors: liked?.vendors,
|
|
},
|
|
},
|
|
})
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
setall(false);
|
|
} else {
|
|
// const updatedFavorites = liked.map((favorite) => {
|
|
const updatedProduct = liked.products.filter(
|
|
(item, index) => !prodLike.includes(index)
|
|
);
|
|
// return { ...favorite, products: updatedProduct };
|
|
// });
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: {
|
|
products: updatedProduct,
|
|
vendors: liked.vendors,
|
|
},
|
|
},
|
|
})
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
setproduct((prevProduct) => {
|
|
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
|
|
const updatedProduct = prevProduct.filter(
|
|
(item, index) => !prodLike.includes(index)
|
|
);
|
|
return updatedProduct;
|
|
});
|
|
setprodLike([]);
|
|
}
|
|
};
|
|
return (
|
|
<View style={styles.tabCon}>
|
|
<View style={styles.actions}>
|
|
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
toggleModal();
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
{product ? (
|
|
<MasonryList
|
|
data={product}
|
|
keyExtractor={(item) => item.id}
|
|
style={styles.list}
|
|
numColumns={2}
|
|
showsVerticalScrollIndicator={false}
|
|
renderItem={({ item, i }) => (
|
|
<ProductCard
|
|
like={likeClick}
|
|
liked={prodLike}
|
|
index={i}
|
|
product={item}
|
|
all={all}
|
|
/>
|
|
)}
|
|
containerStyle={styles.container1}
|
|
contentContainerStyle={styles.content}
|
|
onEndReachedThreshold={0.1}
|
|
/>
|
|
) : null}
|
|
<DeleteConfirmationModal
|
|
isVisible={isModalVisible}
|
|
onCancel={toggleModal}
|
|
onConfirm={deleteItem}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
function Vendors({ route }) {
|
|
const { shops, prods } = route.params;
|
|
const [prodLike, setprodLike] = useState([]);
|
|
const [all, setall] = useState(false);
|
|
const [shopProd, setshopProd] = useState([]);
|
|
const isFocused = useIsFocused();
|
|
|
|
const [product, setproduct] = useState(shops ?? []);
|
|
const [isModalVisible, setModalVisible] = useState(false);
|
|
|
|
const [user, setuser] = useState([]);
|
|
const [error, seterror] = useState([]);
|
|
const [liked, setliked] = useState([]);
|
|
const [load, setload] = useState(false);
|
|
const toggleModal = () => {
|
|
setModalVisible(!isModalVisible);
|
|
};
|
|
console.log(prodLike);
|
|
// useEffect(() => {
|
|
// // setrefresh(isrefresh);
|
|
// AsyncStorage.getItem("userData")
|
|
// .then((pass) => {
|
|
// // console.log("mm "+pass._id);
|
|
// const userDataArray = JSON.parse(pass);
|
|
// setuser(userDataArray);
|
|
// get_customer({ id: userDataArray[0]?._id })
|
|
// .then((result) => {
|
|
// // console.log(result.data);
|
|
|
|
// if (result.error) {
|
|
// seterror(result.error);
|
|
// } else {
|
|
// setliked(result?.data?.favorites);
|
|
// setload(true);
|
|
// }
|
|
// })
|
|
// .catch((error) => {
|
|
// // setError(error.message);
|
|
// console.log(error.message);
|
|
// })
|
|
// .finally(() => {
|
|
// // setprodIsLoading(false); // Set loading to false when done loading
|
|
// });
|
|
// })
|
|
// .catch((error) => {
|
|
// console.log(error + "weeewwww");
|
|
// });
|
|
// // console.log("get cutomer add :" + user[0]?.login_id);
|
|
// }, []);
|
|
useEffect(() => {
|
|
// setrefresh(isrefresh);
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
// console.log("mm "+pass._id);
|
|
const userDataArray = JSON.parse(pass);
|
|
setuser(userDataArray);
|
|
get_customer({ id: userDataArray[0]?._id })
|
|
.then((result) => {
|
|
// console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
setproduct(result?.data?.favorites.vendors?.reverse());
|
|
setload(true);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
// console.log("get cutomer add :" + user[0]?.login_id);
|
|
}, [isFocused]);
|
|
|
|
const likeClick = (e) => {
|
|
setprodLike((prevLikes) => {
|
|
// Check if e is already included in prodLike
|
|
if (prevLikes.includes(e) && e != "all") {
|
|
// If e is already in the array, remove it
|
|
return prevLikes.filter((item) => item !== e);
|
|
} else {
|
|
// If e is not in the array, add it to the beginning
|
|
return [e, ...prevLikes];
|
|
}
|
|
});
|
|
};
|
|
const deleteItem = () => {
|
|
toggleModal();
|
|
|
|
if (all === true) {
|
|
setproduct([]);
|
|
// const updatedFavorites = liked.map((favorite) => {
|
|
// const updatedProduct = [];
|
|
// return { ...favorite, vendors: updatedProduct };
|
|
// });
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: {
|
|
products: liked.products,
|
|
vendors: [],
|
|
},
|
|
},
|
|
})
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
setall(false);
|
|
} else {
|
|
// const updatedFavorites = liked.map((favorite) => {
|
|
const updatedProduct = liked.vendors.filter(
|
|
(item, index) => !prodLike.includes(index)
|
|
);
|
|
// return { ...favorite, vendors: updatedProduct };
|
|
// });
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: {
|
|
products: liked.products,
|
|
vendors: updatedProduct,
|
|
},
|
|
},
|
|
})
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
setproduct((prevProduct) => {
|
|
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
|
|
const updatedProduct = prevProduct.filter(
|
|
(item, index) => !prodLike.includes(index)
|
|
);
|
|
return updatedProduct;
|
|
});
|
|
setprodLike([]);
|
|
}
|
|
};
|
|
return (
|
|
<View style={styles.tabCon}>
|
|
<View style={styles.actions}>
|
|
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
toggleModal();
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
{shops ? (
|
|
<MasonryList
|
|
data={product ?? null}
|
|
keyExtractor={(item) => item.id}
|
|
style={styles.list}
|
|
numColumns={1}
|
|
showsVerticalScrollIndicator={false}
|
|
renderItem={({ item, i }) => (
|
|
<ShopCard
|
|
product={item}
|
|
like={likeClick}
|
|
liked={prodLike}
|
|
index={i}
|
|
all={all}
|
|
prods={prods}
|
|
/>
|
|
)}
|
|
containerStyle={styles.container1}
|
|
contentContainerStyle={styles.content}
|
|
onEndReachedThreshold={0.1}
|
|
/>
|
|
) : null}
|
|
<DeleteConfirmationModal
|
|
isVisible={isModalVisible}
|
|
onCancel={toggleModal}
|
|
onConfirm={deleteItem}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
const MyFavorites = ({ prod }) => {
|
|
const navigation = useNavigation();
|
|
const [shopProd, setshopProd] = useState([]);
|
|
|
|
// const products = favorite?.find((item) => item.type === "products")?.contents;
|
|
|
|
const shops = favorite?.find((item) => item.type === "vendors")?.contents;
|
|
|
|
const [user, setuser] = useState([]);
|
|
const [error, seterror] = useState([]);
|
|
const [liked, setliked] = useState([]);
|
|
const [load, setload] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// setrefresh(isrefresh);
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
// console.log("mm "+pass._id);
|
|
const userDataArray = JSON.parse(pass);
|
|
// console.log(pass)
|
|
setuser(userDataArray);
|
|
get_customer({ id: userDataArray[0]?._id })
|
|
.then((result) => {
|
|
// console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
// const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
|
|
// console.log( exists)
|
|
// if (exists) {
|
|
// console.log( "heyyyy")
|
|
|
|
// setisLiked(true);
|
|
// }
|
|
setliked(result?.data?.favorites);
|
|
// console.log(result.data.favorites);
|
|
// console.log(result?.data?.favorites?.products);
|
|
|
|
setload(true);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
// console.log("get cutomer add :" + user[0]?.login_id);
|
|
}, []);
|
|
// console.log(liked[0]?.products+"added")
|
|
const revereseProd = liked?.products?.reverse();
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Home")}
|
|
style={styles.backIcon}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerText}>My Favorite</Text>
|
|
</View>
|
|
|
|
{load ? (
|
|
<View style={styles.wrapper}>
|
|
<Tab.Navigator
|
|
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
|
|
screenOptions={{
|
|
tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
|
|
}}
|
|
>
|
|
<Tab.Screen
|
|
name="Products"
|
|
component={Products}
|
|
options={{ tabBarLabel: "Products" }}
|
|
initialParams={{ products: revereseProd }}
|
|
/>
|
|
<Tab.Screen
|
|
name="Vendors"
|
|
component={Vendors}
|
|
options={{ tabBarLabel: "Vendors" }}
|
|
initialParams={{ shops: liked?.vendors.reverse(), prods: prod }}
|
|
/>
|
|
</Tab.Navigator>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#ffff",
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
wrapper: {
|
|
height: "95%",
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
// alignItems:'center'
|
|
marginBottom: 20,
|
|
},
|
|
header: {
|
|
alignItems: "center",
|
|
width: "100%",
|
|
top: 0,
|
|
paddingLeft: 15,
|
|
flexDirection: "row",
|
|
borderColor: "#ddd",
|
|
paddingBottom: 15,
|
|
borderBottomWidth: 1,
|
|
},
|
|
headerText: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginLeft: 25,
|
|
},
|
|
tabCon: {
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
actions: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 5,
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
},
|
|
content: {
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
buttons: {
|
|
position: "absolute",
|
|
flexDirection: "row",
|
|
bottom: 0,
|
|
},
|
|
btnCancel: {
|
|
color: "#ff0000",
|
|
padding: 10,
|
|
},
|
|
btnCancelText: {
|
|
color: "#ff0000",
|
|
padding: 10,
|
|
},
|
|
btnConfirm: {
|
|
color: "#ff0000",
|
|
padding: 10,
|
|
},
|
|
btnConfirmText: {
|
|
color: "#001aff",
|
|
padding: 10,
|
|
},
|
|
});
|
|
|
|
export default MyFavorites;
|