UserView и Grid перенесены на tsx, поля фамилии и имени поменяны местами

src/components/Grid.jsx

@@ -1,39 +0,0 @@
-export const Grid = ({children, style, ...other}) => {
-  const gridContainerStyle = {
-    display: 'grid',
-    margin: '8px',
-    justifyItems: 'stretch',
-    alignItems: 'stretch',
-    ...style,
-  }
-
-  return <div style={gridContainerStyle} {...other}>
-    {children}
-  </div>
-}
-
-export const GridItem = ({children, row, col, rowSpan, colSpan, style, ...other}) => {
-  const localRow = +row
-  const localCol = +col
-  const localColSpan = colSpan ? colSpan - 1 : 0
-  const localRowSpan = rowSpan ? rowSpan - 1 : 0
-  const gridItemStyle = {
-    gridColumnStart: localCol,
-    gridColumnEnd: localCol + localColSpan,
-    gridRowStart: localRow,
-    gridRowEnd: localRow + localRowSpan,
-    padding: '4px',
-    ...style,
-  }
-
-  return <div style={gridItemStyle} {...other}>
-    {children}
-  </div>
-}
-
-export const Flex = ({children, style, ...other}) => 
-  <div
-  style={{display:'flex', ...style}}
-  {...other}>
-    {children}
-  </div>

src/components/Grid.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+interface ComponentProps {
+  children?: React.ReactNode
+  style?: React.CSSProperties
+  [other: string]: any
+}
+
+interface GridItemProps extends ComponentProps {
+  children?: React.ReactNode
+  style?: React.CSSProperties
+  row: number
+  col: number
+  rowSpan?: number
+  colSpan?: number
+}
+
+const gridDefaultStyle = {
+  display: 'grid',
+  margin: '8px',
+  justifyItems: 'stretch',
+  alignItems: 'stretch',
+}
+
+export const Grid = ({ children, style, ...other }: ComponentProps) => (
+  <div style={{...gridDefaultStyle, ...style}} {...other}>
+    {children}
+  </div>
+)
+
+export const GridItem = ({ children, row, col, rowSpan, colSpan, style, ...other }: GridItemProps) => {
+  const localRow = +row
+  const localCol = +col
+  const localColSpan = colSpan ? colSpan - 1 : 0
+  const localRowSpan = rowSpan ? rowSpan - 1 : 0
+  const gridItemStyle = {
+    gridColumnStart: localCol,
+    gridColumnEnd: localCol + localColSpan,
+    gridRowStart: localRow,
+    gridRowEnd: localRow + localRowSpan,
+    padding: '4px',
+    ...style,
+  }
+
+  return <div style={gridItemStyle} {...other}>
+    {children}
+  </div>
+}
+
+export const Flex = ({ children, style, ...other } : ComponentProps) => (
+  <div style={{ display: 'flex', ...style }} {...other}>
+    {children}
+  </div>
+)

src/components/UserView.jsx

@@ -1,43 +0,0 @@
-import {Tooltip} from 'antd'
-import {UserOutlined} from '@ant-design/icons'
-import {Grid, GridItem} from './Grid'
-
-export const UserView = ({user}) => {
-  if(!user)
-    return <Tooltip title='нет пользователя'>-</Tooltip>
-
-  const displayName = user?.login
-
-  const tooltipInfo = <Grid columnGap='8px'>
-    <GridItem row={1} col={1}>
-      Имя:
-    </GridItem>
-    <GridItem row={1} col={2}>
-      {user?.name}
-    </GridItem>
-    <GridItem row={2} col={1}>
-      Фамилия:
-    </GridItem>
-    <GridItem row={2} col={2}>
-      {user?.surname}
-    </GridItem>
-    <GridItem row={3} col={1}>
-      Отчество:
-    </GridItem>
-    <GridItem row={3} col={2}>
-      {user?.patronymic}
-    </GridItem>
-    <GridItem row={4} col={1}>
-      Компания:
-    </GridItem>
-    <GridItem row={4} col={2}>
-      {user?.company?.caption}
-    </GridItem>
-  </Grid>
-
-  return <Tooltip title={tooltipInfo}>
-    <UserOutlined style={{marginRight:8}}/>
-    {displayName}
-  </Tooltip>
-  
-}

src/components/UserView.tsx

@@ -0,0 +1,29 @@
+import {Tooltip} from 'antd'
+import { UserOutlined } from '@ant-design/icons'
+import { Grid, GridItem } from './Grid'
+import { UserDto } from '../services/api'
+
+interface UserViewProps {
+  user: UserDto
+}
+
+export const UserView = ({ user } : UserViewProps) => (user ? (
+    <Tooltip title={(
+      <Grid columnGap='8px'>
+        <GridItem row={1} col={1}>Фамилия:</GridItem>
+        <GridItem row={1} col={2}>{user?.surname}</GridItem>
+        <GridItem row={2} col={1}>Имя:</GridItem>
+        <GridItem row={2} col={2}>{user?.name}</GridItem>
+        <GridItem row={3} col={1}>Отчество:</GridItem>
+        <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
+        <GridItem row={4} col={1}>Компания:</GridItem>
+        <GridItem row={4} col={2}>{user?.company?.caption}</GridItem>
+      </Grid>
+    )}>
+      <UserOutlined style={{ marginRight: 8 }}/>
+      {user?.login}
+    </Tooltip>
+  ) : (
+    <Tooltip title='нет пользователя'>-</Tooltip>
+  )
+)