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.
186 lines
5.9 KiB
186 lines
5.9 KiB
import React, { useState, useEffect, useCallback } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import { connect } from "react-redux"; |
|
import Search from "../../components/Search"; |
|
import Select from "../../components/Select"; |
|
import Sidebar from "./layouts/Sidebar"; |
|
import Main from "./layouts/Main"; |
|
import { book, publicApi } from "../../redux/actions"; |
|
|
|
//assets |
|
import searchLight from "../../assets/icons/search-light.svg"; |
|
|
|
export const Products = ({ |
|
isDark, |
|
isMobile, |
|
books, |
|
getList, |
|
grades, |
|
gradeFilter, |
|
selectedGrade, |
|
gradeFilterBooks, |
|
setHeaderOptions, |
|
headerOptions, |
|
desktopContentTransform, |
|
}) => { |
|
const [filter, setFilter] = useState({ |
|
search: "", |
|
grade: "", |
|
productsType: "کتاب", |
|
}); |
|
|
|
|
|
const onChange = (name, value) => { |
|
setFilter({ ...filter, [name]: value }); |
|
}; |
|
|
|
useEffect(() => { |
|
getList(); |
|
setHeaderOptions(headerOptions); |
|
}, []); |
|
|
|
useEffect(() => { |
|
gradeFilter(filter.grade); |
|
}, [filter]); |
|
|
|
const Product = ({ productsType, product, index }) => { |
|
return ( |
|
<> |
|
{productsType === "کتاب" && ( |
|
<Link |
|
to={"/products/" + product?.id} |
|
className={`w-1/2 flex flex-col border-t border-grayDB dark:border-gray45 p-3 border-solid ${ |
|
index % 2 === 0 ? "border-l" : "" |
|
}`} |
|
> |
|
<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> |
|
)} |
|
{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> |
|
)} |
|
</> |
|
); |
|
}; |
|
|
|
return ( |
|
<> |
|
{/* Portrait */} |
|
<div |
|
className={`w-full flex flex-col bg-transparent relative ${ |
|
desktopContentTransform ? "top-24 z-10" : "" |
|
}`} |
|
> |
|
{isMobile ? ( |
|
<> |
|
<header className="w-full px-4"> |
|
<Search |
|
backgroundColor="bg-grayF9 dark:bg-gray2077" |
|
borderColor="border-grayDB dark:border-gray45" |
|
textColor="text-blueC0 dark:text-white" |
|
icon={searchLight} |
|
/> |
|
<div className="w-full flex flex-row justify-between mt-3"> |
|
<Select |
|
margin="ml-1" |
|
fill="fill-blueC0 dark:fill-white" |
|
borderColor="border-grayDB dark:border-gray45" |
|
backgroundColor="bg-grayF9 dark:bg-gray2077" |
|
onChange={onChange} |
|
name="productsType" |
|
options={["کتاب", "ویديو", "اشتراک"]} |
|
// hoverFill="fill-greenBA" |
|
/> |
|
<Select |
|
margin="mr-1" |
|
fill="fill-blueC0 dark:fill-white" |
|
borderColor="border-grayDB dark:border-gray45" |
|
backgroundColor="bg-grayF9 dark:bg-gray2077" |
|
onChange={onChange} |
|
name="grade" |
|
options={Object.values(grades)} |
|
// hoverFill="fill-grayBA" |
|
/> |
|
</div> |
|
</header> |
|
<div className="w-full flex flex-row flex-wrap mt-3"> |
|
{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} |
|
product={product} |
|
index={Number(index)} |
|
/> |
|
))} |
|
</div> |
|
</> |
|
) : ( |
|
<div |
|
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`} |
|
// style={{ height: 1500 }} |
|
> |
|
<Sidebar /> |
|
<Main /> |
|
</div> |
|
)} |
|
</div> |
|
</> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
isDark: state.publicApi.isDark, |
|
isMobile: state.publicApi.isMobile, |
|
books: state.book.list, |
|
grades: state.publicApi.grades, |
|
gradeFilterBooks: state.book.gradeFilterBooks, |
|
selectedGrade: state.book.selectedGrade, |
|
desktopContentTransform: state.publicApi.desktopContentTransform, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
getList: book.list, |
|
gradeFilter: book.gradeFilter, |
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Products);
|
|
|