Rewrote DateFilter to tsx format and fixed sonar issues (#2240)

* rewrote DateFilter to tsx

* extended DesktopDatePickerProps

src/components/enhanced-table/date-filter/DateFilter.constants.ts

@@ -0,0 +1,35 @@
+export type Placement =
+  | 'auto-end'
+  | 'auto-start'
+  | 'auto'
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'left-end'
+  | 'left-start'
+  | 'left'
+  | 'right-end'
+  | 'right-start'
+  | 'right'
+  | 'top-end'
+  | 'top-start'
+  | 'top'
+
+export const datePickersOptions: {
+  placement: Placement
+  direction: 'from' | 'to'
+}[] = [
+  {
+    placement: 'bottom-end',
+    direction: 'from'
+  },
+  {
+    placement: 'bottom-start',
+    direction: 'to'
+  }
+]
+
+export const initialState: { from: boolean; to: boolean } = {
+  from: false,
+  to: false
+}

src/components/enhanced-table/date-filter/DateFilter.jsx → src/components/enhanced-table/date-filter/DateFilter.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { format } from 'date-fns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
@@ -9,21 +9,43 @@ import IconButton from '@mui/material/IconButton'
 import ClearIcon from '@mui/icons-material/Clear'
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
 
-import { initialState, datePickersOptions } from './constants'
+import { initialState, datePickersOptions } from './DateFilter.constants'
 import { styles } from './DateFilter.styles'
 
-const DateFilter = ({ filter, setFilter, clearFilter }) => {
-  const [open, setOpen] = useState(initialState)
+interface Filter {
+  from: string | null
+  to: string | null
+}
+
+interface OpenState {
+  from: boolean
+  to: boolean
+}
+
+export interface DateFilterProps {
+  filter: Filter
+  setFilter: (filter: Filter) => void
+  clearFilter: () => void
+}
+
+const DateFilter: React.FC<DateFilterProps> = ({
+  filter,
+  setFilter,
+  clearFilter
+}) => {
+  const [open, setOpen] = useState<OpenState>(initialState)
 
-  const handleChange = (direction) => (date) => {
-    setFilter({ ...filter, [direction]: format(date, 'yyyy-MM-dd') })
+  const handleChange = (direction: string) => (date: Date | null) => {
+    if (date) {
+      setFilter({ ...filter, [direction]: format(date, 'yyyy-MM-dd') })
+    }
   }
 
-  const handleClose = (direction) => {
+  const handleClose = (direction: string) => {
     setOpen((prev) => ({ ...prev, [direction]: false }))
   }
 
-  const handleOpen = (direction) => {
+  const handleOpen = (direction: string) => {
     setOpen((prev) => ({ ...prev, [direction]: true }))
   }
 

src/types/mui/customTypes.index.ts

@@ -0,0 +1 @@
+export * from '~/types/mui/customTypes/customTypes'

src/types/mui/customTypes/customTypes.d.ts

@@ -0,0 +1,7 @@
+import { TextFieldProps } from '@mui/material/TextField'
+
+declare module '@mui/x-date-pickers/DesktopDatePicker' {
+  interface DesktopDatePickerProps {
+    inputProps?: TextFieldProps['inputProps']
+  }
+}

tests/unit/components/date-filter/DateFilter.spec.jsx

@@ -6,21 +6,18 @@ import DateFilter from '~/components/enhanced-table/date-filter/DateFilter'
 const props = {
   filter: { from: '', to: '' },
   setFilter: vi.fn(),
-  clearFilter: vi.fn(),
+  clearFilter: vi.fn()
 }
 
 const dateMock = new Date('2023-01-01')
 
 describe('DateFilter test', () => {
   beforeEach(() => {
-    render(
-      <DateFilter { ...props } />
-
-    )
+    render(<DateFilter {...props} />)
   })
 
   it('Should open, and change value in calendar', () => {
-    const calendarIcon = screen.getByTestId('calendar-icon') 
+    const calendarIcon = screen.getByTestId('calendar-icon')
 
     fireEvent.click(calendarIcon)
 
@@ -38,12 +35,11 @@ describe('DateFilter test', () => {
   })
 
   it('Should clear value in calendar', async () => {
-
     const dateToInput = screen.getByLabelText('date-filter-to')
 
     fireEvent.change(dateToInput, { target: { value: dateMock } })
 
-    const clearIcon = screen.getByTestId('clear-icon') 
+    const clearIcon = screen.getByTestId('clear-icon')
 
     fireEvent.click(clearIcon)