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.
 
 
 
 
 

117 lines
3.3 KiB

import React, { useState, useEffect } from "react";
import {
View,
ScrollView,
StyleSheet,
Dimensions,
SafeAreaView,
StatusBar,
LayoutAnimation,
} from "react-native";
import { connect } from "react-redux";
import { book } from "../../redux/actions";
import tw from "tailwind-react-native-classnames";
import Book from "./components/Book";
import Video from "./components/Video";
import Search from "../../components/Search";
import Select from "../../components/Select";
import Drawer from "../../components/Drawer";
function Products({ grades, productTypes, books }) {
const [position, setPosition] = useState("100%");
const [productType, setProductType] = useState("کتاب فیزیکی");
const [grade, setGrade] = useState("");
const [search, setSearch] = useState("");
useEffect(() => {}, []);
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
const onChange = (name, value) => {};
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
<Search
value={search}
onChange={setSearch}
placeholder={"نام کتاب یا دوره را جستجو کنید"}
/>
<View
style={[
tw.style("flex flex-1 flex-row justify-between items-center"),
{ marginTop: 10, width: "100%" },
]}
>
<Select
defaultValue={"کتاب فیزیکی"}
value={productType}
onChange={setProductType}
options={productTypes}
width={"48%"}
/>
<Select
defaultValue={"همه پایه"}
value={grade}
onChange={setGrade}
options={grades}
width={"48%"}
/>
</View>
<View
style={tw.style(
"flex flex-1 w-full py-5 flex-row flex-wrap justify-between bg-white"
)}
>
{productType === "کتاب فیزیکی" &&
books.map((book, index) => (
<Book book={book} key={index} grades={grades} type={1} />
))}
{productType === "کتاب دیجیتال" &&
books.map((book, index) => (
<Book book={book} key={index} grades={grades} type={0} />
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
},
container: {
width: Dimensions.get("window").width,
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 10,
},
});
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
books: state.book.list,
});
const mapDispatchToProps = {
getBooks: book.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(Products);
Products.defaultProps = {
productTypes: ["کتاب فیزیکی", "کتاب دیجیتال", "ویدئوها", "اشتراک"],
};