<repo_name>Umrzoq-developer/autosmonsters<file_sep>/src/Components/ChatPage/ChatPage.jsx
import React from 'react'
import socketClient  from "socket.io-client";
import Chat from './Chat';
const SERVER = "http://127.0.0.1:8080";

const ChatPage = () => {

    var socket = socketClient (SERVER);
    return (
        <div style={{margin: "150px auto", height: "400px", width: "80%"}}>
            <h5 style={{textAlign: "left"}}>Chat panel</h5>
            <Chat />
        </div>
    )
}

export default React.memo(ChatPage)
<file_sep>/src/Components/AdminPanel/ChatAdmin.jsx
import React from 'react'
import AdminPanelHeader from '../../Containers/AdminPanelHeader/AdminPanelHeader'
import Chat from '../ChatPage/Chat'

const ChatAdmin = () => {
    return (
        <AdminPanelHeader>
            <Chat />
        </AdminPanelHeader>
    )
}

export default React.memo(ChatAdmin)
<file_sep>/src/Components/ChatPage/ChannelList.js
import React from "react";
import  Channel  from "./Channel";

const ChannelList = ({ onSelectChannel, channels }) => {
  const handleClick = (id) => {
    onSelectChannel(id);
  };

  let list = (
    <div className="no-content-message">There is no channels to show</div>
  );
  if (channels && channels.map) {
    list = channels.map((c) => (
      <Channel
        key={c.id}
        id={c.id}
        name={c.name}
        participants={c.participants}
        onClick={handleClick}
      />
    ));
  }
  return <div className="channel-list">{list}</div>;
};

export default ChannelList;
