feat: events | add events timeline display (#661)

* feat: add manage timeline action button

why: admins/team members could manage the timeline of event
how: add action button

* refactor: make TimePickerDisplay separate component

why: to use it in other components
how: create new component

* feat: display the time line list with option to add new items to this list

why: so admins could manage the time line of an event
how: react

src/components/AdminDashboard/ManageCommunityEvents/ManageCommunityEvents.jsx

@@ -2,24 +2,33 @@ import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 
 import CommunityEvents from "../../CommunityEvents";
+import { updateEvent } from "../../../features/events/eventsSlice";
 import {
     AiOutlineCloseCircleIcon,
+    AiOutlineFieldTimeIcon,
     BiUserPlusIcon,
     CommunityEventsContainer,
     TbEditCircleIcon,
     TbRestoreIcon,
 } from "./ManageCommunityEventsElements";
-import { updateEvent } from "../../../features/events/eventsSlice";
 
 const ManageCommunityEvents = () => {
     const dispatch = useDispatch();
     const [modifyEventId, setModifyEventId] = useState("");
+    const [eventManageTimelineId, setEventManageTimelineId] = useState("");
     const activeEvents = [
         {
             icon: TbEditCircleIcon,
             text: "Edit Details",
             onClick: (modifiedEvent) => setModifyEventId(modifiedEvent._id),
         },
+        {
+            icon: AiOutlineFieldTimeIcon,
+            text: "Manage Timeline",
+            onClick: (modifiedEvent) => {
+                setEventManageTimelineId(modifiedEvent._id);
+            },
+        },
         {
             icon: BiUserPlusIcon,
             text: "Invite people",
@@ -64,6 +73,8 @@ const ManageCommunityEvents = () => {
                 actions={actions}
                 modifyEventId={modifyEventId}
                 setModifyEventId={setModifyEventId}
+                eventManageTimelineId={eventManageTimelineId}
+                setEventManageTimelineId={setEventManageTimelineId}
             />
         </CommunityEventsContainer>
     );

src/components/AdminDashboard/ManageCommunityEvents/ManageCommunityEventsElements.jsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { AiFillClockCircle, AiOutlineCloseCircle } from "react-icons/ai";
+import { AiFillClockCircle, AiOutlineCloseCircle, AiOutlineFieldTime } from "react-icons/ai";
 import { BiUserPlus } from "react-icons/bi";
 import { TbEditCircle, TbRestore } from "react-icons/tb";
 
@@ -18,3 +18,4 @@ export const TbEditCircleIcon = createStyledIcon(TbEditCircle);
 export const TbRestoreIcon = createStyledIcon(TbRestore);
 export const BiUserPlusIcon = createStyledIcon(BiUserPlus);
 export const AiOutlineCloseCircleIcon = createStyledIcon(AiOutlineCloseCircle);
+export const AiOutlineFieldTimeIcon = createStyledIcon(AiOutlineFieldTime);

src/components/CommunityEvents/CommunityEvents.jsx

@@ -19,6 +19,7 @@ import { EventItemList } from "./EventItemList";
 import { RouterNavCreateButton } from "../Header/Navbar/NavbarElements";
 import ModifyCommunityEvent from "./ModifyCommunityEvent";
 import LoadingSpinner from "../Other/MixComponents/Spinner/LoadingSpinner";
+import ModifyTimeLine from "./ModifyTimeLine";
 
 const CommunityEvents = ({
     pageHeader,
@@ -31,6 +32,8 @@ const CommunityEvents = ({
     onActionChange = () => {},
     modifyEventId,
     setModifyEventId,
+    eventManageTimelineId,
+    setEventManageTimelineId,
 }) => {
     const dispatch = useDispatch();
     const { events, isEventLoading, isEventError, eventMessage } = useSelector((state) => state.events);
@@ -79,7 +82,11 @@ const CommunityEvents = ({
         dispatch(updateEvent({ id: newEvent._id, eventData: newEvent }));
         setModifyEventId("");
     };
-
+    const handleCloseChangeMode = () => {
+        setOpenCreatingNewEvent(false);
+        setModifyEventId("");
+        setEventManageTimelineId("");
+    };
     useEffect(() => {
         if (isEventError) {
             toast.error(eventMessage);
@@ -89,15 +96,15 @@ const CommunityEvents = ({
     }, [dispatch]);
 
     useEffect(() => {
-        setOpenCreatingNewEvent(modifyEventId);
-        if (modifyEventId) {
+        if (!eventManageTimelineId) setOpenCreatingNewEvent(modifyEventId);
+        if (modifyEventId || eventManageTimelineId) {
             window.scrollTo({
                 top: 0,
                 left: 0,
                 behavior: "smooth",
             });
         }
-    }, [modifyEventId]);
+    }, [modifyEventId, eventManageTimelineId]);
 
     return (
         <ParentContainer pageHeader={pageHeader}>
@@ -134,6 +141,15 @@ const CommunityEvents = ({
                                     modifyEvent={events.find((event) => event._id === modifyEventId)}
                                     setModifyEventId={setModifyEventId}
                                     modifyEventId={modifyEventId}
+                                    handleCloseChangeMode={handleCloseChangeMode}
+                                />
+                            )}
+                            {modify && !openCreatingNewEvent && eventManageTimelineId && (
+                                <ModifyTimeLine
+                                    eventManageTimelineId={eventManageTimelineId}
+                                    setEventManageTimelineId={setEventManageTimelineId}
+                                    modifyEventId={modifyEventId}
+                                    handleCloseChangeMode={handleCloseChangeMode}
                                 />
                             )}
                             {filteredEvents.length !== 0 ? (

src/components/CommunityEvents/ModifyCommunityEvent.jsx

@@ -9,25 +9,20 @@ import { GoProjectSymlink } from "react-icons/go";
 import { MdOutlineEventSeat } from "react-icons/md";
 
 import {
-    ModifyEventActionsContainer,
-    ModifyEventCancelActionButton,
-    ModifyEventCancelActionText,
-    ModifyEventItem,
-    ModifyEventSaveActionButton,
-    ModifyEventSaveActionText,
+    ModifyActionsContainer,
+    ModifyActionButton,
+    ModifyActionText,
     DayPickerContainer,
-    DetailsInputContainer,
-    EventLink,
-    EventLinkEditor,
-    EventMaxParticipants,
+    Link,
+    LinkEditor,
+    MaxParticipants,
     InputEditorIconContainer,
-    TimeInputLabel,
-    TimePickerContainer,
     TimePicking,
-    DisplayDate,
-    TimeInputEditorContainer,
-} from "./ModifyCommunityEventElement";
+    ModifyItem,
+    DetailsInputEventContainer,
+} from "./ModifyElements";
 import { toast } from "react-toastify";
+import TimePickerDisplay from "./TimePickerDisplay";
 
 const validURL = (str) => {
     const pattern = new RegExp(
@@ -55,7 +50,7 @@ const setDateAndTime = (date, time) => {
 const AddZeroToDateString = (dateValue) => {
     return +dateValue < 10 ? `0${dateValue}` : dateValue;
 };
-const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent, setModifyEventId, modifyEventId }) => {
+const ModifyCommunityEvent = ({ handleCloseChangeMode, onModify, modifyEvent, setModifyEventId, modifyEventId }) => {
     const [eventObj, setEventObj] = useState(
         modifyEvent || {
             status: "approved",
@@ -145,10 +140,6 @@ const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent,
             );
         }
     }
-    const handleCloseChangeMode = () => {
-        setOpenCreatingNewEvent(false);
-        setModifyEventId("");
-    };
 
     const handleSaveChanges = () => {
         if (
@@ -173,7 +164,7 @@ const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent,
         }
     };
     return (
-        <ModifyEventItem>
+        <ModifyItem>
             <DayPickerContainer>
                 <DayPicker
                     mode="range"
@@ -189,7 +180,7 @@ const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent,
                     max={2}
                 />
             </DayPickerContainer>
-            <DetailsInputContainer>
+            <DetailsInputEventContainer>
                 <InputEditor
                     inputType="text"
                     content={eventObj.name}
@@ -208,34 +199,24 @@ const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent,
                     <InputEditorIconContainer inputType="time">
                         <AiFillClockCircleIcon />
                     </InputEditorIconContainer>
-                    <TimePickerContainer>
-                        <TimeInputLabel>From:</TimeInputLabel>
-                        <DisplayDate>
-                            {rangeDate?.from ? format(rangeDate?.from, "yyyy-MM-dd") : "yyyy-MM-dd"}
-                        </DisplayDate>
-                        <TimeInputEditorContainer>
-                            <InputEditor
-                                inputType="time"
-                                content={time?.startTime}
-                                label="startTime"
-                                onCopyChanges={handleUpdateEventPropertyValue}
-                            />
-                        </TimeInputEditorContainer>
-                    </TimePickerContainer>
-                    <TimePickerContainer>
-                        <TimeInputLabel>To:</TimeInputLabel>
-                        <DisplayDate>{rangeDate?.to ? format(rangeDate?.to, "yyyy-MM-dd") : "yyyy-MM-dd"}</DisplayDate>
-                        <TimeInputEditorContainer>
-                            <InputEditor
-                                inputType="time"
-                                content={time?.endTime}
-                                label="endTime"
-                                onCopyChanges={handleUpdateEventPropertyValue}
-                            />
-                        </TimeInputEditorContainer>
-                    </TimePickerContainer>
+                    <TimePickerDisplay
+                        rangeDate={rangeDate}
+                        time={time}
+                        handleUpdatePropertyValue={handleUpdateEventPropertyValue}
+                        showDate
+                    >
+                        From:
+                    </TimePickerDisplay>
+                    <TimePickerDisplay
+                        rangeDate={rangeDate}
+                        time={time}
+                        handleUpdatePropertyValue={handleUpdateEventPropertyValue}
+                        showDate
+                    >
+                        To:
+                    </TimePickerDisplay>
                 </TimePicking>
-                <EventMaxParticipants>
+                <MaxParticipants>
                     <InputEditorIconContainer>
                         <MdOutlineEventSeat size="20px" />
                     </InputEditorIconContainer>
@@ -246,7 +227,7 @@ const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent,
                         placeholder="Max Participants"
                         onCopyChanges={handleUpdateEventPropertyValue}
                     />
-                </EventMaxParticipants>
+                </MaxParticipants>
 
                 {/* we host locations only online so we don't need a location picker */
                 /* <LocationPicking>
@@ -261,31 +242,31 @@ const ModifyCommunityEvent = ({ setOpenCreatingNewEvent, onModify, modifyEvent,
                         onCopyChanges={handleUpdateEventPropertyValue}
                     />
                 </LocationPicking> */}
-                <EventLink>
+                <Link>
                     <InputEditorIconContainer>
                         <GoProjectSymlink size="20px" />
                     </InputEditorIconContainer>
-                    <EventLinkEditor>
+                    <LinkEditor>
                         <InputEditor
                             inputType="url"
                             content={eventObj.link}
                             label="link"
                             placeholder="https://www.eventlink.com"
                             onCopyChanges={handleUpdateEventPropertyValue}
                         />
-                    </EventLinkEditor>
-                </EventLink>
-            </DetailsInputContainer>
+                    </LinkEditor>
+                </Link>
+            </DetailsInputEventContainer>
 
-            <ModifyEventActionsContainer>
-                <ModifyEventSaveActionButton onClick={handleSaveChanges}>
-                    <ModifyEventSaveActionText>Save</ModifyEventSaveActionText>
-                </ModifyEventSaveActionButton>
-                <ModifyEventCancelActionButton onClick={handleCloseChangeMode}>
-                    <ModifyEventCancelActionText>Cancel</ModifyEventCancelActionText>
-                </ModifyEventCancelActionButton>
-            </ModifyEventActionsContainer>
-        </ModifyEventItem>
+            <ModifyActionsContainer>
+                <ModifyActionButton type="save" onClick={handleSaveChanges}>
+                    <ModifyActionText type="save">Save</ModifyActionText>
+                </ModifyActionButton>
+                <ModifyActionButton type="cancel" onClick={handleCloseChangeMode}>
+                    <ModifyActionText type="cancel">Cancel</ModifyActionText>
+                </ModifyActionButton>
+            </ModifyActionsContainer>
+        </ModifyItem>
     );
 };
 export default ModifyCommunityEvent;