import { View, Text, Pressable, SafeAreaView, ScrollView, StyleSheet, Platform, Dimensions, StatusBar, Image, Appearance, } from "react-native"; import React from "react"; import { connect } from "react-redux"; import Svg, { Path } from "react-native-svg"; import { userFavorite } from "../../../../redux/actions"; //components import Navbar from "../../../../components/Navbar"; import Empty from "../../../../components/Empty"; import Blur from "../../../../components/Blur"; //style import tw from "tailwind-rn"; import Colors from "../../../../constants/Colors"; import fontSize from "../../../../constants/fontSize"; const { height, width } = Dimensions.get("window"); const ios = Platform.OS === "ios"; const ProfileBookmark = ({ bookmarkList, getList, deleteItem, loading, mobile, grades, }) => { const colorScheme = Appearance.getColorScheme(); React.useEffect(() => { getList(); }, []); return ( <SafeAreaView style={{ paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, position: "relative", backgroundColor: "white", }} > <Navbar headerOptions={{ logo: false, menu: false, hamburgerMenu: false, title: "لیست علاقهمندیها", bookmark: false, qr: false, back: true, }} /> {loading && ( <View style={[ tw("absolute left-0 top-0 rounded-md overflow-hidden"), { width: Dimensions.get("window").width, height: height, zIndex: 1, backgroundColor: Colors.theme1[colorScheme].white + "60", }, ]} > <Blur /> </View> )} {bookmarkList.length ? ( <ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container} > <View style={tw("w-full mt-2 px-4")}> <View style={tw("p-0 m-0 flex")}> {bookmarkList?.map((bookmark, index) => ( <Bookmark key={index} bookmark={bookmark} deleteItem={deleteItem} mobile={mobile} grades={grades} /> ))} </View> </View> </ScrollView> ) : ( <Empty text="لیست علاقهمندیها خالی است." /> )} </SafeAreaView> ); }; const Bookmark = ({ bookmark, deleteItem, mobile, grades }) => { const colorScheme = Appearance.getColorScheme(); const isContent = React.useMemo(() => { return bookmark?.content; }); return ( <Pressable style={[ tw("flex flex-row-reverse rounded-md justify-between px-3.5 py-2 mb-4"), { borderWidth: 1.5, borderColor: Colors.theme1[colorScheme].greenCF, }, ]} > <View style={tw("flex flex-row-reverse items-end")}> <Image resizeMode="contain" source={{ uri: `https://dnvn.ir/api/v1/file/${ isContent ? bookmark?.content?.fileIds : bookmark?.product?.book?.fileIds }`, }} style={{ width: mobile ? isContent ? width / 3 : width / 5 : isContent ? width / 5 : width / 7, height: ((mobile ? isContent ? width / 7 : width / 5 : isContent ? width / 9 : width / 7) * 4) / 2.7, }} /> <View style={tw(`flex mr-2 ${ios ? "items-end" : ""}`)}> <Text style={{ fontFamily: "bold", fontSize: fontSize.tiny, color: Colors.theme1[colorScheme].gray20, width: width / 3, }} > {isContent ? bookmark?.content?.name : bookmark.product.book.name} </Text> {!isContent && ( <Text style={{ marginTop: 5, fontFamily: "regular", fontSize: fontSize.base, color: Colors.theme1[colorScheme].gray20, }} > {"پایه" + " " + grades[bookmark?.product?.book?.gradeId]} </Text> )} </View> </View> <Pressable onPress={() => deleteItem({ id: bookmark.id })}> <Svg data-name="vuesax/linear/archive-add" xmlns="http://www.w3.org/2000/svg" width={29.778} height={29.778} > <Path d="M20.869 2.482H8.908a4.8 4.8 0 0 0-4.789 4.789v17.483c0 2.233 1.6 3.176 3.561 2.1l6.055-3.362a2.628 2.628 0 0 1 2.32 0l6.055 3.362c1.96 1.092 3.561.149 3.561-2.1V7.271a4.819 4.819 0 0 0-4.802-4.789Z" fill="#37a865" /> <Path data-name="Vector" d="M17.987 13.214h-6.2" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} /> </Svg> </Pressable> </Pressable> ); }; const mapStateToProps = (state) => ({ loading: state.userFactor.loading, mobile: state.publicApi.mobile, bookmarkList: state.userFavorite.list, loading: state.userFavorite.loading, grades: state.publicApi.grades, }); const mapDispatchToProps = { getList: userFavorite.list, deleteItem: userFavorite.del, }; export default connect(mapStateToProps, mapDispatchToProps)(ProfileBookmark); const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, position: "relative", }, container: { backgroundColor: "white", flexDirection: "column", paddingVertical: 0, paddingHorizontal: 0, }, });