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.
 
 
 

182 lines
4.6 KiB

import {
View,
Text,
Pressable,
Appearance,
SafeAreaView,
ScrollView,
StyleSheet,
Platform,
Dimensions,
StatusBar,
Image,
mobile,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import Svg, { Path } from "react-native-svg";
import { userFavorite } from "../../../../redux/actions";
//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";
//assets
import bookImage from "../../..//OrdersFollowUp/assets/b1.png";
const { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
const ProfileBookmark = ({ bookmarkList, getList }) => {
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,
}}
/>
{bookmarkList?.length > 0 ? (
<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} />
))}
</View>
</View>
</ScrollView>
) : (
<Empty text="لیست علاقهمندیها خالی است." />
)}
</SafeAreaView>
);
};
const Bookmark = ({ bookmark }) => {
const colorScheme = Appearance.getColorScheme();
return (
<Pressable
style={[
tw("flex flex-row-reverse rounded-md justify-between px-3.5 py-2 bg-red-100"),
{
borderWidth: 1.5,
borderColor: Colors.theme1[colorScheme].greenCF,
},
]}
>
<View style={tw("flex flex-row-reverse items-end")}>
<Image
source={bookmark.image}
style={{
width: mobile ? width / 5 : width / 7,
minWidth: 80,
height: ((mobile ? width / 5 : width / 7) * 4) / 2.7,
minHeight: (80 * 4) / 2.7,
}}
/>
<View style={tw(`flex mr-2 ${ios ? "items-end" : ""}`)}>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.lg,
color: Colors.theme1[colorScheme].gray20,
}}
>
{bookmark.name}
</Text>
<Text
style={{
marginTop: 5,
fontFamily: "regular",
fontSize: fontSize.base,
color: Colors.theme1[colorScheme].gray20,
}}
>
{bookmark.grade}
</Text>
</View>
</View>
<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>
);
};
const mapStateToProps = (state) => ({
loading: state.userFactor.loading,
mobile: state.publicApi.mobile,
bookmarkList: state.userFavorite.list,
});
const mapDispatchToProps = {
getList: userFavorite.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProfileBookmark);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
position: "relative",
},
container: {
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 0,
},
});
// ProfileBookmark.defaultProps = {
// bookmarkList: [
// {
// name: "کتاب آموزشی علوم تجربی",
// grade: "پایه ششم ابتدایی",
// image: bookImage,
// },
// ],
// };