diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index eb57916..5d2ee40 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -1,14 +1,14 @@
import React, { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
-import Search from "../../components/Search";
-import Select from "../../components/Select";
-import Sidebar from "./layouts/Sidebar";
-import Main from "./layouts/Main";
+
+import Sidebar from "./layouts/Desktop/Sidebar";
+import Main from "./layouts/Desktop/Main";
+import Header from "./layouts/Mobile/Header";
+import MobileMain from "./layouts/Mobile/Main";
import { book, publicApi } from "../../redux/actions";
//assets
-import searchLight from "../../assets/icons/search-light.svg";
export const Products = ({
isDark,
@@ -16,32 +16,15 @@ export const Products = ({
books,
getList,
grades,
- gradeFilter,
- selectedGrade,
- gradeFilterBooks,
setHeaderOptions,
headerOptions,
desktopContentTransform,
}) => {
- const [filter, setFilter] = useState({
- search: "",
- grade: "",
- productsType: "کتاب",
- });
-
- const onChange = (name, value) => {
- setFilter({ ...filter, [name]: value });
- };
-
useEffect(() => {
- getList({vod : true});
+ getList({ vod: true });
setHeaderOptions(headerOptions);
}, []);
- useEffect(() => {
- gradeFilter(filter.grade);
- }, [filter]);
-
const Product = ({ productsType, product, index }) => {
return (
<>
@@ -97,73 +80,21 @@ export const Products = ({
{/* Portrait */}
{isMobile ? (
- <>
-
-
- {selectedGrade
- ? gradeFilterBooks?.map((product, index) => (
-
- ))
- : books?.map((product, index) => (
-
- ))}
-
-
+
+
+
+
) : (
)}
@@ -176,10 +107,8 @@ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
books: state.book.list,
- listVOD: state.product.listVOD,
grades: state.publicApi.grades,
- gradeFilterBooks: state.book.gradeFilterBooks,
- selectedGrade: state.book.selectedGrade,
+ filterOptions: state.book.filterOptions,
desktopContentTransform: state.publicApi.desktopContentTransform,
});
@@ -187,6 +116,7 @@ const mapDispatchToProps = {
getList: book.list,
gradeFilter: book.gradeFilter,
setHeaderOptions: publicApi.setHeaderOptions,
+ setFilterOptions: book.setFilterOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Products);
diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Desktop/Main.js
similarity index 96%
rename from src/views/Products/layouts/Main.js
rename to src/views/Products/layouts/Desktop/Main.js
index 1cef5bc..9c7c680 100644
--- a/src/views/Products/layouts/Main.js
+++ b/src/views/Products/layouts/Desktop/Main.js
@@ -3,10 +3,10 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { ScrollingCarousel } from "@trendyol-js/react-carousel";
-import Product from "../../../components/Product";
-import VodProduct from "../../../components/VodProduct";
-import Loading from "../../../components/Loading";
-import { book, publicApi } from "../../../redux/actions";
+import Product from "../../../../components/Product";
+import VodProduct from "../../../../components/VodProduct";
+import Loading from "../../../../components/Loading";
+import { book, publicApi } from "../../../../redux/actions";
export const Main = ({ books, grades, sortMethods, filterOptions }) => {
const [filterLoading, setFilterLoading] = useState(false);
@@ -201,7 +201,6 @@ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
sortMethods: state.book.sortMethods,
filterOptions: state.book.filterOptions,
- filterResult: state.book.filterResult,
});
const mapDispatchToProps = {
diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Desktop/Sidebar.js
similarity index 95%
rename from src/views/Products/layouts/Sidebar.js
rename to src/views/Products/layouts/Desktop/Sidebar.js
index 9220191..eb2aee8 100644
--- a/src/views/Products/layouts/Sidebar.js
+++ b/src/views/Products/layouts/Desktop/Sidebar.js
@@ -1,14 +1,13 @@
import React, { useState, useMemo } from "react";
import { connect } from "react-redux";
-import { book } from "../../../redux/actions";
-import Checkbox from "../../../components/Checkbox";
-import Switch from "../../../components/Switch";
+import { book } from "../../../../redux/actions";
+import Checkbox from "../../../../components/Checkbox";
+import Switch from "../../../../components/Switch";
//assets
-import dropdownIcon from "../../../assets/icons/dropdown-blue.svg";
+import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
export const Sidebar = ({
- onChange,
levels,
subjects,
productTypes,
diff --git a/src/views/Products/layouts/Mobile/Header.js b/src/views/Products/layouts/Mobile/Header.js
new file mode 100644
index 0000000..68d0986
--- /dev/null
+++ b/src/views/Products/layouts/Mobile/Header.js
@@ -0,0 +1,69 @@
+import React from "react";
+import { connect } from "react-redux";
+import { book } from "../../../../redux/actions";
+import _ from "lodash";
+
+import Search from "../../../../components/Search";
+import Select from "../../../../components/Select";
+
+import searchLight from "../../../../assets/icons/search-light.svg";
+
+export const Header = ({
+ setFilterOptions,
+ filterOptions,
+ levels,
+ productTypes,
+ isDark
+}) => {
+ return (
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ levels: state.publicApi.grades,
+ productTypes: state.book.productTypes,
+ filterOptions: state.book.filterOptions,
+ isDark: state.publicApi.isDark
+});
+
+const mapDispatchToProps = {
+ setFilterOptions: book.setFilterOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/src/views/Products/layouts/Mobile/Main.js b/src/views/Products/layouts/Mobile/Main.js
new file mode 100644
index 0000000..289063b
--- /dev/null
+++ b/src/views/Products/layouts/Mobile/Main.js
@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+
+import Loading from "../../../../components/Loading";
+
+//assets
+import whitePlayIcon from "../../../../components/VodProduct/white-play-button-icon.svg";
+
+export const Main = ({ books, filterOptions, grades }) => {
+ const [filterLoading, setFilterLoading] = useState(false);
+
+ useEffect(() => {
+ setFilterLoading(() => true);
+ setTimeout(() => {
+ setFilterLoading(() => false);
+ }, 500);
+ }, [filterOptions]);
+
+ const Items = (type) => {
+ const { grade, subject, available, sort, productType, search } =
+ filterOptions;
+ let byGradeFilter;
+ let bySubjectFilter;
+ let byAvailableFilter;
+ let bySearchFilter;
+ if (grade) {
+ byGradeFilter = books?.filter((book) => grades[book?.gradeId] === grade);
+ } else {
+ byGradeFilter = books;
+ }
+ if (subject) {
+ bySubjectFilter = byGradeFilter?.filter(
+ (book) =>
+ book?.product[type]?.name?.indexOf(subject) !== -1 ||
+ book?.name.indexOf(subject) !== -1
+ );
+ } else {
+ bySubjectFilter = byGradeFilter;
+ }
+ if (available) {
+ byAvailableFilter = bySubjectFilter?.filter(
+ (book) => book.product[type].price
+ );
+ } else {
+ byAvailableFilter = bySubjectFilter;
+ }
+ if (search) {
+ bySearchFilter = byAvailableFilter?.filter(
+ (book) =>
+ book?.product[type]?.name?.indexOf(search) !== -1 ||
+ book?.name.indexOf(search) !== -1
+ );
+ } else {
+ bySearchFilter = byAvailableFilter;
+ }
+
+ return filterOptions.productType === "دوره ویدئویی"
+ ? bySearchFilter?.map((product, index) => (
+
+
+
![]({"https://dnvn.ir/api/v1/file/")
+
+
+
+
+
+
+ {product?.name}
+
+
+ {"پایه" + " " + grades[product?.gradeId]}
+
+
+ {product?.product[2]?.price + " " + "تومان"}
+
+
+ ))
+ : bySearchFilter?.map((product, index) => (
+ <>
+ {(productType ? productType === "کتاب دیجیتال" : true) && (
+
+
+
+ {"کتاب دیجیتال" + " " + product?.name}
+
+
+ {"پایه" + " " + grades[product?.gradeId]}
+
+
+ {product?.product[0]?.price + " " + "تومان"}
+
+
+ )}
+ {(productType ? productType === "کتاب فیزیکی" : true) && (
+
+
+
+ {"کتاب فیزیکی" + " " + product?.name}
+
+
+ {"پایه" + " " + grades[product?.gradeId]}
+
+
+ {product?.product[1]?.price + " " + "تومان"}
+
+
+ )}
+
+ ));
+ };
+
+ return (
+
+ {filterOptions?.productType === "دوره ویدئویی" && Items(2)}
+ {filterOptions?.productType === "کتاب دیجیتال" && Items(0)}
+ {filterOptions?.productType === "کتاب فیزیکی" && Items(1)}
+ {!filterOptions?.productType && Items(0)}
+ {filterLoading && (
+
+
+
+ )}
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ filterOptions: state.book.filterOptions,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Main);
+ {isDark ? (
+ 
+ ) : (
+ 
+ )}