feat: events | timeline functionality (#672)

* feat: modify InputEditor component to have textarea

why: so for some inputs, we could use textarea
how: use textarea html tag

* feat: handle timeline items input change, and validation - check no empty

why: so users could insert input
how: using structure of {id:{},id:{}} for better lookup

src/components/Common/InputEditor/InputEditor.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { InputEditorContainer, InputEditorTheInput } from "./InputEditorElements";
+import { InputEditorContainer, InputEditorTextarea, InputEditorTheInput } from "./InputEditorElements";
 
-const InputEditor = ({ content, label, onCopyChanges, placeholder, inputType }) => {
+const InputEditor = ({ content, label, onCopyChanges, placeholder, inputType, isTextarea = false }) => {
     const [value, setValue] = useState("");
 
     useEffect(() => {
@@ -15,7 +15,11 @@ const InputEditor = ({ content, label, onCopyChanges, placeholder, inputType })
 
     return (
         <InputEditorContainer>
-            <InputEditorTheInput type={inputType} onChange={handleChange} value={value} placeholder={placeholder} />
+            {isTextarea ? (
+                <InputEditorTextarea type={inputType} onChange={handleChange} value={value} placeholder={placeholder} />
+            ) : (
+                <InputEditorTheInput type={inputType} onChange={handleChange} value={value} placeholder={placeholder} />
+            )}
         </InputEditorContainer>
     );
 };

src/components/Common/InputEditor/InputEditorElements.jsx

@@ -1,9 +1,9 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 export const InputEditorContainer = styled.div`
     width: 100%;
 `;
-export const InputEditorTheInput = styled.input`
+const InputEditorField = css`
     padding: 7px 12px;
     color: white;
     width: 100%;
@@ -16,6 +16,15 @@ export const InputEditorTheInput = styled.input`
     background-color: #090909;
     font: 16px "Poppins", sans-serif;
 `;
+export const InputEditorTheInput = styled.input`
+    ${InputEditorField}
+`;
+
+export const InputEditorTextarea = styled.textarea`
+    ${InputEditorField}
+    resize: none;
+`;
+
 export const InputEditorLabel = styled.h2`
     text-transform: capitalize;
     text-align: center;

src/components/CommunityEvents/ModifyElements.jsx

@@ -17,7 +17,7 @@ export const ModifyTimeLineListContainer = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
 `;
 export const DayPickerContainer = styled.div`
     border-right: 1px solid #f0f0f0;
@@ -42,7 +42,7 @@ export const DetailsInputEventContainer = styled.div`
 export const TimeLineListItem = styled.li`
     display: flex;
     flex-direction: column;
-    height: 150px;
+    height: 200px;
     width: 100%;
     justify-content: space-around;
     border: 3px inset #2e2e2e;
@@ -100,15 +100,13 @@ export const ModifyActionButton = styled.div`
                 return "#f14844";
         }
     }};
+    margin-top: ${(props) => props.type === "add" && "10px"};
     color: #f8f8f8;
     &:hover {
         opacity: 0.7;
         cursor: pointer;
     }
 `;
-export const ModifyCancelActionButton = styled.div`
-    background: #f14844;
-`;
 export const ModifyActionsContainer = styled.div`
     display: flex;
     flex-direction: column;

src/components/CommunityEvents/ModifyTimeLine.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { nanoid } from "@reduxjs/toolkit";
 
 import {
     ModifyActionsContainer,
@@ -9,41 +10,69 @@ import {
     ModifyTimeLineListContainer,
 } from "./ModifyElements";
 import TimeLineListItemDisplay from "./TimeLineListItemDisplay";
+import { toast } from "react-toastify";
 
 const ModifyTimeLine = ({ eventManageTimelineId, handleCloseChangeMode }) => {
-    const [timeLineListItems, setTimeLineListItems] = useState([]);
-
+    const [timeLineListItems, setTimeLineListItems] = useState({});
     useEffect(() => {
-        setTimeLineListItems([
-            {
-                name: "",
-                description: "",
-                topic: "",
-                startTime: "",
-                endTime: "",
-            },
-        ]);
+        setTimeLineListItems(() => {
+            const newId = nanoid();
+            return {
+                [newId]: {
+                    id: newId,
+                    name: "",
+                    description: "",
+                    topic: "",
+                    startTime: "",
+                    endTime: "",
+                    eventDay: 1,
+                },
+            };
+        });
     }, []);
 
     const handleAddListItem = () => {
         setTimeLineListItems((prevArray) => {
-            return [
+            const newId = nanoid();
+            return {
                 ...prevArray,
-                {
+                [newId]: {
+                    id: newId,
                     name: "",
                     description: "",
                     topic: "",
                     startTime: "",
                     endTime: "",
+                    eventDay: 1,
                 },
-            ];
+            };
         });
     };
-    console.log(timeLineListItems);
-    const timeLineList = timeLineListItems.map((timeLineListObj, index) => (
-        <TimeLineListItemDisplay timeLineListObj={timeLineListObj} key={index} index={index} />
+    const timeLineList = Object.values(timeLineListItems).map((timeLineListObj) => (
+        <TimeLineListItemDisplay
+            timeLineListObj={timeLineListObj}
+            setTimeLineListItems={setTimeLineListItems}
+            key={timeLineListObj.id}
+        />
     ));
-
+    const handleSaveTimeline = () => {
+        // validate the every field is not empty
+        let validationError = false;
+        Object.values(timeLineListItems).some((valueObj) => {
+            Object.values(valueObj).some((value) => {
+                if (!value) {
+                    validationError = true;
+                }
+                return validationError;
+            });
+            return validationError;
+        });
+        if (validationError) {
+            toast.error("Some of the input fields are empty, fill all the fields and try again");
+            return;
+        }
+        handleCloseChangeMode();
+    };
     return (
         <ModifyItem>
             <ModifyTimeLineListContainer>
@@ -53,7 +82,7 @@ const ModifyTimeLine = ({ eventManageTimelineId, handleCloseChangeMode }) => {
                 </ModifyActionButton>
             </ModifyTimeLineListContainer>
             <ModifyActionsContainer>
-                <ModifyActionButton type="save">
+                <ModifyActionButton type="save" onClick={handleSaveTimeline}>
                     <ModifyActionText type="save">Save</ModifyActionText>
                 </ModifyActionButton>
                 <ModifyActionButton type="cancel" onClick={handleCloseChangeMode}>

src/components/CommunityEvents/TimeLineListItemDisplay.jsx

@@ -11,7 +11,13 @@ import InputEditor from "../Common/InputEditor";
 import TimePickerDisplay from "./TimePickerDisplay";
 import { AiFillClockCircleIcon } from "./CommunityEventsElement";
 
-const TimeLineListItemDisplay = ({ timeLineListObj }) => {
+const TimeLineListItemDisplay = ({ timeLineListObj, setTimeLineListItems }) => {
+    const handleChangeInput = (label, content) => {
+        setTimeLineListItems((prevTimeLine) => {
+            const updateTimeLineItem = { ...prevTimeLine[timeLineListObj.id], [label]: content };
+            return { ...prevTimeLine, [updateTimeLineItem.id]: { ...updateTimeLineItem } };
+        });
+    };
     return (
         <TimeLineListItem>
             <DetailsInputTimeLineContainer>
@@ -20,37 +26,38 @@ const TimeLineListItemDisplay = ({ timeLineListObj }) => {
                         inputType="text"
                         label="name"
                         placeholder="Name / @Username"
-                        onCopyChanges={() => {}}
-                        content={""}
+                        onCopyChanges={handleChangeInput}
+                        content={timeLineListObj.name}
                     />
                 </DetailsTextInputTimeLineContainer>
                 <DetailsTextInputTimeLineContainer>
                     <InputEditor
                         inputType="text"
                         label="topic"
                         placeholder="Topic"
-                        onCopyChanges={() => {}}
-                        content={""}
+                        onCopyChanges={handleChangeInput}
+                        content={timeLineListObj.topic}
                     />
                 </DetailsTextInputTimeLineContainer>
                 <TimePicking>
                     <InputEditorIconContainer inputType="time">
                         <AiFillClockCircleIcon />
                     </InputEditorIconContainer>
-                    <TimePickerDisplay time={timeLineListObj.startTime} handleUpdatePropertyValue={() => {}}>
+                    <TimePickerDisplay time={timeLineListObj} handleUpdatePropertyValue={handleChangeInput}>
                         From:
                     </TimePickerDisplay>
-                    <TimePickerDisplay time={timeLineListObj.endTime} handleUpdatePropertyValue={() => {}}>
+                    <TimePickerDisplay time={timeLineListObj} handleUpdatePropertyValue={handleChangeInput}>
                         To:
                     </TimePickerDisplay>
                 </TimePicking>
             </DetailsInputTimeLineContainer>
             <InputEditor
                 inputType="text"
                 label="description"
-                placeholder="Short Description"
-                onCopyChanges={() => {}}
-                content={""}
+                placeholder="Description"
+                onCopyChanges={handleChangeInput}
+                content={timeLineListObj.description}
+                isTextarea
             />
         </TimeLineListItem>
     );