asb_cloud_front/src/pages/Well.jsx

import { memo, useContext, useMemo } from 'react'
import {
  FolderOutlined,
  FundViewOutlined,
  FilePdfOutlined,
  ExperimentOutlined,
  DeploymentUnitOutlined,
} from '@ant-design/icons'
import { Layout } from 'antd'
import { useParams } from 'react-router-dom'

import { IdWellContext, RootPathContext } from '@asb/context'
import { PrivateMenu, PrivateSwitch } from '@components/Private'

import Measure from './Measure'
import Reports from './Reports'
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

export const Well = memo(() => {
  const { idWell, tab } = useParams()
  const root = useContext(RootPathContext)
  const rootPath = useMemo(() => `${root}/well/${idWell}`, [root, idWell])

  return (
    <RootPathContext.Provider value={rootPath}>
      <Layout>
        <PrivateMenu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
          <PrivateMenu.Link key={'telemetry'} icon={<FundViewOutlined />} title={'Телеметрия'}/>
          <PrivateMenu.Link key={'reports'} icon={<FilePdfOutlined />} title={'Рапорта'} />
          <PrivateMenu.Link key={'analytics'} icon={<DeploymentUnitOutlined />} title={'Аналитика'} />
          <PrivateMenu.Link key={'operations'} icon={<FolderOutlined />} title={'Операции по скважине'} />
          <PrivateMenu.Link key={'document'} icon={<FolderOutlined />} title={'Документы'} />
          <PrivateMenu.Link key={'measure'} icon={<ExperimentOutlined />} title={'Измерения'} />
          <PrivateMenu.Link key={'drillingProgram'} icon={<FolderOutlined />} title={'Программа бурения'} />
        </PrivateMenu>

        <IdWellContext.Provider value={idWell}>
          <Layout>
            <Content className={'site-layout-background'}>
              <PrivateSwitch elseRedirect={['telemetry', 'reports', 'analytics', 'operations', 'telemetryAnalysis', 'document', 'measure', 'drillingProgram']}>
                <Telemetry key={'telemetry/:tab?'} />
                <Reports key={'reports/:tab?'} />
                <Analytics key={'analytics/:tab?'} />
                <WellOperations key={'operations/:tab?'} />
                <Documents key={'document/:category?'} />
                <Measure key={'measure'} />
                <DrillingProgram key={'drillingProgram'} />
              </PrivateSwitch>
            </Content>
          </Layout>
        </IdWellContext.Provider>
      </Layout>
    </RootPathContext.Provider>
  )
})

export default Well