feat: Refactor old code with delete modal and icons for buttons

src/app/index.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
 
-import { BrowserRouter } from "react-router-dom";
-
 import { Router } from "./router";
 import { CustomTheme } from "@shared";
 import { ThemeProvider } from "@mui/material/styles";
@@ -10,8 +8,7 @@ import { ToastContainer } from "react-toastify";
 export const App: React.FC = () => (
   <ThemeProvider theme={CustomTheme.Light}>
     <ToastContainer />
-    <BrowserRouter>
-      <Router />
-    </BrowserRouter>
+
+    <Router />
   </ThemeProvider>
 );

src/app/router/index.tsx

@@ -9,37 +9,45 @@ import {
   MediaListPage,
   PreviewMediaPage,
   EditMediaPage,
-  // CreateMediaPage,
 } from "@pages";
 import { authStore, createSightStore, editSightStore } from "@shared";
 import { Layout } from "@widgets";
 import { runInAction } from "mobx";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
-import { Navigate, Outlet, Route, Routes, useLocation } from "react-router-dom";
+import {
+  createBrowserRouter,
+  RouterProvider,
+  Navigate,
+  Outlet,
+  useLocation,
+} from "react-router-dom";
 
 const PublicRoute = ({ children }: { children: React.ReactNode }) => {
   const { isAuthenticated } = authStore;
   if (isAuthenticated) {
-    return <Navigate to="/sight" />;
+    return <Navigate to="/sight" replace />;
   }
-  return children;
+  return <>{children}</>;
 };
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   const { isAuthenticated } = authStore;
-  const pathname = useLocation();
+  const location = useLocation();
   if (!isAuthenticated) {
-    return <Navigate to="/login" />;
+    return <Navigate to="/login" replace />;
   }
-  if (pathname.pathname === "/") {
-    return <Navigate to="/sight" />;
+  if (location.pathname === "/") {
+    return <Navigate to="/sight" replace />;
   }
-  return children;
+  return <>{children}</>;
 };
 
-export const Router = () => {
-  const pathname = useLocation();
+// Чтобы очистка сторов происходила при смене локации
+const ClearStoresWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const location = useLocation();
 
   useEffect(() => {
     editSightStore.clearSightInfo();
@@ -47,41 +55,46 @@ export const Router = () => {
     runInAction(() => {
       editSightStore.hasLoadedCommon = false;
     });
-  }, [pathname]);
+  }, [location]);
 
-  return (
-    <Routes>
-      <Route
-        path="/login"
-        element={
-          <PublicRoute>
-            <LoginPage />
-          </PublicRoute>
-        }
-      />
-
-      {/* Protected routes with layout */}
-      <Route
-        path="/"
-        element={
-          <ProtectedRoute>
-            <Layout>
-              <Outlet />
-            </Layout>
-          </ProtectedRoute>
-        }
-      >
-        <Route index element={<MainPage />} />
-        <Route path="sight" element={<SightPage />} />
-        <Route path="sight/:id" element={<EditSightPage />} />
-        <Route path="sight/create" element={<CreateSightPage />} />
-        <Route path="devices" element={<DevicesPage />} />
-        <Route path="map" element={<MapPage />} />
-        <Route path="media" element={<MediaListPage />} />
-        <Route path="media/:id" element={<PreviewMediaPage />} />
-        <Route path="media/:id/edit" element={<EditMediaPage />} />
-        {/* <Route path="media/create" element={<CreateMediaPage />} /> */}
-      </Route>
-    </Routes>
-  );
+  return <>{children}</>;
+};
+
+const router = createBrowserRouter([
+  {
+    path: "/login",
+    element: (
+      <PublicRoute>
+        <LoginPage />
+      </PublicRoute>
+    ),
+  },
+  {
+    path: "/",
+    element: (
+      <ProtectedRoute>
+        <Layout>
+          <ClearStoresWrapper>
+            <Outlet />
+          </ClearStoresWrapper>
+        </Layout>
+      </ProtectedRoute>
+    ),
+    children: [
+      { index: true, element: <MainPage /> },
+      { path: "sight", element: <SightPage /> },
+      { path: "sight/create", element: <CreateSightPage /> },
+      { path: "sight/:id", element: <EditSightPage /> },
+      { path: "devices", element: <DevicesPage /> },
+      { path: "map", element: <MapPage /> },
+      { path: "media", element: <MediaListPage /> },
+      { path: "media/:id", element: <PreviewMediaPage /> },
+      { path: "media/:id/edit", element: <EditMediaPage /> },
+      // { path: "media/create", element: <CreateMediaPage /> },
+    ],
+  },
+]);
+
+export const Router = () => {
+  return <RouterProvider router={router} />;
 };