Feature/update event

package.json

@@ -19,6 +19,7 @@
     "@types/react-rte": "^0.16.3",
     "axios": "^0.24.0",
     "env-cmd": "^10.1.0",
+    "html-to-react": "^1.4.7",
     "jquery": "^3.6.0",
     "mdbreact": "^5.2.0",
     "moment": "^2.29.1",
@@ -54,7 +55,14 @@
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "plugins": [
+      "react-hooks"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn"
+    }
   },
   "browserslist": {
     "production": [

src/App.scss

@@ -29,12 +29,17 @@
   margin-top: 80px;
 }
 
+p {
+  margin-bottom: 5px;
+  line-height: 19px;
+}
+
 .btn {
   text-transform: unset !important;
 }
 
 .card {
-  border-radius: 0px;
+  border-radius: 4px;
   padding: 15px;
 }
 
@@ -86,6 +91,10 @@ footer {
   border-bottom: none;
 }
 
+.modal-title {
+  font-size: 16px;
+}
+
 .modal-footer {
   border-top: none;
 }
@@ -94,8 +103,19 @@ footer {
   background-color: #f4f7fa;
 }
 
+.modal-content {
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 4px !important;
+}
+
 .validation-message {
   font-size: 12px;
   margin: 0px !important;
   padding: 0px !important;
 }
+
+.toastBody {
+  font-family: "Poppins Regular";
+  font-size: 14px;
+}

src/App.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import { ToastContainer } from "react-toastify";
 import AppRoutes from "./routes/app-routes";
-import * as $ from "jquery";
-import * as bootstrap from "bootstrap";
 import "./App.scss";
 
 const App: React.FC = () => (
   <div>
     <AppRoutes />
-    <ToastContainer />
+    <ToastContainer bodyClassName="toastBody" />
   </div>
 );
 

src/components/image-canvas/index.tsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import AvatarEditor from "react-avatar-editor";
 import Slider from "react-rangeslider";
-import fs from "fs";
-import axios from "axios";
 
 interface CanvasProps {
   getEditedImage: (data: any) => any;

src/constants/index.ts

@@ -1,4 +1,5 @@
 import { ToolbarConfig } from "react-rte";
+import { toast } from "react-toastify";
 
 const ApplicationConstants = {
   AUTH_NABAR_ITEMS: [
@@ -42,4 +43,38 @@ const ToolBarConfig: ToolbarConfig = {
   ],
 };
 
-export { ApplicationConstants, ToolBarConfig };
+const toastNotification = (message: string, status: string) => {
+  if (status === "success") {
+    toast.success(message, {
+      position: "top-right",
+      autoClose: 4000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+  } else if (status === "error") {
+    toast.error(message, {
+      position: "top-right",
+      autoClose: 4000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+  } else {
+    toast.info(message, {
+      position: "top-right",
+      autoClose: 4000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+  }
+};
+
+export { ApplicationConstants, ToolBarConfig, toastNotification };

src/interfaces/IEvent.ts

@@ -1,10 +1,12 @@
 import { IModifiedBy } from "../store/interfaces";
 
 interface IEventView {
+  _id: string;
   title: string;
   description: string;
   eventType: string;
   link: string;
+  registrationLink: string;
   tags: string[];
   dateTime: Date;
   imageUrl: string;

src/pages/event/add/index.tsx

@@ -1,38 +1,15 @@
-import React, { EffectCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ImageCanvas from "../../../components/image-canvas";
-import RichTextEditor, { ToolbarConfig } from "react-rte";
+import RichTextEditor from "react-rte";
 import { ToolBarConfig } from "../../../constants";
 import {
   createEvent,
   getEvents,
 } from "../../../store/event-store/eventActions";
 import { useDispatch, useSelector } from "react-redux";
-import { IEvent } from "../../../store/event-store/IEvent";
+import { IEventFormData, IEventState } from "../interfaces";
 
-type TAddEventFormData = {
-  imageSrc: any | null;
-  eventName: string | null;
-  eventType: string | null;
-  dateTime: string | null;
-  registrationLink: string | null;
-  eventLink: string | null;
-  filteredTags: string[] | null;
-  description: string | null;
-};
-
-interface IAddEventState {
-  isFormNotValid: boolean;
-  imageSrc: any;
-  eventName: string | null;
-  eventType: string | null;
-  dateTime: string | null;
-  registrationLink: string | null;
-  eventLink: string | null;
-  filteredTags: string[] | null;
-  description: string | null;
-}
-
-let formData: TAddEventFormData = {
+let formData: IEventFormData = {
   imageSrc: null,
   eventName: null,
   eventType: null,
@@ -43,7 +20,8 @@ let formData: TAddEventFormData = {
   description: null,
 };
 
-const initialState: IAddEventState = {
+const initialState: IEventState = {
+  eventId: "",
   isFormNotValid: false,
   imageSrc: null,
   eventName: "",
@@ -77,7 +55,7 @@ const AddEvent: React.FC = () => {
   useEffect(() => {
     dispatch(getEvents());
     closeModal();
-  }, [state.addEvent]);
+  }, [state.addEvent, dispatch]);
 
   const closeModal = () => {
     setState({ ...initialState });
@@ -123,8 +101,9 @@ const AddEvent: React.FC = () => {
       for (let tag of tags) {
         filterdTags.push(tag.trim());
       }
-
+      console.log(filterdTags);
       setState((prevState) => ({ ...prevState, filteredTags: filterdTags }));
+      console.log(filteredTags);
     }
   };
 
@@ -170,6 +149,7 @@ const AddEvent: React.FC = () => {
         eventFormData.append("dateTime", dateTime as string);
         eventFormData.append("description", description as string);
         eventFormData.append("link", eventLink as string);
+        filteredTags?.forEach((tag) => eventFormData.append("tags", tag));
         eventFormData.append("registrationLink", registrationLink as string);
         eventFormData.append("eventType", eventType as string);
 

src/pages/event/delete/index.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  deleteEvent,
+  getEvents,
+  setEventId,
+} from "../../../store/event-store/eventActions";
+import { IEvent } from "../../../store/event-store/IEvent";
+import { toastNotification } from "../../../constants";
+
+const DeleteEvent: React.FC = () => {
+  const dispatch = useDispatch();
+  const [eventId, setId] = useState<string>();
+  const state = useSelector((state) => state.eventReducer);
+
+  useEffect(() => {
+    let eventData = state.events.find(
+      (event: IEvent) => event._id === state.selectedEventId
+    );
+
+    if (eventData && eventData._id) {
+      console.log(eventData._id);
+      setId(eventData._id);
+    }
+  }, [state.events, state.selectedEventId]);
+
+  useEffect(() => {
+    dispatch(getEvents());
+    dispatch(setEventId(""));
+
+    if (state.deletedEvent) {
+      toastNotification("Event removed successfully", "success");
+    }
+
+    closeModal();
+  }, [state.deletedEvent, dispatch]);
+
+  useEffect(() => {
+    if (state.error) {
+      toastNotification("Something went wrong", "error");
+    }
+  }, [state.error, dispatch]);
+
+  const closeModal = () => {
+    $("#eventDeleteModal").modal("hide");
+  };
+
+  const onSubmit = (event: any) => {
+    event.preventDefault();
+
+    if (eventId) {
+      dispatch(deleteEvent(eventId));
+    }
+  };
+
+  return (
+    <div>
+      <div
+        className="modal fade"
+        id="eventDeleteModal"
+        data-mdb-backdrop="static"
+        data-mdb-keyboard="false"
+        tabIndex={-1}
+        aria-labelledby="exampleModalLabel"
+        aria-hidden="true"
+      >
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title" id="exampleModalLabel">
+                Remove Event
+              </h5>
+              <button
+                type="button"
+                className="btn-close"
+                onClick={closeModal}
+              ></button>
+            </div>
+
+            <div className="modal-body delete-event">
+              <div className="text">
+                Are you sure about deleting this event information?
+              </div>
+            </div>
+
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-light shadow-none btn-rounded"
+                onClick={closeModal}
+              >
+                No
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary shadow-none btn-rounded"
+                onClick={onSubmit}
+              >
+                Yes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteEvent;

src/pages/event/interfaces/index.ts

@@ -0,0 +1,25 @@
+interface IEventFormData {
+  imageSrc?: any | null;
+  eventName: string | null;
+  eventType: string | null;
+  dateTime: string | null;
+  registrationLink: string | null;
+  eventLink: string | null;
+  filteredTags: string[] | null;
+  description: string | null;
+}
+
+interface IEventState {
+  eventId: string | null;
+  isFormNotValid: boolean;
+  imageSrc?: any;
+  eventName: string | null;
+  eventType: string | null;
+  dateTime: string | null;
+  registrationLink: string | null;
+  eventLink: string | null;
+  filteredTags: string[] | null;
+  description: string | null;
+}
+
+export type { IEventFormData, IEventState };