You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

230 lines
5.9 KiB

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,
},
});