|
|
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 ( |
|
|
<div className={`${isDark ? "dark" : ""}`}> |
|
|
<div |
|
|
className={`min-h-screen min-w-screen rtl overflow-x-hidden lg:py-0 ${ |
|
|
isDark ? "" : "bg-white" |
|
|
} ${headerOptions?.shown ? "pt-16" : "pt-0"}`} |
|
|
> |
|
|
{menu && ( |
|
|
<div |
|
|
className="h-full w-screen fixed top-0 left-0 bg-opacity-0" |
|
|
onClick={(e) => prevDefault(e)} |
|
|
style={{ zIndex: 60 }} |
|
|
></div> |
|
|
)} |
|
|
{dialog.open && <Dialog />} |
|
|
<BrowserRouter> |
|
|
{headerOptions?.shown && <Navbar headerOptions={headerOptions} />} |
|
|
|
|
|
{isMobile && ( |
|
|
<> |
|
|
<BG /> |
|
|
<BottomNavigation user={user} /> |
|
|
</> |
|
|
)} |
|
|
<Routes> |
|
|
<Route |
|
|
path="/" |
|
|
exact |
|
|
element={ |
|
|
<Home |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route path="/login" exact element={<Auth page="login" />} /> |
|
|
<Route |
|
|
path="/signup" |
|
|
exact |
|
|
element={ |
|
|
<Auth |
|
|
page="signup" |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: isMobile ? true : false, |
|
|
menu: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
{/* <Route path="/profile" exact element={<Auth page="profile" />} /> */} |
|
|
<Route |
|
|
path="/products" |
|
|
exact |
|
|
element={ |
|
|
<Products |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/products/:id" |
|
|
exact |
|
|
element={ |
|
|
<Product |
|
|
headerOptions={{ |
|
|
shown: true, |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
title: false, |
|
|
back: true, |
|
|
menu: false, |
|
|
bookmark: "productId", |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/cart" |
|
|
exact |
|
|
element={ |
|
|
<ShoppingCart |
|
|
headerOptions={{ |
|
|
shown: true, |
|
|
title: isMobile && "سبد خرید", |
|
|
back: isMobile && true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/cart/delivery-form" |
|
|
exact |
|
|
element={ |
|
|
<DeliveryForm |
|
|
headerOptions={{ |
|
|
shown: true, |
|
|
title: "سبد خرید", |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/videos" |
|
|
exact |
|
|
element={ |
|
|
isMobile ? ( |
|
|
<Videos |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
}} |
|
|
/> |
|
|
) : ( |
|
|
<Navigate replace to="/products" /> |
|
|
) |
|
|
} |
|
|
></Route> |
|
|
<Route |
|
|
path="/videos/:id" |
|
|
exact |
|
|
element={ |
|
|
<Video |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: false, |
|
|
back: true, |
|
|
shown: true, |
|
|
menu: true, |
|
|
bookmark: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/videos/:id/display" |
|
|
exact |
|
|
element={ |
|
|
<VideoDisplay |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: false, |
|
|
back: true, |
|
|
shown: true, |
|
|
menu: true, |
|
|
bookmark: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/scan" |
|
|
exact |
|
|
element={ |
|
|
<QR |
|
|
headerOptions={{ |
|
|
shown: "false", |
|
|
}} |
|
|
page="scan" |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/scan/:id" |
|
|
exact |
|
|
element={ |
|
|
<QR |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: false, |
|
|
back: true, |
|
|
shown: true, |
|
|
menu: true, |
|
|
bookmark: false, |
|
|
}} |
|
|
page="content" |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/Orders" |
|
|
exact |
|
|
element={ |
|
|
<Orders |
|
|
headerOptions={{ |
|
|
shown: true, |
|
|
title: "سفارشات من", |
|
|
back: true, |
|
|
logo: false, |
|
|
menu: false, |
|
|
hamburgerMenu: false, |
|
|
bookmark: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/orders/order" |
|
|
exact |
|
|
element={ |
|
|
<Order |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: false, |
|
|
qr: true, |
|
|
title: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/activation" |
|
|
exact |
|
|
element={ |
|
|
<Activation |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/faq" |
|
|
exact |
|
|
element={ |
|
|
<Faq |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/contact-us" |
|
|
exact |
|
|
element={ |
|
|
<Contact |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/about-us" |
|
|
exact |
|
|
element={ |
|
|
<About |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/dashboard" |
|
|
exact |
|
|
element={ |
|
|
<Dashboard |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/editProfile" |
|
|
exact |
|
|
element={ |
|
|
<Address |
|
|
profilePage={true} |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: "مشخصات کاربری", |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/editAddress/:id" |
|
|
exact |
|
|
element={ |
|
|
<Address |
|
|
editPage={true} |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: "ویرایش آدرس", |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/createAddress" |
|
|
exact |
|
|
element={ |
|
|
<Address |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: "آدرس جدید", |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/favorites" |
|
|
exact |
|
|
element={ |
|
|
<Favorites |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: "علاقهمندیها", |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/addresses" |
|
|
exact |
|
|
element={ |
|
|
<Addresses |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: "آدرس ها", |
|
|
shown: true, |
|
|
menu: false, |
|
|
back: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/ar" |
|
|
exact |
|
|
element={ |
|
|
<AR |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/blogs" |
|
|
exact |
|
|
element={ |
|
|
<Blogs |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: true, |
|
|
menu: false, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/blogs/:id" |
|
|
exact |
|
|
element={ |
|
|
<Blog |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: false, |
|
|
back: true, |
|
|
shown: true, |
|
|
menu: false, |
|
|
bookmark: "contentId", |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="/profile" |
|
|
exact |
|
|
element={ |
|
|
<Profile |
|
|
headerOptions={{ |
|
|
logo: false, |
|
|
hamburgerMenu: false, |
|
|
qr: false, |
|
|
title: false, |
|
|
back: true, |
|
|
shown: true, |
|
|
menu: false, |
|
|
// bookmark: "contentId", |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
<Route |
|
|
path="*" |
|
|
exact |
|
|
element={ |
|
|
<NotFound |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
hamburgerMenu: true, |
|
|
qr: true, |
|
|
title: false, |
|
|
back: false, |
|
|
shown: true, |
|
|
menu: true, |
|
|
}} |
|
|
/> |
|
|
} |
|
|
/> |
|
|
</Routes> |
|
|
{isHome ? <MainFooter hasHeader /> : <SimpleFooter />} |
|
|
</BrowserRouter> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
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);
|
|
|
|
