|
|
|
@ -14,7 +14,7 @@ import moment from "jalali-moment"; |
|
|
|
|
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
import Posts from "./Posts"; |
|
|
|
|
import Pagination from "./Pagination"; |
|
|
|
|
|
|
|
|
|
const num = 6; |
|
|
|
|
export const Main = ({ |
|
|
|
|
books, |
|
|
|
|
grades, |
|
|
|
@ -24,17 +24,23 @@ export const Main = ({ |
|
|
|
|
isMobile, |
|
|
|
|
}) => { |
|
|
|
|
const [filterLoading, setFilterLoading] = useState(false); |
|
|
|
|
const [page, setPage] = useState(1); |
|
|
|
|
const [total, setTotal] = useState(books.length); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
setFilterLoading(() => true); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
setFilterLoading(() => false); |
|
|
|
|
}, 500); |
|
|
|
|
// setFilterLoading(() => true);
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// setFilterLoading(() => false);
|
|
|
|
|
// }, 500);
|
|
|
|
|
setPage(1); |
|
|
|
|
}, [filterOptions]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
}, []); |
|
|
|
|
useEffect(() => { |
|
|
|
|
setTotal(books.length); |
|
|
|
|
}, [books]); |
|
|
|
|
|
|
|
|
|
const Items = (type) => { |
|
|
|
|
const { grade, subject, available, sort, productType } = filterOptions; |
|
|
|
@ -82,83 +88,22 @@ export const Main = ({ |
|
|
|
|
} else { |
|
|
|
|
bySortFilter = byAvailableFilter; |
|
|
|
|
} |
|
|
|
|
return type === 2 |
|
|
|
|
? bySortFilter?.map((item, index) => ( |
|
|
|
|
<VodProduct |
|
|
|
|
video={item} |
|
|
|
|
key={index} |
|
|
|
|
index={index} |
|
|
|
|
height={"calc(100vh / 5)"} |
|
|
|
|
grades={grades} |
|
|
|
|
/> |
|
|
|
|
)) |
|
|
|
|
: bySortFilter?.map((product, index) => ( |
|
|
|
|
<> |
|
|
|
|
{(productType ? productType === "کتاب دیجیتال" : true) && ( |
|
|
|
|
<Link |
|
|
|
|
to={"/products/" + product?.id} |
|
|
|
|
className="w-full lg:w-1/3 xl:w-1/4 2xl:w-1/5" |
|
|
|
|
> |
|
|
|
|
<Product |
|
|
|
|
key={index} |
|
|
|
|
product={product} |
|
|
|
|
index={Number(index)} |
|
|
|
|
grades={grades} |
|
|
|
|
imageSize={4.5} |
|
|
|
|
type={0} |
|
|
|
|
/> |
|
|
|
|
</Link> |
|
|
|
|
)} |
|
|
|
|
{(productType ? productType === "کتاب فیزیکی" : true) && ( |
|
|
|
|
<Link |
|
|
|
|
to={"/products/" + product?.id} |
|
|
|
|
className="w-full lg:w-1/3 xl:w-1/4 2xl:w-1/5" |
|
|
|
|
> |
|
|
|
|
<Product |
|
|
|
|
key={index} |
|
|
|
|
product={product} |
|
|
|
|
index={Number(index)} |
|
|
|
|
grades={grades} |
|
|
|
|
imageSize={4.5} |
|
|
|
|
type={1} |
|
|
|
|
/> |
|
|
|
|
</Link> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
)); |
|
|
|
|
console.log("render here !"); |
|
|
|
|
return bySortFilter; |
|
|
|
|
// setTotal(bySortFilter.length);
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// pagination
|
|
|
|
|
const [posts, setPosts] = useState([]); |
|
|
|
|
const [loading, setLoading] = useState(false); |
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); |
|
|
|
|
const [postsPerPage] = useState(10); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
const fetchPosts = async () => { |
|
|
|
|
setLoading(true); |
|
|
|
|
const res = await axios.get("https://jsonplaceholder.typicode.com/posts"); |
|
|
|
|
setPosts(res.data); |
|
|
|
|
setLoading(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
fetchPosts(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
// get current post
|
|
|
|
|
const indexOfLastPost = currentPage * postsPerPage; |
|
|
|
|
const indexOfFirstPost = indexOfLastPost - postsPerPage; |
|
|
|
|
const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost); |
|
|
|
|
|
|
|
|
|
// change page
|
|
|
|
|
const paginate = (pageNumber) => setCurrentPage(pageNumber); |
|
|
|
|
|
|
|
|
|
const elements = Items(1); |
|
|
|
|
const vods = Items(2); |
|
|
|
|
console.log(elements.length); |
|
|
|
|
const lastPage = Math.floor((elements.length - 1) / num) + 1; |
|
|
|
|
const pages = lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : []; |
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className="flex flex-col w-3/4 pb-20 min-h-screen" |
|
|
|
|
style={{ minWidth: "calc(100% * 3 / 4)" }} |
|
|
|
|
> |
|
|
|
|
<div className="bg-red-400 "> |
|
|
|
|
{/* <div className="bg-red-400 "> |
|
|
|
|
<h1 className="mb-5">My Blog</h1> |
|
|
|
|
<Posts posts={currentPosts} loading={loading} /> |
|
|
|
|
<Pagination |
|
|
|
@ -166,7 +111,7 @@ export const Main = ({ |
|
|
|
|
totalPosts={posts.length} |
|
|
|
|
paginate={paginate} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> */} |
|
|
|
|
<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 text-sm items-center mr-2 ml-4"> |
|
|
|
|
<svg |
|
|
|
@ -293,12 +238,41 @@ export const Main = ({ |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{Items(2)} |
|
|
|
|
{vods.map((item, index) => ( |
|
|
|
|
<VodProduct |
|
|
|
|
video={item} |
|
|
|
|
key={index} |
|
|
|
|
index={index} |
|
|
|
|
height={"calc(100vh / 5)"} |
|
|
|
|
grades={grades} |
|
|
|
|
/> |
|
|
|
|
))} |
|
|
|
|
</Carousel> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3"> |
|
|
|
|
{Items(1)} |
|
|
|
|
{elements |
|
|
|
|
?.slice((page - 1) * num, page * num) |
|
|
|
|
.map((product, index) => ( |
|
|
|
|
<Product |
|
|
|
|
key={index} |
|
|
|
|
product={product} |
|
|
|
|
index={Number(index)} |
|
|
|
|
grades={grades} |
|
|
|
|
imageSize={4.5} |
|
|
|
|
type={0} |
|
|
|
|
/> |
|
|
|
|
))} |
|
|
|
|
<div className="flex w-full justify-center"> |
|
|
|
|
{pages.map((e) => ( |
|
|
|
|
<div |
|
|
|
|
className="m-1 p-1 rounded bg-gray-200 " |
|
|
|
|
onClick={() => setPage(e)} |
|
|
|
|
> |
|
|
|
|
{e} |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|