asb_cloud_front/src/pages/Well.jsx

import { createContext, 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 { PrivateMenu, PrivateSwitch } from '@components/Private'

import Report from './Report'
import Measure from './Measure'
import Analytics from './Analytics'
import Documents from './Documents'
import Telemetry from './Telemetry'
import WellOperations from './WellOperations'
import DrillingProgram from './DrillingProgram'
import TelemetryAnalysis from './TelemetryAnalysis'
import { RootPathContext } from './Main'

import '@styles/index.css'

const { Content } = Layout

export const IdWellContext = createContext(null)

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={'report'} icon={<FilePdfOutlined />} title={'Рапорт'} />
          <PrivateMenu.Link key={'analytics'} icon={<DeploymentUnitOutlined />} title={'Аналитика'} />
          <PrivateMenu.Link key={'operations'} icon={<FolderOutlined />} title={'Операции по скважине'} />
          {/* <PrivateMenu.Link key={'telemetryAnalysis'} icon={<FundProjectionScreenOutlined />} 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', 'report', 'analytics', 'operations', 'telemetryAnalysis', 'document', 'measure', 'drillingProgram']}>
                <Telemetry key={'telemetry/:tab?'} />
                <Report key={'report'} />
                <Analytics key={'analytics/:tab?'} />
                <WellOperations key={'operations/:tab?'} />
                <TelemetryAnalysis key={'telemetryAnalysis/:tab?'} />
                <Documents key={'document/:category?'} />
                <Measure key={'measure'} />
                <DrillingProgram key={'drillingProgram'} />
              </PrivateSwitch>
            </Content>
          </Layout>
        </IdWellContext.Provider>
      </Layout>
    </RootPathContext.Provider>
  )
})

export default Well