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

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

Loading…
Cancel
Save