feat: community events | improvement

src/App.jsx

@@ -34,7 +34,7 @@ import UserProfile from "./components/Dashboard/Profile/UserProfile";
 import InternshipResponse from "./components/Dashboard/FormData/InternshipResponse";
 import EditPublicProfile from "./components/Dashboard/Profile/EditPublicProfile/EditPublicProfile";
 import Volunteer from "./components/Opportunities/Volunteer/Volunteer";
-import TimeLineEvent from "./components/Opportunities/TimeLineEvent/TimeLineEvent";
+import DisplayCommunityEvents from "./components/Opportunities/DisplayCommunityEvents";
 import TheCyberXcel from "./components/Opportunities/TheCyberXcel/TheCyberXcel";
 import OpenSecProjects from "./components/Opportunities/OpenSecProjects/OpenSecProjects";
 import DashboardRoute from "./components/Dashboard/DashboardRoute";
@@ -53,6 +53,7 @@ import ExploreRoutes from "./components/Explore/ExploreRoutes";
 import Leaderboard from "./components/Other/CyberGames/Leaderboard/Leaderboard";
 import SettingsRoute from "./components/Dashboard/Settings";
 import CheatSheetsRoutes from "./components/CheatSheets/CheatSheetsRoutes";
+import AdminDashboardRoute from "./components/AdminDashboard/AdminDashboardRoute";
 // import isAuthenticated from "./features/isAuthenticated";
 // import ChatBot from "./components/ChatBot/ChatBot";
 
@@ -78,11 +79,14 @@ const App = () => {
 
     const hideHomeHeader = () => {
         const pathDashboard = pathname.includes("/dashboard");
+        const pathAdminDashboard = pathname.includes("/admin-dashboard");
         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 || pathAdminDashboard || pathLogin || pathRegister || pathForgetPassword || pathResetPassword
+        );
     };
 
     const [isOpen, setIsOpen] = useState(false);
@@ -133,7 +137,7 @@ const App = () => {
                         <Route path={"/dashboard/settings/*"} element={<SettingsRoute />} />
 
                         <Route path={"/dashboard/*"} element={<DashboardRoute />} />
-
+                        <Route path={"/admin-dashboard/*"} element={<AdminDashboardRoute />} />
                         <Route exact path={"/contact"} element={<ContactForm />} />
 
                         <Route>
@@ -151,7 +155,7 @@ const App = () => {
 
                         <Route exact path={"/volunteer"} element={<Volunteer />} />
                         <Route exact path={"/opensec-projects"} element={<OpenSecProjects />} />
-                        <Route exact path={"/timeline-events"} element={<TimeLineEvent />} />
+                        <Route exact path={"/community-events"} element={<DisplayCommunityEvents />} />
                         <Route exact path={"/thecyberxcel"} element={<TheCyberXcel />} />
                         <Route exact path={"/thecyberspeak"} element={<TheCyberXcel />} />
 

src/components/AdminDashboard/AdminDashboard.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Wrapper } from "../Dashboard/Profile/ProfileElements";
+import { DashboardContainer } from "../Dashboard/DashboardElements";
+import UnderMaintenance from "../Other/UnderMaintenance/UnderMaintenance";
+import apiStatus from "../../features/apiStatus";
+import LoadingSpinner from "../Other/MixComponents/Spinner/LoadingSpinner";
+// import AuthPopup from "../../pages/AuthPopup/AuthPopup";
+
+const AdminDashboard = () => {
+    const { isApiLoading, isApiWorking } = apiStatus();
+    // const [isLoading, setIsLoading] = useState(false);
+
+    if (isApiLoading) return <LoadingSpinner />;
+
+    if (!isApiWorking) return <UnderMaintenance />;
+
+    return (
+        <Wrapper>
+            <DashboardContainer>{/* <DashboardItems /> */}</DashboardContainer>
+        </Wrapper>
+    );
+};
+
+export default AdminDashboard;

src/components/AdminDashboard/AdminDashboardRoute.jsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import { Route, Routes, useNavigate } from "react-router-dom";
+import { NotFound } from "../index";
+import AdminDashboardSidebar from "./AdminDashboardSidebar/AdminDashboardSidebar";
+import { DashboardRoutesContainer } from "../Dashboard/DashboardElements";
+import { useDispatch, useSelector } from "react-redux";
+import { getAllUserDetails } from "../../features/userDetail/userDetailSlice";
+import AdminDashboard from "./AdminDashboard";
+import ManageCommunityEvents from "./ManageCommunityEvents/ManageCommunityEvents";
+
+const DashboardRoute = () => {
+    const dispatch = useDispatch();
+    const { userDetails } = useSelector((state) => state.userDetail);
+    const { user } = useSelector((state) => state.auth);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!user) {
+            navigate("/");
+        }
+        // setTimeout(() => {
+        //     setIsLoading(false);
+        // }, 1000);
+    }, [user, navigate]);
+
+    useEffect(() => {
+        if (user) dispatch(getAllUserDetails());
+    }, [dispatch, user]);
+
+    const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id);
+
+    return (
+        <DashboardRoutesContainer>
+            <AdminDashboardSidebar userDetail={userDetail} />
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "100%",
+                    height: "100%",
+                }}
+            >
+                <Routes>
+                    <Route index element={<AdminDashboard />} />
+                    <Route path={"manage-community-events"} element={<ManageCommunityEvents />} />
+                    <Route path={"*"} element={<NotFound />} />
+                </Routes>
+            </div>
+        </DashboardRoutesContainer>
+    );
+};
+
+export default DashboardRoute;

src/components/AdminDashboard/AdminDashboardSidebar/AdminDashbaordSidebarElements.jsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { MdOutlineEventNote } from "react-icons/md";
+import { BiHomeCircle } from "react-icons/bi";
+
+const createStyledIcon = (IconComponent) => {
+    return styled(IconComponent)`
+        font-size: 20px;
+    `;
+};
+
+export const MdOutlineEventNoteIcon = createStyledIcon(MdOutlineEventNote);
+export const BiHomeCircleIcon = createStyledIcon(BiHomeCircle);

src/components/AdminDashboard/AdminDashboardSidebar/AdminDashboardSidebar.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { BiHomeCircleIcon, MdOutlineEventNoteIcon } from "./AdminDashbaordSidebarElements";
+import GeneralDashboardSidebar from "../../Common/GeneralDashboardSidebar";
+
+const AdminDashboardSidebar = ({ userDetail }) => {
+    const sidebarItems = [
+        { to: "/", icon: <BiHomeCircleIcon />, label: "Home" },
+        { to: "/admin-dashboard/manage-community-events", icon: <MdOutlineEventNoteIcon />, label: "Community Events" },
+    ];
+
+    return <GeneralDashboardSidebar userDetail={userDetail} sidebarItems={sidebarItems} />;
+};
+
+export default AdminDashboardSidebar;

src/components/AdminDashboard/ManageCommunityEvents/ManageCommunityEvents.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import CommunityEvents from "../../CommunityEvents";
+import {
+    AiFillClockCircleIcon,
+    AiOutlineCloseCircleIcon,
+    BiUserPlusIcon,
+    CommunityEventsContainer,
+    GoProjectSymlinkIcon,
+    MdLocationOnIcon,
+} from "./ManageCommunityEventsElements";
+
+const ManageCommunityEvents = () => {
+    const actionsIcon = [
+        { icon: AiFillClockCircleIcon, text: "Reschedule Event" },
+        { icon: MdLocationOnIcon, text: "Edit location" },
+        { icon: GoProjectSymlinkIcon, text: "Change Event Link" },
+        { icon: BiUserPlusIcon, text: "Invite people" },
+        { icon: AiOutlineCloseCircleIcon, text: "Cancel event" },
+    ];
+    return (
+        <CommunityEventsContainer>
+            <CommunityEvents
+                title="Manage Community Events"
+                subtitle="Here you can manage the community events"
+                modify
+                actionsIcon={actionsIcon}
+            />
+            ;
+        </CommunityEventsContainer>
+    );
+};
+export default ManageCommunityEvents;

src/components/AdminDashboard/ManageCommunityEvents/ManageCommunityEventsElements.jsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { AiFillClockCircle, AiOutlineCloseCircle } from "react-icons/ai";
+import { MdLocationOn } from "react-icons/md";
+import { BiUserPlus } from "react-icons/bi";
+import { GoProjectSymlink } from "react-icons/go";
+
+export const CommunityEventsContainer = styled.div`
+    width: 100%;
+    height: 100vh;
+    overflow: auto;
+`;
+const createStyledIcon = (IconComponent) => {
+    return styled(IconComponent)`
+        width: 20px;
+        height: 20px;
+    `;
+};
+
+export const AiFillClockCircleIcon = createStyledIcon(AiFillClockCircle);
+export const MdLocationOnIcon = createStyledIcon(MdLocationOn);
+export const BiUserPlusIcon = createStyledIcon(BiUserPlus);
+export const AiOutlineCloseCircleIcon = createStyledIcon(AiOutlineCloseCircle);
+export const GoProjectSymlinkIcon = createStyledIcon(GoProjectSymlink);

src/components/CaptureTheFlag/CTF.jsx

@@ -10,7 +10,7 @@ import apiStatus from "../../features/apiStatus";
 // import CtfCard from "./CtfCard";
 import CtfChallenges from "./CTFCards/CtfChallenges";
 import { RankTrophy } from "../Header/Navbar/NavbarElements";
-import { RouteLink } from "../Dashboard/DashbaordSidebar/DashbaordSidebarElements";
+import { RouteLink } from "../Common/GeneralDashboardSidebar/GeneralDashboardSidebarElements";
 import LoadingSpinner from "../Other/MixComponents/Spinner/LoadingSpinner";
 import SearchInputBox from "../Common/SearchInputBox";
 

src/components/Common/GeneralDashboardSidebar/GeneralDashboardSidebar.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import {
+    DashboardSidebarContainer,
+    SidebarTitle,
+    BiSolidChevronLeftIcon,
+    BiSolidChevronRighIcon,
+    UserProfile,
+    UserProfileDescription,
+    BiSolidCircleIcon,
+    SideBarLink,
+    SideBarLinkContainer,
+} from "./GeneralDashboardSidebarElements";
+import { cdnContentImagesUrl } from "../../../features/apiUrl";
+
+const GeneralDashboardSidebar = ({ userDetail, sidebarItems }) => {
+    const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || "avatarDummy.png"));
+
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+        <DashboardSidebarContainer isOpen={isOpen}>
+            <UserProfile isOpen={isOpen}>
+                <div className="user-profile-image">
+                    <img
+                        style={{
+                            width: "40px",
+                            height: "40px",
+                        }}
+                        src={avatar}
+                        alt={userDetail?.username + " Profile Picture"}
+                    />
+                    <BiSolidCircleIcon />
+                </div>
+                <UserProfileDescription isOpen={isOpen}>
+                    <h4>{userDetail?.name}</h4>
+                    <span>@{userDetail?.username}</span>
+                </UserProfileDescription>
+            </UserProfile>
+
+            <SideBarLinkContainer isOpen={isOpen}>
+                {sidebarItems.map((item) => (
+                    <SideBarLink key={item.to} to={item.to} isOpen={isOpen}>
+                        {item.icon}
+                        {isOpen && <SidebarTitle isOpen={isOpen}> {item.label} </SidebarTitle>}
+                    </SideBarLink>
+                ))}
+            </SideBarLinkContainer>
+
+            <SideBarLink
+                style={{
+                    height: "50px",
+                    position: "absolute",
+                    bottom: "0",
+                    left: "0",
+                    width: "100%",
+                    backgroundColor: "#2a2a2a",
+                    display: "flex",
+                    borderRadius: "0",
+                    color: "#f5f5f5",
+                }}
+                isOpen={isOpen}
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {isOpen ? (
+                    <>
+                        <BiSolidChevronLeftIcon />
+                        <SidebarTitle isOpen={isOpen}> Collapse </SidebarTitle>{" "}
+                    </>
+                ) : (
+                    <BiSolidChevronRighIcon />
+                )}
+            </SideBarLink>
+        </DashboardSidebarContainer>
+    );
+};
+
+export default GeneralDashboardSidebar;