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

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: ["کتاب فیزیکی", "کتاب دیجیتال", "ویدئوها", "اشتراک"],
};