feat: community chat frontend

src/App.jsx

@@ -50,6 +50,7 @@ import AuthRoute from "./pages/AuthRoute";
 import SecurityRoutes from "./components/Other/Security/SecurityRoutes";
 import ExploreRoutes from "./components/Explore/ExploreRoutes";
 import Leaderboard from "./components/Other/CyberGames/Leaderboard/Leaderboard";
+import ChatRoute from "./components/Chat/ChatRoute";
 import SettingsRoute from "./components/Dashboard/Settings";
 // import ChatBot from "./components/ChatBot/ChatBot";
 
@@ -73,11 +74,12 @@ const App = () => {
 
     const hideHomeHeader = () => {
         const pathDashboard = pathname.includes("/dashboard");
+        const chat = pathname.includes("/chat");
         const pathLogin = pathname.includes("/login");
         const pathRegister = pathname.includes("/register");
         const pathForgetPassword = pathname.includes("/forgetPassword");
         const pathResetPassword = pathname.includes("/resetPassword");
-        return pathDashboard || pathLogin || pathRegister || pathForgetPassword || pathResetPassword;
+        return pathDashboard || pathLogin || pathRegister || pathForgetPassword || pathResetPassword || chat;
     };
 
     const [isOpen, setIsOpen] = useState(false);
@@ -129,6 +131,7 @@ const App = () => {
                         <Route path={"/dashboard/settings/*"} element={<SettingsRoute />} />
 
                         <Route path={"/dashboard/*"} element={<DashboardRoute />} />
+                        <Route path={"/chat/*"} element={<ChatRoute />} />
 
                         <Route exact path={"/contact"} element={<ContactForm />} />
 

src/components/Chat/Chat.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { ChatItemsContainer } from "./ChatElement";
+import ChatArea from "./ChatArea/ChatArea";
+import ChatMessage from "./DummyChat/ChatMessage";
+import ChatMessageSelf from "./DummyChat/ChatMessageSelf";
+import chatData from "./DummyChat/ChatData";
+import SendMessage from "./SendMessage";
+
+const Chat = () => {
+    const { user } = useSelector((state) => state.auth);
+    const location = useLocation();
+    const channelId = location.pathname.replace("/chat/", "");
+    const [channel, setChannel] = useState(null);
+
+    useEffect(() => {
+        const foundChannel = chatData.channels.find((ch) => ch.id === channelId);
+        setChannel(foundChannel);
+    }, [channelId]);
+
+    if (!channel) {
+        return (
+            <ChatItemsContainer>
+                <div>
+                    <h2>Channel not found</h2>
+                </div>
+            </ChatItemsContainer>
+        );
+    }
+
+    return (
+        <ChatItemsContainer>
+            <ChatArea name={channel.channelname} />
+            {channel.messages.map((message, index) =>
+                message.username === user.username ? (
+                    <ChatMessageSelf key={index} {...message} />
+                ) : (
+                    <ChatMessage key={index} {...message} />
+                ),
+            )}
+            <SendMessage />
+        </ChatItemsContainer>
+    );
+};
+
+export default Chat;

src/components/Chat/ChatArea/ChatArea.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ChatContainer, LeftNav, RightNav } from "../ChatElement";
+import { FaPhoneAlt, FaVideo, FaUserCircle } from "react-icons/fa";
+
+const ChatArea = ({ name }) => {
+    return (
+        <>
+            <ChatContainer>
+                <LeftNav>
+                    {name} / <h6>General</h6>
+                </LeftNav>
+                <RightNav>
+                    <li>
+                        <FaVideo />
+                    </li>
+                    <li>
+                        <FaPhoneAlt />
+                    </li>
+                    <li>
+                        <FaUserCircle />
+                    </li>
+                </RightNav>
+            </ChatContainer>
+        </>
+    );
+};
+
+export default ChatArea;

src/components/Chat/ChatElement.jsx

@@ -0,0 +1,121 @@
+import styled from "styled-components";
+export const ChatRoutesContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 1500px;
+`;
+
+export const ChatContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    z-index: 1000;
+    top: 0;
+    width: 100%;
+    border-bottom: 1px solid white;
+
+    max-width: 1500px;
+`;
+
+export const ChatItemsContainer = styled.div`
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    margin: 25px;
+    border-radius: 10px;
+    color: #f5f5f5;
+
+    @media screen and (max-width: 768px) {
+        flex-wrap: wrap;
+    }
+`;
+
+export const LeftNav = styled.div`
+    font-size: 28px;
+    margin-right: 1px;
+    display: flex;
+    align-items: center;
+`;
+export const RightNav = styled.div`
+    font-size: 28px;
+    margin-right: 1px;
+    width: 15%;
+    display: flex;
+    list-style: none;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const Chatbox = styled.div`
+    width: 100%
+    display: flex;
+    flex-direction: row;
+`;
+
+export const MessageInputContainer = styled.div`
+    border-top: 1px solid #ccc;
+    margin-top: 130px;
+    position: relative;
+`;
+
+export const Message = styled.div`
+    margin-top: 5px;
+    margin-left: 65px;
+    outline: none !important;
+    border-radius: 20px;
+    width: 80% !important;
+    background-color: #fff;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+`;
+
+export const Input = styled.input`
+    border: none !important;
+    border-radius: 20px !important;
+    display: block;
+    height: calc(2.25rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    margin-bottom: 0;
+
+    &:focus {
+        outline: none;
+        border: none !important;
+        box-shadow: none !important;
+    }
+`;
+
+export const InputGroup = styled.span`
+    background: transparent !important;
+    border: none !important;
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    margin-bottom: 0;
+    font-size: 1.5rem;
+    font-weight: b;
+    line-height: 1.5;
+    color: #495057;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #e9ecef;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    font-weight: bold !important;
+    cursor: pointer;
+`;

src/components/Chat/ChatRoute.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+import { ChatRoutesContainer } from "./ChatElement";
+import Sidebar from "./Sidebar/Sidebar";
+import { Chat } from "../index";
+import chatData from "./DummyChat/ChatData";
+
+const ChatRoute = () => {
+    return (
+        <ChatRoutesContainer>
+            <Sidebar />
+
+            <Routes>
+                {/* <Route index element={<Chat />} /> */}
+                {chatData.channels.map((channel) => (
+                    <Route key={channel.id} path={channel.id} element={<Chat channelId={channel.id} />} />
+                ))}
+            </Routes>
+        </ChatRoutesContainer>
+    );
+};
+
+export default ChatRoute;

src/components/Chat/DummyChat/ChatData.js

@@ -0,0 +1,58 @@
+// chatData.js
+export const chatData = {
+    channels: [
+        {
+            channelname: "General Chat",
+            id: "1",
+            messages: [
+                {
+                    time: "2023-10-18T10:15:00",
+                    username: "Alice",
+                    image: "avatar-alice.jpg",
+                    message: "Hello, everyone! How's it going?",
+                },
+                {
+                    time: "2023-10-18T10:20:00",
+                    username: "Bob",
+                    image: "avatar-bob.jpg",
+                    message: "Hey, Alice! I'm doing great. How about you?",
+                },
+                {
+                    time: "2023-10-18T10:20:00",
+                    username: "insane22",
+                    image: "avatar-bob.jpg",
+                    message: "Hey, Alice! I'm doing great. How about you?",
+                },
+                {
+                    time: "2023-10-18T10:20:00",
+                    username: "Bob",
+                    image: "avatar-bob.jpg",
+                    message: "Hey, Alice! I'm doing great. How about you?",
+                },
+                // Add more messages for the General Chat channel
+            ],
+        },
+        {
+            channelname: "Help",
+            id: "2",
+            messages: [
+                {
+                    time: "2023-10-18T11:00:00",
+                    username: "Charlie",
+                    image: "avatar-charlie.jpg",
+                    message: "I need help with a technical issue.",
+                },
+                {
+                    time: "2023-10-18T11:10:00",
+                    username: "David",
+                    image: "avatar-david.jpg",
+                    message: "Sure, Charlie. What's the problem you're facing?",
+                },
+                // Add more messages for the Help channel
+            ],
+        },
+        // Add more channels as needed
+    ],
+};
+
+export default chatData;

src/components/Chat/DummyChat/ChatMessage.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { MessageContainer, MessageContent, Timestamp, SenderImage } from "./ChatMessageElement";
+
+const ChatMessage = ({ message, image, time, sender }) => {
+    return (
+        <MessageContainer>
+            <SenderImage src={image} alt="Sender's Image" />
+            <MessageContent>
+                <p>{message}</p>
+                <Timestamp>Today at {time}</Timestamp>
+            </MessageContent>
+        </MessageContainer>
+    );
+};
+
+export default ChatMessage;

src/components/Chat/DummyChat/ChatMessageElement.jsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const MessageContainer = styled.div`
+    display: flex;
+    align-items: flex-start;
+    margin: 10px;
+`;
+export const MessageContainerSelf = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    margin: 10px;
+`;
+
+export const SenderImage = styled.img`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+`;
+
+export const MessageContent = styled.div`
+    background-color: #1d232b;
+    padding: 10px;
+    border-radius: 10px;
+    max-width: 300px;
+    font-size: 14px;
+`;
+
+export const MessageContentSelf = styled.div`
+    background-color: #4284db;
+    padding: 10px;
+    border-radius: 10px;
+    max-width: 300px;
+    font-size: 14px;
+`;
+
+export const Timestamp = styled.div`
+    font-size: 12px;
+    color: #777;
+    margin-top: 5px;
+`;

src/components/Chat/DummyChat/ChatMessageSelf.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { MessageContainerSelf, MessageContentSelf, Timestamp, SenderImage } from "./ChatMessageElement";
+
+const ChatMessageSelf = ({ message, image, time, sender }) => {
+    return (
+        <MessageContainerSelf>
+            <SenderImage src={image} alt="Sender's Image" />
+            <MessageContentSelf>
+                <p>{message}</p>
+                <Timestamp>Today at {time}</Timestamp>
+            </MessageContentSelf>
+        </MessageContainerSelf>
+    );
+};
+
+export default ChatMessageSelf;