update src/views/Product/Desktop/ProductOverAll/index.js, src/views/Product/Rate/index.js and Main.js

master
Reza_ashrafi 2 years ago
parent c802ab29d6
commit 9711959824
  1. 16
      src/views/Product/Desktop/ProductOverAll/index.js
  2. 68
      src/views/Products/layouts/Desktop/Main.js

@ -66,11 +66,11 @@ export const ProductOverAll = ({
<div className="flex justify-end items-center">
<div className="p-2">
<StarRating value={book?.rate || 4} />
<StarRating value={physicalProduct?.rate} />
</div>
{activeProduct?.suggestedCounter ? (
{physicalProduct?.suggestedCounter ? (
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
بیش از {activeProduct?.suggestedCounter} نفر امتیاز داده اند
بیش از {physicalProduct?.suggestedCounter} نفر امتیاز داده اند
</div>
) : null}
</div>
@ -155,22 +155,22 @@ export const ProductOverAll = ({
<div className="flex flex-col w-1/3 ">
<ProductStatusCard
price={activeProduct?.price}
garanty={activeProduct?.garantyText}
suggestedCounter={activeProduct?.suggestedCounter}
garanty={physicalProduct?.garantyText}
suggestedCounter={physicalProduct?.suggestedCounter}
seller={activeProduct?.seller}
offerPrice={activeProduct?.offerPrice}
id={activeProduct?.id}
shippingTime={activeProduct?.shippingTime}
shippingTime={physicalProduct?.shippingTime}
loading={loading}
/>
</div>
</header>
{activeProduct?.properties?.length && (
{physicalProduct?.properties?.length && (
<ProductTab
tabs={[
{
title: "مشخصات",
components: <Table specifications={activeProduct?.properties} />,
components: <Table specifications={physicalProduct?.properties} />,
},
{
title: "نقد و بررسی",

@ -12,8 +12,6 @@ import { book, publicApi } from "../../../../redux/actions";
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 = ({
@ -22,30 +20,24 @@ export const Main = ({
sortMethods,
filterOptions,
setFilterOptions,
isMobile,
useless
}) => {
const [filterLoading, setFilterLoading] = useState(false);
const [page, setPage] = useState(1);
console.log(page);
const [total, setTotal] = useState(books.length);
useEffect(() => {
// setFilterLoading(() => true);
// setTimeout(() => {
// setFilterLoading(() => false);
// }, 500);
setPage(1);
}, [filterOptions]);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
useEffect(() => {
setTotal(books.length);
if(books?.length){
setTotal(books.length);
window.scroll({top : 0, behavior : 'smooth'});
}
}, [books]);
const Items = (type) => {
const Items = React.useCallback((type) => {
const { grade, subject, available, sort, productType } = filterOptions;
let byGradeFilter;
let bySubjectFilter;
@ -59,7 +51,9 @@ export const Main = ({
if (subject) {
bySubjectFilter = byGradeFilter?.filter(
(book) =>
book?.product[type]?.name?.indexOf(subject) !== -1 ||
book?.product
?.find((product) => product?.productType === type)
?.name?.indexOf(subject) !== -1 ||
book?.name.indexOf(subject) !== -1
);
} else {
@ -67,7 +61,8 @@ export const Main = ({
}
if (available) {
byAvailableFilter = bySubjectFilter?.filter(
(book) => book.product[type].price
(book) =>
book.product?.find((product) => product?.productType === type)?.price
);
} else {
byAvailableFilter = bySubjectFilter;
@ -75,11 +70,15 @@ export const Main = ({
if (sort) {
if (sort === "ارزان ترین") {
bySortFilter = byAvailableFilter?.sort(
(a, b) => a.product[type].price - b.product[type].price
(a, b) =>
a.product?.find((product) => product?.productType === type)?.price -
b.product?.find((product) => product?.productType === type)?.price
);
} else if (sort === "محبوب ترین") {
bySortFilter = byAvailableFilter?.sort(
(a, b) => a.product[type].rate - b.product[type].rate
(a, b) =>
a.product?.find((product) => product?.productType === type)?.rate -
b.product?.find((product) => product?.productType === type)?.rate
);
} else if (sort === "جدیدترین") {
bySortFilter = byAvailableFilter?.sort(
@ -91,17 +90,24 @@ export const Main = ({
} else {
bySortFilter = byAvailableFilter;
}
console.log("render here !");
return bySortFilter;
// setTotal(bySortFilter.length);
};
},[books, filterOptions, grades]);
const elements = React.useMemo(() => {
return Items(2);
},[books, filterOptions]);
const vods = React.useMemo(() => {
return Items(4);
},[books, filterOptions]);
const elements = Items(1);
const vods = Items(2);
console.log(elements.length);
const lastPage = React.useMemo(() => {
return Math.floor((elements.length - 1) / num) + 1;
},[books, filterOptions]);
const lastPage = Math.floor((elements.length - 1) / num) + 1;
const pages = lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : [];
const pages = React.useMemo(() => {
return lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : [];
},[books, filterOptions]);
return (
<div
@ -189,7 +195,6 @@ export const Main = ({
))}
</ul>
</div>
<div className="flex flex-col w-full relative">
{filterLoading && (
<div
@ -199,9 +204,8 @@ export const Main = ({
<Loading size={4} color="bg-green-400" />
</div>
)}
{books.length > 0 && (
<div className="relative w-full mt-7 " style={{ direction: "ltr" }}>
{books.length ? (
<div className="relative w-full mt-7 ltr">
<Carousel
show={Math.round(window.innerWidth / 666)}
slide={2}
@ -246,8 +250,7 @@ export const Main = ({
))}
</Carousel>
</div>
)}
) : null}
<div className="w-full flex flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
{elements
?.slice((page - 1) * num, page * num)
@ -261,7 +264,6 @@ export const Main = ({
type={0}
/>
))}
{/* pagination */}
<div className="w-full flex justify-center gap-x-2">
{pages.map((e) => (

Loading…
Cancel
Save