WhiteNightsAdminPanel/src/app/router/index.tsx

import {
  CreateSightPage,
  DevicesPage,
  EditSightPage,
  LoginPage,
  MainPage,
  SightListPage,
  MapPage,
  MediaListPage,
  MediaPreviewPage,
  MediaEditPage,
  CountryListPage,
  CityListPage,
  RouteListPage,
  UserListPage,
  SnapshotListPage,
  CarrierListPage,
  StationListPage,
  ArticleListPage,
  SnapshotCreatePage,
  CountryCreatePage,
  CityCreatePage,
  CarrierCreatePage,
  VehicleCreatePage,
  VehicleEditPage,
  CountryEditPage,
  CityEditPage,
  UserCreatePage,
  UserEditPage,
  CarrierEditPage,
  StationCreatePage,
  StationPreviewPage,
  StationEditPage,
  RouteCreatePage,
  RoutePreview,
  RouteEditPage,
  ArticlePreviewPage,
  CountryAddPage,
} from "@pages";
import { authStore, createSightStore, editSightStore } from "@shared";
import { Layout } from "@widgets";
import { runInAction } from "mobx";
import React, { useEffect } from "react";

import {
  createBrowserRouter,
  RouterProvider,
  Navigate,
  Outlet,
  useLocation,
} from "react-router-dom";

const PublicRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = authStore;
  const need_auth = import.meta.env.VITE_NEED_AUTH == "true";

  if (isAuthenticated || !need_auth) {
    return <Navigate to="/map" replace />;
  }
  return <>{children}</>;
};

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = authStore;
  const need_auth = import.meta.env.VITE_NEED_AUTH == "true";

  const location = useLocation();

  if (!isAuthenticated && need_auth) {
    return <Navigate to="/login" replace />;
  }

  if (location.pathname === "/") {
    return <Navigate to="/map" replace />;
  }

  return <>{children}</>;
};

const ClearStoresWrapper: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const location = useLocation();

  useEffect(() => {
    editSightStore.clearSightInfo();
    createSightStore.clearCreateSight();
    runInAction(() => {
      editSightStore.hasLoadedCommon = false;
    });
  }, [location]);

  return <>{children}</>;
};

const router = createBrowserRouter([
  {
    path: "/login",
    element: (
      <PublicRoute>
        <LoginPage />
      </PublicRoute>
    ),
  },
  { path: "route-preview/:id", element: <RoutePreview /> },
  {
    path: "/",
    element: (
      <ProtectedRoute>
        <Layout>
          <ClearStoresWrapper>
            <Outlet />
          </ClearStoresWrapper>
        </Layout>
      </ProtectedRoute>
    ),
    children: [
      { index: true, element: <MainPage /> },

      { path: "sight", element: <SightListPage /> },
      { path: "sight/create", element: <CreateSightPage /> },
      { path: "sight/:id/edit", element: <EditSightPage /> },

      { path: "devices", element: <DevicesPage /> },

      { path: "map", element: <MapPage /> },

      { path: "media", element: <MediaListPage /> },
      { path: "media/:id", element: <MediaPreviewPage /> },
      { path: "media/:id/edit", element: <MediaEditPage /> },

      { path: "country", element: <CountryListPage /> },
      { path: "country/create", element: <CountryCreatePage /> },
      { path: "country/add", element: <CountryAddPage /> },
      { path: "country/:id/edit", element: <CountryEditPage /> },
      { path: "city", element: <CityListPage /> },
      { path: "city/create", element: <CityCreatePage /> },
      { path: "city/:id/edit", element: <CityEditPage /> },
      { path: "route", element: <RouteListPage /> },
      { path: "route/create", element: <RouteCreatePage /> },
      { path: "route/:id/edit", element: <RouteEditPage /> },

      { path: "user", element: <UserListPage /> },
      { path: "user/create", element: <UserCreatePage /> },
      { path: "user/:id/edit", element: <UserEditPage /> },
      { path: "snapshot", element: <SnapshotListPage /> },
      { path: "snapshot/create", element: <SnapshotCreatePage /> },

      { path: "carrier", element: <CarrierListPage /> },
      { path: "carrier/create", element: <CarrierCreatePage /> },
      { path: "carrier/:id/edit", element: <CarrierEditPage /> },
      { path: "station", element: <StationListPage /> },
      { path: "station/create", element: <StationCreatePage /> },
      { path: "station/:id", element: <StationPreviewPage /> },
      { path: "station/:id/edit", element: <StationEditPage /> },
      { path: "vehicle/create", element: <VehicleCreatePage /> },
      { path: "vehicle/:id/edit", element: <VehicleEditPage /> },
      { path: "article", element: <ArticleListPage /> },
      { path: "article/:id", element: <ArticlePreviewPage /> },
    ],
  },
]);

export const Router = () => {
  return <RouterProvider router={router} />;
};