asb_cloud_front/src/pages/Well.jsx

import {
  FolderOutlined,
  FilePdfOutlined,
  ExperimentOutlined,
  DeploymentUnitOutlined,
} from '@ant-design/icons'
import { Layout } from 'antd'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Navigate, Route, Routes, useParams } from 'react-router-dom'

import { WellContext, RootPathContext, useRootPath } from '@asb/context'
import { LayoutPortal } from '@components/Layout'
import { PrivateMenu } from '@components/Private'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { NoAccessComponent, wrapPrivateComponent } from '@utils'
import { WellService } from '@api'

import Measure from './Measure'
import Reports from './Reports'
import WellCase from './WellCase'
import Analytics from './Analytics'
import Documents from './Documents'
import Telemetry from './Telemetry'
import WellOperations from './WellOperations'
import DrillingProgram from './DrillingProgram'

import '@styles/index.css'

const { Content } = Layout

const Well = memo(() => {
  const { idWell } = useParams()

  const [well, setWell] = useState({ id: idWell })

  const root = useRootPath()
  const rootPath = useMemo(() => `${root}/well/${idWell}`, [root, idWell])

  useEffect(() => {
    invokeWebApiWrapperAsync(
      async () => {
        const well = await WellService.get(idWell)
        setWell(well ?? { id: idWell })
      },
      undefined,
      'Не удалось получить данные по скважине'
    )
  }, [idWell])

  const updateWell = useCallback((data) => invokeWebApiWrapperAsync(
      async () => {
        const newWell = { ...well, ...data }
        await WellService.updateWell(newWell)
        setWell(newWell)
      },
      undefined,
      `Не удалось изменить данные скважины`,
      { actionName: 'Изменение данных скважины', well }
  ), [well])

  return (
    <LayoutPortal>
      <RootPathContext.Provider value={rootPath}>
        <PrivateMenu className={'well_menu'}>
          <PrivateMenu.Link content={Telemetry} />
          <PrivateMenu.Link content={Reports} icon={<FilePdfOutlined />} />
          <PrivateMenu.Link content={Analytics} icon={<DeploymentUnitOutlined />} />
          <PrivateMenu.Link content={WellOperations} icon={<FolderOutlined />} />
          <PrivateMenu.Link content={Documents} icon={<FolderOutlined />} />
          <PrivateMenu.Link content={Measure} icon={<ExperimentOutlined />} />
          <PrivateMenu.Link content={DrillingProgram} icon={<FolderOutlined />} />
          <PrivateMenu.Link content={WellCase} icon={<FolderOutlined />} />
        </PrivateMenu>

        <WellContext.Provider value={[well, updateWell]}>
          <Layout>
            <Content className={'site-layout-background'}>
              <Routes>
                <Route index element={<Navigate to={Telemetry.getKey()} replace />} />
                <Route path={'*'} element={<NoAccessComponent />} />

                <Route path={Telemetry.route} element={<Telemetry />} />
                <Route path={Reports.route} element={<Reports />} />
                <Route path={Analytics.route} element={<Analytics />} />
                <Route path={WellOperations.route} element={<WellOperations />} />
                <Route path={Documents.route} element={<Documents />} />
                <Route path={Measure.route} element={<Measure />} />
                <Route path={DrillingProgram.route} element={<DrillingProgram />} />
                <Route path={WellCase.route} element={<WellCase />} />
              </Routes>
            </Content>
          </Layout>
        </WellContext.Provider>
      </RootPathContext.Provider>
    </LayoutPortal>
  )
})

export default wrapPrivateComponent(Well, {
  requirements: [],
  title: 'Скважина',
  route: 'well/:idWell/*',
  key: 'well',
})