Косметические улучшения

src/components/Private/PrivateMenuItem.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
-import { Menu } from 'antd'
+import { Menu, MenuItemProps } from 'antd'
 import { Role, Permission, hasPermission, isInRole } from '../../utils/permissions'
 
 
-type PrivateMenuItemProps = {
+type PrivateMenuItemProps = MenuItemProps & {
     roles?: Role[] | Role
     permission?: Permission
-    [props: string]: any
 }
 
-export const PrivateMenuItem: React.FC<PrivateMenuItemProps> = ({ roles, permission, mixing, ...props }) =>
+export const PrivateMenuItem: React.FC<PrivateMenuItemProps> = ({ roles, permission, ...props }) =>
     hasPermission(permission) && isInRole(roles) ? <Menu.Item {...props}/> : null
+
+export default PrivateMenuItem

src/components/Private/PrivateRoute.tsx

@@ -1,26 +1,30 @@
-import React from 'react'
+import { FC, ReactNode } from 'react'
-import { StaticContext } from 'react-router'
+import { Location } from 'history'
-import { Route, Redirect, RouteComponentProps } from 'react-router-dom'
+import { Redirect, Route, RouteProps } from 'react-router-dom'
+
 import { Role, Permission, hasPermission, isInRole } from '../../utils/permissions'
 import { getUserToken } from '../../utils/storage'
 
-type PrivateRouteProps = {
+export type PrivateRouteProps = RouteProps & {
     roles: Role[] | Role
     permission?: Permission
-    component?: React.ComponentType<any> | React.ComponentType<RouteComponentProps<any, StaticContext, unknown>>
+    children?: ReactNode
-    children?: React.ReactNode
+    redirect?: (location?: Location<unknown>) => ReactNode
-    [other: string]: any
 }
 
-export const PrivateRoute: React.FC<PrivateRouteProps> = ({ permission, roles, component, children, ...other }) => {
+export const defaultRedirect = (location?: Location<unknown>) => (
+    <Redirect to={{ pathname: '/login', state: { from: location } }} />
+)
+
+export const PrivateRoute: FC<PrivateRouteProps> = ({ permission, roles, component, children, redirect = defaultRedirect, ...other }) => {
     const available = getUserToken() && (hasPermission(permission) && isInRole(roles))
 
     return (
         <Route {...other}
             component={available ? component : undefined}
-            render={({ location }) => available ? children : (
+            render={({ location }) => available ? children : redirect(location)}
-                <Redirect to={{ pathname: '/login', state: { from: location } }} />
-            )}
         />
     )
 }
+
+export default PrivateRoute

src/pages/AdminPanel/ClusterController.jsx

@@ -15,7 +15,7 @@ import { min1 } from '../../utils/validationRules'
 
 import { coordsFixed } from './DepositController'
 
-export default function ClusterController() {
+export const ClusterController = () => {
     const [deposits, setDeposits] = useState([])
     const [clusters, setClusters] = useState([])
     const [showLoader, setShowLoader] = useState(false)
@@ -78,3 +78,5 @@ export default function ClusterController() {
         </LoaderPortal>
     )
 }
+
+export default ClusterController

src/pages/AdminPanel/PermissionController.jsx

@@ -54,6 +54,7 @@ export const PermissionController = () => {
                 size={'small'}
                 columns={columns}
                 dataSource={permissions}
+                pagination={{ showSizeChanger: true }}
                 onRowAdd={makeActionHandler('insert', handlerProps)}
                 onRowEdit={makeActionHandler('put', handlerProps)}
                 onRowDelete={makeActionHandler('delete', handlerProps)}

src/pages/AdminPanel/VisitLog.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 
 import { invokeWebApiWrapperAsync } from '../../components/factory'
 import LoaderPortal from '../../components/LoaderPortal'
@@ -18,11 +18,11 @@ const columns = [
 ]
 
 const pagination = {
-    pageSize: 16,
+    defaultPageSize: 16,
     showSizeChanger: true,
 }
 
-export const VisitLog = () => {
+export const VisitLog = memo(() => {
     const [logData, setLogData] = useState([])
     const [isLoading, setIsLoading] = useState(false)
 
@@ -48,6 +48,6 @@ export const VisitLog = () => {
             />
         </LoaderPortal>
     )
-}
+})
 
 export default VisitLog

src/pages/Documents/index.jsx

@@ -24,14 +24,17 @@ export const documentCategories = [
 
 const getUserCategories = () => documentCategories.filter(cat => isInRole(cat.roles))
 
-export const makeMenuItems = (root, cats) => {
+export const makeMenuItems = (root, cats) => (cats ?? getUserCategories()).map(category => (
-  const categories = cats ?? getUserCategories()
+  <PrivateMenuItem
-  return categories.map(category => (
+    key={`${category.key}`}
-    <PrivateMenuItem className={'ant-menu-item'} key={`${category.key}`} icon={<FolderOutlined/>}>
+    className={'ant-menu-item'}
-      <Link to={{ pathname: `${root}/${category.key}` }}>{category.title}</Link>
+    icon={<FolderOutlined/>}
-    </PrivateMenuItem>
+    permission={category.permission}
-  ))
+    roles={category.roles}
-}
+  >
+    <Link to={{ pathname: `${root}/${category.key}` }}>{category.title}</Link>
+  </PrivateMenuItem>
+))
 
 export const MenuDocuments = memo(({ idWell }) => {
   const { category } = useParams()

src/pages/TelemetryAnalysis/index.jsx

@@ -1,5 +1,5 @@
 import {Layout, Menu} from "antd";
-import {Switch, Link, Route, useParams} from "react-router-dom";
+import {Switch, Link, Route, useParams, Redirect} from "react-router-dom";
 import { FolderOutlined } from "@ant-design/icons";
 import TelemetryAnalysisOperationsSummary from "./TelemetryAnalysisOperationsSummary";
 import TelemetryAnalysisOperationsToInterval from "./TelemetryAnalysisOperationsToInterval";
@@ -14,26 +14,26 @@ export default function TelemetryAnalysis({idWell}) {
 
     return (<>
         <Menu
-            mode="horizontal"
+            mode={'horizontal'}
             selectable={true}
-            className="well_menu"
+            className={'well_menu'}
             selectedKeys={[tab]}>
-                <Menu.Item key="depthToDay" icon={<FolderOutlined />}>
+                <Menu.Item key={'depthToDay'} icon={<FolderOutlined />}>
                     <Link to={`${rootPath}/depthToDay`}>Глубина-день</Link>
                 </Menu.Item>
-                <Menu.Item key="depthToInterval" icon={<FolderOutlined />}>
+                <Menu.Item key={'depthToInterval'} icon={<FolderOutlined />}>
                     <Link to={`${rootPath}/depthToInterval`}>Глубина-интервал</Link>
                 </Menu.Item>
-                <Menu.Item key="operationsSummary" icon={<FolderOutlined />}>
+                <Menu.Item key={'operationsSummary'} icon={<FolderOutlined />}>
                     <Link to={`${rootPath}/operationsSummary`}>Все операции</Link>
-                </Menu.Item>       
+                </Menu.Item>
-                <Menu.Item key="operationsToInterval" icon={<FolderOutlined />}>
+                <Menu.Item key={'operationsToInterval'} icon={<FolderOutlined />}>
                     <Link to={`${rootPath}/operationsToInterval`}>Операции-интервал</Link>
                 </Menu.Item>
         </Menu>
         <Layout>
-            <Content className="site-layout-background">
+            <Content className={'site-layout-background'}>
-            <Switch>            
+            <Switch>
                 <Route path={`${rootPath}/depthToDay`}>
                     <TelemetryAnalysisDepthToDay idWell={idWell}/>
                 </Route>
@@ -46,8 +46,11 @@ export default function TelemetryAnalysis({idWell}) {
                 <Route path={`${rootPath}/operationsToInterval`}>
                     <TelemetryAnalysisOperationsToInterval idWell={idWell}/>
                 </Route>
+                <Route path={`/`}>
+                    <Redirect to={`${rootPath}/depthToDay`} />
+                </Route>
             </Switch>
             </Content>
         </Layout>
     </>)
-}
+}

src/pages/WellOperations/DrillProcessFlow.jsx

@@ -1,12 +1,13 @@
 import { useState, useEffect } from 'react'
 import {
+    EditableTable,
     makeNumericMinMax,
-    makeNumericStartEnd
+    makeNumericStartEnd,
 } from '../../components/Table'
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
-import { EditableTable } from '../../components/Table'
 import { DrillFlowChartService } from '../../services/api'
+import { arrayOrDefault } from '../../utils'
 
 const columns = [
     makeNumericStartEnd('Глубина, м', 'depth'),
@@ -17,14 +18,14 @@ const columns = [
     makeNumericMinMax('Расход, л/с', 'flow')
 ]
 
-export const DrillProcessFlow = ({idWell}) => {
+export const DrillProcessFlow = ({ idWell }) => {
     const [flows, setFlows] = useState([])
     const [showLoader, setShowLoader] = useState(false)
 
     const updateFlows = () => invokeWebApiWrapperAsync(
         async () => {
             const flows = await DrillFlowChartService.get(idWell)
-            setFlows(Array.isArray(flows) ? flows : [])
+            setFlows(arrayOrDefault(flows))
         },
         setShowLoader,
         'Не удалось загрузить режимно-технологическую карту скважины'