diff --git a/src/components/BG/index.js b/src/components/BG/index.js index daa6353..424be08 100644 --- a/src/components/BG/index.js +++ b/src/components/BG/index.js @@ -12,6 +12,7 @@ export const BG = ({ isDark }) => { const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, + isMobile: state.publicApi.isMobile }); const mapDispatchToProps = {}; diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index a7afea1..e794e4d 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -69,13 +69,12 @@ function Navbar({ if (!isMobile) { window.addEventListener("scroll", () => { - if (window.scrollY >= 64) { setDesktopMiddleFix(() => true); } else { setDesktopMiddleFix(() => false); } - + if (window.scrollY > lastScroll && window.scrollY >= 90) { setDesktopEndTransform(() => true); } else { @@ -85,227 +84,214 @@ function Navbar({ }); } }, []); - return ( - <> - {isMobile ? ( -
+ {/* landscape start */} + + {/* landscape end */} + {/* portrait start */} +
+
+ {hamburgerMenu && ( + <> + + setDrawerOpen((prevState) => !prevState)} + src={isDark ? hamburgerIcon : hamburgerBlueIcon} + alt="" + className="w-7 h-7.5" + /> + )} - style={{ - backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", - }} - > - {/* landscape start */} + {!title && back ? ( + back navigation(-1)} + /> + ) : null} + {title && ( + + {title} + + )} +
+ {logo && ( + + + + )} - {/* landscape end */} - {/* portrait start */} -
-
- {hamburgerMenu && ( - <> - - setDrawerOpen((prevState) => !prevState)} - src={isDark ? hamburgerIcon : hamburgerBlueIcon} - alt="" - className="w-7 h-7.5" - /> - - )} - {!title && back ? ( - back navigation(-1)} - /> - ) : null} - {title && ( - - {title} - - )} -
- {logo && ( +
+ {qr && ( + <> - - - )} - -
- {qr && ( - <> - - - - - - - - )} - {bookmark && ( - bookmark - )} - {menu && ( menu - )} - {title && back ? ( + + back navigation(-1)} + src={isDark ? arIcon : arBlueIcon} + alt="" + className={_.join(["w-6"], " ")} /> - ) : null} -
-
- - {/* portrait end */} + + + )} + {bookmark && ( + bookmark + )} + {menu && ( + menu + )} + {title && back ? ( + back navigation(-1)} + /> + ) : null}
- ) : ( -
-
-
- - انتخاب کشور - - - پیگیری سفارش - -
-
- - شکایات  - - - ورود و ثبت نام - -
+
+ + {/* portrait end */} +
+ ) : ( +
+
+
+ + انتخاب کشور + + پیگیری سفارش +
+
+ + شکایات  + + + ورود و ثبت نام + +
+
+
+
+
+ + Design System +
+
-
-
- - Design System - -
-
-
- -
+ +
-
- - {/* */} - {/* */} - -
-
+
+ + {/* */} + {/* */} + +
+
-
-
- - {/* */} - - دسته بندی کالاها   - -
-
+
+ + {/* */} + + دسته بندی کالاها   + +
+
+ {menuItems.map((item, index) => ( + - {menuItems.map((item, index) => ( - - {item} - - ))} -
-
+ {item} + + ))}
-
- )} - +
+ + ); } diff --git a/src/redux/actions/public.js b/src/redux/actions/public.js index 3cb26b2..ff58c26 100644 --- a/src/redux/actions/public.js +++ b/src/redux/actions/public.js @@ -1,5 +1,7 @@ import proxy from "../proxy"; const publicApi = { + setDesktopContentTransform: (data) => async (dispatch) => + await dispatch({type : "public/setDesktopContentTransform", data}), setHeaderOptions: (data) => async (dispatch) => await dispatch({ type: "public/setHeaderOptions", data }), setIsDark: (data) => async (dispatch) => diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index b583873..164ff0a 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -59,7 +59,8 @@ const initialState = { menu : false, back : false, title : false, - } + }, + desktopContentTransform : false, }; const grades = [ @@ -77,9 +78,12 @@ const grades = [ "یازدهم", "دوازدهم", ]; + export default function publicApi(state = initialState, action) { let { type, data } = action; switch (type) { + case "public/setDesktopContentTransform": + return {...state, desktopContentTransform : data }; case "public/setHeaderOptions": return {...state, headerOptions : data}; case "public/setIsDark": diff --git a/src/router.js b/src/router.js index a82a04a..6f90841 100644 --- a/src/router.js +++ b/src/router.js @@ -1,6 +1,7 @@ -import React from "react"; +import React, { useEffect } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { connect } from "react-redux"; +import { publicApi } from "./redux/actions"; import Navbar from "./components/Navbar"; import BG from "./components/BG"; import BottomNavigation from "./components/BottomNavigation"; @@ -24,7 +25,20 @@ import Faq from "./views/Faq"; import Contact from "./views/Contact"; // import VideoTube from "./views/Home/VideoTube"; -function Router({ isDark,isMobile, isLogin, headerOptions }) { +function Router({ isDark, isMobile, isLogin, headerOptions, setDesktopContentTransform }) { + useEffect(() => { + window.addEventListener("scroll", () => { + if (!isMobile) { + window.addEventListener("scroll", () => { + if (window.scrollY >= 64) { + setDesktopContentTransform(true); + } else { + setDesktopContentTransform(false); + } + }); + } + }); + }, []); return (
{headerOptions?.shown && } - - + {isMobile && ( + <> + + + + )} } + element={ + + } /> } @@ -303,9 +323,13 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) { const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, - isMobile : state.publicApi.isMobile, + isMobile: state.publicApi.isMobile, isLogin: state.user.status, headerOptions: state.publicApi.headerOptions, }); -export default connect(mapStateToProps, {})(Router); +const mapDispatchToProps = { + setDesktopContentTransform : publicApi.setDesktopContentTransform, +} + +export default connect(mapStateToProps, mapDispatchToProps)(Router); diff --git a/src/views/Products/index.js b/src/views/Products/index.js index 70020c9..0b0397a 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -21,13 +21,14 @@ export const Products = ({ gradeFilterBooks, setHeaderOptions, headerOptions, + desktopContentTransform, }) => { const [filter, setFilter] = useState({ search: "", grade: "", productsType: "کتاب", }); - const [desktopContentTransform, setDesktopContentTransform] = useState(false); + const onChange = (name, value) => { setFilter({ ...filter, [name]: value }); @@ -36,15 +37,6 @@ export const Products = ({ useEffect(() => { getList(); setHeaderOptions(headerOptions); - if (!isMobile) { - window.addEventListener("scroll", () => { - if (window.scrollY >= 64) { - setDesktopContentTransform(() => true); - } else { - setDesktopContentTransform(() => false); - } - }); - } }, []); useEffect(() => { @@ -182,6 +174,7 @@ const mapStateToProps = (state) => ({ grades: state.publicApi.grades, gradeFilterBooks: state.book.gradeFilterBooks, selectedGrade: state.book.selectedGrade, + desktopContentTransform: state.publicApi.desktopContentTransform, }); const mapDispatchToProps = { diff --git a/src/views/ShoppingCart/Product/index.js b/src/views/ShoppingCart/Product/index.js index e3b745b..4976744 100644 --- a/src/views/ShoppingCart/Product/index.js +++ b/src/views/ShoppingCart/Product/index.js @@ -6,8 +6,8 @@ import { userProduct } from "../../../redux/actions"; import bookImage from "../../../assets/images/zist-11.svg"; import exitIcon from "../../../assets/icons/exit.svg"; -function Product({ product, grades, pushToCart }) { - return ( +function Product({ product, grades, pushToCart, isMobile }) { + return isMobile ? (
@@ -81,11 +81,66 @@ function Product({ product, grades, pushToCart }) {
+ ) : ( +
+
+ +
+ + {product?.product?.book?.name} + + + {"پایه" + " " + grades[product?.product?.book?.gradeId]} + + + {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"} + +
+
+
+ + + {product.count} + + +
+
+ + {product?.product?.price} تومان + +
+
); } const mapStateToProps = (state) => ({ grades: state.publicApi.grades, + isMobile: state.publicApi.isMobile, }); const mapDispatchToProps = { diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js index cd91dc9..afec360 100644 --- a/src/views/ShoppingCart/index.js +++ b/src/views/ShoppingCart/index.js @@ -40,79 +40,99 @@ function ShoppingCart({ payFactor, headerOptions, setHeaderOptions, + desktopContentTransform, }) { useEffect(() => { - getList(); - getFactorInfo({ userId }); + // getList(); + // getFactorInfo({ userId }); setHeaderOptions(headerOptions); }, []); const Table = () => { - - } - return ( - <> - {isMobile ? ( -
- {list.map((product, index) => ( + return ( +
+
+ + کالاهای انتخابی{" "} + + + تعداد سفارش + + + مبلغ + +
+
    + {[0,1].map((product, index) => ( ))} - -
    - - - -
    -
    - - جمع کل سبد خرید - -

    - {factorInfo?.payPrice + " " + "تومان"} -

    -
    -
    - -

    - هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود -

    -
    -
- ) : ( -
-
- - - - - )} - + + + ); + }; + return isMobile ? ( +
+ {list.map((product, index) => ( + + ))} + +
+ + + +
+
+ + جمع کل سبد خرید + +

+ {factorInfo?.payPrice + " " + "تومان"} +

+
+
+ +

+ هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود +

+
+
+ ) : ( +
+
+
+ +
+ ); } @@ -124,6 +144,7 @@ const mapStateToProps = (state) => ({ factorInfo: state.userFactor.info, userId: state.user.status.id, hasPhysical: state.userProduct.hasPhysical, + desktopContentTransform: state.publicApi.desktopContentTransform, }); const mapDispatchToProps = {