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

This commit is contained in:
2025-06-04 20:19:06 +03:00
parent 078f051e8a
commit 89488d9921
27 changed files with 2070 additions and 476 deletions

View File

@ -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>
);

View File

@ -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} />;
};