add participant to channel list

src/app/chat/Channel.js

@@ -9,7 +9,6 @@ const Channel = ({
   handleChannelSelect,
   isSelected = false,
 }) => {
-  console.log('c', participants);
   return (
     <div
       className={`p-4 border-b border-gray-200 hover:bg-gray-800 cursor-pointer ${isSelected ? 'bg-gray-800' : ''}`}

src/app/chat/ChannelList.js

@@ -19,7 +19,7 @@ const ChannelList = ({ channels, handleChannelSelect, selectedChannel }) => {
 
   return (
     <div className="w-1/4  border-r border-gray-200">
-      <div className="p-4 border-b border-gray-200">
+      <div className="m-6">
         <h1 className="text-xl font-semibold">Channels</h1>
       </div>
       {list}

src/app/chat/ChatHeader.js

@@ -0,0 +1,22 @@
+const ChatHeader = ({ channelName }) => {
+  const disabledStyles =
+    'bg-gray-300 px-4 py-2 rounded-md cursor-not-allowed opacity-50';
+
+  return (
+    <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+      <h1 className="text-xl font-semibold">
+        {channelName ?? 'Select channel'}{' '}
+      </h1>
+      <button
+        className={`text-white bg-red-500 active:bg-red-700 ${!channelName ? disabledStyles : ''} font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1`}
+        type="button"
+        onClick={() => {}}
+        disabled={!channelName}
+      >
+        Leave channel
+      </button>
+    </div>
+  );
+};
+
+export default ChatHeader;

src/app/chat/MessagesPanel.js

@@ -9,9 +9,6 @@ const MessagesPanel = ({ messages, currentUser, typingStatus }) => {
 
   return (
     <div className="flex-1 flex flex-col">
-      <div className="p-4  border-b border-gray-200">
-        <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">
           {messages.map((message) =>

src/app/chat/page.js

@@ -8,7 +8,8 @@ import socketIO from 'socket.io-client';
 import Notification from '../components/Notification';
 import { useAuthContext } from '../context/AuthContext';
 import { db } from '../../database/firebase';
-import { onValue, ref, update } from 'firebase/database';
+import { onValue, ref, set } from 'firebase/database';
+import ChatHeader from './ChatHeader';
 
 const SERVER = 'http://127.0.0.1:8081';
 
@@ -35,13 +36,7 @@ const Chat = () => {
   }, [socket, messages]);
 
   const handleChannelSelect = (channelId) => {
-    const participantRef = ref(
-      db,
-      `channels/${channelId}/participants/${currentUser.userName}`,
-    );
-
-    update(participantRef, {
-      name: currentUser.displayName,
+    set(ref(db, `channels/${channelId}/participants/` + currentUser.id), {
       username: currentUser.userName,
     })
       .then(() => {
@@ -92,18 +87,19 @@ const Chat = () => {
         selectedChannel={selectedChannel}
       />
       <div className="flex flex-col w-full">
+        <ChatHeader />
         <MessagesPanel
           messages={messages}
           currentUser={currentUser}
           typingStatus={typingStatus}
         />
         <MessagesPanelFooter socket={socket} currentUser={currentUser} />
       </div>
-      {notifications.map(({ id }) => (
+      {/* {notifications.map(({ id }) => (
         <Notification onClose={() => deleteNotification(id)} key={id}>
           This is a notification!
         </Notification>
-      ))}
+      ))} */}
     </div>
   );
 };

src/app/context/AuthContext.js

@@ -1,4 +1,3 @@
-import useAuth from '../hooks/useAuth';
 import { createContext, useMemo, useContext, useState } from 'react';
 
 const AuthContext = createContext({});