Skip to content

Commit afd34e6

Browse files
small changes
1 parent c1668a7 commit afd34e6

File tree

5 files changed

+30
-22
lines changed

5 files changed

+30
-22
lines changed

src/app/chat/Chat.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ const Chat = () => {
2121
const createNotification = () =>
2222
setNotifications([...notifications, { id: notifications.length }]);
2323

24+
const deleteNotification = (id) =>
25+
setNotifications(
26+
notifications.filter((notification) => notification.id !== id),
27+
);
28+
2429
useEffect(() => {
2530
socket.on('messageResponse', (data) => setMessages([...messages, data]));
2631
}, [socket, messages]);
@@ -65,7 +70,7 @@ const Chat = () => {
6570
<MessagesPanelFooter socket={socket} currentUser={currentUser} />
6671
</div>
6772
{notifications.map(({ id }) => (
68-
<Notification onClose={() => {}} key={id}>
73+
<Notification onClose={() => deleteNotification(id)} key={id}>
6974
This is a notification!
7075
</Notification>
7176
))}

src/app/chat/MessagePanelFooter.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const MessagesPanelFooter = ({ socket, currentUser }) => {
2727
type="text"
2828
className="flex-1 p-2 border border-gray-300 rounded-lg bg-inherit"
2929
placeholder="Type a message..."
30+
value={message}
3031
onChange={(e) => setMessage(e.target.value)}
3132
/>
3233
<button

src/app/chat/MessagesPanel.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ const MessagesPanel = ({ messages, currentUser }) => {
22
return (
33
<div className="flex-1 flex flex-col">
44
<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>
86
</div>
97
<div className="flex-1 overflow-y-auto p-4">
108
<div className="flex flex-col space-y-4">
@@ -17,7 +15,7 @@ const MessagesPanel = ({ messages, currentUser }) => {
1715
</div>
1816
) : (
1917
<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">
2119
{message.text}
2220
</div>
2321
</div>

src/app/components/Notification.js

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,37 @@
11
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;
212

313
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]);
1021

1122
return createPortal(
1223
<div
13-
className="z-50 overflow-hidden p-6"
24+
className="z-50 overflow-hidden p-6 flex items-center justify-center"
1425
style={{ background: color[type] }}
1526
>
1627
{children}
1728
<button
1829
className="bg-transparent border-0 text-white float-right cursor-pointer"
1930
onClick={onClose}
2031
>
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>
2235
</button>
2336
</div>,
2437
document.getElementById('notifyContainer'),

src/app/page.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,8 @@
33
import Chat from './chat/Chat';
44
import Modal from './components/Modal';
55
import { AuthContextProvider } from './context/AuthContext';
6-
import { useEffect, useState } from 'react';
7-
8-
const USERNAME = 'di_user';
96

107
export default function Home() {
11-
const [isOpen, setIsOpen] = useState(true);
12-
13-
useEffect(() => {
14-
localStorage.setItem('userName', USERNAME);
15-
}, []);
16-
178
return (
189
<main>
1910
<AuthContextProvider>

0 commit comments

Comments
 (0)