File tree Expand file tree Collapse file tree 5 files changed +30
-22
lines changed Expand file tree Collapse file tree 5 files changed +30
-22
lines changed Original file line number Diff line number Diff line change @@ -21,6 +21,11 @@ const Chat = () => {
21
21
const createNotification = ( ) =>
22
22
setNotifications ( [ ...notifications , { id : notifications . length } ] ) ;
23
23
24
+ const deleteNotification = ( id ) =>
25
+ setNotifications (
26
+ notifications . filter ( ( notification ) => notification . id !== id ) ,
27
+ ) ;
28
+
24
29
useEffect ( ( ) => {
25
30
socket . on ( 'messageResponse' , ( data ) => setMessages ( [ ...messages , data ] ) ) ;
26
31
} , [ socket , messages ] ) ;
@@ -65,7 +70,7 @@ const Chat = () => {
65
70
< MessagesPanelFooter socket = { socket } currentUser = { currentUser } />
66
71
</ div >
67
72
{ notifications . map ( ( { id } ) => (
68
- < Notification onClose = { ( ) => { } } key = { id } >
73
+ < Notification onClose = { ( ) => deleteNotification ( id ) } key = { id } >
69
74
This is a notification!
70
75
</ Notification >
71
76
) ) }
Original file line number Diff line number Diff line change @@ -27,6 +27,7 @@ const MessagesPanelFooter = ({ socket, currentUser }) => {
27
27
type = "text"
28
28
className = "flex-1 p-2 border border-gray-300 rounded-lg bg-inherit"
29
29
placeholder = "Type a message..."
30
+ value = { message }
30
31
onChange = { ( e ) => setMessage ( e . target . value ) }
31
32
/>
32
33
< button
Original file line number Diff line number Diff line change @@ -2,9 +2,7 @@ const MessagesPanel = ({ messages, currentUser }) => {
2
2
return (
3
3
< div className = "flex-1 flex flex-col" >
4
4
< div className = "p-4 border-b border-gray-200" >
5
- < h1 className = "text-xl font-semibold" >
6
- Chat with { currentUser . displayName }
7
- </ h1 >
5
+ < h1 className = "text-xl font-semibold" > Chat</ h1 >
8
6
</ div >
9
7
< div className = "flex-1 overflow-y-auto p-4" >
10
8
< div className = "flex flex-col space-y-4" >
@@ -17,7 +15,7 @@ const MessagesPanel = ({ messages, currentUser }) => {
17
15
</ div >
18
16
) : (
19
17
< div className = "flex items-end justify-end" key = { message . id } >
20
- < div className = "bg-gray-200 p-3 rounded-lg max-w-xs" >
18
+ < div className = "bg-gray-400 p-3 rounded-lg max-w-xs" >
21
19
{ message . text }
22
20
</ div >
23
21
</ div >
Original file line number Diff line number Diff line change 1
1
import { createPortal } from 'react-dom' ;
2
+ import { useState , useEffect } from 'react' ;
3
+
4
+ const color = {
5
+ info : 'blue' ,
6
+ success : 'green' ,
7
+ warning : 'yellow' ,
8
+ error : 'red' ,
9
+ } ;
10
+
11
+ let timeToDelete = 2000 ;
2
12
3
13
const Notification = ( { type = 'info' , children, onClose } ) => {
4
- const color = {
5
- info : 'blue' ,
6
- success : 'green' ,
7
- warning : 'yellow' ,
8
- error : 'red' ,
9
- } ;
14
+ useEffect ( ( ) => {
15
+ const timeoutId = setTimeout ( onClose , timeToDelete ) ;
16
+
17
+ return ( ) => {
18
+ clearTimeout ( timeoutId ) ;
19
+ } ;
20
+ } , [ onClose ] ) ;
10
21
11
22
return createPortal (
12
23
< div
13
- className = "z-50 overflow-hidden p-6"
24
+ className = "z-50 overflow-hidden p-6 flex items-center justify-center "
14
25
style = { { background : color [ type ] } }
15
26
>
16
27
{ children }
17
28
< button
18
29
className = "bg-transparent border-0 text-white float-right cursor-pointer"
19
30
onClick = { onClose }
20
31
>
21
- < span className = "text-white opacity-7 h-6 w-6 text-xl block " > x</ span >
32
+ < span className = "text-white opacity-7 h-6 w-6 text-xs block ml-3" >
33
+ x
34
+ </ span >
22
35
</ button >
23
36
</ div > ,
24
37
document . getElementById ( 'notifyContainer' ) ,
Original file line number Diff line number Diff line change 3
3
import Chat from './chat/Chat' ;
4
4
import Modal from './components/Modal' ;
5
5
import { AuthContextProvider } from './context/AuthContext' ;
6
- import { useEffect , useState } from 'react' ;
7
-
8
- const USERNAME = 'di_user' ;
9
6
10
7
export default function Home ( ) {
11
- const [ isOpen , setIsOpen ] = useState ( true ) ;
12
-
13
- useEffect ( ( ) => {
14
- localStorage . setItem ( 'userName' , USERNAME ) ;
15
- } , [ ] ) ;
16
-
17
8
return (
18
9
< main >
19
10
< AuthContextProvider >
You can’t perform that action at this time.
0 commit comments