|
|
|
@ -1,18 +1,17 @@ |
|
|
|
import React, { useState, useEffect, useCallback } from "react"; |
|
|
|
import React, { useState, useEffect, useCallback } from "react"; |
|
|
|
import ScrollContainer from "react-indiana-drag-scroll"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg'; |
|
|
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
|
|
|
|
|
|
|
import Product from '../../../components/Product' |
|
|
|
import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg"; |
|
|
|
|
|
|
|
import Product from "../../../components/Product"; |
|
|
|
import VodProduct from "../../../components/VodProduct"; |
|
|
|
import VodProduct from "../../../components/VodProduct"; |
|
|
|
import { book, publicApi } from "../../../redux/actions"; |
|
|
|
import { book, publicApi } from "../../../redux/actions"; |
|
|
|
import posterImage from "../../../assets/images/poster.svg"; |
|
|
|
import posterImage from "../../../assets/images/poster.svg"; |
|
|
|
|
|
|
|
import arrow from "../../../assets/icons/slider-arrow.svg"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const Main = ({ |
|
|
|
export const Main = ({ isMobile, |
|
|
|
|
|
|
|
books, |
|
|
|
books, |
|
|
|
getList, |
|
|
|
|
|
|
|
grades, |
|
|
|
grades, |
|
|
|
gradeFilter, |
|
|
|
gradeFilter, |
|
|
|
selectedGrade, |
|
|
|
selectedGrade, |
|
|
|
@ -20,28 +19,30 @@ export const Main = ({ isMobile, |
|
|
|
setHeaderOptions, |
|
|
|
setHeaderOptions, |
|
|
|
headerOptions, |
|
|
|
headerOptions, |
|
|
|
videos, |
|
|
|
videos, |
|
|
|
filter }) => { |
|
|
|
filter, |
|
|
|
useEffect(() => { |
|
|
|
}) => { |
|
|
|
window.scrollTo(0, 0) |
|
|
|
useEffect(() => { |
|
|
|
}, []) |
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const filteringNavItems = [ |
|
|
|
const filteringNavItems = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'بیشترین بازدید' |
|
|
|
title: "بیشترین بازدید", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'پرفروش ترین' |
|
|
|
title: "پرفروش ترین", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'کمترین قیمت' |
|
|
|
title: "کمترین قیمت", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'بیشترین قیمت' |
|
|
|
title: "بیشترین قیمت", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'محبوب ترین' |
|
|
|
title: "محبوب ترین", |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const videosData = [ |
|
|
|
const videosData = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
id: 0, |
|
|
|
id: 0, |
|
|
|
@ -82,34 +83,52 @@ export const Main = ({ isMobile, |
|
|
|
grade: "پایه چهارم", |
|
|
|
grade: "پایه چهارم", |
|
|
|
imageUrl: "https://dnvn.ir/api/v1/file/2105", |
|
|
|
imageUrl: "https://dnvn.ir/api/v1/file/2105", |
|
|
|
poster: posterImage, |
|
|
|
poster: posterImage, |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
]; |
|
|
|
return <div className="flex flex-col w-3/4 p-4"> |
|
|
|
return ( |
|
|
|
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52"> |
|
|
|
<div className="flex flex-col w-3/4 p-4 pb-20"> |
|
|
|
<div className='flex text-xs items-center mx-4'> |
|
|
|
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52"> |
|
|
|
<img src={filterIcon} /> |
|
|
|
<div className="flex text-xs items-center mx-4"> |
|
|
|
<span> |
|
|
|
<img src={filterIcon} /> |
|
|
|
مرتب سازی بر اساس |
|
|
|
<span>مرتب سازی بر اساس</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ul className="flex justify-between w-3/4 px-4 py-0 "> |
|
|
|
|
|
|
|
{filteringNavItems.map((e) => ( |
|
|
|
|
|
|
|
<li |
|
|
|
|
|
|
|
className="text-sm rounded py-2 px-6 transition-all duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer" |
|
|
|
|
|
|
|
onClick={() => console.log("a")} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{e.title} |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul className='flex justify-between w-3/4 px-4 py-0 '> |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
filteringNavItems.map(e => ( |
|
|
|
|
|
|
|
<li className='text-sm rounded py-2 px-6 transition-all duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ScrollContainer className="flex"> |
|
|
|
<div className="relative w-full" style={{ direction: "ltr" }}> |
|
|
|
{ |
|
|
|
<Carousel |
|
|
|
videosData.map((video, index) => ( |
|
|
|
show={Math.round(window.innerWidth / 500)} |
|
|
|
<Link |
|
|
|
slide={2} |
|
|
|
to={"/videos/" + video.id} |
|
|
|
swiping={true} |
|
|
|
className="flex flex-col rounded-md ml-4 " |
|
|
|
useArrowKeys={true} |
|
|
|
|
|
|
|
transition={0.5} |
|
|
|
> |
|
|
|
className="flex flex-row" |
|
|
|
<VodProduct
|
|
|
|
rightArrow={ |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2" |
|
|
|
|
|
|
|
src={arrow} |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
leftArrow={ |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2" |
|
|
|
|
|
|
|
src={arrow} |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{videosData.map((video, index) => ( |
|
|
|
|
|
|
|
<VodProduct |
|
|
|
productTitle={`دوره ی ویدیویی ${video.name}`} |
|
|
|
productTitle={`دوره ی ویدیویی ${video.name}`} |
|
|
|
productCat={video.grade} |
|
|
|
productCat={video.grade} |
|
|
|
price={video.price} |
|
|
|
price={video.price} |
|
|
|
@ -117,73 +136,60 @@ export const Main = ({ isMobile, |
|
|
|
discountPrice={false} |
|
|
|
discountPrice={false} |
|
|
|
key={index} |
|
|
|
key={index} |
|
|
|
index={index} |
|
|
|
index={index} |
|
|
|
minHeight={"250px"} |
|
|
|
height={"calc(100vh / 5)"} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Link> |
|
|
|
))} |
|
|
|
)) |
|
|
|
</Carousel> |
|
|
|
} |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</ScrollContainer> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between"> |
|
|
|
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-evenly"> |
|
|
|
{selectedGrade |
|
|
|
{selectedGrade |
|
|
|
? gradeFilterBooks?.map((product, index) => ( |
|
|
|
? gradeFilterBooks?.map((product, index) => ( |
|
|
|
<Product |
|
|
|
|
|
|
|
key={index} |
|
|
|
|
|
|
|
productsType={filter.productsType} |
|
|
|
|
|
|
|
product={product} |
|
|
|
|
|
|
|
index={Number(index)} |
|
|
|
|
|
|
|
grades={grades} |
|
|
|
|
|
|
|
roductName={`کتاب ${product?.name}`} |
|
|
|
|
|
|
|
productCat={`پایه ${grades[product?.gradeId]}`} |
|
|
|
|
|
|
|
productPrice={100000} |
|
|
|
|
|
|
|
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
|
|
|
|
|
numberOfRegards={160} |
|
|
|
|
|
|
|
productTitleColor='text-blue5F' |
|
|
|
|
|
|
|
productCatTextColor='text-blueC0' |
|
|
|
|
|
|
|
productHolderBorder='' |
|
|
|
|
|
|
|
productHolderHoverBorder='shadow-md' |
|
|
|
|
|
|
|
starRate={Math.floor(Math.random() * 5) + 1} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
: books?.map((product, index) => ( |
|
|
|
|
|
|
|
<Link to={"/products/" + product?.id}> |
|
|
|
|
|
|
|
<Product |
|
|
|
<Product |
|
|
|
key={index} |
|
|
|
key={index} |
|
|
|
productsType={filter.productsType} |
|
|
|
productsType={filter.productsType} |
|
|
|
product={product} |
|
|
|
product={product} |
|
|
|
index={Number(index)} |
|
|
|
index={Number(index)} |
|
|
|
productName={`کتاب ${product?.name}`} |
|
|
|
grades={grades} |
|
|
|
|
|
|
|
roductName={`کتاب ${product?.name}`} |
|
|
|
productCat={`پایه ${grades[product?.gradeId]}`} |
|
|
|
productCat={`پایه ${grades[product?.gradeId]}`} |
|
|
|
productPrice={100000} |
|
|
|
productPrice={100000} |
|
|
|
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
|
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
|
numberOfRegards={160} |
|
|
|
numberOfRegards={160} |
|
|
|
productTitleColor='text-blue5F' |
|
|
|
productTitleColor="text-blue5F" |
|
|
|
productCatTextColor='text-blueC0' |
|
|
|
productCatTextColor="text-blueC0" |
|
|
|
productHolderBorder='' |
|
|
|
productHolderBorder="" |
|
|
|
productHolderHoverBorder='shadow-md' |
|
|
|
productHolderHoverBorder="shadow-md" |
|
|
|
starRate={Math.floor(Math.random() * 5) + 2} |
|
|
|
starRate={Math.floor(Math.random() * 5) + 1} |
|
|
|
|
|
|
|
imageSize={4.5} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Link> |
|
|
|
)) |
|
|
|
))} |
|
|
|
: books?.map((product, index) => ( |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to={"/products/" + product?.id} |
|
|
|
|
|
|
|
className="w-full lg:w-1/3 xl:w-1/4 2xl:w-1/5" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Product |
|
|
|
|
|
|
|
product={product} |
|
|
|
|
|
|
|
index={Number(index)} |
|
|
|
|
|
|
|
imageSize={4.5} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div>; |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
Main.defaultProps ={ |
|
|
|
Main.defaultProps = { |
|
|
|
videos: [ |
|
|
|
videos: [], |
|
|
|
|
|
|
|
}; |
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
books: state.book.list, |
|
|
|
books: state.book.list, |
|
|
|
grades: state.publicApi.grades, |
|
|
|
grades: state.publicApi.grades, |
|
|
|
gradeFilterBooks: state.book.gradeFilterBooks, |
|
|
|
|
|
|
|
selectedGrade: state.book.selectedGrade, |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
const mapDispatchToProps = { |
|
|
|
|
Reza_ashrafi
3 years ago