application_17/src/router.js

import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Navigate } from "react-router-dom";
import { connect } from "react-redux";
import { publicApi, menu, config } from "./redux/actions";
import Navbar from "./components/Navbar";
import BG from "./components/BG";
import BottomNavigation from "./components/BottomNavigation";

import _ from "lodash";
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 FooterDesign1 from "./components/Footer";
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";

function Router({
  isDark,
  isMobile,
  headerOptions,
  dialog,
  menu,
  setMenu,
  setDevice,
  device,
}) {
  useEffect(() => {
    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={_.join(
          [
            "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 />
            </>
          )}
          <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="*"
              exact
              element={
                <NotFound
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    back: false,
                    shown: true,
                    menu: true,
                  }}
                />
              }
            />
          </Routes>
          {!isMobile && <FooterDesign1 hasHeader />}
        </BrowserRouter>
      </div>
    </div>
  );
}

const mapStateToProps = (state) => ({
  isDark: state.publicApi.isDark,
  isMobile: state.config.device === "mobile",
  isLogin: 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,
};

export default connect(mapStateToProps, mapDispatchToProps)(Router);