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.
100 lines
2.9 KiB
100 lines
2.9 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-rn"; |
|
import Book from "./components/Book"; |
|
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} /> |
|
<View style={tw("flex flex-col px-4 h-28 bg-white")}> |
|
<Search |
|
value={search} |
|
onChange={setSearch} |
|
placeholder={"نام کتاب یا دوره را جستجو کنید"} |
|
/> |
|
<View |
|
style={[ |
|
tw("flex flex-1 flex-row justify-between items-center my-2"), |
|
]} |
|
> |
|
<Select |
|
defaultValue={"کتاب فیزیکی"} |
|
value={productType} |
|
onChange={setProductType} |
|
options={productTypes} |
|
width={"48%"} |
|
/> |
|
<Select |
|
defaultValue={"همه پایه"} |
|
value={grade} |
|
onChange={setGrade} |
|
options={Object.values(grades)} |
|
width={"48%"} |
|
/> |
|
</View> |
|
</View> |
|
<ScrollView contentContainerStyle={{ paddingBottom: 100 }}> |
|
<View |
|
style={tw( |
|
"flex w-full px-4 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 mapStateToProps = (state) => ({ |
|
grades: state.publicApi.grades, |
|
books: state.book.list, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
getBooks: book.list, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Products); |
|
|
|
Products.defaultProps = { |
|
productTypes: ["کتاب فیزیکی", "کتاب دیجیتال", "ویدئوها", "اشتراک"], |
|
};
|
|
|