@@ -19,7 +19,6 @@ import {
19
19
Typography ,
20
20
} from '@material-ui/core' ;
21
21
22
-
23
22
import { makeStyles } from '@material-ui/core/styles' ;
24
23
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles' ;
25
24
@@ -32,7 +31,6 @@ import Badge from '@material-ui/core/Badge';
32
31
import PersonIcon from '@material-ui/icons/Person' ;
33
32
import UpdateIcon from '@material-ui/icons/Update' ;
34
33
35
-
36
34
// // MODALS
37
35
import AddModal from '../modals/AddModal' ;
38
36
import ProfileContainer from '../containers/ProfileContainer' ;
@@ -49,10 +47,9 @@ import { CommsContext } from '../context/CommsContext';
49
47
50
48
// TYPESCRIPT
51
49
interface StyleProps {
52
- root : BaseCSSProperties ;
53
- }
54
- type ClickEvent = React . MouseEvent < HTMLElement > ;
55
-
50
+ root : BaseCSSProperties ;
51
+ }
52
+ type ClickEvent = React . MouseEvent < HTMLElement > ;
56
53
57
54
const Occupied = React . memo ( ( ) => {
58
55
const { setServicesData, app, setApp } = useContext ( ApplicationContext ) ;
@@ -65,24 +62,25 @@ const Occupied = React.memo(() => {
65
62
// const [app, setApp] = useState<string>('');
66
63
const [ searchTerm , setSearchTerm ] = useState < string > ( '' ) ;
67
64
const [ clickedAt , setClickedAt ] = useState < string > ( '2000-01-01T00:00:00Z' ) ;
68
-
65
+
69
66
// Grab services and applications whenever the user changes
70
67
useEffect ( ( ) => {
71
68
setServicesData ( [ ] ) ;
72
69
getApplications ( ) ;
73
- } , [ user ] ) ;
70
+ } , [ user ] ) ;
74
71
75
72
// Dynamic refs
76
73
const delRef = useRef < any > ( [ ] ) ;
77
-
74
+
78
75
// Asks user to confirm deletion
79
76
const confirmDelete = ( event : ClickEvent , application : string , i : number ) => {
80
77
const message = `The application '${ app } ' will be permanently deleted. Continue?` ;
81
78
if ( confirm ( message ) ) deleteApp ( i ) ;
82
79
} ;
83
-
80
+
84
81
// Handle clicks on Application cards
85
82
const handleClick = ( event : ClickEvent , selectedApp : string , i : number ) => {
83
+ console . log ( selectedApp , i ) ;
86
84
if ( delRef . current [ i ] && ! delRef . current [ i ] . contains ( event . target ) ) {
87
85
console . log ( 'the application that you clicked is: ' , selectedApp )
88
86
setIndex ( i ) ;
@@ -250,7 +248,11 @@ const Occupied = React.memo(() => {
250
248
You have { notification ? notification . length : 0 } new alerts
251
249
</ span >
252
250
< NotificationsIcon className = "navIcon" id = "notificationsIcon" />
253
- < Badge overlap = "rectangular" badgeContent = { notification ? notification . length : 0 } color = "secondary" />
251
+ < Badge
252
+ overlap = "rectangular"
253
+ badgeContent = { notification ? notification . length : 0 }
254
+ color = "secondary"
255
+ />
254
256
</ div >
255
257
< div className = "personIconArea" >
256
258
< Button className = "personTooltip" onClick = { ( ) => setPersonModalOpen ( true ) } >
@@ -268,66 +270,66 @@ const Occupied = React.memo(() => {
268
270
</ Button >
269
271
</ div >
270
272
{ applications &&
271
- applications . filter ( ( db : any ) => db [ 0 ] . toLowerCase ( ) . includes ( searchTerm . toLowerCase ( ) ) )
272
- . map ( ( application : string [ ] , i : number | any | string | undefined ) => (
273
- < div className = "card" key = { `card-${ i } ` } id = { `card-${ application [ 1 ] } ` } >
274
- < Card
275
- key = { `card-${ i } ` }
276
- className = { classes . paper }
277
- variant = "outlined"
278
- onClick = { event => {
279
- console . log ( 'what are all the applications mapped: ' , applications )
280
- handleClick ( event , application [ 0 ] , i )
281
- } }
282
- >
283
- < div className = "databaseIconContainer" >
284
- < div className = "databaseIconHeader" >
285
- { application [ 1 ] === 'SQL' ? (
286
- < img className = "databaseIcon" alt = "SQL" />
287
- ) : (
288
- < img className = "databaseIcon" alt = "MongoDB" />
289
- ) }
273
+ applications
274
+ . filter ( ( db : any ) => db [ 0 ] . toLowerCase ( ) . includes ( searchTerm . toLowerCase ( ) ) )
275
+ . map ( ( application : string [ ] , i : number | any | string | undefined ) => (
276
+ < div className = "card" key = { `card-${ i } ` } id = { `card-${ application [ 1 ] } ` } >
277
+ < Card
278
+ key = { `card-${ i } ` }
279
+ className = { classes . paper }
280
+ variant = "outlined"
281
+ onClick = { event => handleClick ( event , application [ 0 ] , i ) }
282
+ >
283
+ < div className = "databaseIconContainer" >
284
+ < div className = "databaseIconHeader" >
285
+ { application [ 1 ] === 'SQL' ? (
286
+ < img className = "databaseIcon" alt = "SQL" />
287
+ ) : (
288
+ < img className = "databaseIcon" alt = "MongoDB" />
289
+ ) }
290
+ </ div >
290
291
</ div >
291
- </ div >
292
292
293
- < CardHeader
294
- avatar = {
295
- < IconButton
296
- id = "iconButton"
297
- ref = { element => {
298
- delRef . current [ i ] = element ;
299
- } }
300
- className = { classes . iconbutton }
301
- aria-label = "Delete"
302
- onClick = { event => confirmDelete ( event , application [ 0 ] , i ) }
303
- >
304
- < HighlightOffIcon
305
- className = { classes . btnStyle }
306
- id = "deleteIcon"
293
+ < CardHeader
294
+ avatar = {
295
+ < IconButton
296
+ id = "iconButton"
307
297
ref = { element => {
308
298
delRef . current [ i ] = element ;
309
299
} }
310
- />
311
- </ IconButton >
312
- }
313
- />
314
- < CardContent >
315
- < p id = "databaseName" > Name:</ p >
316
- < Typography className = { classes . fontStyles } > { application [ 0 ] } </ Typography >
317
- < p id = "databaseName" > Service:</ p >
318
- < Typography className = { classes . fontStyles } > { application [ 3 ] } </ Typography >
319
- </ CardContent >
320
- < hr className = "cardLine" />
300
+ className = { classes . iconbutton }
301
+ aria-label = "Delete"
302
+ onClick = { event => confirmDelete ( event , application [ 0 ] , i ) }
303
+ >
304
+ < HighlightOffIcon
305
+ className = { classes . btnStyle }
306
+ id = "deleteIcon"
307
+ ref = { element => {
308
+ delRef . current [ i ] = element ;
309
+ } }
310
+ />
311
+ </ IconButton >
312
+ }
313
+ />
314
+ < CardContent >
315
+ { /* <p id="databaseName">Name:</p> */ }
316
+ < Typography noWrap id = "databaseName" className = { classes . fontStyles } >
317
+ { application [ 0 ] }
318
+ </ Typography >
319
+ < p id = "serviceName" > Service:</ p >
320
+ < Typography className = { classes . fontStyles } > { application [ 3 ] } </ Typography >
321
+ </ CardContent >
322
+ < hr className = "cardLine" />
321
323
322
- < div className = "cardFooter" >
323
- < UpdateIcon className = "cardFooterIcon" />
324
- < em >
325
- < p id = "cardFooterText" > { application [ 4 ] } </ p >
326
- </ em >
327
- </ div >
328
- </ Card >
329
- </ div >
330
- ) ) }
324
+ < div className = "cardFooter" >
325
+ < UpdateIcon className = "cardFooterIcon" />
326
+ < em >
327
+ < p id = "cardFooterText" > { application [ 4 ] } </ p >
328
+ </ em >
329
+ </ div >
330
+ </ Card >
331
+ </ div >
332
+ ) ) }
331
333
332
334
< Modal open = { addModalOpen } onClose = { ( ) => setAddModalOpen ( false ) } >
333
335
< AddModal setOpen = { setAddModalOpen } />
0 commit comments