From fd591b57623573569fecc2c531b4eaa1061679db Mon Sep 17 00:00:00 2001 From: rusiruavb Date: Tue, 14 Dec 2021 14:24:13 +0530 Subject: [PATCH 1/5] Implement update ui component --- package.json | 1 + src/App.scss | 8 +- src/interfaces/IEvent.ts | 2 + src/pages/event/add/index.tsx | 30 +- src/pages/event/interfaces/index.ts | 25 ++ src/pages/event/list/index.tsx | 37 +- src/pages/event/update/index.tsx | 418 ++++++++++++++++++++++ src/pages/event/view/index.tsx | 26 +- src/store/api/EventAPI.ts | 4 +- src/store/event-store/IEvent.ts | 3 +- src/store/event-store/eventActionTypes.ts | 2 +- src/store/event-store/eventActions.ts | 8 +- src/store/event-store/eventReducer.ts | 8 +- src/styles/events.scss | 19 + src/styles/image-canvas.scss | 11 +- yarn.lock | 65 ++++ 16 files changed, 597 insertions(+), 70 deletions(-) create mode 100644 src/pages/event/interfaces/index.ts create mode 100644 src/pages/event/update/index.tsx diff --git a/package.json b/package.json index 045ed15..ec929d9 100644 --- a/package.json +++ b/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", diff --git a/src/App.scss b/src/App.scss index c236e34..95030ca 100644 --- a/src/App.scss +++ b/src/App.scss @@ -34,7 +34,7 @@ } .card { - border-radius: 0px; + border-radius: 4px; padding: 15px; } @@ -94,6 +94,12 @@ 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; diff --git a/src/interfaces/IEvent.ts b/src/interfaces/IEvent.ts index ce80005..e07456b 100644 --- a/src/interfaces/IEvent.ts +++ b/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; diff --git a/src/pages/event/add/index.tsx b/src/pages/event/add/index.tsx index 5f76fd5..084f816 100644 --- a/src/pages/event/add/index.tsx +++ b/src/pages/event/add/index.tsx @@ -8,31 +8,9 @@ import { } 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 +21,8 @@ let formData: TAddEventFormData = { description: null, }; -const initialState: IAddEventState = { +const initialState: IEventState = { + eventId: "", isFormNotValid: false, imageSrc: null, eventName: "", @@ -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); + eventFormData.append("tags", JSON.stringify(filteredTags)); eventFormData.append("registrationLink", registrationLink as string); eventFormData.append("eventType", eventType as string); diff --git a/src/pages/event/interfaces/index.ts b/src/pages/event/interfaces/index.ts new file mode 100644 index 0000000..3ad08d1 --- /dev/null +++ b/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 }; diff --git a/src/pages/event/list/index.tsx b/src/pages/event/list/index.tsx index 550abe4..4cc71e5 100644 --- a/src/pages/event/list/index.tsx +++ b/src/pages/event/list/index.tsx @@ -1,9 +1,6 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { - getEvents, - setViewEvent, -} from "../../../store/event-store/eventActions"; +import { getEvents, setEventId } from "../../../store/event-store/eventActions"; import { IEvent } from "../../../store/event-store/IEvent"; import BootstrapTable from "react-bootstrap-table-next"; import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit"; @@ -13,6 +10,7 @@ import { IModifiedBy } from "../../../store/interfaces"; import { IEventView } from "../../../interfaces"; import EventView from "../view"; import AddEvent from "../add"; +import UpdateEvent from "../update"; const EventList: React.FC = () => { const dispatch = useDispatch(); @@ -131,15 +129,14 @@ const EventList: React.FC = () => { handleSetViewEvent(row)} + onClick={(e) => handleSetViewEvent(row._id)} > View handleSetUpdateEvent(row._id)} > Edit @@ -156,25 +153,16 @@ const EventList: React.FC = () => { ); }; - const handleSetViewEvent = (eventData: IEvent) => { - let viewEvent: IEventView = { - title: eventData.title, - description: eventData.description, - eventType: eventData.eventType, - dateTime: eventData.dateTime, - imageUrl: eventData.imageUrl, - link: eventData.link, - tags: eventData.tags, - createdBy: eventData.createdBy, - createdAt: eventData.createdAt as Date, - updatedBy: eventData.updatedBy, - updatedAt: eventData.updatedAt as Date, - }; - - dispatch(setViewEvent(viewEvent)); + const handleSetViewEvent = (eventId: string) => { + dispatch(setEventId(eventId)); $("#eventViewModal").modal("show"); }; + const handleSetUpdateEvent = (eventId: string) => { + dispatch(setEventId(eventId)); + $("#eventUpdateModal").modal("show"); + }; + const expandRow = { showExpandColumn: true, expandByColumnOnly: true, @@ -366,6 +354,7 @@ const EventList: React.FC = () => { + ); diff --git a/src/pages/event/update/index.tsx b/src/pages/event/update/index.tsx new file mode 100644 index 0000000..631d7cb --- /dev/null +++ b/src/pages/event/update/index.tsx @@ -0,0 +1,418 @@ +import React, { useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { + getEvents, + setEventId, + updateEvent, +} from "../../../store/event-store/eventActions"; +import { IEventView } from "../../../interfaces"; +import { IEvent } from "../../../store/event-store/IEvent"; +import ImageCanvas from "../../../components/image-canvas"; +import moment from "moment"; +import RichTextEditor from "react-rte"; +import { ToolBarConfig } from "../../../constants"; +import { IEventFormData, IEventState } from "../interfaces"; + +let formData: IEventFormData = { + imageSrc: null, + eventName: null, + eventType: null, + dateTime: null, + registrationLink: null, + eventLink: null, + filteredTags: null, + description: null, +}; + +const initialState: IEventState = { + eventId: "", + isFormNotValid: false, + imageSrc: null, + eventName: "", + eventType: "", + dateTime: "", + registrationLink: "", + eventLink: "", + filteredTags: [], + description: "", +}; + +const UpdateEvent: React.FC = () => { + const dispatch = useDispatch(); + const [editor, setEditor] = useState(() => RichTextEditor.createEmptyValue()); + const state = useSelector((state) => state.eventReducer); + const [eventDetails, setEventDetails] = useState(); + const [ + { + eventId, + eventName, + eventLink, + eventType, + registrationLink, + description, + imageSrc, + isFormNotValid, + filteredTags, + dateTime, + }, + setState, + ] = useState(initialState); + + useEffect(() => { + let eventData = state.events.find( + (event: IEvent) => event._id === state.selectedEventId + ); + console.log(eventData); + setEventDetails(eventData); + setState((prevState) => ({ + ...prevState, + eventId: eventData?._id, + eventName: eventData?.title, + eventLink: eventData?.link, + registrationLink: eventData?.registrationLink, + eventType: eventData?.eventType, + description: eventData?.description, + dateTime: eventData?.dateTime, + filteredTags: eventData?.tags, + })); + setEditor( + RichTextEditor.createValueFromString(eventData?.description, "html") + ); + }, [state.selectedEventId]); + + useEffect(() => { + dispatch(getEvents()); + dispatch(setEventId("")); + closeModal(); + }, [state.updatedEvent]); + + const closeModal = () => { + setState({ ...initialState }); + setEditor(RichTextEditor.createEmptyValue()); + $("#eventUpdateModal").modal("hide"); + }; + + const handleDescription = (value: any) => { + setEditor(value); + const isEmpty = !value + .getEditorState() + .getCurrentContent() + .getPlainText() + .trim(); + + if (isEmpty) { + setState((prevState) => ({ + ...prevState, + description: null, + })); + } else { + setState((prevState) => ({ + ...prevState, + description: value.toString("html"), + })); + } + }; + + const onChange = (event: any) => { + const { name, value } = event.target; + setState((prevState) => ({ ...prevState, [name]: value })); + }; + + const handleImage = (data: any) => { + setState((prevState) => ({ ...prevState, imageSrc: data })); + }; + + const handleTags = (value: string) => { + let tags = value.split(","); + let filterdTags: string[] = []; + + if (tags.length > 0) { + for (let tag of tags) { + filterdTags.push(tag.trim()); + } + + setState((prevState) => ({ ...prevState, filteredTags: filterdTags })); + } + }; + + // Form Validation + const validateForm = () => { + const data = { + eventName: eventName && eventName.trim().length > 0 ? eventName : null, + eventType: eventType && eventType.trim().length > 0 ? eventType : null, + dateTime: dateTime && dateTime.trim().length > 0 ? dateTime : null, + registrationLink: + registrationLink && registrationLink.trim().length > 0 + ? registrationLink + : null, + eventLink: eventLink && eventLink.trim().length > 0 ? eventLink : null, + filteredTags: + filteredTags && filteredTags.length > 0 ? filteredTags : null, + description: + description && description.trim().length > 0 ? description : null, + }; + + formData = Object.assign({}, data); + return true; + }; + + // Form Submission + const onSubmit = (e: any) => { + e.preventDefault(); + + const isFormValid = validateForm(); + + if (isFormValid) { + let data = Object.values(formData).map((item) => { + return item !== null; + }); + + if (!data.includes(false)) { + setState((prevState) => ({ ...prevState, isFormNotValid: false })); + + let eventFormData = new FormData(); + if (imageSrc) { + eventFormData.append("eventFlyer", imageSrc); + } + eventFormData.append("title", eventName as string); + eventFormData.append("dateTime", dateTime as string); + eventFormData.append("description", description as string); + eventFormData.append("link", eventLink as string); + eventFormData.append("tags", JSON.stringify(filteredTags)); + eventFormData.append("registrationLink", registrationLink as string); + eventFormData.append("eventType", eventType as string); + + if (eventId) { + dispatch(updateEvent(eventId, eventFormData)); + } + } else { + setState((prevState) => ({ ...prevState, isFormNotValid: true })); + } + } + }; + + return ( +
+ +
+ ); +}; + +export default UpdateEvent; diff --git a/src/pages/event/view/index.tsx b/src/pages/event/view/index.tsx index da22450..cd1c110 100644 --- a/src/pages/event/view/index.tsx +++ b/src/pages/event/view/index.tsx @@ -1,11 +1,26 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import moment from "moment"; import { IEventView } from "../../../interfaces"; +import { IEvent } from "../../../store/event-store/IEvent"; const EventView: React.FC = () => { + const HtmlToReactParser = require("html-to-react").Parser; const state = useSelector((state) => state.eventReducer); - const eventDetails = state.viewEvent as IEventView; + const [eventDetails, setEventDetails] = useState(); + + const convertToPlain = (html: string) => { + const htmlToParser = new HtmlToReactParser(); + const reactElement = htmlToParser.parse(html); + return reactElement; + }; + + useEffect(() => { + let eventData = state.events.find( + (event: IEvent) => state.selectedEventId === event._id + ); + setEventDetails(eventData); + }, [state.selectedEventId]); return (
@@ -40,7 +55,7 @@ const EventView: React.FC = () => {  Event Title : - {eventDetails && eventDetails.title} + {eventDetails?.title}
@@ -50,8 +65,7 @@ const EventView: React.FC = () => {  Date & Time : - {eventDetails && - moment(eventDetails.dateTime).format("LLL")} + {moment(eventDetails?.dateTime).format("LLL")} @@ -117,7 +131,7 @@ const EventView: React.FC = () => {  Description : - {eventDetails && eventDetails.description} + {eventDetails && convertToPlain(eventDetails.description)} diff --git a/src/store/api/EventAPI.ts b/src/store/api/EventAPI.ts index 7aa744a..10618fc 100644 --- a/src/store/api/EventAPI.ts +++ b/src/store/api/EventAPI.ts @@ -17,8 +17,8 @@ class EventAPI { return axios.get(`${BASE_URL}/admin/event/`, requestConfig); } - static updateEvent(eventId: string, data: IEvent): Promise { - return axios.put(`${BASE_URL}/event/${eventId}`, data, requestConfig); + static updateEvent(eventId: string, data: FormData): Promise { + return axios.put(`${BASE_URL}/admin/event/${eventId}`, data, requestConfig); } static deleteEvent(eventId: string): Promise { diff --git a/src/store/event-store/IEvent.ts b/src/store/event-store/IEvent.ts index 5de96a7..7b46de9 100644 --- a/src/store/event-store/IEvent.ts +++ b/src/store/event-store/IEvent.ts @@ -6,6 +6,7 @@ interface IEvent { dateTime: Date; tags: string[]; link: string; + registrationLink: string; eventType: string; imageUrl: string; createdAt?: Date; @@ -20,7 +21,7 @@ interface IEvent { interface IEventState { event: IEvent | null; events: IEvent[] | null; - viewEvent: IEvent | null; + selectedEventId: string | null; addEvent: IEvent | null; updatedEvent: IEvent | null; deletedEvent: IEvent | null; diff --git a/src/store/event-store/eventActionTypes.ts b/src/store/event-store/eventActionTypes.ts index a217b99..5d90232 100644 --- a/src/store/event-store/eventActionTypes.ts +++ b/src/store/event-store/eventActionTypes.ts @@ -2,7 +2,7 @@ enum EventActionTypes { CREATE_EVENT = "CREATE_EVENT", GET_EVENT = "GET_EVENT", GET_ALL_EVENTS = "GET_ALL_EVENTS", - VIEW_EVENT = "VIEW_EVENT", + SET_EVENT_ID = "SET_EVENT_ID", UPDATE_EVENT = "UPDATE_EVENT", DELETE_EVENT = "DELETE_EVENT", } diff --git a/src/store/event-store/eventActions.ts b/src/store/event-store/eventActions.ts index 2ad4921..616d478 100644 --- a/src/store/event-store/eventActions.ts +++ b/src/store/event-store/eventActions.ts @@ -24,7 +24,7 @@ export const getEvents = () => { }; }; -export const updateEvnet = (eventId: string, data: IEvent) => { +export const updateEvent = (eventId: string, data: FormData) => { return { type: EventActionTypes.UPDATE_EVENT, payload: EventAPI.updateEvent(eventId, data), @@ -38,9 +38,9 @@ export const deleteEvent = (eventId: string) => { }; }; -export const setViewEvent = (event: IEventView) => { +export const setEventId = (eventId: string) => { return { - type: EventActionTypes.VIEW_EVENT, - payload: event, + type: EventActionTypes.SET_EVENT_ID, + payload: eventId, }; }; diff --git a/src/store/event-store/eventReducer.ts b/src/store/event-store/eventReducer.ts index 2c28c7b..5d36472 100644 --- a/src/store/event-store/eventReducer.ts +++ b/src/store/event-store/eventReducer.ts @@ -4,7 +4,7 @@ import EventActionTypes from "./eventActionTypes"; const initialState: IEventState = { event: null, events: [], - viewEvent: null, + selectedEventId: null, addEvent: null, updatedEvent: null, deletedEvent: null, @@ -30,9 +30,9 @@ const eventReducer = (state = initialState, action: any) => { case `${EventActionTypes.GET_ALL_EVENTS}_FULFILLED`: let events = action.payload.data; return { ...state, loading: false, events }; - case `${EventActionTypes.VIEW_EVENT}`: - let viewEvent = action.payload; - return { ...state, loading: false, viewEvent }; + case `${EventActionTypes.SET_EVENT_ID}`: + let selectedEventId = action.payload; + return { ...state, loading: false, selectedEventId }; case `${EventActionTypes.UPDATE_EVENT}_FULFILLED`: let updatedEvent = action.payload.data; return { ...state, loading: false, updatedEvent }; diff --git a/src/styles/events.scss b/src/styles/events.scss index cbf697c..4b31285 100644 --- a/src/styles/events.scss +++ b/src/styles/events.scss @@ -83,3 +83,22 @@ font-family: "Poppins Regular"; } } + +.update-event { + .flyer { + width: 300px; + border-radius: 0px; + margin-top: 18px; + } + + .flyer-title { + display: flex; + justify-content: start; + font-size: 14px; + margin-top: 4px; + } + + .tag-text { + font-size: 13px; + } +} diff --git a/src/styles/image-canvas.scss b/src/styles/image-canvas.scss index 192ebaa..8fa4b88 100644 --- a/src/styles/image-canvas.scss +++ b/src/styles/image-canvas.scss @@ -8,8 +8,15 @@ margin-left: -2px; } -.image-editor { - padding-left: 35px; +@include media("<=phone") { + .image-editor { + padding-left: 13px; + } +} +@include media(">=phone", " Date: Wed, 15 Dec 2021 15:45:30 +0530 Subject: [PATCH 2/5] Remove eslint warning --- src/App.tsx | 2 -- src/components/image-canvas/index.tsx | 2 -- src/pages/event/add/index.tsx | 7 +++---- src/pages/event/list/index.tsx | 23 +++++++++-------------- src/pages/event/update/index.tsx | 5 +++-- src/pages/event/view/index.tsx | 4 +++- src/store/event-store/eventActions.ts | 2 -- src/styles/events.scss | 1 - 8 files changed, 18 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 80706f3..c25026b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,6 @@ 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 = () => ( diff --git a/src/components/image-canvas/index.tsx b/src/components/image-canvas/index.tsx index 2b89b6b..5d89566 100644 --- a/src/components/image-canvas/index.tsx +++ b/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; diff --git a/src/pages/event/add/index.tsx b/src/pages/event/add/index.tsx index 084f816..51fff89 100644 --- a/src/pages/event/add/index.tsx +++ b/src/pages/event/add/index.tsx @@ -1,13 +1,12 @@ -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"; let formData: IEventFormData = { @@ -56,7 +55,7 @@ const AddEvent: React.FC = () => { useEffect(() => { dispatch(getEvents()); closeModal(); - }, [state.addEvent]); + }, [state.addEvent, dispatch]); const closeModal = () => { setState({ ...initialState }); diff --git a/src/pages/event/list/index.tsx b/src/pages/event/list/index.tsx index 4cc71e5..9573028 100644 --- a/src/pages/event/list/index.tsx +++ b/src/pages/event/list/index.tsx @@ -7,7 +7,6 @@ import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit"; import paginationFactory from "react-bootstrap-table2-paginator"; import moment from "moment"; import { IModifiedBy } from "../../../store/interfaces"; -import { IEventView } from "../../../interfaces"; import EventView from "../view"; import AddEvent from "../add"; import UpdateEvent from "../update"; @@ -33,7 +32,7 @@ const EventList: React.FC = () => { // Fetch events information useEffect(() => { dispatch(getEvents()); - }, [selectedTypeEvents]); + }, [selectedTypeEvents, dispatch]); // Table column configurations const tableColumnData = [ @@ -93,6 +92,7 @@ const EventList: React.FC = () => { updated-by-user {`${lastModifiedUser.user.firstName} ${lastModifiedUser.user.lastName}`} @@ -118,28 +118,22 @@ const EventList: React.FC = () => { return ( - + - +
diff --git a/src/pages/event/update/index.tsx b/src/pages/event/update/index.tsx index 631d7cb..d72dbfc 100644 --- a/src/pages/event/update/index.tsx +++ b/src/pages/event/update/index.tsx @@ -78,13 +78,13 @@ const UpdateEvent: React.FC = () => { setEditor( RichTextEditor.createValueFromString(eventData?.description, "html") ); - }, [state.selectedEventId]); + }, [state.selectedEventId, state.events]); useEffect(() => { dispatch(getEvents()); dispatch(setEventId("")); closeModal(); - }, [state.updatedEvent]); + }, [state.updatedEvent, dispatch]); const closeModal = () => { setState({ ...initialState }); @@ -222,6 +222,7 @@ const UpdateEvent: React.FC = () => { event-flyer
diff --git a/src/pages/event/view/index.tsx b/src/pages/event/view/index.tsx index cd1c110..e646d5b 100644 --- a/src/pages/event/view/index.tsx +++ b/src/pages/event/view/index.tsx @@ -20,7 +20,7 @@ const EventView: React.FC = () => { (event: IEvent) => state.selectedEventId === event._id ); setEventDetails(eventData); - }, [state.selectedEventId]); + }, [state.selectedEventId, state.events]); return (
@@ -78,6 +78,7 @@ const EventView: React.FC = () => { href={eventDetails && eventDetails.link} target="_blank" className="col-sm-9 text" + rel="noreferrer" > {eventDetails && eventDetails.link} @@ -173,6 +174,7 @@ const EventView: React.FC = () => { event-flyer

{user.user.firstName} {user.user.lastName} diff --git a/src/store/event-store/eventActions.ts b/src/store/event-store/eventActions.ts index 616d478..a306818 100644 --- a/src/store/event-store/eventActions.ts +++ b/src/store/event-store/eventActions.ts @@ -1,7 +1,5 @@ import EventActionTypes from "./eventActionTypes"; -import { IEvent } from "./IEvent"; import EventAPI from "../api/EventAPI"; -import { IEventView } from "../../interfaces"; export const createEvent = (data: any) => { return { diff --git a/src/styles/events.scss b/src/styles/events.scss index 4b31285..8d437d1 100644 --- a/src/styles/events.scss +++ b/src/styles/events.scss @@ -92,7 +92,6 @@ } .flyer-title { - display: flex; justify-content: start; font-size: 14px; margin-top: 4px; From 7abb4edb30bf09ee6ae5122c851bd7f26071dd80 Mon Sep 17 00:00:00 2001 From: rusiruavb Date: Wed, 15 Dec 2021 17:57:52 +0530 Subject: [PATCH 3/5] Implement delete event option --- src/App.scss | 9 ++ src/App.tsx | 2 +- src/constants/index.ts | 37 +++++++- src/pages/event/add/index.tsx | 5 +- src/pages/event/delete/index.tsx | 109 ++++++++++++++++++++++ src/pages/event/list/index.tsx | 20 +++- src/pages/event/update/index.tsx | 6 +- src/routes/app-routes.tsx | 12 +-- src/store/api/EventAPI.ts | 9 +- src/store/event-store/eventActionTypes.ts | 1 + src/styles/events.scss | 12 +++ 11 files changed, 204 insertions(+), 18 deletions(-) create mode 100644 src/pages/event/delete/index.tsx diff --git a/src/App.scss b/src/App.scss index 95030ca..8408d33 100644 --- a/src/App.scss +++ b/src/App.scss @@ -86,6 +86,10 @@ footer { border-bottom: none; } +.modal-title { + font-size: 16px; +} + .modal-footer { border-top: none; } @@ -105,3 +109,8 @@ footer { margin: 0px !important; padding: 0px !important; } + +.toastBody { + font-family: "Poppins Regular"; + font-size: 14px; +} diff --git a/src/App.tsx b/src/App.tsx index c25026b..0ad4bba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import "./App.scss"; const App: React.FC = () => (

- +
); diff --git a/src/constants/index.ts b/src/constants/index.ts index 62b20ba..7e021f3 100644 --- a/src/constants/index.ts +++ b/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 }; diff --git a/src/pages/event/add/index.tsx b/src/pages/event/add/index.tsx index 51fff89..e40d17d 100644 --- a/src/pages/event/add/index.tsx +++ b/src/pages/event/add/index.tsx @@ -101,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); } }; @@ -148,7 +149,7 @@ const AddEvent: React.FC = () => { eventFormData.append("dateTime", dateTime as string); eventFormData.append("description", description as string); eventFormData.append("link", eventLink as string); - eventFormData.append("tags", JSON.stringify(filteredTags)); + filteredTags?.forEach((tag) => eventFormData.append("tags", tag)); eventFormData.append("registrationLink", registrationLink as string); eventFormData.append("eventType", eventType as string); diff --git a/src/pages/event/delete/index.tsx b/src/pages/event/delete/index.tsx new file mode 100644 index 0000000..db645b4 --- /dev/null +++ b/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(); + 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 ( +
+ +
+ ); +}; + +export default DeleteEvent; diff --git a/src/pages/event/list/index.tsx b/src/pages/event/list/index.tsx index 9573028..aa1657d 100644 --- a/src/pages/event/list/index.tsx +++ b/src/pages/event/list/index.tsx @@ -10,15 +10,23 @@ import { IModifiedBy } from "../../../store/interfaces"; import EventView from "../view"; import AddEvent from "../add"; import UpdateEvent from "../update"; +import DeleteEvent from "../delete"; const EventList: React.FC = () => { const dispatch = useDispatch(); + const HtmlToReactParser = require("html-to-react").Parser; const state = useSelector((state) => state.eventReducer); const events: IEvent[] = state.events; const [selectedTypeEvents, setSelectedTypeEvents] = useState(events); const [selectedTab, setSelectedTab] = useState("All"); + const convertToPlain = (html: string) => { + const htmlToParser = new HtmlToReactParser(); + const reactElement = htmlToParser.parse(html); + return reactElement; + }; + // Table confuguration const { SearchBar } = Search; const options = { @@ -136,8 +144,7 @@ const EventList: React.FC = () => { @@ -157,6 +164,11 @@ const EventList: React.FC = () => { $("#eventUpdateModal").modal("show"); }; + const handleSetDeleteEvent = (eventId: string) => { + dispatch(setEventId(eventId)); + $("#eventDeleteModal").modal("show"); + }; + const expandRow = { showExpandColumn: true, expandByColumnOnly: true, @@ -197,7 +209,7 @@ const EventList: React.FC = () => {   Description -

{row.description}

+

{convertToPlain(row.description)}

  Event Link @@ -209,6 +221,7 @@ const EventList: React.FC = () => {
Tags  
+ {console.log(row.tags)} {row.tags.map((tag, index) => (
{ +
); diff --git a/src/pages/event/update/index.tsx b/src/pages/event/update/index.tsx index d72dbfc..0efa425 100644 --- a/src/pages/event/update/index.tsx +++ b/src/pages/event/update/index.tsx @@ -62,7 +62,7 @@ const UpdateEvent: React.FC = () => { let eventData = state.events.find( (event: IEvent) => event._id === state.selectedEventId ); - console.log(eventData); + setEventDetails(eventData); setState((prevState) => ({ ...prevState, @@ -130,7 +130,7 @@ const UpdateEvent: React.FC = () => { for (let tag of tags) { filterdTags.push(tag.trim()); } - + console.log(filterdTags); setState((prevState) => ({ ...prevState, filteredTags: filterdTags })); } }; @@ -178,7 +178,7 @@ const UpdateEvent: React.FC = () => { eventFormData.append("dateTime", dateTime as string); eventFormData.append("description", description as string); eventFormData.append("link", eventLink as string); - eventFormData.append("tags", JSON.stringify(filteredTags)); + filteredTags?.forEach((tag) => eventFormData.append("tags", tag)); eventFormData.append("registrationLink", registrationLink as string); eventFormData.append("eventType", eventType as string); diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx index a932cc9..66c6213 100644 --- a/src/routes/app-routes.tsx +++ b/src/routes/app-routes.tsx @@ -1,18 +1,18 @@ import React from "react"; -import { BrowserRouter as Router } from "react-router-dom"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; import { NavBar } from "../components"; import EventList from "../pages/event/list"; const AppRoutes: React.FC = () => (
- +
- {/* Route Declaration - Start */} - - {/* Route Declaration - End */} + + } /> +
- +
); diff --git a/src/store/api/EventAPI.ts b/src/store/api/EventAPI.ts index 10618fc..e484f53 100644 --- a/src/store/api/EventAPI.ts +++ b/src/store/api/EventAPI.ts @@ -10,7 +10,7 @@ class EventAPI { } static getEvent(eventId: string): Promise { - return axios.get(`${BASE_URL}/event/${eventId}`); + return axios.get(`${BASE_URL}/admin/event/${eventId}`); } static getEvents(): Promise { @@ -22,7 +22,12 @@ class EventAPI { } static deleteEvent(eventId: string): Promise { - return axios.put(`${BASE_URL}/event/delete/${eventId}`, requestConfig); + console.log(requestConfig); + return axios.put( + `${BASE_URL}/admin/event/delete/${eventId}`, + null, + requestConfig + ); } } diff --git a/src/store/event-store/eventActionTypes.ts b/src/store/event-store/eventActionTypes.ts index 5d90232..b23fc7d 100644 --- a/src/store/event-store/eventActionTypes.ts +++ b/src/store/event-store/eventActionTypes.ts @@ -3,6 +3,7 @@ enum EventActionTypes { GET_EVENT = "GET_EVENT", GET_ALL_EVENTS = "GET_ALL_EVENTS", SET_EVENT_ID = "SET_EVENT_ID", + SET_EVENT_ERROR = "SET_EVENT_ERROR", UPDATE_EVENT = "UPDATE_EVENT", DELETE_EVENT = "DELETE_EVENT", } diff --git a/src/styles/events.scss b/src/styles/events.scss index 8d437d1..bd83a03 100644 --- a/src/styles/events.scss +++ b/src/styles/events.scss @@ -101,3 +101,15 @@ font-size: 13px; } } + +.delete-event { + .flyer-title { + justify-content: start; + font-size: 14px; + margin-top: 4px; + } + + .text { + font-size: 13px; + } +} From f492eb3221b800117c43b4fc848bad2e31d1fc73 Mon Sep 17 00:00:00 2001 From: rusiruavb Date: Wed, 15 Dec 2021 18:56:36 +0530 Subject: [PATCH 4/5] Implement deleted events table --- src/pages/event/list/delete.tsx | 299 ++++++++++++++++++++++ src/pages/event/list/index.tsx | 8 +- src/routes/app-routes.tsx | 2 + src/store/api/EventAPI.ts | 4 + src/store/event-store/IEvent.ts | 1 + src/store/event-store/eventActionTypes.ts | 1 + src/store/event-store/eventActions.ts | 7 + src/store/event-store/eventReducer.ts | 6 + 8 files changed, 327 insertions(+), 1 deletion(-) create mode 100644 src/pages/event/list/delete.tsx diff --git a/src/pages/event/list/delete.tsx b/src/pages/event/list/delete.tsx new file mode 100644 index 0000000..604265f --- /dev/null +++ b/src/pages/event/list/delete.tsx @@ -0,0 +1,299 @@ +import React, { useEffect } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { + getDeletedEvents, + setEventId, +} from "../../../store/event-store/eventActions"; +import { IEvent } from "../../../store/event-store/IEvent"; +import BootstrapTable from "react-bootstrap-table-next"; +import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit"; +import paginationFactory from "react-bootstrap-table2-paginator"; +import moment from "moment"; +import { IModifiedBy } from "../../../store/interfaces"; +import { useNavigate } from "react-router-dom"; + +const DeletedEventList: React.FC = () => { + const dispatch = useDispatch(); + const history = useNavigate(); + const HtmlToReactParser = require("html-to-react").Parser; + const state = useSelector((state) => state.eventReducer); + const events: IEvent[] = state.deletedEvents; + + const convertToPlain = (html: string) => { + const htmlToParser = new HtmlToReactParser(); + const reactElement = htmlToParser.parse(html); + return reactElement; + }; + + // Table confuguration + const { SearchBar } = Search; + const options = { + paginationSize: 4, + pageStartIndex: 1, + sizePerPage: 15, + hideSizePerPage: true, + alwaysShowAllBtns: true, + }; + + // Fetch events information + useEffect(() => { + dispatch(getDeletedEvents()); + }, [dispatch]); + + // Table column configurations + const tableColumnData = [ + { + dataField: "actions", + text: "Actions", + formatter: (cell: any, row: IEvent) => actionButtonFormatter(row), + headerStyle: { width: "90px" }, + }, + { dataField: "title", text: "Title", headerStyle: { width: "200px" } }, + { + dataField: "eventType", + text: "Type", + headerStyle: { width: "110px" }, + formatter: (cell: string) => { + return ( +
+ {cell === "UPCOMING" ? ( + + Upcoming Event + + ) : null} + {cell === "PAST" ? ( + + Past Event + + ) : null} +
+ ); + }, + }, + { + dataField: "dateTime", + text: "Date & Time", + headerStyle: { width: "220px" }, + formatter: (cell: string) => { + return moment(cell).format("LLL"); + }, + }, + { + dataField: "updatedAt", + text: "Last Modified At", + headerStyle: { width: "220px" }, + formatter: (cell: string) => { + return moment(cell).format("LLL"); + }, + }, + { + dataField: "updatedBy", + text: "Last Modified By", + headerStyle: { width: "250px" }, + formatter: (cell: IModifiedBy[]) => { + let lastModifiedUser = cell.slice(-1)[0]; + return ( +
+ + updated-by-user + + {`${lastModifiedUser.user.firstName} ${lastModifiedUser.user.lastName}`} + + {lastModifiedUser.user.permissionLevel === "ROOT_ADMIN" + ? "Root Admin" + : null} + {lastModifiedUser.user.permissionLevel === "ADMIN" + ? "Administrator" + : null} + {lastModifiedUser.user.permissionLevel === "EDITOR" + ? "Editor" + : null} + +
+ ); + }, + }, + ]; + + // Table action buttons + const actionButtonFormatter = (row: any) => { + return ( + + + + + +
+ handleSetViewEvent(row._id)} + > + View + + + Recover + + +
+ + + ); + }; + + const handleSetViewEvent = (eventId: string) => { + dispatch(setEventId(eventId)); + $("#eventViewModal").modal("show"); + }; + + const expandRow = { + showExpandColumn: true, + expandByColumnOnly: true, + onlyOneExpanding: true, + expandHeaderColumnRenderer: ({ isAnyExpands }: any) => { + if (isAnyExpands) { + return ; + } + return ; + }, + expandColumnRenderer: ({ expanded }: any) => { + if (expanded) { + return ( +
+ +
+ ); + } + return ( +
+ +
+ ); + }, + renderer: (row: IEvent) => ( +
+
Event Information
+
+
+ event-flyer +
+
+
+ +   Description +
+

{convertToPlain(row.description)}

+ +
+   Event Link +
+

{row.link}

+ + {row.tags && row.tags.length > 0 ? ( +
+
+ Tags   +
+ {console.log(row.tags)} + {row.tags.map((tag, index) => ( +
+ {tag} +
+ ))} +
+ ) : null} +
+
+
+ ), + }; + + const handleGoBackToEvents = (event: any) => { + history("/events/"); + }; + + return ( +
+
+
+

Events

+

+ Manage all the event informations +

+
+
+
+ +
+
+
+ +
+
+ +
+
+ + + {(props) => ( +
+
+ +
+

+ *If you experience any difficulty in viewing the event + information, please make sure your cache is cleared and completed + a hard refresh. +

+ +
+ )} + +
+ ); +}; + +export default DeletedEventList; diff --git a/src/pages/event/list/index.tsx b/src/pages/event/list/index.tsx index aa1657d..78099e2 100644 --- a/src/pages/event/list/index.tsx +++ b/src/pages/event/list/index.tsx @@ -11,9 +11,11 @@ import EventView from "../view"; import AddEvent from "../add"; import UpdateEvent from "../update"; import DeleteEvent from "../delete"; +import { useNavigate } from "react-router-dom"; const EventList: React.FC = () => { const dispatch = useDispatch(); + const history = useNavigate(); const HtmlToReactParser = require("html-to-react").Parser; const state = useSelector((state) => state.eventReducer); const events: IEvent[] = state.events; @@ -263,6 +265,10 @@ const EventList: React.FC = () => { }); }; + const handleDeletedEventClick = (events: any) => { + history("/events/deleted"); + }; + return (
@@ -319,7 +325,7 @@ const EventList: React.FC = () => { className={`btn btn-sm ${ selectedTab === "Deleted" ? "btn-info" : "btn-light" } btn-rounded shadow-none`} - onClick={(e) => handleViewClick(e, "Deleted")} + onClick={(e) => handleDeletedEventClick(e)} > Deleted diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx index 66c6213..a9880bd 100644 --- a/src/routes/app-routes.tsx +++ b/src/routes/app-routes.tsx @@ -2,6 +2,7 @@ import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import { NavBar } from "../components"; import EventList from "../pages/event/list"; +import DeletedEventList from "../pages/event/list/delete"; const AppRoutes: React.FC = () => (
@@ -10,6 +11,7 @@ const AppRoutes: React.FC = () => (
} /> + } />
diff --git a/src/store/api/EventAPI.ts b/src/store/api/EventAPI.ts index e484f53..ec66bec 100644 --- a/src/store/api/EventAPI.ts +++ b/src/store/api/EventAPI.ts @@ -17,6 +17,10 @@ class EventAPI { return axios.get(`${BASE_URL}/admin/event/`, requestConfig); } + static getDeletedEvents(): Promise { + return axios.get(`${BASE_URL}/admin/event/delete/`, requestConfig); + } + static updateEvent(eventId: string, data: FormData): Promise { return axios.put(`${BASE_URL}/admin/event/${eventId}`, data, requestConfig); } diff --git a/src/store/event-store/IEvent.ts b/src/store/event-store/IEvent.ts index 7b46de9..0484f86 100644 --- a/src/store/event-store/IEvent.ts +++ b/src/store/event-store/IEvent.ts @@ -21,6 +21,7 @@ interface IEvent { interface IEventState { event: IEvent | null; events: IEvent[] | null; + deletedEvents: IEvent[] | null; selectedEventId: string | null; addEvent: IEvent | null; updatedEvent: IEvent | null; diff --git a/src/store/event-store/eventActionTypes.ts b/src/store/event-store/eventActionTypes.ts index b23fc7d..61bfb92 100644 --- a/src/store/event-store/eventActionTypes.ts +++ b/src/store/event-store/eventActionTypes.ts @@ -2,6 +2,7 @@ enum EventActionTypes { CREATE_EVENT = "CREATE_EVENT", GET_EVENT = "GET_EVENT", GET_ALL_EVENTS = "GET_ALL_EVENTS", + GET_DELETED_EVENTS = "GET_DELETED_EVENTS", SET_EVENT_ID = "SET_EVENT_ID", SET_EVENT_ERROR = "SET_EVENT_ERROR", UPDATE_EVENT = "UPDATE_EVENT", diff --git a/src/store/event-store/eventActions.ts b/src/store/event-store/eventActions.ts index a306818..af9f8d2 100644 --- a/src/store/event-store/eventActions.ts +++ b/src/store/event-store/eventActions.ts @@ -22,6 +22,13 @@ export const getEvents = () => { }; }; +export const getDeletedEvents = () => { + return { + type: EventActionTypes.GET_DELETED_EVENTS, + payload: EventAPI.getDeletedEvents(), + }; +}; + export const updateEvent = (eventId: string, data: FormData) => { return { type: EventActionTypes.UPDATE_EVENT, diff --git a/src/store/event-store/eventReducer.ts b/src/store/event-store/eventReducer.ts index 5d36472..ba44a90 100644 --- a/src/store/event-store/eventReducer.ts +++ b/src/store/event-store/eventReducer.ts @@ -4,6 +4,7 @@ import EventActionTypes from "./eventActionTypes"; const initialState: IEventState = { event: null, events: [], + deletedEvents: [], selectedEventId: null, addEvent: null, updatedEvent: null, @@ -17,6 +18,7 @@ const eventReducer = (state = initialState, action: any) => { case `${EventActionTypes.CREATE_EVENT}_PENDING`: case `${EventActionTypes.GET_EVENT}_PENDING`: case `${EventActionTypes.GET_ALL_EVENTS}_PENDING`: + case `${EventActionTypes.GET_DELETED_EVENTS}_PENDING`: case `${EventActionTypes.UPDATE_EVENT}_PENDING`: case `${EventActionTypes.DELETE_EVENT}_PENDING`: return { ...state, loading: true }; @@ -30,6 +32,9 @@ const eventReducer = (state = initialState, action: any) => { case `${EventActionTypes.GET_ALL_EVENTS}_FULFILLED`: let events = action.payload.data; return { ...state, loading: false, events }; + case `${EventActionTypes.GET_DELETED_EVENTS}_FULFILLED`: + let deletedEvents = action.payload.data; + return { ...state, loading: false, deletedEvents }; case `${EventActionTypes.SET_EVENT_ID}`: let selectedEventId = action.payload; return { ...state, loading: false, selectedEventId }; @@ -43,6 +48,7 @@ const eventReducer = (state = initialState, action: any) => { case `${EventActionTypes.CREATE_EVENT}_REJECTED`: case `${EventActionTypes.GET_EVENT}_REJECTED`: case `${EventActionTypes.GET_ALL_EVENTS}_REJECTED`: + case `${EventActionTypes.GET_DELETED_EVENTS}_REJECTED`: case `${EventActionTypes.UPDATE_EVENT}_REJECTED`: case `${EventActionTypes.DELETE_EVENT}_REJECTED`: return { From f803af6caef7ca12e955d1afd537197690d158e4 Mon Sep 17 00:00:00 2001 From: rusiruavb Date: Thu, 16 Dec 2021 11:21:06 +0530 Subject: [PATCH 5/5] Fix update modal open bug in event page --- package.json | 9 ++++- src/App.scss | 5 +++ src/pages/event/list/delete.tsx | 65 ++++++++++++++------------------ src/pages/event/list/index.tsx | 41 +++++++++++--------- src/pages/event/update/index.tsx | 2 + src/pages/event/view/index.tsx | 18 ++++++++- src/store/index.ts | 17 +++++---- src/styles/events.scss | 7 +++- src/styles/table.scss | 7 +++- 9 files changed, 105 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index ec929d9..4a42b83 100644 --- a/package.json +++ b/package.json @@ -55,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": [ diff --git a/src/App.scss b/src/App.scss index 8408d33..b72483f 100644 --- a/src/App.scss +++ b/src/App.scss @@ -29,6 +29,11 @@ margin-top: 80px; } +p { + margin-bottom: 5px; + line-height: 19px; +} + .btn { text-transform: unset !important; } diff --git a/src/pages/event/list/delete.tsx b/src/pages/event/list/delete.tsx index 604265f..c4d9248 100644 --- a/src/pages/event/list/delete.tsx +++ b/src/pages/event/list/delete.tsx @@ -1,9 +1,6 @@ import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { - getDeletedEvents, - setEventId, -} from "../../../store/event-store/eventActions"; +import { getDeletedEvents } from "../../../store/event-store/eventActions"; import { IEvent } from "../../../store/event-store/IEvent"; import BootstrapTable from "react-bootstrap-table-next"; import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit"; @@ -79,8 +76,8 @@ const DeletedEventList: React.FC = () => { }, }, { - dataField: "updatedAt", - text: "Last Modified At", + dataField: "deletedAt", + text: "Deleted At", headerStyle: { width: "220px" }, formatter: (cell: string) => { return moment(cell).format("LLL"); @@ -88,7 +85,7 @@ const DeletedEventList: React.FC = () => { }, { dataField: "updatedBy", - text: "Last Modified By", + text: "Deleted By", headerStyle: { width: "250px" }, formatter: (cell: IModifiedBy[]) => { let lastModifiedUser = cell.slice(-1)[0]; @@ -128,14 +125,8 @@ const DeletedEventList: React.FC = () => {
- handleSetViewEvent(row._id)} - > - View - - Recover + Recover
-
- -   Description +
+   Event Link
-

{convertToPlain(row.description)}

+ + {row.link} + -
-   Event Link +
+   Registration Link
-

{row.link}

+ + {row.registrationLink} + {row.tags && row.tags.length > 0 ? (
-
+
Tags  
- {console.log(row.tags)} - {row.tags.map((tag, index) => ( -
- {tag} -
- ))} +
+ {row.tags.map((tag, index) => ( +
+ #{tag} +
+ ))} +
) : null} + +
+ +   Description +
+

{convertToPlain(row.description)}

diff --git a/src/pages/event/list/index.tsx b/src/pages/event/list/index.tsx index 78099e2..8d48db9 100644 --- a/src/pages/event/list/index.tsx +++ b/src/pages/event/list/index.tsx @@ -207,33 +207,40 @@ const EventList: React.FC = () => { />
-
- -   Description +
+   Event Link
-

{convertToPlain(row.description)}

+ + {row.link} + -
-   Event Link +
+   Registration Link
-

{row.link}

+ + {row.registrationLink} + {row.tags && row.tags.length > 0 ? (
-
+
Tags  
- {console.log(row.tags)} - {row.tags.map((tag, index) => ( -
- {tag} -
- ))} +
+ {row.tags.map((tag, index) => ( +
+ #{tag} +
+ ))} +
) : null} + +
+ +   Description +
+

{convertToPlain(row.description)}

diff --git a/src/pages/event/update/index.tsx b/src/pages/event/update/index.tsx index 0efa425..21ba8a9 100644 --- a/src/pages/event/update/index.tsx +++ b/src/pages/event/update/index.tsx @@ -84,11 +84,13 @@ const UpdateEvent: React.FC = () => { dispatch(getEvents()); dispatch(setEventId("")); closeModal(); + // eslint-disable-next-line }, [state.updatedEvent, dispatch]); const closeModal = () => { setState({ ...initialState }); setEditor(RichTextEditor.createEmptyValue()); + dispatch(setEventId("")); $("#eventUpdateModal").modal("hide"); }; diff --git a/src/pages/event/view/index.tsx b/src/pages/event/view/index.tsx index e646d5b..ed75f68 100644 --- a/src/pages/event/view/index.tsx +++ b/src/pages/event/view/index.tsx @@ -169,7 +169,7 @@ const EventView: React.FC = () => { {eventDetails && eventDetails.updatedBy && eventDetails.updatedBy.map((user, index) => ( -
  • +
  • { {user.user.firstName} {user.user.lastName}

    - + {user.user.permissionLevel === "ROOT_ADMIN" ? "Root Admin" : null} diff --git a/src/store/index.ts b/src/store/index.ts index 7ecd120..c021526 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,6 +1,6 @@ -import { createStore, applyMiddleware, compose } from 'redux'; -import promiseMiddleware from 'redux-promise-middleware'; -import reducers from './reducer'; +import { createStore, applyMiddleware, compose } from "redux"; +import promiseMiddleware from "redux-promise-middleware"; +import reducers from "./reducer"; declare global { interface Window { @@ -8,14 +8,15 @@ declare global { } } -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // Production Store // const Store = createStore(reducers, applyMiddleware(promiseMiddleware)); // Development Store -const Store = createStore(reducers, composeEnhancers( - applyMiddleware(promiseMiddleware) -)); +const Store = createStore( + reducers, + composeEnhancers(applyMiddleware(promiseMiddleware)) +); -export default Store; \ No newline at end of file +export default Store; diff --git a/src/styles/events.scss b/src/styles/events.scss index bd83a03..5ac3456 100644 --- a/src/styles/events.scss +++ b/src/styles/events.scss @@ -5,7 +5,8 @@ } .tag-badge { - margin-right: 8px; + margin-right: 5px; + font-weight: 600; } .event-view { @@ -71,6 +72,10 @@ height: 15px; z-index: 400; } + + .modify-user-item { + margin-bottom: 5px; + } } .add-event { diff --git a/src/styles/table.scss b/src/styles/table.scss index 04fc0a1..85f600f 100644 --- a/src/styles/table.scss +++ b/src/styles/table.scss @@ -19,7 +19,7 @@ th { } .table-description { - font-size: 12px; + font-size: 13px; margin-bottom: 0px; } @@ -29,3 +29,8 @@ th { margin-top: 0px !important; margin-right: 5px; } + +.row-header { + margin-bottom: 2px !important; + font-size: 13px; +}