small changes

src/app/chat/Chat.js

@@ -21,6 +21,11 @@ const Chat = () => {
   const createNotification = () =>
     setNotifications([...notifications, { id: notifications.length }]);
 
+  const deleteNotification = (id) =>
+    setNotifications(
+      notifications.filter((notification) => notification.id !== id),
+    );
+
   useEffect(() => {
     socket.on('messageResponse', (data) => setMessages([...messages, data]));
   }, [socket, messages]);
@@ -65,7 +70,7 @@ const Chat = () => {
         <MessagesPanelFooter socket={socket} currentUser={currentUser} />
       </div>
       {notifications.map(({ id }) => (
-        <Notification onClose={() => {}} key={id}>
+        <Notification onClose={() => deleteNotification(id)} key={id}>
           This is a notification!
         </Notification>
       ))}

src/app/chat/MessagePanelFooter.js

@@ -27,6 +27,7 @@ const MessagesPanelFooter = ({ socket, currentUser }) => {
           type="text"
           className="flex-1 p-2 border border-gray-300 rounded-lg bg-inherit"
           placeholder="Type a message..."
+          value={message}
           onChange={(e) => setMessage(e.target.value)}
         />
         <button

src/app/chat/MessagesPanel.js

@@ -2,9 +2,7 @@ const MessagesPanel = ({ messages, currentUser }) => {
   return (
     <div className="flex-1 flex flex-col">
       <div className="p-4  border-b border-gray-200">
-        <h1 className="text-xl font-semibold">
-          Chat with {currentUser.displayName}
-        </h1>
+        <h1 className="text-xl font-semibold">Chat</h1>
       </div>
       <div className="flex-1 overflow-y-auto p-4">
         <div className="flex flex-col space-y-4">
@@ -17,7 +15,7 @@ const MessagesPanel = ({ messages, currentUser }) => {
               </div>
             ) : (
               <div className="flex items-end justify-end" key={message.id}>
-                <div className="bg-gray-200 p-3 rounded-lg max-w-xs">
+                <div className="bg-gray-400 p-3 rounded-lg max-w-xs">
                   {message.text}
                 </div>
               </div>

src/app/components/Notification.js

@@ -1,24 +1,37 @@
 import { createPortal } from 'react-dom';
+import { useState, useEffect } from 'react';
+
+const color = {
+  info: 'blue',
+  success: 'green',
+  warning: 'yellow',
+  error: 'red',
+};
+
+let timeToDelete = 2000;
 
 const Notification = ({ type = 'info', children, onClose }) => {
-  const color = {
-    info: 'blue',
-    success: 'green',
-    warning: 'yellow',
-    error: 'red',
-  };
+  useEffect(() => {
+    const timeoutId = setTimeout(onClose, timeToDelete);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [onClose]);
 
   return createPortal(
     <div
-      className="z-50 overflow-hidden p-6"
+      className="z-50 overflow-hidden p-6 flex items-center justify-center"
       style={{ background: color[type] }}
     >
       {children}
       <button
         className="bg-transparent border-0 text-white float-right cursor-pointer"
         onClick={onClose}
       >
-        <span className="text-white opacity-7 h-6 w-6 text-xl block ">x</span>
+        <span className="text-white opacity-7 h-6 w-6 text-xs block ml-3">
+          x
+        </span>
       </button>
     </div>,
     document.getElementById('notifyContainer'),

src/app/page.js

@@ -3,17 +3,8 @@
 import Chat from './chat/Chat';
 import Modal from './components/Modal';
 import { AuthContextProvider } from './context/AuthContext';
-import { useEffect, useState } from 'react';
-
-const USERNAME = 'di_user';
 
 export default function Home() {
-  const [isOpen, setIsOpen] = useState(true);
-
-  useEffect(() => {
-    localStorage.setItem('userName', USERNAME);
-  }, []);
-
   return (
     <main>
       <AuthContextProvider>