feat: community chat frontend

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.53.15](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.14...v0.53.15) (2023-10-09)
+
+
+### Bug Fixes
+
+* alignement of icon and text in the navbar ([#486](https://github.com/thecyberworld/TheCyberHUB/issues/486)) ([1373320](https://github.com/thecyberworld/TheCyberHUB/commit/1373320a046b10f554d5a4f340ba1932f7622f12))
+
+
+
 ## [0.53.14](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.13...v0.53.14) (2023-10-01)
 
 
@@ -34,12 +43,3 @@
 
 
 
-## [0.53.10](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.9...v0.53.10) (2023-09-05)
-
-
-### Bug Fixes
-
-* minor issues ([#435](https://github.com/thecyberworld/TheCyberHUB/issues/435)) ([39c0631](https://github.com/thecyberworld/TheCyberHUB/commit/39c0631d6650a1ccd8437eca88dc63c5fcd4cfcb))
-
-
-

package.json

@@ -2,7 +2,7 @@
   "homepage": "https://thecyberhub.org/",
   "name": "thecyberhub.org",
   "private": true,
-  "version": "0.53.14",
+  "version": "0.53.15",
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",

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,48 @@
+// Chat.js
+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";
+
+const Chat = () => {
+    const { user } = useSelector((state) => state.auth);
+    const location = useLocation(); // Use useLocation to get the URL location
+    const channelId = location.pathname.replace("/chat/", "");
+    const [channel, setChannel] = useState(null);
+
+    useEffect(() => {
+        // Find the channel by channelId
+        const foundChannel = chatData.channels.find((ch) => ch.id === channelId);
+        setChannel(foundChannel);
+    }, [channelId]);
+    console.log(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} />
+                ),
+            )}
+        </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,61 @@
+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;
+`;

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;