feat: events | small modification events

package.json

@@ -66,7 +66,7 @@
         "eslint-config-standard": "^17.0.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-n": "^15.3.0",
-        "eslint-plugin-no-relative-import-paths": "^1.5.3",
+        "eslint-plugin-no-relative-import-paths": "^1.5.4",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react": "^7.31.10",
         "gh-pages": "^4.0.0",

src/components/Blogs/Blogs.jsx

@@ -9,7 +9,7 @@ import apiStatus from "src/features/apiStatus";
 import BlogCards from "src/components/Blogs/BlogCard/BlogCards";
 import { getAllUserDetails, userDetailReset } from "src/features/userDetail/userDetailSlice";
 import { getFollowData, reset } from "src/features/follow/followSlice";
-import Sidebar from "src/components/Feeds/SocialSidebar/Sidebar";
+import Sidebar from "src/components/Common/SocialSidebar/Sidebar";
 
 const Blogs = () => {
     const dispatch = useDispatch();

src/components/Common/SocialSidebar/SidebarElements.jsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+export const SidebarContainer = styled.div`
+    position: sticky;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 10px;
+    top: 100px;
+
+    width: 100%;
+    max-width: 400px;
+    min-width: ${(props) => (props.sidebarType === "explore" ? "300px" : "400px")};
+
+    color: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+`;
+
+export const FilterButton = styled.button`
+    font-size: 15px;
+    width: 100%;
+    gap: 10px;
+    font-weight: 600;
+    padding: 5px 10px;
+    background-color: ${({ activeButton }) => (activeButton ? "#ff6b08" : "")};
+    color: ${({ activeButton }) => (activeButton ? "#0a0a0a" : "")};
+    height: 6vh;
+    padding: 0 20px;
+    &:first-child {
+        border-top-left-radius: 7px;
+        border-bottom-left-radius: 7px;
+    }
+
+    &:last-child {
+        border-top-right-radius: 7px;
+        border-bottom-right-radius: 7px;
+    }
+`;

src/components/Common/SocialSidebar/SidebarFilterButton.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { FilterButton } from "./SidebarElements";
+
+const SidebarFilterButton = ({ filterLabel, onClick, activeButton, id }) => {
+    return (
+        <FilterButton activeButton={activeButton === id} onClick={() => onClick(id)}>
+            {filterLabel}
+        </FilterButton>
+    );
+};
+export default SidebarFilterButton;

src/components/Common/SocialSidebar/SidebarFilterButtons.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import SidebarFilterButton from "./SidebarFilterButton";
+
+const SidebarFilterButtons = ({ filterButtonsData, defaultButtonId = "" }) => {
+    const [activeButton, setActiveButton] = useState(defaultButtonId);
+
+    const renderButtons = filterButtonsData.map(({ filterLabel, onClick, id }) => {
+        const handleClick = (filterId) => {
+            setActiveButton(filterId);
+            onClick(filterLabel);
+        };
+
+        return (
+            <SidebarFilterButton
+                activeButton={activeButton}
+                filterLabel={filterLabel}
+                onClick={handleClick}
+                id={id}
+                key={id}
+            />
+        );
+    });
+    return <div style={{ display: "flex", justifyContent: "space-between" }}>{renderButtons}</div>;
+};
+export default SidebarFilterButtons;

src/components/Common/SocialSidebar/index.js

@@ -0,0 +1,5 @@
+import Sidebar from "./Sidebar";
+import SidebarFilterButton from "./SidebarFilterButton";
+import SidebarFilterButtons from "./SidebarFilterButtons";
+
+export { Sidebar, SidebarFilterButton, SidebarFilterButtons };

src/components/CommunityEvents/CommunityEvents.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { toast } from "react-toastify";
 
@@ -13,13 +13,15 @@ import {
     EventList,
     EventNote,
     CommunityEventHeaderContainer,
+    FilterContainer,
 } from "./CommunityEventsElement";
 import NoDataFound from "src/assets/images/no_data_found.svg";
 import { EventItemList } from "./EventItemList";
 import { RouterNavCreateButton } from "src/components/Header/Navbar/NavbarElements";
 import ModifyCommunityEvent from "./ModifyCommunityEvent";
 import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
 import ModifyTimeline from "./ModifyTimeline";
+import { SidebarFilterButtons } from "src/components/Common/SocialSidebar";
 
 const CommunityEvents = ({
     pageHeader,
@@ -39,6 +41,7 @@ const CommunityEvents = ({
     const { events, isEventLoading, isEventError, eventMessage } = useSelector((state) => state.events);
     const [isActiveTab, setActiveTab] = useState(0);
     const [openCreatingNewEvent, setOpenCreatingNewEvent] = useState(false);
+    const [filterValue, setFilterValue] = useState("");
 
     const tabNames = [
         { id: 0, status: "upcoming" },
@@ -64,7 +67,37 @@ const CommunityEvents = ({
         return () => dispatch(eventsReset());
     }, [dispatch]);
 
-    const filteredEvents = events
+    const handleFilterUpdate = (filterLabel) => {
+        setFilterValue(filterLabel);
+    };
+
+    const filterButtonsData = useMemo(
+        () => [
+            {
+                filterLabel: "All",
+                onClick: handleFilterUpdate,
+                id: "All" + Math.random() * 100,
+            },
+            {
+                filterLabel: "Join",
+                onClick: handleFilterUpdate,
+                id: "Join" + Math.random() * 100,
+            },
+            {
+                filterLabel: "Joined",
+                onClick: handleFilterUpdate,
+                id: "Joined" + Math.random() * 100,
+            },
+            {
+                filterLabel: "Full",
+                onClick: handleFilterUpdate,
+                id: "Full" + Math.random() * 100,
+            },
+        ],
+        [],
+    );
+
+    let filteredEvents = events
         ? events
               .filter((event) => {
                   let eventFit = false;
@@ -94,6 +127,38 @@ const CommunityEvents = ({
                   return a.date < b.date || (a.date === b.date && a.startTime < b.startTime);
               })
         : [];
+
+    if (filterValue) {
+        filteredEvents = filteredEvents.filter((event) => {
+            let suitable = false;
+            switch (filterValue) {
+                case "Full":
+                    if (
+                        event.maxParticipantsNumber - event.participants.length === 0 &&
+                        !eventsJoinedId.includes(event._id)
+                    ) {
+                        suitable = true;
+                    }
+                    break;
+                case "Joined":
+                    if (eventsJoinedId.includes(event._id)) {
+                        suitable = true;
+                    }
+                    break;
+                case "Join":
+                    if (
+                        event.maxParticipantsNumber - event.participants.length !== 0 &&
+                        !eventsJoinedId.includes(event._id)
+                    ) {
+                        suitable = true;
+                    }
+                    break;
+                default:
+                    suitable = true;
+            }
+            return suitable; // }
+        });
+    }
     const handleModifyEvent = (newEvent, eventId = "") => {
         if (!eventId) return dispatch(createEvent(newEvent));
         dispatch(updateEvent({ id: newEvent._id, eventData: newEvent }));
@@ -143,6 +208,14 @@ const CommunityEvents = ({
                                     Create Event
                                 </RouterNavCreateButton>
                             )}
+                            {!modify && (
+                                <FilterContainer>
+                                    <SidebarFilterButtons
+                                        filterButtonsData={filterButtonsData}
+                                        defaultButtonId={filterButtonsData[0].id}
+                                    />
+                                </FilterContainer>
+                            )}
                         </CommunityEventHeaderContainer>
                         <EventList>
                             {modify && openCreatingNewEvent && (

src/components/CommunityEvents/CommunityEventsElement.jsx

@@ -27,6 +27,18 @@ export const SubHeader = styled.p`
     color: gray;
 `;
 
+export const FilterContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    background: #131313;
+    border-radius: 7px;
+    height: 6vh;
+    align-self: center;
+    margin-bottom: 2.5rem;
+`;
 export const Tabs = styled.div`
     display: flex;
     gap: 1rem;

src/components/CommunityEvents/EventItemList.jsx

@@ -90,15 +90,17 @@ export const EventItemList = ({ event, actions, index, modify, eventsJoinedId, u
                             <div className="action">
                                 <div
                                     className={`action-edit without-dropdown ${
-                                        leftPlacesToJoin === 0
+                                        leftPlacesToJoin === 0 && actionDisplay !== "Joined"
                                             ? " uniqe-state-button"
                                             : actionDisplay === "Join"
                                             ? " enable-button"
                                             : " disable-button"
                                     }`}
                                     onClick={handleDisplayActionClick}
                                 >
-                                    <p>{leftPlacesToJoin === 0 ? "Full" : actionDisplay}</p>
+                                    <p>
+                                        {leftPlacesToJoin === 0 && actionDisplay !== "Joined" ? "Full" : actionDisplay}
+                                    </p>
                                 </div>
                             </div>
                             <div className="action">

src/components/CommunityEvents/ModifyTimeline.jsx

@@ -92,6 +92,7 @@ const ModifyTimeline = ({ onModify, onCloseChangeMode, modifyEvent, eventManageT
                 }
                 return validationError;
             });
+
             if (
                 new Date(modifyEvent.startTime) > new Date(valueObj.startTime) ||
                 new Date(modifyEvent.endTime) < new Date(valueObj.endTime) ||
@@ -102,7 +103,6 @@ const ModifyTimeline = ({ onModify, onCloseChangeMode, modifyEvent, eventManageT
             }
             return validationError;
         });
-
         if (validationError || timeValidationError) {
             if (validationError)
                 return toast.error("Some of the input fields are empty, fill all the fields and try again");
@@ -111,13 +111,17 @@ const ModifyTimeline = ({ onModify, onCloseChangeMode, modifyEvent, eventManageT
                 toast.error(
                     `In addition, the sub-event needs to be during the event time. from: ${format(
                         new Date(modifyEvent.startTime),
-                        "EEEE hh:m a",
-                    )}, to: ${format(new Date(modifyEvent.endTime), "EEEE hh:m a")}`,
+                        "EEEE hh:mm a",
+                    )}, to: ${format(new Date(modifyEvent.endTime), "EEEE hh:mm a")}`,
                 );
                 return;
             }
         }
-        const timelineArray = convertFromObjToArray(timeLineListItems);
+        const timelineArray = convertFromObjToArray(timeLineListItems).sort((itemA, itemB) => {
+            const firstStart = new Date(itemA.startTime) - new Date(itemB.startTime);
+            if (firstStart) return firstStart;
+            return new Date(itemA.endTime) - new Date(itemB.endTime);
+        });
         onModify({ ...modifyEvent, timeline: timelineArray }, eventManageTimelineId);
         onCloseChangeMode();
     };

src/components/CommunityEvents/TimelineListItemDisplay.jsx

@@ -45,8 +45,7 @@ const TimelineListItemDisplay = ({ timeLineListItemObj, setTimelineListItems, ra
             return { ...prevTimeline, [updateTimelineItem.id]: { ...updateTimelineItem } };
         });
     };
-    const dateFieldType =
-        new Date(rangeDate.to).getDate() - new Date(rangeDate.from).getDate() > 0 ? "pick date" : "show date";
+    const dateFieldType = rangeDate.to - rangeDate.from > 0 ? "pick date" : "show date";
 
     const handleSelectTopic = (topic) => {
         setSelectedTopic(topic);
@@ -68,7 +67,7 @@ const TimelineListItemDisplay = ({ timeLineListItemObj, setTimelineListItems, ra
                 <InputEditor
                     inputType="text"
                     label="program"
-                    placeholder="Activity/ Speaker (Name/@Username) "
+                    placeholder="Activity / @Speaker"
                     onCopyChanges={handleChangeInput}
                     content={timeLineListItemObj.program}
                 />

src/components/Explore/Explore.jsx

@@ -18,7 +18,7 @@ import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMainten
 import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
 import { getFollowData } from "src/features/follow/followSlice";
 import { getConnections } from "src/features/connections/connectionSlice";
-import Sidebar from "src/components/Feeds/SocialSidebar/Sidebar";
+import Sidebar from "src/components/Common/SocialSidebar/Sidebar";
 import { FilterButton } from "src/components/Feeds/FeedsElements";
 import { HintIcon } from "src/components/WebSecurity/Common/HintElements";
 import { FaAngleDown, FaAngleUp } from "react-icons/fa";

src/components/Feeds/Feeds.jsx

@@ -11,7 +11,7 @@ import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMainten
 import apiStatus from "src/features/apiStatus";
 import { LeftContainer } from "src/components/Explore/ExploreElements";
 import { getFollowData, reset } from "src/features/follow/followSlice";
-import Sidebar from "./SocialSidebar/Sidebar";
+import Sidebar from "src/components/Common/SocialSidebar/Sidebar";
 
 const Feeds = () => {
     const dispatch = useDispatch();