|
|
|
|
@ -12,6 +12,7 @@ import { book, publicApi } from "../../../../redux/actions"; |
|
|
|
|
import moment from "jalali-moment"; |
|
|
|
|
|
|
|
|
|
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
import filter from "../../../../assets/icons/filter-icon.svg"; |
|
|
|
|
const num = 6; |
|
|
|
|
|
|
|
|
|
export const Main = ({ |
|
|
|
|
@ -20,7 +21,7 @@ export const Main = ({ |
|
|
|
|
sortMethods, |
|
|
|
|
filterOptions, |
|
|
|
|
setFilterOptions, |
|
|
|
|
useless |
|
|
|
|
useless, |
|
|
|
|
}) => { |
|
|
|
|
const [filterLoading, setFilterLoading] = useState(false); |
|
|
|
|
const [page, setPage] = useState(1); |
|
|
|
|
@ -31,82 +32,91 @@ export const Main = ({ |
|
|
|
|
}, [filterOptions]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(books?.length){ |
|
|
|
|
if (books?.length) { |
|
|
|
|
setTotal(books.length); |
|
|
|
|
window.scroll({ top: 0, behavior: "smooth" }); |
|
|
|
|
} |
|
|
|
|
}, [books]); |
|
|
|
|
|
|
|
|
|
const Items = React.useCallback((type) => { |
|
|
|
|
const { grade, subject, available, sort, productType } = filterOptions; |
|
|
|
|
let byGradeFilter; |
|
|
|
|
let bySubjectFilter; |
|
|
|
|
let byAvailableFilter; |
|
|
|
|
let bySortFilter; |
|
|
|
|
if (grade) { |
|
|
|
|
byGradeFilter = books?.filter((book) => grades[book?.gradeId] === grade); |
|
|
|
|
} else { |
|
|
|
|
byGradeFilter = books; |
|
|
|
|
} |
|
|
|
|
if (subject) { |
|
|
|
|
bySubjectFilter = byGradeFilter?.filter( |
|
|
|
|
(book) => |
|
|
|
|
book?.product |
|
|
|
|
?.find((product) => product?.productType === type) |
|
|
|
|
?.name?.indexOf(subject) !== -1 || |
|
|
|
|
book?.name.indexOf(subject) !== -1 |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
bySubjectFilter = byGradeFilter; |
|
|
|
|
} |
|
|
|
|
if (available) { |
|
|
|
|
byAvailableFilter = bySubjectFilter?.filter( |
|
|
|
|
(book) => |
|
|
|
|
book.product?.find((product) => product?.productType === type)?.price |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
byAvailableFilter = bySubjectFilter; |
|
|
|
|
} |
|
|
|
|
if (sort) { |
|
|
|
|
if (sort === window.t("ارزان ترین")) { |
|
|
|
|
bySortFilter = byAvailableFilter?.sort( |
|
|
|
|
(a, b) => |
|
|
|
|
a.product?.find((product) => product?.productType === type)?.price - |
|
|
|
|
b.product?.find((product) => product?.productType === type)?.price |
|
|
|
|
const Items = React.useCallback( |
|
|
|
|
(type) => { |
|
|
|
|
const { grade, subject, available, sort, productType } = filterOptions; |
|
|
|
|
let byGradeFilter; |
|
|
|
|
let bySubjectFilter; |
|
|
|
|
let byAvailableFilter; |
|
|
|
|
let bySortFilter; |
|
|
|
|
if (grade) { |
|
|
|
|
byGradeFilter = books?.filter( |
|
|
|
|
(book) => grades[book?.gradeId] === grade |
|
|
|
|
); |
|
|
|
|
} else if (sort === window.t("محبوب ترین")) { |
|
|
|
|
bySortFilter = byAvailableFilter?.sort( |
|
|
|
|
(a, b) => |
|
|
|
|
a.product?.find((product) => product?.productType === type)?.rate - |
|
|
|
|
b.product?.find((product) => product?.productType === type)?.rate |
|
|
|
|
} else { |
|
|
|
|
byGradeFilter = books; |
|
|
|
|
} |
|
|
|
|
if (subject) { |
|
|
|
|
bySubjectFilter = byGradeFilter?.filter( |
|
|
|
|
(book) => |
|
|
|
|
book?.product |
|
|
|
|
?.find((product) => product?.productType === type) |
|
|
|
|
?.name?.indexOf(subject) !== -1 || |
|
|
|
|
book?.name.indexOf(subject) !== -1 |
|
|
|
|
); |
|
|
|
|
} else if (sort === window.t("جدیدترین")) { |
|
|
|
|
bySortFilter = byAvailableFilter?.sort( |
|
|
|
|
(a, b) => moment(a.createdAt) - moment(b.createdAt) |
|
|
|
|
} else { |
|
|
|
|
bySubjectFilter = byGradeFilter; |
|
|
|
|
} |
|
|
|
|
if (available) { |
|
|
|
|
byAvailableFilter = bySubjectFilter?.filter( |
|
|
|
|
(book) => |
|
|
|
|
book.product?.find((product) => product?.productType === type) |
|
|
|
|
?.price |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
byAvailableFilter = bySubjectFilter; |
|
|
|
|
} |
|
|
|
|
if (sort) { |
|
|
|
|
if (sort === window.t("ارزان ترین")) { |
|
|
|
|
bySortFilter = byAvailableFilter?.sort( |
|
|
|
|
(a, b) => |
|
|
|
|
a.product?.find((product) => product?.productType === type) |
|
|
|
|
?.price - |
|
|
|
|
b.product?.find((product) => product?.productType === type)?.price |
|
|
|
|
); |
|
|
|
|
} else if (sort === window.t("محبوب ترین")) { |
|
|
|
|
bySortFilter = byAvailableFilter?.sort( |
|
|
|
|
(a, b) => |
|
|
|
|
a.product?.find((product) => product?.productType === type) |
|
|
|
|
?.rate - |
|
|
|
|
b.product?.find((product) => product?.productType === type)?.rate |
|
|
|
|
); |
|
|
|
|
} else if (sort === window.t("جدیدترین")) { |
|
|
|
|
bySortFilter = byAvailableFilter?.sort( |
|
|
|
|
(a, b) => moment(a.createdAt) - moment(b.createdAt) |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
bySortFilter = byAvailableFilter; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
bySortFilter = byAvailableFilter; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
bySortFilter = byAvailableFilter; |
|
|
|
|
} |
|
|
|
|
return bySortFilter; |
|
|
|
|
},[books, filterOptions, grades]); |
|
|
|
|
return bySortFilter; |
|
|
|
|
}, |
|
|
|
|
[books, filterOptions, grades] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const elements = React.useMemo(() => { |
|
|
|
|
return Items(2); |
|
|
|
|
},[books, filterOptions]); |
|
|
|
|
}, [books, filterOptions]); |
|
|
|
|
|
|
|
|
|
const vods = React.useMemo(() => { |
|
|
|
|
return Items(4); |
|
|
|
|
},[books, filterOptions]);
|
|
|
|
|
}, [books, filterOptions]); |
|
|
|
|
|
|
|
|
|
const lastPage = React.useMemo(() => { |
|
|
|
|
return Math.floor((elements.length - 1) / num) + 1; |
|
|
|
|
},[books, filterOptions]); |
|
|
|
|
return Math.floor((elements.length - 1) / num) + 1; |
|
|
|
|
}, [books, filterOptions]); |
|
|
|
|
|
|
|
|
|
const pages = React.useMemo(() => { |
|
|
|
|
return lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : []; |
|
|
|
|
},[books, filterOptions]);
|
|
|
|
|
}, [books, filterOptions]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
@ -115,63 +125,7 @@ export const Main = ({ |
|
|
|
|
> |
|
|
|
|
<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 |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
width="24" |
|
|
|
|
height="24" |
|
|
|
|
viewBox="0 0 24 24" |
|
|
|
|
> |
|
|
|
|
<g |
|
|
|
|
id="vuesax_linear_filter-tick" |
|
|
|
|
data-name="vuesax/linear/filter-tick" |
|
|
|
|
transform="translate(-620 -700)" |
|
|
|
|
> |
|
|
|
|
<g id="filter-tick"> |
|
|
|
|
<path |
|
|
|
|
id="Vector" |
|
|
|
|
d="M9.5,4.75A4.678,4.678,0,0,1,8.82,7.2,4.735,4.735,0,0,1,4.75,9.5a4.62,4.62,0,0,1-2.56-.77A4.481,4.481,0,0,1,.69,7.2,4.686,4.686,0,0,1,0,4.75,4.754,4.754,0,0,1,4.75,0,4.421,4.421,0,0,1,5.79.12,4.74,4.74,0,0,1,9.5,4.75Z" |
|
|
|
|
transform="translate(632.13 710)" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="rgba(6, 186, 206" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
strokeWidth="1.5" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
id="Vector-2" |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M0,1.17,1.17,2.34,3.7,0" |
|
|
|
|
transform="translate(635.03 713.58)" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="rgba(6, 186, 206" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
strokeWidth="1.5" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
id="Vector-3" |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M0,0H24V24H0Z" |
|
|
|
|
transform="translate(644 724) rotate(180)" |
|
|
|
|
fill="none" |
|
|
|
|
opacity="0" |
|
|
|
|
/> |
|
|
|
|
<g id="Group"> |
|
|
|
|
<path |
|
|
|
|
id="Vector-4" |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M17.38,2.02V4.24a3.825,3.825,0,0,1-1.01,2.33L14.61,8.12A4.421,4.421,0,0,0,13.57,8a4.754,4.754,0,0,0-4.75,4.75,4.686,4.686,0,0,0,.69,2.45,4.481,4.481,0,0,0,1.5,1.53v.34a2.23,2.23,0,0,1-.91,1.72l-1.41.91a2.058,2.058,0,0,1-3.13-1.72V12.63a3.91,3.91,0,0,0-.81-2.12L.91,6.47A3.407,3.407,0,0,1,0,4.45V2.12A2.051,2.051,0,0,1,2.02,0H15.36A2.027,2.027,0,0,1,17.38,2.02Z" |
|
|
|
|
transform="translate(623.31 702)" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="rgba(6, 186, 206" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
strokeWidth="1.5" |
|
|
|
|
/> |
|
|
|
|
</g> |
|
|
|
|
</g> |
|
|
|
|
</g> |
|
|
|
|
</svg> |
|
|
|
|
<img src={filter} className="w-5" alt="filter" /> |
|
|
|
|
<span className="text-tiny text-greenBA font-bold"> |
|
|
|
|
{window.t("مرتب سازی") + "" + ":"} |
|
|
|
|
</span> |
|
|
|
|
|
Reza_ashrafi
2 years ago
