refactor: Перенос логики UI в useMainLayout

Удален useMainLayoutUI и перенесена логика в useMainLayout.

.gitignore

@@ -1 +1,30 @@
 /api/.env
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+
+*/.dist/*
+*/.idea/*
+*/uploads/*

web-app/src/Components/Layouts/MainLayout.jsx

@@ -1,4 +1,4 @@
-import {Alert, Layout, Menu, Result} from "antd";
+import {Layout, Menu, Result} from "antd";
 import {Outlet} from "react-router-dom";
 import {
     HomeOutlined,
@@ -11,33 +11,31 @@ import {
     MessageOutlined, ControlOutlined
 } from "@ant-design/icons";
 import useMainLayout from "./useMainLayout.js";
-import useMainLayoutUI from "./useMainLayoutUI.js";
 import LoadingIndicator from "../Widgets/LoadingIndicator/LoadingIndicator.jsx";
 
 const {Content, Footer, Sider} = Layout;
 
 const MainLayout = () => {
     const mainLayoutData = useMainLayout();
-    const mainLayoutUI = useMainLayoutUI(mainLayoutData.user);
 
     const menuItems = [
-        mainLayoutUI.getItem("Главная", "/", <HomeOutlined/>),
+        mainLayoutData.getItem("Главная", "/", <HomeOutlined/>),
-        mainLayoutUI.getItem("Приёмы", "/appointments", <CalendarOutlined/>),
+        mainLayoutData.getItem("Приёмы", "/appointments", <CalendarOutlined/>),
-        mainLayoutUI.getItem("Выдачи линз", "/issues", <DatabaseOutlined/>),
+        mainLayoutData.getItem("Выдачи линз", "/issues", <DatabaseOutlined/>),
-        mainLayoutUI.getItem("Линзы и наборы", "/Lenses", <FolderViewOutlined/>),
+        mainLayoutData.getItem("Линзы и наборы", "/Lenses", <FolderViewOutlined/>),
-        mainLayoutUI.getItem("Пациенты", "/Patients", <TeamOutlined/>),
+        mainLayoutData.getItem("Пациенты", "/Patients", <TeamOutlined/>),
-        mainLayoutUI.getItem("Рассылки", "/mailing", <MessageOutlined/>),
+        mainLayoutData.getItem("Рассылки", "/mailing", <MessageOutlined/>),
         {type: "divider"}
     ];
 
     if (mainLayoutData.user?.role.title === "Администратор") {
-        menuItems.push(mainLayoutUI.getItem("Панель администратора", "/admin", <ControlOutlined/>));
+        menuItems.push(mainLayoutData.getItem("Панель администратора", "/admin", <ControlOutlined/>));
     }
 
     menuItems.push(
-        mainLayoutUI.getItem("Мой профиль", "profile", <UserOutlined/>, [
+        mainLayoutData.getItem("Мой профиль", "profile", <UserOutlined/>, [
-            mainLayoutUI.getItem("Перейти в профиль", "/profile", <UserOutlined/>),
+            mainLayoutData.getItem("Перейти в профиль", "/profile", <UserOutlined/>),
-            mainLayoutUI.getItem("Выйти", "logout", <LogoutOutlined/>)
+            mainLayoutData.getItem("Выйти", "logout", <LogoutOutlined/>)
         ])
     );
 
@@ -48,16 +46,16 @@ const MainLayout = () => {
     return (
         <Layout style={{minHeight: "100vh"}}>
             <Sider
-                collapsible={!mainLayoutUI.screens.xs}
+                collapsible={!mainLayoutData.screens.xs}
-                collapsed={mainLayoutUI.collapsed}
+                collapsed={mainLayoutData.collapsed}
-                onCollapse={mainLayoutUI.setCollapsed}
+                onCollapse={mainLayoutData.setCollapsed}
                 style={{height: "100vh", position: "fixed", left: 0, overflow: "auto"}}
             >
                 <div style={{display: "flex", justifyContent: "center", padding: 16}}>
                     <img
                         src="/logo_rounded.png"
                         alt="Логотип"
-                        style={{width: mainLayoutUI.collapsed ? 40 : 80, transition: "width 0.2s"}}
+                        style={{width: mainLayoutData.collapsed ? 40 : 80, transition: "width 0.2s"}}
                     />
                 </div>
                 <Menu
@@ -65,12 +63,12 @@ const MainLayout = () => {
                     selectedKeys={[location.pathname]}
                     mode="inline"
                     items={menuItems}
-                    onClick={mainLayoutUI.handleMenuClick}
+                    onClick={mainLayoutData.handleMenuClick}
                 />
             </Sider>
 
             <Layout
-                style={{marginLeft: mainLayoutUI.collapsed ? 80 : 200, transition: "margin-left 0.2s"}}
+                style={{marginLeft: mainLayoutData.collapsed ? 80 : 200, transition: "margin-left 0.2s"}}
             >
                 <Content style={{
                     margin: "0 16px",

web-app/src/Components/Layouts/useMainLayout.js

@@ -1,13 +1,33 @@
-import { useSelector } from "react-redux";
+import {useState} from "react";
+import {Grid} from "antd";
+import {useLocation, useNavigate} from "react-router-dom";
+import useAuthUtils from "../../Hooks/useAuthUtils.js";
+import {useSelector} from "react-redux";
+
+
+const {useBreakpoint} = Grid;
+
 
 const useMainLayout = () => {
+    const screens = useBreakpoint();
+
+    const [collapsed, setCollapsed] = useState(true);
+    const navigate = useNavigate();
+    const location = useLocation();
+    const {logoutAndRedirect} = useAuthUtils();
+
     const { userData: user, isLoading: isUserLoading, error: isUserError } = useSelector((state) => state.auth);
 
-    return {
+    const handleMenuClick = ({key}) => {
-        user,
+        if (key === "logout") {
-        isUserLoading,
+            logoutAndRedirect();
-        isUserError,
+            return;
+        }
+        navigate(key);
     };
+    const getItem = (label, key, icon, children) => ({key, icon, children, label});
+
+    return {screens, collapsed, setCollapsed, location, user, isUserLoading, isUserError, handleMenuClick, getItem};
 };
 
 export default useMainLayout;

web-app/src/Components/Layouts/useMainLayoutUI.js

@@ -1,30 +0,0 @@
-import {useState} from "react";
-import {Grid} from "antd";
-import {useLocation, useNavigate} from "react-router-dom";
-import useAuthUtils from "../../Hooks/useAuthUtils.js";
-
-
-const {useBreakpoint} = Grid;
-
-
-const useMainLayoutUI = () => {
-    const screens = useBreakpoint();
-
-    const [collapsed, setCollapsed] = useState(true);
-    const navigate = useNavigate();
-    const location = useLocation();
-    const {logoutAndRedirect} = useAuthUtils();
-
-    const handleMenuClick = ({key}) => {
-        if (key === "logout") {
-            logoutAndRedirect();
-            return;
-        }
-        navigate(key);
-    };
-    const getItem = (label, key, icon, children) => ({key, icon, children, label});
-
-    return {screens, collapsed, setCollapsed, location, handleMenuClick, getItem};
-};
-
-export default useMainLayoutUI;

web-app/src/Components/Pages/AdminPage/AdminPage.jsx

@@ -1,5 +1,5 @@
-import {Table, Button, Result, Typography, Switch} from "antd";
+import {Table, Button, Result, Typography, Switch, Row, Input, Col, Tooltip, FloatButton} from "antd";
-import {ControlOutlined} from "@ant-design/icons";
+import {ControlOutlined, PlusOutlined} from "@ant-design/icons";
 import LoadingIndicator from "../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
 import useAdminPage from "./useAdminPage.js";
 import useAdminPageUI from "./useAdminPageUI.js";
@@ -45,11 +45,11 @@ const AdminPage = () => {
             title: "Заблокирован",
             dataIndex: ["is_blocked"],
             key: "is_blocked",
-            render: (value, record) => (
+            render: (value) => (
                 <Switch
                     value={value}
                     checkedChildren={"Заблокирован"}
-                    unCheckedChildren={"Разблокирован"}
+                    unCheckedChildren={"Не заблокирован"}
                 />
             )
         },
@@ -64,9 +64,8 @@ const AdminPage = () => {
         },
     ];
 
-
     if (adminPageData.isError) {
-        return <Result status="500" title="500" subTitle="Произошла ошибка при загрузке данных"/>
+        return <Result status="500" title="500" subTitle="Произошла ошибка при загрузке данных"/>;
     }
 
     return (
@@ -78,13 +77,11 @@ const AdminPage = () => {
                     <Typography.Title level={1}>
                         <ControlOutlined/> Панель администратора
                     </Typography.Title>
-                    <Button
+                    <Input
-                        type="primary"
+                        placeholder="Введите фамилию, имя или отчество"
-                        onClick={adminPageUI.openCreateModal}
+                        onSearch={adminPageUI.handleSearch}
-                        style={{marginBottom: 16}}
+                        style={{marginBottom: 12}}
-                    >
+                    />
-                        Создать пользователя
-                    </Button>
                     <Table
                         columns={columns}
                         dataSource={adminPageData.users}
@@ -93,6 +90,10 @@ const AdminPage = () => {
                         loading={adminPageData.isLoading}
                     />
 
+                    <Tooltip title="Добавить пользователя">
+                        <FloatButton onClick={adminPageUI.openCreateModal} icon={<PlusOutlined/>} type={"primary"}/>
+                    </Tooltip>
+
                     <CreateUserModalForm/>
                     <UpdateUserModalForm/>
                 </>

web-app/src/Components/Pages/AdminPage/useAdminPage.js

@@ -12,9 +12,6 @@ const useAdminPage = () => {
         pollingInterval: 60000,
     });
 
-    // const [updateUser, { isLoading: isUpdating, isError: isUpdateError }] = useUpdateUserMutation();
-    // const [createUser, { isLoading: isCreating, isError: isCreateError }] = useCreateUserMutation();
-
     return {
         users,
         roles,

web-app/src/Utils/cachedInfoUtils.js

@@ -9,10 +9,4 @@ const getCachedInfo = (key) => {
     return JSON.parse(data);
 };
 
-const getCacheTimestamp = (key) => {
+export {cacheInfo, getCachedInfo};
-    const timestamp = localStorage.getItem(`${key}Timestamp`);
-    if (!timestamp) return null;
-    return parseInt(timestamp);
-};
-
-export {cacheInfo, getCachedInfo, getCacheTimestamp};