WellTreeSelector перенесён в TSX

src/components/PageHeader.jsx

@@ -13,7 +13,7 @@ export default function PageHeader({title='Мониторинг', wellsList}){
     localStorage.removeItem('login')
     localStorage.removeItem('token')
   }
-  
+
   return(
     <Layout>
       <Header className="header">
@@ -23,7 +23,7 @@ export default function PageHeader({title='Мониторинг', wellsList}){
         <WellTreeSelector wellsList={wellsList}/>
         <h1 className="title">{title}</h1>
         <Link to="/login" onClick={handleLogout}>
-          <Button icon={<UserOutlined/>}>            
+          <Button icon={<UserOutlined/>}>
           ({login}) Выход
           </Button>
         </Link>

src/components/WellTreeSelector.jsx

@@ -1,73 +0,0 @@
-import { TreeSelect } from 'antd'
-import { useState, useEffect } from 'react'
-import { useHistory, useRouteMatch } from 'react-router-dom'
-import LoaderPortal from './LoaderPortal'
-import { DepositService } from '../services/api'
-import { invokeWebApiWrapperAsync } from './factory'
-import '../styles/wellTreeSelect.css'
-import WellIcon from './icons/WellIcon'
-import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg'
-import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg'
-
-export const getWellState = (idState) => idState === 1 ? 'active' : 'unknown'
-export const checkIsWellOnline = (lastTelemetryDate) => {
-    if (!lastTelemetryDate) return false
-    return Date.now() - new Date(lastTelemetryDate) < 600_000
-}
-
-export default function WellTreeSelector() {
-    const [wellsTree, setWellsTree] = useState([])
-    const [showLoader, setShowLoader] = useState(false)
-    const history = useHistory()
-    const routeMatch = useRouteMatch('/:route/:id')
-
-    useEffect(() => invokeWebApiWrapperAsync(
-        async () => {
-            const deposits = await DepositService.getDeposits()
-            const wellsTree = deposits.map(deposit =>({
-                title: deposit.caption,
-                key: `/deposit/${deposit.id}`,
-                value: `/deposit/${deposit.id}`,
-                icon: <DepositIcon width={24} height={24}/>,
-                children: deposit.clusters.map(cluster => ({
-                    title: cluster.caption,
-                    key: `/cluster/${cluster.id}`,
-                    value: `/cluster/${cluster.id}`,
-                    icon: <ClusterIcon width={24} height={24}/>,
-                    children: cluster.wells.map(well => ({
-                        title: well.caption,
-                        key: `/well/${well.id}`,
-                        value: `/well/${well.id}`,
-                        icon: <WellIcon
-                            width={24}
-                            height={24}
-                            state={getWellState(well.idState)}
-                            online={checkIsWellOnline(well.lastTelemetryDate)}
-                        />
-                    })),
-                })),
-            }))
-            setWellsTree(wellsTree)
-        },
-        setShowLoader,
-        `Не удалось загрузить список скважин`
-    ), [])
-
-    const onSelect = (value) => value && history.push(value)
-
-    return (
-        <LoaderPortal show={showLoader}>
-            <TreeSelect
-                treeIcon
-                className={'header-tree-select'}
-                bordered={false}
-                dropdownMatchSelectWidth={false}
-                placeholder={'Выберите месторождение'}
-                treeData={wellsTree}
-                treeDefaultExpandAll
-                onSelect={onSelect}
-                value = {routeMatch?.url}
-            />
-        </LoaderPortal>
-    )
-}

src/components/WellTreeSelector.tsx

@@ -0,0 +1,88 @@
+import { TreeSelect } from 'antd'
+import { useState, useEffect } from 'react'
+import { useHistory, useRouteMatch } from 'react-router-dom'
+import LoaderPortal from './LoaderPortal'
+import { DepositService } from '../services/api'
+import { invokeWebApiWrapperAsync } from './factory'
+import '../styles/wellTreeSelect.css'
+import { WellIcon, WellIconState } from './icons/WellIcon'
+import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg'
+import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg'
+import { DepositDto } from '../services/api'
+
+export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown'
+export const checkIsWellOnline = (lastTelemetryDate?: string | number | Date | null): boolean => {
+    if (!lastTelemetryDate) return false
+    return Date.now() - +new Date(lastTelemetryDate) < 600_000
+}
+
+interface TreeNodeData {
+    title?: string | null
+    key?: string
+    value?: string
+    icon?: React.ReactNode
+    children?: TreeNodeData[]
+}
+
+export const WellTreeSelector = (): React.ReactNode => {
+    const [wellsTree, setWellsTree] = useState<TreeNodeData[]>([])
+    const [showLoader, setShowLoader] = useState<boolean>(false)
+    const history = useHistory()
+    const routeMatch = useRouteMatch('/:route/:id')
+
+    useEffect(() => {
+        invokeWebApiWrapperAsync(
+            async () => {
+                const deposits: Array<DepositDto> = await DepositService.getDeposits()
+                const wellsTree: TreeNodeData[] = deposits.map(deposit =>({
+                    title: deposit.caption,
+                    key: `/deposit/${deposit.id}`,
+                    value: `/deposit/${deposit.id}`,
+                    icon: <DepositIcon width={24} height={24}/>,
+                    children: deposit.clusters?.map(cluster => ({
+                        title: cluster.caption,
+                        key: `/cluster/${cluster.id}`,
+                        value: `/cluster/${cluster.id}`,
+                        icon: <ClusterIcon width={24} height={24}/>,
+                        children: cluster.wells?.map(well => ({
+                            title: well.caption,
+                            key: `/well/${well.id}`,
+                            value: `/well/${well.id}`,
+                            icon: <WellIcon
+                                width={24}
+                                height={24}
+                                state={getWellState(well.idState)}
+                                online={checkIsWellOnline(well.lastTelemetryDate)}
+                            />
+                        })),
+                    })),
+                }))
+                setWellsTree(wellsTree)
+            },
+            setShowLoader,
+            `Не удалось загрузить список скважин`
+        )
+    }, [])
+
+    const onSelect = (value: string): void => {
+        if (value) history.push(value)
+    }
+
+    return (
+        <LoaderPortal show={showLoader}>
+            <TreeSelect
+                treeIcon
+                className={'header-tree-select'}
+                bordered={false}
+                dropdownMatchSelectWidth={false}
+                placeholder={'Выберите месторождение'}
+                treeData={wellsTree}
+                treeDefaultExpandAll
+                onSelect={onSelect}
+                value = {routeMatch?.url}
+            />
+        </LoaderPortal>
+    )
+}
+
+export default WellTreeSelector

src/components/icons/WellIcon.tsx

@@ -1,17 +1,19 @@
 import React from 'react'
 
-type WellIconColors = {
+export type WellIconState = 'active' | 'inactive' | 'unknown'
+
+export type WellIconColors = {
     online?: string
     active?: string
     inactive?: string
     unknown?: string
 }
 
-interface WellIconProps {
+export interface WellIconProps {
     width?: string | number
     height?: string | number
     online?: boolean
-    state?: 'active' | 'inactive' | 'unknown'
+    state?: WellIconState
     colors?: WellIconColors
 }