|
|
|
@ -2,19 +2,17 @@ import React, { useEffect } from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
|
|
|
|
|
import Product from "../../../../../components/Product"; |
|
|
|
|
import ProductSuggestion from "../UserItems/ProductSuggestion"; |
|
|
|
|
import { ScrollingCarousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
import { Book } from "../../../../Home/Portrait/Private/MyBooks"; |
|
|
|
|
import Progress from "../../../../../components/Progress"; |
|
|
|
|
|
|
|
|
|
export const MyBooks = ({ books, grades, isMobile }) => { |
|
|
|
|
export const MyBooks = ({ books, grades, isMobile, userProducts }) => { |
|
|
|
|
const Book = ({ book }) => { |
|
|
|
|
return ( |
|
|
|
|
<li className=" flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4"> |
|
|
|
|
<Link to={"/products/" + book.id}> |
|
|
|
|
<li className=" flex flex-col lg:ml-6 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:p-4"> |
|
|
|
|
<Link to={"/products/" + book?.id}> |
|
|
|
|
<img |
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} |
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`} |
|
|
|
|
alt="" |
|
|
|
|
className="rounded-sm" |
|
|
|
|
style={{ |
|
|
|
@ -30,7 +28,7 @@ export const MyBooks = ({ books, grades, isMobile }) => { |
|
|
|
|
{book.name} |
|
|
|
|
</h2> |
|
|
|
|
<p className="font-medium text-green7B dark:text-greenBA text-sm lg:text-sm mt-2 lg:mt-2">{`پایه ${ |
|
|
|
|
grades[book.gradeId] |
|
|
|
|
grades[book?.product?.book?.gradeId] |
|
|
|
|
}`}</p>
|
|
|
|
|
<Progress percent={60} direction="float-right" /> |
|
|
|
|
</Link> |
|
|
|
@ -38,36 +36,39 @@ export const MyBooks = ({ books, grades, isMobile }) => { |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-1 flex-col"> |
|
|
|
|
<div className="flex flex-wrap gap-4 mb-5"> |
|
|
|
|
{/* {books.slice(0, 1).map((product, index) => ( |
|
|
|
|
<Product key={index} product={product} imageSdize={5} /> |
|
|
|
|
))} */} |
|
|
|
|
<div className="w-full scrolling-carousel mt-4 pb-2"> |
|
|
|
|
<p className="text-green7B font-bold text-2xl lg:text-base"> |
|
|
|
|
<div className="w-full overflow-x-scroll bg-green-50 bg-opacity-50 lg:p-4 mt-4 pb-2"> |
|
|
|
|
<p className="text-green7B mb-2 font-bold text-2xl lg:text-base"> |
|
|
|
|
{window.t("کتاب های من")} |
|
|
|
|
</p> |
|
|
|
|
{userProducts?.filter((product) => product?.condition >= 2) |
|
|
|
|
?.length ? ( |
|
|
|
|
<ScrollingCarousel className="py-3"> |
|
|
|
|
{books?.map((book, index) => ( |
|
|
|
|
{userProducts |
|
|
|
|
?.filter((product) => product?.condition >= 2) |
|
|
|
|
?.map((book, index) => ( |
|
|
|
|
<Book book={book} key={index} /> |
|
|
|
|
))} |
|
|
|
|
</ScrollingCarousel> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<ProductSuggestion products={books} grades={grades} isMobile={isMobile} /> |
|
|
|
|
{/* <ProductSuggestion |
|
|
|
|
products={books?.slice(0, 3)} |
|
|
|
|
grades={grades} |
|
|
|
|
isMobile={isMobile} |
|
|
|
|
/> */} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
books: state.book.list, |
|
|
|
|
userProducts: state.userProduct.list, |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
|
isMobile: state.config.device === 'mobile', |
|
|
|
|
books: state.book.list, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|