@@ -6,13 +6,7 @@ import TableCell from '@mui/material/TableCell'
6
6
import TableContainer from '@mui/material/TableContainer'
7
7
import TableHead from '@mui/material/TableHead'
8
8
import TablePagination from '@mui/material/TablePagination'
9
- import {
10
- TextField ,
11
- Link ,
12
- TableSortLabel ,
13
- Checkbox ,
14
- InputLabel ,
15
- } from '@mui/material'
9
+ import { TextField , Link , TableSortLabel , Checkbox , InputLabel } from '@mui/material'
16
10
import TableRow from '@mui/material/TableRow'
17
11
import { debounce } from 'lodash'
18
12
import Paper from '@mui/material/Paper'
@@ -86,36 +80,22 @@ const Head = ({
86
80
order,
87
81
orderBy,
88
82
} : {
89
- onRequestSort : (
90
- event : React . MouseEvent < unknown > ,
91
- property : keyof ChatInstanceWithTokens
92
- ) => void
83
+ onRequestSort : ( event : React . MouseEvent < unknown > , property : keyof ChatInstanceWithTokens ) => void
93
84
order : Order
94
85
orderBy : string
95
86
} ) => {
96
87
const { t } = useTranslation ( )
97
88
98
- const createSortHandler =
99
- ( property : keyof ChatInstanceWithTokens ) =>
100
- ( event : React . MouseEvent < unknown > ) => {
101
- onRequestSort ( event , property )
102
- }
89
+ const createSortHandler = ( property : keyof ChatInstanceWithTokens ) => ( event : React . MouseEvent < unknown > ) => {
90
+ onRequestSort ( event , property )
91
+ }
103
92
104
93
return (
105
94
< TableHead >
106
95
< TableRow >
107
96
{ headCells . map ( ( headCell ) => (
108
- < TableCell
109
- key = { headCell . id }
110
- align = { headCell . numeric ? 'right' : 'left' }
111
- padding = { headCell . disablePadding ? 'none' : 'normal' }
112
- sx = { { pl : 1 } }
113
- >
114
- < TableSortLabel
115
- active = { orderBy === headCell . id }
116
- direction = { orderBy === headCell . id ? order : 'asc' }
117
- onClick = { createSortHandler ( headCell . id ) }
118
- >
97
+ < TableCell key = { headCell . id } align = { headCell . numeric ? 'right' : 'left' } padding = { headCell . disablePadding ? 'none' : 'normal' } sx = { { pl : 1 } } >
98
+ < TableSortLabel active = { orderBy === headCell . id } direction = { orderBy === headCell . id ? order : 'asc' } onClick = { createSortHandler ( headCell . id ) } >
119
99
{ t ( `admin:${ headCell . id } ` ) }
120
100
{ orderBy === headCell . id ? (
121
101
< Box component = "span" sx = { visuallyHidden } >
@@ -140,10 +120,7 @@ const ChatInstanceTableChatInstanceWithTokens = React.memo(
140
120
rows : ChatInstanceWithTokens [ ]
141
121
order : Order
142
122
orderBy : string
143
- onRequestSort : (
144
- event : React . MouseEvent < unknown > ,
145
- property : keyof ChatInstanceWithTokens
146
- ) => void
123
+ onRequestSort : ( event : React . MouseEvent < unknown > , property : keyof ChatInstanceWithTokens ) => void
147
124
} ) => {
148
125
const { i18n } = useTranslation ( )
149
126
@@ -156,13 +133,7 @@ const ChatInstanceTableChatInstanceWithTokens = React.memo(
156
133
< TableBody >
157
134
{ rows . map ( ( row ) => (
158
135
< TableRow role = "checkbox" key = { row . id } >
159
- < TableCell
160
- component = "th"
161
- scope = "row"
162
- padding = "none"
163
- width = "40%"
164
- sx = { { pl : 1 } }
165
- >
136
+ < TableCell component = "th" scope = "row" padding = "none" width = "40%" sx = { { pl : 1 } } >
166
137
< Link to = { `/courses/${ row . courseId } ` } component = { RouterLink } >
167
138
{ row . name [ language ] }
168
139
</ Link >
@@ -187,16 +158,15 @@ const ChatInstanceTableChatInstanceWithTokens = React.memo(
187
158
</ Table >
188
159
</ TableContainer >
189
160
)
190
- }
161
+ } ,
191
162
)
192
163
193
164
const ChatInstanceTable = ( ) => {
194
165
const { t } = useTranslation ( )
195
166
const [ search , setSearch ] = React . useState ( '' )
196
167
const deferredSearch = React . useDeferredValue ( search )
197
168
const [ order , setOrder ] = React . useState < Order > ( 'asc' )
198
- const [ orderBy , setOrderBy ] =
199
- React . useState < keyof ChatInstanceWithTokens > ( 'name' )
169
+ const [ orderBy , setOrderBy ] = React . useState < keyof ChatInstanceWithTokens > ( 'name' )
200
170
const [ showActiveCourses , setShowActiveCourses ] = React . useState ( false )
201
171
202
172
const [ page , setPage ] = React . useState ( 0 )
@@ -211,34 +181,22 @@ const ChatInstanceTable = () => {
211
181
showActiveCourses,
212
182
} )
213
183
214
- const handleChangePage = React . useCallback (
215
- ( event : unknown , newPage : number ) => {
216
- setPage ( newPage )
217
- } ,
218
- [ ]
219
- )
184
+ const handleChangePage = React . useCallback ( ( event : unknown , newPage : number ) => {
185
+ setPage ( newPage )
186
+ } , [ ] )
220
187
221
- const handleChangeRowsPerPage = React . useCallback (
222
- ( event : React . ChangeEvent < HTMLInputElement > ) => {
223
- setRowsPerPage ( parseInt ( event . target . value , 10 ) )
224
- setPage ( 0 )
225
- } ,
226
- [ ]
227
- )
188
+ const handleChangeRowsPerPage = React . useCallback ( ( event : React . ChangeEvent < HTMLInputElement > ) => {
189
+ setRowsPerPage ( parseInt ( event . target . value , 10 ) )
190
+ setPage ( 0 )
191
+ } , [ ] )
228
192
229
- const handleChangeSearch = debounce (
230
- ( event : React . ChangeEvent < HTMLInputElement > ) => {
231
- const newSearch = event . target . value
232
- if ( newSearch && newSearch . length < 4 ) return
233
- setSearch ( newSearch )
234
- } ,
235
- 300
236
- )
193
+ const handleChangeSearch = debounce ( ( event : React . ChangeEvent < HTMLInputElement > ) => {
194
+ const newSearch = event . target . value
195
+ if ( newSearch && newSearch . length < 4 ) return
196
+ setSearch ( newSearch )
197
+ } , 300 )
237
198
238
- const handleRequestSort = (
239
- event : React . MouseEvent < unknown > ,
240
- property : keyof ChatInstanceWithTokens
241
- ) => {
199
+ const handleRequestSort = ( event : React . MouseEvent < unknown > , property : keyof ChatInstanceWithTokens ) => {
242
200
const isAsc = orderBy === property && order === 'asc'
243
201
setOrder ( isAsc ? 'desc' : 'asc' )
244
202
setOrderBy ( property )
@@ -249,22 +207,13 @@ const ChatInstanceTable = () => {
249
207
< Paper sx = { { width : '100%' , mb : 2 } } >
250
208
< Box >
251
209
< InputLabel >
252
- < Checkbox
253
- checked = { showActiveCourses }
254
- onChange = { ( ) => setShowActiveCourses ( ! showActiveCourses ) }
255
- inputProps = { { 'aria-label' : 'controlled' } }
256
- />
210
+ < Checkbox checked = { showActiveCourses } onChange = { ( ) => setShowActiveCourses ( ! showActiveCourses ) } inputProps = { { 'aria-label' : 'controlled' } } />
257
211
258
212
{ t ( `course:showActiveCourses` ) }
259
213
</ InputLabel >
260
214
</ Box >
261
215
< Box sx = { { display : 'flex' , alignItems : 'center' } } >
262
- < TextField
263
- label = { t ( 'admin:searchCourse' ) }
264
- variant = "outlined"
265
- sx = { { flex : 1 , m : 1 } }
266
- onChange = { handleChangeSearch }
267
- />
216
+ < TextField label = { t ( 'admin:searchCourse' ) } variant = "outlined" sx = { { flex : 1 , m : 1 } } onChange = { handleChangeSearch } />
268
217
< TablePagination
269
218
rowsPerPageOptions = { [ 10 , 50 , 100 ] }
270
219
component = "div"
@@ -276,14 +225,7 @@ const ChatInstanceTable = () => {
276
225
labelRowsPerPage = { t ( 'admin:rowsPerPage' ) }
277
226
/>
278
227
</ Box >
279
- { ! isLoading && (
280
- < ChatInstanceTableChatInstanceWithTokens
281
- rows = { chatInstances }
282
- onRequestSort = { handleRequestSort }
283
- order = { order }
284
- orderBy = { orderBy }
285
- />
286
- ) }
228
+ { ! isLoading && < ChatInstanceTableChatInstanceWithTokens rows = { chatInstances } onRequestSort = { handleRequestSort } order = { order } orderBy = { orderBy } /> }
287
229
</ Paper >
288
230
</ Box >
289
231
)
0 commit comments