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.
 
 
 
 
 
 

240 lines
6.4 KiB

import {
View,
Text,
Pressable,
SafeAreaView,
ScrollView,
StyleSheet,
Platform,
Dimensions,
StatusBar,
Image,
ActivityIndicator,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import Svg, { Path } from "react-native-svg";
import { userFavorite } from "../../../../redux/actions";
import { useNavigation } from "@react-navigation/native";
//components
import Navbar from "../../../../components/Navbar";
import Empty from "../../../../components/Empty";
//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,
deleteItem,
loading,
mobile,
grades,
theme,
}) => {
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
flex: 1,
}}
>
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "لیست علاقهمندیها",
bookmark: false,
qr: false,
back: true,
}}
/>
{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}
theme={theme}
loading={loading}
/>
))}
</View>
</View>
</ScrollView>
) : (
<Empty text="هیچ موردی برای شما یافت نشد." />
)}
</SafeAreaView>
);
};
const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
const navigation = useNavigation();
const [selectedBookmark, setSelectedBookmark] = React.useState(null);
const isContent = React.useMemo(() => {
return bookmark?.contentId;
}, [bookmark]);
const deleteAction = async (action) => {
setSelectedBookmark(bookmark);
await action();
};
React.useEffect(() => {
if (!loading) {
setSelectedBookmark(null);
}
}, [loading]);
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.greenCF + (theme === "light" ? "" : "77"),
},
]}
onPress={() =>
navigation.push(isContent ? "Blog" : "Product", {
id: isContent ? bookmark?.contentId : bookmark?.product?.bookId,
})
}
>
<View style={tw("flex flex-row-reverse")}>
<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: "Medium",
fontSize: fontSize.tiny,
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
width: width / 3,
textAlign: "right",
}}
>
{isContent
? bookmark?.content?.name
: bookmark?.product?.book?.name}
</Text>
{!isContent ? (
<Text
style={{
marginTop: 5,
fontFamily: "Regular",
fontSize: fontSize.sm,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
}}
>
{"پایه" + " " + grades[bookmark?.product?.book?.gradeId]}
</Text>
) : null}
</View>
</View>
{selectedBookmark === bookmark ? (
<ActivityIndicator color={Colors.theme1.greenCF} size={30} />
) : (
<Pressable
onPress={() => deleteAction(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" + (theme === "light" ? "" : "aa")}
/>
<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,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
deleteItem: userFavorite.del,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProfileBookmark);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
position: "relative",
},
container: {
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 0,
},
});