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