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.
 
 
 

190 lines
6.0 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 });
};
const onchange1 = (name, value) =>{
console.log(name)
console.log(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 onChange={onChange}/>
<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);