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

@@ -49,6 +49,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";
 
 const App = () => {
     const [isLoading, setIsLoading] = useState(true);
@@ -70,11 +71,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);
@@ -118,6 +120,7 @@ const App = () => {
                         <Route path={"/security/*"} element={<SecurityRoutes />} />
 
                         <Route path={"/dashboard/*"} element={<DashboardRoute />} />
+                        <Route path={"/chat/*"} element={<ChatRoute />} />
 
                         <Route exact path={"/contact"} element={<ContactForm />} />
 

src/components/Chat/Chat.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+// import { Wrapper } from "../Dashboard/Profile/ProfileElements";
+import { ChatItemsContainer } from "./ChatElement";
+import ChatArea from "./ChatArea/ChatArea";
+
+const Chat = () => {
+    return (
+        // <Wrapper>
+        <ChatItemsContainer>
+            <ChatArea />
+        </ChatItemsContainer>
+        // </Wrapper>
+    );
+};
+
+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 = () => {
+    return (
+        <>
+            <ChatContainer>
+                <LeftNav>
+                    Security / <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: row;
+    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,19 @@
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+import { ChatRoutesContainer } from "./ChatElement";
+import Sidebar from "./Sidebar/Sidebar";
+import { Chat } from "../index";
+
+const ChatRoute = () => {
+    return (
+        <ChatRoutesContainer>
+            <Sidebar />
+
+            <Routes>
+                <Route index element={<Chat />} />
+            </Routes>
+        </ChatRoutesContainer>
+    );
+};
+
+export default ChatRoute;

src/components/Chat/Sidebar/Sidebar.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { SidebarContainer, RouteLink, SidebarTitle } from "./SidebarElement";
+import { FaUserCircle, FaCaretDown } from "react-icons/fa";
+import { useSelector } from "react-redux";
+
+const Sidebar = () => {
+    const { user } = useSelector((state) => state.auth);
+
+    return (
+        <SidebarContainer>
+            <section style={{ display: "flex", flexDirection: "row", margin: "0.2" }}>
+                <h2>
+                    <FaUserCircle />
+                </h2>
+                <h4>
+                    {user.name}
+                    <p>@{user.username}</p>
+                </h4>
+            </section>
+            <br />
+
+            <RouteLink>
+                <SidebarTitle>
+                    <FaCaretDown /> Announcement
+                </SidebarTitle>
+            </RouteLink>
+            <RouteLink>
+                <SidebarTitle>
+                    <FaCaretDown /> Support
+                </SidebarTitle>
+            </RouteLink>
+
+            <RouteLink>
+                <SidebarTitle>
+                    <FaCaretDown /> Help
+                </SidebarTitle>
+            </RouteLink>
+
+            <RouteLink>
+                <SidebarTitle>
+                    <FaCaretDown /> Security
+                </SidebarTitle>
+            </RouteLink>
+
+            <RouteLink>
+                <SidebarTitle>
+                    <FaCaretDown /> Pro-Player Only
+                </SidebarTitle>
+            </RouteLink>
+
+            <RouteLink to={"/dashboard"}>
+                <SidebarTitle>Back to Dashboard</SidebarTitle>
+            </RouteLink>
+        </SidebarContainer>
+    );
+};
+
+export default Sidebar;

src/components/Chat/Sidebar/SidebarElement.jsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+export const SidebarContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 25px;
+    background: #36403e;
+    width: 300px;
+    height: 100vh;
+    border-radius: 10px;
+    color: #f5f5f5;
+    border-right: #2a2a2a 1px solid;
+    gap: 15px;
+
+    // stick to the top
+    position: sticky;
+    top: 0;
+`;
+
+export const RouteLink = styled(Link)`
+    text-decoration: none;
+    color: #f5f5f5;
+`;
+
+export const SidebarTitle = styled.h3`
+    color: #f5f5f5;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+`;
+
+export const RoutesContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 1500px;
+`;

src/components/Dashboard/Chat/ChatHome.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Wrapper } from "../Profile/ProfileElements";
+import { RouterButton } from "../../Other/MixComponents/Buttons/ButtonElements";
+
+const ChatHome = () => {
+    return (
+        <Wrapper style={{ fontSize: 25 }}>
+            <h1>Welcome</h1>
+            <p>
+                Want to connect and communicate <br />
+                with a vibrant community of like-minded people?
+            </p>
+            <br />
+            <RouterButton to="/chat">Join the Chatroom!</RouterButton>
+        </Wrapper>
+    );
+};
+
+export default ChatHome;

src/components/Dashboard/DashboardRoute.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Route, Routes } from "react-router-dom";
-import { Dashboard, EditBlog, GoalSetter, NotFound, UserBlogs } from "../index";
+import { ChatHome, Dashboard, EditBlog, GoalSetter, NotFound, UserBlogs } from "../index";
 import CreateBlogV2 from "../Blogs/ManageBlogs/CreateBlogV2/CreateBlogV2";
 import Sidebar from "./Sidebar/Sidebar";
 import { DashboardRoutesContainer } from "./DashboardElements";
@@ -15,6 +15,7 @@ const DashboardRoute = () => {
                 <Route index element={<Dashboard />} />
                 <Route path={"goals"} element={<GoalSetter />} />
                 <Route path={"bookmarks"} element={<Bookmarks />} />
+                <Route path={"chat"} element={<ChatHome />} />
                 <Route path={"blogs"}>
                     <Route index element={<UserBlogs />} />
                     <Route exact path={"create"} element={<CreateBlogV2 />} />

src/components/Dashboard/Sidebar/Sidebar.jsx

@@ -18,6 +18,10 @@ const Sidebar = () => {
                 <SidebarTitle> User Blogs </SidebarTitle>
             </RouteLink>
 
+            <RouteLink to={"/dashboard/chat"}>
+                <SidebarTitle> Community </SidebarTitle>
+            </RouteLink>
+
             <RouteLink to={"/dashboard/goals"}>
                 <SidebarTitle> Goals </SidebarTitle>
             </RouteLink>

src/components/Header/Navbar/NavbarElements.jsx

@@ -4,7 +4,7 @@ import { AiFillCaretDown } from "react-icons/ai";
 import { TbCrown } from "react-icons/tb";
 
 export const DropdownIcon = styled(AiFillCaretDown)`
-    margin: 5px 0 0 5px;
+    margin: 0px 0 0 5px;
 `;
 
 export const Nav = styled.nav`

src/components/index.js

@@ -52,3 +52,6 @@ export { default as SingleBlog } from "./Blogs/SingleBlog/SingleBlog";
 export { default as EditBlog } from "./Blogs/ManageBlogs/EditBlog/EditBlog";
 export { default as NotFound } from "../NotFound";
 export { default as CertificateCard } from "./Other/Certificate/CertificateCard";
+
+export { default as ChatHome } from "./Dashboard/Chat/ChatHome";
+export { default as Chat } from "./Chat/Chat";