|
|
|
|
@ -11,7 +11,7 @@ import searchLight from "../../assets/icons/search-light.svg"; |
|
|
|
|
const Product = ({ productsType, product, index, grades }) => { |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{productsType === "book" && ( |
|
|
|
|
{productsType === "کتاب" && ( |
|
|
|
|
<Link |
|
|
|
|
to={"/products" + product?.name} |
|
|
|
|
className={`w-1/2 flex flex-col border-t border-grayDB dark:border-gray45 p-3 border-solid ${ |
|
|
|
|
@ -22,13 +22,33 @@ const Product = ({ productsType, product, index, grades }) => { |
|
|
|
|
src={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
|
|
className="w-full rounded-md mb-2" |
|
|
|
|
/> |
|
|
|
|
<strong className="text-blue5F dark:text-white text-md font-bold mb-1"> |
|
|
|
|
<strong className="text-blue5F dark:text-white text-sm font-bold mb-1"> |
|
|
|
|
{product?.name} |
|
|
|
|
</strong> |
|
|
|
|
<span className="text-xs text-blueC0 dark:text-white font-light mb-4"> |
|
|
|
|
{"پایه" + " " + grades[product?.gradeId]} |
|
|
|
|
</span> |
|
|
|
|
<div className="w-full flex flex-row justify-center font-semibold text-md text-blue5F dark:text-white"> |
|
|
|
|
<div className="w-full flex flex-row justify-center font-medium text-sm text-blue5F dark:text-white"> |
|
|
|
|
{1399 + " " + "تومان"} |
|
|
|
|
</div> |
|
|
|
|
</Link> |
|
|
|
|
)} |
|
|
|
|
{productsType === "ویديو" && ( |
|
|
|
|
<Link |
|
|
|
|
to={"/products" + product?.name} |
|
|
|
|
className={`w-full flex flex-col border-grayDB dark:border-gray45 p-3 border-solid mb-2 shadow-md`} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
|
|
className="w-full rounded-md mb-2" |
|
|
|
|
/> |
|
|
|
|
<strong className="text-blue5F dark:text-white text-sm font-bold mb-1"> |
|
|
|
|
{product?.name} |
|
|
|
|
</strong> |
|
|
|
|
<span className="text-xs text-blueC0 dark:text-white font-light mb-4"> |
|
|
|
|
{"پایه" + " " + grades[product?.gradeId]} |
|
|
|
|
</span> |
|
|
|
|
<div className="w-full flex flex-row justify-center font-medium text-sm text-blue5F dark:text-white"> |
|
|
|
|
{1399 + " " + "تومان"} |
|
|
|
|
</div> |
|
|
|
|
</Link> |
|
|
|
|
@ -37,11 +57,19 @@ const Product = ({ productsType, product, index, grades }) => { |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export const Products = ({ isDark, books, getList, grades }) => { |
|
|
|
|
export const Products = ({ |
|
|
|
|
isDark, |
|
|
|
|
books, |
|
|
|
|
getList, |
|
|
|
|
grades, |
|
|
|
|
gradeFilter, |
|
|
|
|
selectedGrade, |
|
|
|
|
gradeFilterBooks, |
|
|
|
|
}) => { |
|
|
|
|
const [filter, setFilter] = useState({ |
|
|
|
|
search: "", |
|
|
|
|
grade: "", |
|
|
|
|
productsType: "book", |
|
|
|
|
productsType: "کتاب", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const onChange = (name, value) => { |
|
|
|
|
@ -51,13 +79,17 @@ export const Products = ({ isDark, books, getList, grades }) => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
getList(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
gradeFilter(filter.grade); |
|
|
|
|
}, [filter]); |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{/* Portrait */} |
|
|
|
|
<div className="w-full flex flex-col bg-transparent pt-20"> |
|
|
|
|
<div className="w-full flex flex-col bg-transparent"> |
|
|
|
|
<header className="w-full px-4"> |
|
|
|
|
<Search |
|
|
|
|
backgroundColor="bg-grayF9 dark:bg-gray36" |
|
|
|
|
backgroundColor="bg-grayF9 dark:bg-gray2077" |
|
|
|
|
borderColor="border-grayDB dark:border-gray45" |
|
|
|
|
textColor="text-blueC0 dark:text-white" |
|
|
|
|
icon={searchLight} |
|
|
|
|
@ -67,7 +99,7 @@ export const Products = ({ isDark, books, getList, grades }) => { |
|
|
|
|
margin="ml-1" |
|
|
|
|
fill="fill-blueC0 dark:fill-white" |
|
|
|
|
borderColor="border-grayDB dark:border-gray45" |
|
|
|
|
backgroundColor="bg-grayF9 dark:bg-gray36" |
|
|
|
|
backgroundColor="bg-grayF9 dark:bg-gray2077" |
|
|
|
|
onChange={onChange} |
|
|
|
|
name="productsType" |
|
|
|
|
options={["کتاب", "ویديو", "اشتراک"]} |
|
|
|
|
@ -77,7 +109,7 @@ export const Products = ({ isDark, books, getList, grades }) => { |
|
|
|
|
margin="mr-1" |
|
|
|
|
fill="fill-blueC0 dark:fill-white" |
|
|
|
|
borderColor="border-grayDB dark:border-gray45" |
|
|
|
|
backgroundColor="bg-grayF9 dark:bg-gray36" |
|
|
|
|
backgroundColor="bg-grayF9 dark:bg-gray2077" |
|
|
|
|
onChange={onChange} |
|
|
|
|
name="grade" |
|
|
|
|
options={Object.values(grades)} |
|
|
|
|
@ -86,7 +118,17 @@ export const Products = ({ isDark, books, getList, grades }) => { |
|
|
|
|
</div> |
|
|
|
|
</header> |
|
|
|
|
<div className="w-full flex flex-row flex-wrap mt-3"> |
|
|
|
|
{books?.map((product, index) => ( |
|
|
|
|
{selectedGrade |
|
|
|
|
? gradeFilterBooks?.map((product, index) => ( |
|
|
|
|
<Product |
|
|
|
|
key={index} |
|
|
|
|
productsType={filter.productsType} |
|
|
|
|
product={product} |
|
|
|
|
index={Number(index)} |
|
|
|
|
grades={grades} |
|
|
|
|
/> |
|
|
|
|
)) |
|
|
|
|
: books?.map((product, index) => ( |
|
|
|
|
<Product |
|
|
|
|
key={index} |
|
|
|
|
productsType={filter.productsType} |
|
|
|
|
@ -105,8 +147,13 @@ const mapStateToProps = (state) => ({ |
|
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
|
books: state.book.list, |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
gradeFilterBooks: state.book.gradeFilterBooks, |
|
|
|
|
selectedGrade: state.book.selectedGrade, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { getList: book.list }; |
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
getList: book.list, |
|
|
|
|
gradeFilter: book.gradeFilter, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Products); |
|
|
|
|
|
Reza_ashrafi
3 years ago