import React, { useEffect } from "react"; import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; import { Navigate } from "react-router-dom"; import { connect } from "react-redux"; import { publicApi, menu, config, userProduct, book, blog, } from "./redux/actions"; //components import Navbar from "./components/Navbar"; import BG from "./components/BG"; import BottomNavigation from "./components/BottomNavigation"; import MainFooter from "./components/MainFooter"; import SimpleFooter from "./components/SimpleFooter"; //pages import Home from "./views/Home"; import Auth from "./views/Auth"; import Products from "./views/Products"; import Product from "./views/Product"; import ShoppingCart from "./views/ShoppingCart"; import DeliveryForm from "./views/DeliveryForm"; import Videos from "./views/Videos"; import Video from "./views/Video"; import VideoDisplay from "./views/VideoDisplay"; import AR from "./views/AR"; import QR from "./views/QR"; import NotFound from "./views/404"; import Orders from "./views/Orders"; import Order from "./views/Order"; import Activation from "./views/Activation"; import Faq from "./views/Faq"; import Contact from "./views/Contact"; import Dashboard from "./views/Dashboard"; import Blogs from "./views/Blogs"; import Blog from "./views/Blog"; import About from "./views/About"; import Dialog from "./components/Dialog"; import Address from "./views/Address"; import Favorites from "./views/Favorites"; import Addresses from "./views/Dashboard/layouts/Mobile/ProfileAddress"; import Profile from "./views/Auth/Profile"; function Router({ isDark, isMobile, isHome, headerOptions, dialog, menu, user, setMenu, setDevice, device, getAvailableForSell, getUserProducts, getBookList, getBlogList, }) { useEffect(() => { getAvailableForSell(); getUserProducts(); getBookList({ vod: true }); getBlogList(); window.scroll({ top: 0, behavior: "smooth" }); const width = window.innerWidth; if (width <= 640) { setDevice("mobile"); } if (width > 640 && width < 1024) { setDevice("tablet"); } if (width > 1024) { setDevice("desktop"); } }, []); React.useEffect(() => { window.addEventListener("resize", () => { const width = window.innerWidth; if (width <= 640) { if (device === "mobile") { return; } else { setDevice("mobile"); } } if (width > 640 && width < 1024) { if (device === "tablet") { return; } else { setDevice("tablet"); } } if (width > 1024) { if (device === "desktop") { return; } else { setDevice("desktop"); } } }); }, [device]); const prevDefault = (e) => { setMenu(); e.stopPropagation(); }; return (
{menu && (
prevDefault(e)} style={{ zIndex: 60 }} >
)} {dialog.open && } {headerOptions?.shown && } {isMobile && ( <> )} } /> } /> } /> {/* } /> */} } /> } /> } /> } /> ) : ( ) } > } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> {isHome ? : }
); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.config.device === "mobile", isHome: state.config.isHome, user: state.user.status, headerOptions: state.publicApi.headerOptions, dialog: state.dialog.dialog, menu: state.menu.open, device: state.config.device, }); const mapDispatchToProps = { setDesktopContentTransform: publicApi.setDesktopContentTransform, setMenu: menu.set, setDevice: config.setDevice, getAvailableForSell: config.getAvailableForSell, getUserProducts: userProduct.list, getBookList: book.list, getBlogList: blog.list, }; export default connect(mapStateToProps, mapDispatchToProps)(Router);