From 1373320a046b10f554d5a4f340ba1932f7622f12 Mon Sep 17 00:00:00 2001 From: Mario Randrianomearisoa Date: Mon, 9 Oct 2023 20:39:42 +0300 Subject: [PATCH 1/7] fix: alignement of icon and text in the navbar (#486) --- src/components/Header/Navbar/NavbarElements.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/Navbar/NavbarElements.jsx b/src/components/Header/Navbar/NavbarElements.jsx index fff6bb0d..5a1f0f95 100644 --- a/src/components/Header/Navbar/NavbarElements.jsx +++ b/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` From 0d00ab22ccbc1231a260bd0db825cfeb029feeab Mon Sep 17 00:00:00 2001 From: Conventional Changelog Action Date: Mon, 9 Oct 2023 17:40:06 +0000 Subject: [PATCH 2/7] chore(release): v0.53.15 [skip ci] --- CHANGELOG.md | 18 +++++++++--------- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d794d2b7..b03de9cb 100644 --- a/CHANGELOG.md +++ b/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)) - - - diff --git a/package-lock.json b/package-lock.json index c6adc4fc..437db64a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "thecyberhub.org", - "version": "0.53.14", + "version": "0.53.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index cd5268fe..df2e6e17 100644 --- a/package.json +++ b/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", From 1274d74c11440b9be101cb7c913e3e7cc1b0c4c1 Mon Sep 17 00:00:00 2001 From: Bhumika Bachchan Date: Wed, 18 Oct 2023 11:13:25 +0530 Subject: [PATCH 3/7] chat area frontend added --- package-lock.json | 2 +- src/App.jsx | 5 +- src/components/Chat/Chat.jsx | 16 +++++ src/components/Chat/ChatArea/ChatArea.jsx | 28 +++++++++ src/components/Chat/ChatElement.jsx | 61 +++++++++++++++++++ src/components/Chat/ChatRoute.jsx | 19 ++++++ src/components/Chat/Sidebar/Sidebar.jsx | 58 ++++++++++++++++++ .../Chat/Sidebar/SidebarElement.jsx | 42 +++++++++++++ src/components/Dashboard/Chat/ChatHome.jsx | 19 ++++++ src/components/Dashboard/DashboardRoute.jsx | 3 +- src/components/Dashboard/Sidebar/Sidebar.jsx | 4 ++ src/components/index.js | 3 + 12 files changed, 257 insertions(+), 3 deletions(-) create mode 100644 src/components/Chat/Chat.jsx create mode 100644 src/components/Chat/ChatArea/ChatArea.jsx create mode 100644 src/components/Chat/ChatElement.jsx create mode 100644 src/components/Chat/ChatRoute.jsx create mode 100644 src/components/Chat/Sidebar/Sidebar.jsx create mode 100644 src/components/Chat/Sidebar/SidebarElement.jsx create mode 100644 src/components/Dashboard/Chat/ChatHome.jsx diff --git a/package-lock.json b/package-lock.json index 437db64a..e8fe495e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "thecyberhub.org", - "version": "0.53.12", + "version": "0.53.15", "dependencies": { "@radix-ui/react-slot": "^1.0.1", "@reduxjs/toolkit": "^1.9.1", diff --git a/src/App.jsx b/src/App.jsx index 7f6750e0..1f2fb09f 100644 --- a/src/App.jsx +++ b/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 = () => { } /> } /> + } /> } /> diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx new file mode 100644 index 00000000..7e452029 --- /dev/null +++ b/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 ( + // + + + + // + ); +}; + +export default Chat; diff --git a/src/components/Chat/ChatArea/ChatArea.jsx b/src/components/Chat/ChatArea/ChatArea.jsx new file mode 100644 index 00000000..a815defb --- /dev/null +++ b/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 ( + <> + + + Security /
General
+ + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +     + + ); +}; + +export default ChatArea; diff --git a/src/components/Chat/ChatElement.jsx b/src/components/Chat/ChatElement.jsx new file mode 100644 index 00000000..f3c76e73 --- /dev/null +++ b/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; +`; diff --git a/src/components/Chat/ChatRoute.jsx b/src/components/Chat/ChatRoute.jsx new file mode 100644 index 00000000..8eaa6ab8 --- /dev/null +++ b/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 ( + + + + + } /> + + + ); +}; + +export default ChatRoute; diff --git a/src/components/Chat/Sidebar/Sidebar.jsx b/src/components/Chat/Sidebar/Sidebar.jsx new file mode 100644 index 00000000..71c7d44f --- /dev/null +++ b/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 ( + +
    +

    + +

    +

    + {user.name} +

    @{user.username}

    +

    +
    +
    + + + + Announcement + + + + + Support + + + + + + Help + + + + + + Security + + + + + + Pro-Player Only + + + + + Back to Dashboard + +     + ); +}; + +export default Sidebar; diff --git a/src/components/Chat/Sidebar/SidebarElement.jsx b/src/components/Chat/Sidebar/SidebarElement.jsx new file mode 100644 index 00000000..11999e99 --- /dev/null +++ b/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; +`; diff --git a/src/components/Dashboard/Chat/ChatHome.jsx b/src/components/Dashboard/Chat/ChatHome.jsx new file mode 100644 index 00000000..39b4a2a0 --- /dev/null +++ b/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 ( + +

    Welcome

    +

    + Want to connect and communicate
    + with a vibrant community of like-minded people? +

    +
    + Join the Chatroom! +     + ); +}; + +export default ChatHome; diff --git a/src/components/Dashboard/DashboardRoute.jsx b/src/components/Dashboard/DashboardRoute.jsx index 413261f0..753ad55a 100644 --- a/src/components/Dashboard/DashboardRoute.jsx +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> diff --git a/src/components/Dashboard/Sidebar/Sidebar.jsx b/src/components/Dashboard/Sidebar/Sidebar.jsx index a475ff69..7d4d548d 100644 --- a/src/components/Dashboard/Sidebar/Sidebar.jsx +++ b/src/components/Dashboard/Sidebar/Sidebar.jsx @@ -18,6 +18,10 @@ const Sidebar = () => { User Blogs + + Community + + Goals diff --git a/src/components/index.js b/src/components/index.js index 877667d5..498c9052 100644 --- a/src/components/index.js +++ b/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"; From 887115ac39461dc0e97401cf230179b0be6fe6f5 Mon Sep 17 00:00:00 2001 From: Bhumika Bachchan Date: Wed, 18 Oct 2023 20:30:49 +0530 Subject: [PATCH 4/7] Chat page ui enhanced --- src/components/Chat/Chat.jsx | 42 ++++++++++++-- src/components/Chat/ChatArea/ChatArea.jsx | 4 +- src/components/Chat/ChatElement.jsx | 2 +- src/components/Chat/ChatRoute.jsx | 6 +- src/components/Chat/DummyChat/ChatData.js | 58 +++++++++++++++++++ src/components/Chat/DummyChat/ChatMessage.jsx | 16 +++++ .../Chat/DummyChat/ChatMessageElement.jsx | 41 +++++++++++++ .../Chat/DummyChat/ChatMessageSelf.jsx | 16 +++++ src/components/Chat/Sidebar/Sidebar.jsx | 36 +++--------- src/components/Dashboard/Chat/ChatHome.jsx | 2 +- src/components/Dashboard/Sidebar/Sidebar.jsx | 3 + .../Dashboard/Sidebar/SidebarElements.jsx | 2 + 12 files changed, 190 insertions(+), 38 deletions(-) create mode 100644 src/components/Chat/DummyChat/ChatData.js create mode 100644 src/components/Chat/DummyChat/ChatMessage.jsx create mode 100644 src/components/Chat/DummyChat/ChatMessageElement.jsx create mode 100644 src/components/Chat/DummyChat/ChatMessageSelf.jsx diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx index 7e452029..0c5c8d0c 100644 --- a/src/components/Chat/Chat.jsx +++ b/src/components/Chat/Chat.jsx @@ -1,15 +1,47 @@ -import React from "react"; -// import { Wrapper } from "../Dashboard/Profile/ProfileElements"; +// 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 ( + +
    +

    Channel not found

    +
    +     + ); + } + return ( - // - + + {channel.messages.map((message, index) => + message.username === user.username ? ( + + ) : ( + + ), + )} - // ); }; diff --git a/src/components/Chat/ChatArea/ChatArea.jsx b/src/components/Chat/ChatArea/ChatArea.jsx index a815defb..ce8bd359 100644 --- a/src/components/Chat/ChatArea/ChatArea.jsx +++ b/src/components/Chat/ChatArea/ChatArea.jsx @@ -2,12 +2,12 @@ import React from "react"; import { ChatContainer, LeftNav, RightNav } from "../ChatElement"; import { FaPhoneAlt, FaVideo, FaUserCircle } from "react-icons/fa"; -const ChatArea = () => { +const ChatArea = ({ name }) => { return ( <> - Security /
    General
    + {name} /
    General
  • diff --git a/src/components/Chat/ChatElement.jsx b/src/components/Chat/ChatElement.jsx index f3c76e73..6bb1e9ef 100644 --- a/src/components/Chat/ChatElement.jsx +++ b/src/components/Chat/ChatElement.jsx @@ -26,7 +26,7 @@ export const ChatItemsContainer = styled.div` width: 100%; display: flex; - flex-direction: row; + flex-direction: column; justify-content: space-evenly; margin: 25px; border-radius: 10px; diff --git a/src/components/Chat/ChatRoute.jsx b/src/components/Chat/ChatRoute.jsx index 8eaa6ab8..30c8f771 100644 --- a/src/components/Chat/ChatRoute.jsx +++ b/src/components/Chat/ChatRoute.jsx @@ -3,6 +3,7 @@ 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 ( @@ -10,7 +11,10 @@ const ChatRoute = () => { - } /> + {/* } /> */} + {chatData.channels.map((channel) => ( + } /> + ))} ); diff --git a/src/components/Chat/DummyChat/ChatData.js b/src/components/Chat/DummyChat/ChatData.js new file mode 100644 index 00000000..ad236141 --- /dev/null +++ b/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; diff --git a/src/components/Chat/DummyChat/ChatMessage.jsx b/src/components/Chat/DummyChat/ChatMessage.jsx new file mode 100644 index 00000000..1ae74640 --- /dev/null +++ b/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 ( + + + +

    {message}

    + Today at {time} +     +     + ); +}; + +export default ChatMessage; diff --git a/src/components/Chat/DummyChat/ChatMessageElement.jsx b/src/components/Chat/DummyChat/ChatMessageElement.jsx new file mode 100644 index 00000000..74aba4d6 --- /dev/null +++ b/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; +`; diff --git a/src/components/Chat/DummyChat/ChatMessageSelf.jsx b/src/components/Chat/DummyChat/ChatMessageSelf.jsx new file mode 100644 index 00000000..0acf0510 --- /dev/null +++ b/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 ( + + + +

    {message}

    + Today at {time} +     +     + ); +}; + +export default ChatMessageSelf; diff --git a/src/components/Chat/Sidebar/Sidebar.jsx b/src/components/Chat/Sidebar/Sidebar.jsx index 71c7d44f..3d787343 100644 --- a/src/components/Chat/Sidebar/Sidebar.jsx +++ b/src/components/Chat/Sidebar/Sidebar.jsx @@ -2,6 +2,7 @@ import React from "react"; import { SidebarContainer, RouteLink, SidebarTitle } from "./SidebarElement"; import { FaUserCircle, FaCaretDown } from "react-icons/fa"; import { useSelector } from "react-redux"; +import chatData from "../DummyChat/ChatData"; const Sidebar = () => { const { user } = useSelector((state) => state.auth); @@ -19,34 +20,13 @@ const Sidebar = () => {
    - - - Announcement - - - - - Support - - - - - - Help - - - - - - Security - - - - - - Pro-Player Only - - + {chatData.channels.map((channel) => ( + + + {channel.channelname} + + + ))} Back to Dashboard diff --git a/src/components/Dashboard/Chat/ChatHome.jsx b/src/components/Dashboard/Chat/ChatHome.jsx index 39b4a2a0..99a60162 100644 --- a/src/components/Dashboard/Chat/ChatHome.jsx +++ b/src/components/Dashboard/Chat/ChatHome.jsx @@ -4,7 +4,7 @@ import { RouterButton } from "../../Other/MixComponents/Buttons/ButtonElements"; const ChatHome = () => { return ( - +

    Welcome

    Want to connect and communicate
    diff --git a/src/components/Dashboard/Sidebar/Sidebar.jsx b/src/components/Dashboard/Sidebar/Sidebar.jsx index 780406d9..93daed4e 100644 --- a/src/components/Dashboard/Sidebar/Sidebar.jsx +++ b/src/components/Dashboard/Sidebar/Sidebar.jsx @@ -14,6 +14,8 @@ import { UserProfileDescription, BiSolidCircleIcon, SideBarLink, + RouteLink, + BiChatIcon, } from "./SidebarElements"; import { useDispatch, useSelector } from "react-redux"; import { getAllUserDetails } from "../../../features/userDetail/userDetailSlice"; @@ -39,6 +41,7 @@ const Sidebar = () => { { to: "/dashboard/blogs", icon: , label: "User Blogs" }, { to: "/dashboard/goals", icon: , label: "Goals" }, { to: "/dashboard/settings/profile", icon: , label: "Settings" }, + { to: "/dashboard/chat", icon: , label: "Community" }, ]; return ( diff --git a/src/components/Dashboard/Sidebar/SidebarElements.jsx b/src/components/Dashboard/Sidebar/SidebarElements.jsx index 9bec5cda..59edc467 100644 --- a/src/components/Dashboard/Sidebar/SidebarElements.jsx +++ b/src/components/Dashboard/Sidebar/SidebarElements.jsx @@ -9,6 +9,7 @@ import { BiSolidChevronLeft, BiSolidChevronRight, BiSolidCircle, + BiChat, } from "react-icons/bi"; export const DashboardSidebarContainer = styled.div` @@ -135,3 +136,4 @@ export const BiLogoAlgoliaIcon = createStyledIcon(BiLogoAlgolia); export const CiSettingsIcon = createStyledIcon(BiCog); export const BiSolidChevronLeftIcon = createStyledIcon(BiSolidChevronLeft); export const BiSolidChevronRighIcon = createStyledIcon(BiSolidChevronRight); +export const BiChatIcon = createStyledIcon(BiChat); From 41812ecf6f84ae434f354cff18901c0f48262408 Mon Sep 17 00:00:00 2001 From: Bhumika Bachchan Date: Wed, 18 Oct 2023 22:47:31 +0530 Subject: [PATCH 5/7] SendMessage area added --- src/components/Chat/Chat.jsx | 7 ++-- src/components/Chat/ChatElement.jsx | 65 ++++++++++++++++++++++++++++- src/components/Chat/SendMessage.jsx | 18 ++++++++ 3 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 src/components/Chat/SendMessage.jsx diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx index 0c5c8d0c..5d388145 100644 --- a/src/components/Chat/Chat.jsx +++ b/src/components/Chat/Chat.jsx @@ -1,4 +1,3 @@ -// Chat.js import React, { useState, useEffect } from "react"; import { useLocation } from "react-router-dom"; import { useSelector } from "react-redux"; @@ -7,19 +6,18 @@ 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(); // Use useLocation to get the URL location + const location = useLocation(); 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 ( @@ -41,6 +39,7 @@ const Chat = () => { ), )} + ); }; diff --git a/src/components/Chat/ChatElement.jsx b/src/components/Chat/ChatElement.jsx index 6bb1e9ef..244a0825 100644 --- a/src/components/Chat/ChatElement.jsx +++ b/src/components/Chat/ChatElement.jsx @@ -54,8 +54,69 @@ export const RightNav = styled.div` `; export const Chatbox = styled.div` - width: 100%; - + 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; +`; diff --git a/src/components/Chat/SendMessage.jsx b/src/components/Chat/SendMessage.jsx new file mode 100644 index 00000000..7cb95dfe --- /dev/null +++ b/src/components/Chat/SendMessage.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import { MessageInputContainer, Message, Input, InputGroup } from "./ChatElement"; +import { BiSend } from "react-icons/bi"; + +const SendMessage = () => { + return ( + + + + + + + + + ); +}; + +export default SendMessage; From 837076f451cc59ce99d9f8aa4e7e2d5c03d6862e Mon Sep 17 00:00:00 2001 From: Kabir <44284877+kabir0x23@users.noreply.github.com> Date: Wed, 18 Oct 2023 23:22:26 +0530 Subject: [PATCH 6/7] fix: minor issues --- CHANGELOG.md | 30 ++++---------- package-lock.json | 2 +- package.json | 2 +- src/components/Chat/ChatElement.jsx | 1 - src/components/Dashboard/Chat/ChatHome.jsx | 16 ++++++-- .../Dashboard/DashboardElements.jsx | 2 +- src/components/Dashboard/DashboardRoute.jsx | 35 ++++++++++------ src/components/Dashboard/Sidebar/Sidebar.jsx | 40 ++++++++----------- .../Dashboard/Sidebar/SidebarElements.jsx | 13 +++--- 9 files changed, 69 insertions(+), 72 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b03de9cb..14bf972b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,45 +1,29 @@ -## [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) - ### Bug Fixes -* Message icon is in middle in mobile version issue - [#443](https://github.com/thecyberworld/TheCyberHUB/issues/443) ([#446](https://github.com/thecyberworld/TheCyberHUB/issues/446)) ([eb8ddab](https://github.com/thecyberworld/TheCyberHUB/commit/eb8ddaba854a33d73cf109ef12c6e7e57186cf5d)) - - +- Message icon is in middle in mobile version issue - [#443](https://github.com/thecyberworld/TheCyberHUB/issues/443) ([#446](https://github.com/thecyberworld/TheCyberHUB/issues/446)) ([eb8ddab](https://github.com/thecyberworld/TheCyberHUB/commit/eb8ddaba854a33d73cf109ef12c6e7e57186cf5d)) ## [0.53.13](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.12...v0.53.13) (2023-10-01) - ### Bug Fixes -* Spelling Mistake ([#444](https://github.com/thecyberworld/TheCyberHUB/issues/444)) ([0055904](https://github.com/thecyberworld/TheCyberHUB/commit/0055904123cc392a950c264fbe17bfae9a3ae2be)) - - +- Spelling Mistake ([#444](https://github.com/thecyberworld/TheCyberHUB/issues/444)) ([0055904](https://github.com/thecyberworld/TheCyberHUB/commit/0055904123cc392a950c264fbe17bfae9a3ae2be)) ## [0.53.12](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.11...v0.53.12) (2023-09-23) - ### Bug Fixes -* social container & links ([2663bfd](https://github.com/thecyberworld/TheCyberHUB/commit/2663bfda9bba8ee540a241467e16f59fcb999090)) - - +- social container & links ([2663bfd](https://github.com/thecyberworld/TheCyberHUB/commit/2663bfda9bba8ee540a241467e16f59fcb999090)) ## [0.53.11](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.10...v0.53.11) (2023-09-15) - ### Bug Fixes -* TheCyberHUB name ([8525677](https://github.com/thecyberworld/TheCyberHUB/commit/852567753cba30135e1100e06ae155c5db2e50e3)) +- TheCyberHUB name ([8525677](https://github.com/thecyberworld/TheCyberHUB/commit/852567753cba30135e1100e06ae155c5db2e50e3)) +## [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)) diff --git a/package-lock.json b/package-lock.json index e18885cb..fd9e2ebb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "thecyberhub.org", - "version": "0.53.15", + "version": "0.53.14", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 7c2ad447..19bf750f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "homepage": "https://thecyberhub.org/", "name": "thecyberhub.org", "private": true, - "version": "0.53.15", + "version": "0.53.14", "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d dist", diff --git a/src/components/Chat/ChatElement.jsx b/src/components/Chat/ChatElement.jsx index 244a0825..7437d6e8 100644 --- a/src/components/Chat/ChatElement.jsx +++ b/src/components/Chat/ChatElement.jsx @@ -1,5 +1,4 @@ import styled from "styled-components"; - export const ChatRoutesContainer = styled.div` display: flex; flex-direction: row; diff --git a/src/components/Dashboard/Chat/ChatHome.jsx b/src/components/Dashboard/Chat/ChatHome.jsx index 99a60162..1f0d9d8e 100644 --- a/src/components/Dashboard/Chat/ChatHome.jsx +++ b/src/components/Dashboard/Chat/ChatHome.jsx @@ -4,13 +4,23 @@ import { RouterButton } from "../../Other/MixComponents/Buttons/ButtonElements"; const ChatHome = () => { return ( - -

    Welcome

    + +

    Welcome

    Want to connect and communicate
    with a vibrant community of like-minded people?

    -
    +

    Join the Chatroom!     ); diff --git a/src/components/Dashboard/DashboardElements.jsx b/src/components/Dashboard/DashboardElements.jsx index 403a24e6..6932f39c 100644 --- a/src/components/Dashboard/DashboardElements.jsx +++ b/src/components/Dashboard/DashboardElements.jsx @@ -7,7 +7,7 @@ export const DashboardRoutesContainer = styled.div` align-items: start; justify-content: space-between; width: 100%; - max-width: 1500px; + //max-width: 1500px; `; export const DashboardContainer = styled.div` diff --git a/src/components/Dashboard/DashboardRoute.jsx b/src/components/Dashboard/DashboardRoute.jsx index 753ad55a..2c6a1d80 100644 --- a/src/components/Dashboard/DashboardRoute.jsx +++ b/src/components/Dashboard/DashboardRoute.jsx @@ -11,19 +11,30 @@ const DashboardRoute = () => { - - } /> - } /> - } /> - } /> - - } /> - } /> - } /> +
    + + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> - - } /> - + +
    ); }; diff --git a/src/components/Dashboard/Sidebar/Sidebar.jsx b/src/components/Dashboard/Sidebar/Sidebar.jsx index 93daed4e..31f26466 100644 --- a/src/components/Dashboard/Sidebar/Sidebar.jsx +++ b/src/components/Dashboard/Sidebar/Sidebar.jsx @@ -14,12 +14,13 @@ import { UserProfileDescription, BiSolidCircleIcon, SideBarLink, - RouteLink, + // RouteLink, BiChatIcon, } from "./SidebarElements"; import { useDispatch, useSelector } from "react-redux"; import { getAllUserDetails } from "../../../features/userDetail/userDetailSlice"; import { cdnContentImagesUrl } from "../../../features/apiUrl"; +import { CgOpenCollective } from "react-icons/cg"; const Sidebar = () => { const dispatch = useDispatch(); @@ -37,11 +38,22 @@ const Sidebar = () => { const sidebarItems = [ { to: "/", icon: , label: "Home" }, - { to: "/dashboard/bookmarks", icon: , label: "Bookmarks" }, + { to: "/dashboard/chat", icon: , label: "Community" }, + { + to: "/dashboard/tools", + icon: ( + + ), + label: "Tools", + }, { to: "/dashboard/blogs", icon: , label: "User Blogs" }, + { to: "/dashboard/bookmarks", icon: , label: "Bookmarks" }, { to: "/dashboard/goals", icon: , label: "Goals" }, { to: "/dashboard/settings/profile", icon: , label: "Settings" }, - { to: "/dashboard/chat", icon: , label: "Community" }, ]; return ( @@ -61,27 +73,7 @@ const Sidebar = () => { -
    -

    {isOpen && "Dashboard"}

    -
    - - Home - - - Bookmarks - - - - User Blogs - - - - Community - - - - Goals - +
    {isOpen &&

    Dashboard

    }
    {/* Analytics */} {/* Settings */} diff --git a/src/components/Dashboard/Sidebar/SidebarElements.jsx b/src/components/Dashboard/Sidebar/SidebarElements.jsx index 59edc467..63ce96c0 100644 --- a/src/components/Dashboard/Sidebar/SidebarElements.jsx +++ b/src/components/Dashboard/Sidebar/SidebarElements.jsx @@ -27,7 +27,7 @@ export const DashboardSidebarContainer = styled.div` // stick to the top position: sticky; top: 0; - width: ${(props) => (props.isOpen ? "40%" : "10%")}; + min-width: ${(props) => (props.isOpen ? "250px" : "75px")}; transition: width 0.3s ease-in-out; .heading { @@ -46,7 +46,8 @@ export const SideBarLink = styled(NavLink)` display: flex; align-items: center; border-radius: 8px; - height: 80px; + height: 50px; + gap: 16px; padding-left: ${(props) => (props.isOpen ? "24px" : "0")}; transition: background 0.3s ease-in-out, padding 0.3s ease-in-out; width: 100%; @@ -54,8 +55,8 @@ export const SideBarLink = styled(NavLink)` &:hover, &.active { - background: ${(props) => (props.isOpen ? "#4422EF" : "")}; - color: ${(props) => (props.isOpen ? "" : "#4422EF")}; + background: ${(props) => (props.isOpen ? "#009dec" : "")}; + color: ${(props) => (props.isOpen ? "" : "#009dff")}; } `; @@ -67,7 +68,6 @@ export const SidebarTitle = styled.h2` opacity: ${(props) => (props.isOpen ? "1" : "0")}; transition: opacity 0.6s ease-in-out 0.2s; margin-bottom: 0; - margin-left: 16px; `; export const ToggleButton = styled.div` @@ -75,8 +75,9 @@ export const ToggleButton = styled.div` position: absolute; right: ${(props) => (props.isOpen ? "-32px" : "-68px")}; background-color: ${(props) => (props.isOpen ? "#000000" : "#090909")}; - padding: 12px; + padding: 10px; border-radius: ${(props) => (props.isOpen ? "12px" : "0 12px 12px 0")}; + background-color: ${(props) => (props.isOpen ? "transparent" : "#181818")}; `; export const UserProfile = styled.div` From 61fcc9b36c88f79fab493246482df6cf210aeac4 Mon Sep 17 00:00:00 2001 From: Kabir <44284877+kabir0x23@users.noreply.github.com> Date: Wed, 18 Oct 2023 23:25:48 +0530 Subject: [PATCH 7/7] Update CHANGELOG.md --- CHANGELOG.md | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14bf972b..d794d2b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,29 +1,45 @@ ## [0.53.14](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.13...v0.53.14) (2023-10-01) + ### Bug Fixes -- Message icon is in middle in mobile version issue - [#443](https://github.com/thecyberworld/TheCyberHUB/issues/443) ([#446](https://github.com/thecyberworld/TheCyberHUB/issues/446)) ([eb8ddab](https://github.com/thecyberworld/TheCyberHUB/commit/eb8ddaba854a33d73cf109ef12c6e7e57186cf5d)) +* Message icon is in middle in mobile version issue - [#443](https://github.com/thecyberworld/TheCyberHUB/issues/443) ([#446](https://github.com/thecyberworld/TheCyberHUB/issues/446)) ([eb8ddab](https://github.com/thecyberworld/TheCyberHUB/commit/eb8ddaba854a33d73cf109ef12c6e7e57186cf5d)) + + ## [0.53.13](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.12...v0.53.13) (2023-10-01) + ### Bug Fixes -- Spelling Mistake ([#444](https://github.com/thecyberworld/TheCyberHUB/issues/444)) ([0055904](https://github.com/thecyberworld/TheCyberHUB/commit/0055904123cc392a950c264fbe17bfae9a3ae2be)) +* Spelling Mistake ([#444](https://github.com/thecyberworld/TheCyberHUB/issues/444)) ([0055904](https://github.com/thecyberworld/TheCyberHUB/commit/0055904123cc392a950c264fbe17bfae9a3ae2be)) + + ## [0.53.12](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.11...v0.53.12) (2023-09-23) + ### Bug Fixes -- social container & links ([2663bfd](https://github.com/thecyberworld/TheCyberHUB/commit/2663bfda9bba8ee540a241467e16f59fcb999090)) +* social container & links ([2663bfd](https://github.com/thecyberworld/TheCyberHUB/commit/2663bfda9bba8ee540a241467e16f59fcb999090)) + + ## [0.53.11](https://github.com/thecyberworld/TheCyberHUB/compare/v0.53.10...v0.53.11) (2023-09-15) + ### Bug Fixes -- TheCyberHUB name ([8525677](https://github.com/thecyberworld/TheCyberHUB/commit/852567753cba30135e1100e06ae155c5db2e50e3)) +* TheCyberHUB name ([8525677](https://github.com/thecyberworld/TheCyberHUB/commit/852567753cba30135e1100e06ae155c5db2e50e3)) + + ## [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)) +* minor issues ([#435](https://github.com/thecyberworld/TheCyberHUB/issues/435)) ([39c0631](https://github.com/thecyberworld/TheCyberHUB/commit/39c0631d6650a1ccd8437eca88dc63c5fcd4cfcb)) + + +