Merge pull request #327 from GTBitsOfGood/feature/calendarComponent

feature/CalendarComponent
GTBitsOfGood · Jan 4, 2025 · ebb972d · ebb972d
2 parents ce43167 + f4f8cdd
commit ebb972d
Show file tree

Hide file tree

Showing 8 changed files with 1,042 additions and 32 deletions.
diff --git a/src/components/dashboard/AddProvider.tsx b/src/components/dashboard/AddProvider.tsx
@@ -25,6 +25,7 @@ import promiseWithTimeout from "../../functions/promiseWithTimeout";
 import { GOOGLE_API_KEY } from "../../config/keys";
 import { storage } from "../../store";
 import { Store } from "reducers/types";
+import { ICalendarEvent } from "./calender-component/CalendarForm";
 const { v4: uuidv4 } = require("uuid");
 
 let steps = [
@@ -163,6 +164,16 @@ function AddProvider(props) {
     const validateComponent = (component) => {
         const { type, data } = component;
         switch (type) {
+            case "Calendar":
+                return data.events.every((event: ICalendarEvent) => {
+                    return (
+                        event.eventName.length > 0 && 
+                        event.fromDate.length > 0 &&
+                        event.toDate.length > 0 &&
+                        event.fromTime.length > 0 &&
+                        event.toTime.length > 0
+                    )
+                });
             case "Chart":
                 switch (data.type) {
                     case "donut":

diff --git a/src/components/dashboard/ContentForm.tsx b/src/components/dashboard/ContentForm.tsx
@@ -13,6 +13,7 @@ import Collapsible from "components/collapsible";
 import ProviderGallery from "./ProviderGallery";
 import EmbedForm from "./embed-component/EmbedForm";
 import { SimpleEditor } from "./TextComponent/SimpleEditor";
+import CalendarForm from "components/dashboard/calender-component/CalendarForm";
 
 const EditableText = ({ text, setText, isEditing, setIsEditing }) => {
     const inputRef = useRef(null);
@@ -114,6 +115,28 @@ const SectionCard = ({
 
     const getDefaultData = (componentType) => {
         switch (componentType) {
+            case "Calendar":
+                return {
+                    displayNumber: 5,
+                    events: [{
+                        eventName: "",
+                        fromDate: "",
+                        toDate: "",
+                        fromTime: "",
+                        toTime: "",
+                        isAllDay: false,
+                        isCustom: false,
+                        address: "",
+                        description: "",
+                        repeatDays: [],
+                        customEndDate: "",
+                        customEndOccurrences: 1,
+                        isOn: true,
+                        isAfter: false,
+                        buttonLink: "",
+                        buttonText: "",
+                    }]
+                };
             case "Chart":
                 return {
                     type: "donut",
@@ -190,6 +213,18 @@ const SectionCard = ({
 
     const switchRender = (type, data, i) => {
         switch (type) {
+            case "Calendar":
+                return (
+                    <CalendarForm
+                        calendarData={data}
+                        setCalendarData={(newData) => {
+                            updateIthComponent(newData, i);
+                        }}
+                        deleteComponent={() => {
+                            deleteIthComponent(i);
+                        }}
+                    ></CalendarForm>
+                );
             case "Chart":
                 return (
                     <ChartComponentForm
@@ -336,10 +371,12 @@ const SectionCard = ({
 
                     <Dropdown.Menu>
                         <Dropdown.Item
-                            onClick={() => {
-                                // console.log("")
-                                addComponent("Chart");
-                            }}
+                            onClick={() => addComponent("Calendar")}
+                        >
+                            Calendar
+                        </Dropdown.Item>
+                        <Dropdown.Item
+                            onClick={() => addComponent("Chart")}
                         >
                             Chart
                         </Dropdown.Item>

diff --git a/src/components/dashboard/RowForm.tsx b/src/components/dashboard/RowForm.tsx
@@ -18,33 +18,6 @@ import Button from "react-bootstrap/Button";
 import ActionForm from "./ActionForm";
 import ContentForm from "./ContentForm";
 
-const galleryData = [
-    {
-        title: "testVal1",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal2",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal3",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal4",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-];
-
 function validURL(str) {
     const pattern = new RegExp(
         "^(https?:\\/\\/)?" + // protocol
@@ -402,6 +375,7 @@ const RowForm = (props) => {
                     onChange={onTimeChange}
                 />
             );
+
         case "Tag":
             return (
                 <>
@@ -429,6 +403,7 @@ const RowForm = (props) => {
                     )}
                 </>
             );
+
         case "Text":
             return (
                 <>
@@ -456,6 +431,7 @@ const RowForm = (props) => {
                     )}
                 </>
             );
+
         case "Toggle":
             return (
                 <>
@@ -482,6 +458,7 @@ const RowForm = (props) => {
                     )}
                 </>
             );
+
         case "Actions":
             return (
                 <ActionForm
@@ -490,6 +467,7 @@ const RowForm = (props) => {
                     onChange={onActionTableChange}
                 />
             );
+
         case "Content":
             return (
                 <ContentForm