اضافه کردن صفحه بندی | 90

temp
mahdi 3 years ago
parent 5c6ab81c6f
commit 0fdbb61e6d
  1. 2
      src/components/Navbar/index.js
  2. 3
      src/components/StarRating/index.js
  3. 130
      src/views/Products/layouts/Desktop/Main.js
  4. 1
      src/views/ShoppingCart/index.js

@ -64,6 +64,8 @@ function Navbar({
useEffect(() => {
if (!isMobile && isLogin) {
console.log(111);
// console.log/("gl3");
getCartProducts();
}
}, [isLogin]);

@ -19,7 +19,8 @@ function StarRating({
const [rate, setRating] = React.useState(null);
useMemo(() => {
if (isLogin) getUserProducts();
//console.log("gl2");
// if (isLogin && !userProducts.length) getUserProducts();
}, []);
React.useEffect(() => {

@ -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>

@ -41,6 +41,7 @@ function ShoppingCart({
const [phase, setPhase] = useState("products");
const navigation = useNavigate();
useEffect(() => {
console.log("gl1")
if (isLogin) getList();
getFactorInfo({ userId: user?.id });
setHeaderOptions(headerOptions);

Loading…
Cancel
Save