admin-edit-event

src/actionTypes/actionTypes.js

@@ -6,6 +6,10 @@ export const GET_EVENTS_REQUEST = "GET_EVENTS_REQUEST";
 export const GET_EVENTS_REQUEST_SUCCESS = "GET_EVENTS_REQUEST_SUCCESS";
 export const GET_EVENTS_REQUEST_FAIL = "GET_EVENTS_REQUEST_FAIL";
 
+export const EDIT_EVENT_REQUEST = "EDIT_EVENT_REQUEST";
+export const EDIT_EVENT_REQUEST_SUCCESS = "EDIT_EVENT_REQUEST_SUCCESS";
+export const EDIT_EVENT_REQUEST_FAIL = "EDIT_EVENT_REQUEST_FAIL";
+
 export const REMOVE_EVENT_REQUEST = "REMOVE_EVENT_REQUEST";
 export const REMOVE_EVENT_REQUEST_SUCCESS = "REMOVE_EVENT_REQUEST_SUCCESS";
 export const REMOVE_EVENT_REQUEST_FAIL = "REMOVE_EVENT_REQUEST_FAIL";

src/actions/adminMainPageActions.js

@@ -35,6 +35,34 @@ export const postNewEvent = payload => {
 	};
 };
 
+//PUT
+const editEventRequest = payload => ({
+	type: types.EDIT_EVENT_REQUEST,
+	payload
+});
+const editEventRequestSuccess = payload => ({
+	type: types.EDIT_EVENT_REQUEST_SUCCESS,
+	payload
+});
+const editEventRequestFail = payload => ({
+	type: types.EDIT_EVENT_REQUEST_FAIL,
+	payload
+});
+
+export const changeEvent = (payload) => {
+	return async dispatch => {
+		dispatch(editEventRequest());
+		try {
+			await axios.put(`https://api-marathon.herokuapp.com/api/v1/event/${payload._id} `, payload);
+			dispatch(editEventRequestSuccess({payload, id: payload._id}));
+			console.log("Event Changed", payload)
+		} catch (error) {
+			console.log('edit payload',payload)
+			dispatch(editEventRequestFail(error));
+		}
+	};
+};
+
 //GET
 const getEventsRequest = payload => ({
 	type: types.GET_EVENTS_REQUEST,
@@ -75,10 +103,10 @@ const removeEventFail = payload => ({
 	payload
 });
 
-export const removePost = id => dispatch => {
+export const removeEvent = _id => dispatch => {
 	dispatch(removeEventRequest());
 	return axios
-		.delete(`https://api-marathon.herokuapp.com/api/v1/event/:${id}`)
-		.then(res => dispatch(removeEventSuccess({ res, id })))
+		.delete(` https://api-marathon.herokuapp.com/api/v1/event/${_id}`)
+		.then(res => dispatch(removeEventSuccess({ res, _id })))
 		.catch(err => dispatch(removeEventFail(err)));
 };

src/components/confirmationMessage/confirmationMessage.js

@@ -17,10 +17,11 @@ export default class ConfirmationMessage extends Component {
     }
 
     render () {
+        const {children} = this.props
         return ( 
             <div className = "background">
                 <div id = "confirmation-wrapper">
-                    children
+                    {children}
                 </div>
             </div>
         )

src/components/confirmationMessage/confirmationMessage.scss

@@ -19,7 +19,7 @@
     width: 100%;
     max-width: 600px;
     background-color: #5acec2;
-    color: #33313b;
+    color: #fff;
     font: 16px/18px "Raleway", "Arial", "Helvetica Neue", sans-serif;
     text-align: center;
     font-weight: 600;

src/components/eventForm/eventReduxForm.js

@@ -9,32 +9,41 @@ import { eventFormValidation } from "../../utils/eventFormValidation";
 const EventReduxForm = ({
     handleSubmit,
     postNewEvent,
-    resetInitValue,
+    // resetInitValue,
     showConfirmationMessage,
     reset,
     eventTypes,
-    eventFormInitialValue,
-    editFormFlag
+    initialValues,
+    // eventFormInitialValue,
+    editFormFlag,
+    changeEvent
 }) => {
 
     const submit = value => {
         console.log('submit values', value)
-        postNewEvent(value)
-        resetForm();
-        showConfirmationMessage()
-    };
-
-    
-	const resetForm = () => {
+		if (!editFormFlag) {
+            postNewEvent(value)
+            reset();
+            showConfirmationMessage();
+		} else {
+            changeEvent(value);
+            reset();
+            showConfirmationMessage();
+		}
 		reset();
-		resetInitValue();
 	};
 
+    
+	// const resetForm = () => {
+	// 	reset();
+	// 	resetInitValue();
+	// };
+
     return (
         <form className="event-form__event-form__main" onSubmit={handleSubmit(submit)}>
-            {console.log('eventFormInitialValue', eventFormInitialValue)}
+            {console.log('eventFormInitialValue', initialValues)}
 
-            <img className="event-form__picture" alt="Event Bunner" src={eventFormInitialValue.mainBannerPicture} />
+            <img className="event-form__picture" alt="Event Bunner" src={initialValues.mainBannerPicture} />
             <Field name="mainBannerPicture" className="input-box -wide"  label="Main Banner Picture" component={customInput} />
             <Field name="title" label="Event Title" className="input-box -wide"  required component={customInput} />
             <Field name="eventType" label="Event Type" required component={customSelect} >

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -16,7 +16,7 @@ class AdminAddEventPage extends Component {
 	    this.props.getEvents();
     }
     
-    resetInitValue = () => this.setState({ eventFormInitialValue: {} });
+    // resetInitValue = () => this.setState({ eventFormInitialValue: {} });
 
     showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
     closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
@@ -24,6 +24,8 @@ class AdminAddEventPage extends Component {
     render() {
         const {
             postNewEvent,
+            changeEvent,
+            // removeEvent,
             eventFormInitialValue,
             eventTypes,
             editFormFlag
@@ -39,9 +41,11 @@ class AdminAddEventPage extends Component {
         
                     <Form 
                         postNewEvent = {postNewEvent}
-                        resetInitValue = {this.resetInitValue}
+                        changeEvent = {changeEvent}
+                        // removeEvent = {removeEvent}
+                        // resetInitValue = {this.resetInitValue}
                         showConfirmationMessage = {this.showConfirmationMessage}
-                        eventFormInitialValue = {eventFormInitialValue}
+                        initialValues = {eventFormInitialValue}
                         eventTypes = {eventTypes}
                         editFormFlag = {editFormFlag}
                     />
@@ -50,7 +54,7 @@ class AdminAddEventPage extends Component {
 
             {this.state.confirmationMessageFlag && 
                 <ConfirmationMessage closeMessage = {this.closeConfirmationMessage}>
-                    <div className = "text">New event has beed added.</div>
+                    <div className = "text">{editFormFlag ? `Event has been changed.` : `New event has beed added.`}</div>
                 </ConfirmationMessage >}
             </>
 		);

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -49,6 +49,7 @@ class AdminAddEventPage extends Component {
         const {
             postNewEvent,
             eventList,
+            removeEvent,
             editEvent,
             eventFormInitialValue,
             editFormFlag,
@@ -82,7 +83,7 @@ class AdminAddEventPage extends Component {
                                     />
                                     <div className="event-buttons-conteiner">
                                         <button className="event-button" onClick={editEvent.bind(null, el._id)} >Edit Event</button>
-                                        <button className="event-button" >Delete Event</button>
+                                        <button className="event-button" onClick={removeEvent.bind(null,el._id)} >Delete Event</button>
                                     </div>
 
                                 </div>

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -28,7 +28,12 @@
         // display: grid;
         // margin: auto;  
         // grid-template-columns: 1fr 1fr; 
-        // width: 100%;
+		// width: 100%;
+		@media (min-width: 768px){
+			.event-item {
+			width: 100%;
+			}
+		}
     }
     
     &__title{

src/reducers/adminMainPageReducer.js

@@ -17,10 +17,10 @@ export default (state = initialState, action) => {
 		}
 
 		//POST
-        case types.POST_NEW_EVENT_REQUEST_SUCCESS: {
+		case types.POST_NEW_EVENT_REQUEST_SUCCESS: {
 			console.log('reducer add event success', action.payload)
 			return {
-				state,
+				...state,
 				addEventMessage: "New event has been added"
 			}
 		}
@@ -29,6 +29,19 @@ export default (state = initialState, action) => {
 			return { ...state, error: action.payload }
 		}
 
+		//PUT
+		case types.EDIT_EVENT_REQUEST_SUCCESS: {
+			console.log('reducer edit event success', action.payload)
+			return {
+				...state,
+				addEventMessage: "Event has been changed"
+			}
+		}
+		case types.EDIT_EVENT_REQUEST_FAIL: {
+			console.log('reducer edit event fail', action.payload)
+			return { ...state, error: action.payload }
+		}
+
 		// GET ALL EVENTS
 		case types.GET_EVENTS_REQUEST: {
 			return state;
@@ -47,10 +60,10 @@ export default (state = initialState, action) => {
 			return state;
 		}
 		case types.REMOVE_EVENT_REQUEST_SUCCESS: {
-			const { id } = action.payload;
+			const { _id } = action.payload;
 			return {
 				...state,
-				eventList: state.eventList.filter(el => el.id !== id)
+				eventList: state.eventList.filter(el => el._id !== _id)
 			};
 		}