admin-me-events

src/actionTypes/actionTypes.js

@@ -22,4 +22,6 @@ export const POST_REQUEST_ERROR_CHECKIN = "POST_REQUEST_ERROR_CHECKIN";
 
 export const GET_REQUEST_EVENTS = "GET_REQUEST_EVENTS";
 export const GET_REQUEST_SUCCESS_EVENTS = "GET_REQUEST_SUCCESS_EVENTS";
-export const GET_REQUEST_ERROR_EVENTS = "GET_REQUEST_ERROR_EVENTS";
+export const GET_REQUEST_ERROR_EVENTS = "GET_REQUEST_ERROR_EVENTS";
+
+export const EDIT_EVENT = "EDIT_EVENT";

src/actions/adminMainPageActions.js

@@ -1,6 +1,13 @@
 import axios from "axios";
 import * as types from "../actionTypes/actionTypes"
 
+export const editEvent = payload => {
+	return {
+		type: types.EDIT_EVENT,
+		payload
+	};
+};
+
 //POST
 const postNewEventRequest = payload => ({
 	type: types.POST_NEW_EVENT_REQUEST,

src/components/adminEventElement/adminEventElement.scss

@@ -1,25 +1,25 @@
 @import "../../styles/variables";
 
-.event-tank {
-    display:flex;
-    flex-direction: column;
-    justify-content: top;
-    text-align: center;
-    padding: 10px;
-    margin: 5px;
-    // border: 2px solid $color-black;	
-}
-.event-image {
-    width: 100%;
-    height: 25rem;
-    padding: 10px;
-    border: 2px solid $color-mint;
-    margin-bottom: 5px;
-}
-.event-image:hover {
-    // box-shadow: inset 10px 10px 10px $color-mint;
-    background: $color-mint;
-}
+// .event-tank {
+//     display:flex;
+//     flex-direction: column;
+//     justify-content: top;
+//     text-align: center;
+//     padding: 10px;
+//     margin: 5px;
+//     // border: 2px solid $color-black;	
+// }
+// .event-image {
+//     width: 100%;
+//     height: 25rem;
+//     padding: 10px;
+//     border: 2px solid $color-mint;
+//     margin-bottom: 5px;
+// }
+// .event-image:hover {
+//     // box-shadow: inset 10px 10px 10px $color-mint;
+//     background: $color-mint;
+// }
 
 // .event-buttons-conteiner{
 //     display: flex;
@@ -50,18 +50,18 @@
 //         opacity: 0;
 //     }
 // }
-.event-title {
-    color: $color-black;
-    font-size: 1.3rem;
-    font-weight: 800;
-}
-@media (max-width: 600px) {
-    .event-tank {
-        padding: 10px;
-        margin: 0;	
-    }
-    .event-title {
-        font-size: 1rem;
-        font-weight: 600;
-    }
-}
+// .event-title {
+//     color: $color-black;
+//     font-size: 1.3rem;
+//     font-weight: 800;
+// }
+// @media (max-width: 600px) {
+//     .event-tank {
+//         padding: 10px;
+//         margin: 0;	
+//     }
+//     .event-title {
+//         font-size: 1rem;
+//         font-weight: 600;
+//     }
+// }

src/components/eventForm/eventReduxForm.js

@@ -4,7 +4,6 @@ import "./eventForm.scss";
 import { customInput } from "../customFields/customInput/customInput";
 import { customTextarea } from "../customFields/customTextarea/customTextarea";
 import { customSelect } from "../customFields/customSelect/customSelect";
-// import { eventFormInitialValue, eventTypes } from "../../state/addEventInitialValue";
 import { eventFormValidation } from "../../utils/eventFormValidation";
 
 const EventReduxForm = ({
@@ -14,7 +13,8 @@ const EventReduxForm = ({
     showConfirmationMessage,
     reset,
     eventTypes,
-    eventFormInitialValue
+    eventFormInitialValue,
+    editFormFlag
 }) => {
 
     const submit = value => {
@@ -30,41 +30,6 @@ const EventReduxForm = ({
 		resetInitValue();
 	};
 
-    // const resetForm = () => {
-    // 	reset();
-    // 	resetInitValue();
-    // }
-
-    // onChangeHandler = e => {
-    //     const { name, value, id } = e.target;
-
-    //     this.setState(prevState => {
-    //         const values = Object.keys(prevState.form).reduce((prev, elem) => {
-    //             if (elem === name) return prev.concat(value);
-    //             return prev.concat(prevState.form[elem].value);
-    //         }, []);
-
-    //         return {
-    //             ...prevState,
-    //             form: {
-    //                 ...prevState.form,
-    //                 [name]: {
-    //                     ...prevState.form[name],
-    //                     value,
-    //                     // touch: true,
-    //                     // fail: this.validator(prevState.form[name].validation, value)
-    //                 },
-    //                 // pictures: prevState.form.pictures.map(el => (el.id === +id ? { ...el, value } : el))
-    //             },
-    //             validForm: values.some(value => value)
-    //         };
-    //     });
-    // };
-
-    // render() {
-    //     const { form, validForm } = this.state;
-    //     const { error } = this.props;
-
     return (
         <form className="event-form__event-form__main" onSubmit={handleSubmit(submit)}>
             {console.log('eventFormInitialValue', eventFormInitialValue)}
@@ -93,7 +58,7 @@ const EventReduxForm = ({
             <Field name="map" label="Map" className="input-box -wide" placeholder='Enter picture url' component={customInput} />
 
             <div className="event-form__control-box">
-                <button className="event-form__submit-btn">Add Event</button>
+                <button className="event-form__submit-btn">{editFormFlag ? 'Save Changes' : 'Add Event'}</button>
             </div>
         </form>
     );

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -25,7 +25,8 @@ class AdminAddEventPage extends Component {
         const {
             postNewEvent,
             eventFormInitialValue,
-            eventTypes
+            eventTypes,
+            editFormFlag
         } = this.props
 
 
@@ -34,7 +35,7 @@ class AdminAddEventPage extends Component {
             <AdminHeader/>
             <div className="event-form">
                 <div className="event-form__content">
-                    <h2 className="event-form__form-title">ADD NEW EVENT</h2>
+                    <h2 className="event-form__form-title">{editFormFlag ? 'CHANGE EVENT' : 'ADD NEW EVENT'}</h2>
         
                     <Form 
                         postNewEvent = {postNewEvent}
@@ -42,6 +43,7 @@ class AdminAddEventPage extends Component {
                         showConfirmationMessage = {this.showConfirmationMessage}
                         eventFormInitialValue = {eventFormInitialValue}
                         eventTypes = {eventTypes}
+                        editFormFlag = {editFormFlag}
                     />
                 </div>
             </div>
@@ -57,7 +59,8 @@ class AdminAddEventPage extends Component {
 
 const mapStateToProps = state => ({
     eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
-    eventTypes: state.adminMainPageReducer.eventTypes
+    eventTypes: state.adminMainPageReducer.eventTypes,
+    editFormFlag: state.adminMainPageReducer.editFormFlag
 });
 
 export default connect(mapStateToProps, actions)(AdminAddEventPage);

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 // import { reduxForm, Field } from "redux-form";
 import "./adminMyEventsPage.scss";
+// import { Link } from "react-router-dom";
+import { Redirect } from 'react-router-dom'
 import * as actions from "../../actions/adminMainPageActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import Form from "../../components/eventForm/eventReduxForm";
@@ -14,9 +16,7 @@ class AdminAddEventPage extends Component {
 
     state = {
         confirmationMessageFlag: false,
-        // initialValues: this.props.eventFormInitialValue,
-        // eventList: this.props.eventList,
-        showFormFlag: false
+        editFormFlag: false
     };
 
 
@@ -49,8 +49,10 @@ class AdminAddEventPage extends Component {
         const {
             postNewEvent,
             eventList,
-            // eventFormInitialValue,
-            // eventTypes
+            editEvent,
+            eventFormInitialValue,
+            editFormFlag,
+            eventTypes
         } = this.props
 
         console.log('eventList', eventList)
@@ -64,9 +66,10 @@ class AdminAddEventPage extends Component {
                     <div className="event-page__content">
                         <h2 className="event-page__title">MY EVENTS</h2>
 
-                        <div className="event-page__container">
+                        <div className="events-list">
                             {eventList && eventList.map(el =>
-                                <div key={el._id}>
+                                <div className="event-page__container" key={el._id}>
+
                                     <EventInfoShort
                                         key={el._id}
                                         title={el.title}
@@ -75,29 +78,28 @@ class AdminAddEventPage extends Component {
                                         id={el._id}
                                         eventDate={el.eventDate}
                                         imgSrc={el.mainBannerPicture}
+                                        values={eventFormInitialValue}
                                     />
                                     <div className="event-buttons-conteiner">
-                                        <button className="event-button" >Edit Event</button>
+                                        <button className="event-button" onClick={editEvent.bind(null, el._id)} >Edit Event</button>
                                         <button className="event-button" >Delete Event</button>
                                     </div>
+
                                 </div>
-                                // <AdminEventElement
-                                //     key={elem._id}
-                                //     img={elem.mainBannerPicture}
-                                //     title={elem.title}
-                                //     id={elem._id}
-                                //     // onClick={showCarElement.bind(null, elem.id)}
-                                // />
                             )}
                         </div>
 
-                        {this.showFormFlag && <Form
-                            initialValues={this.state.initialValues}
-                            postNewEvent={postNewEvent}
-                            editItem={this.editItem}
-                            resetInitValue={this.resetInitValue}
-                            showConfirmationMessage={this.showConfirmationMessage}
-                        />}
+                        {editFormFlag && <Redirect to='/admin/add_new_event' /> 
+                            // <Form
+                            //     eventFormInitialValue={eventFormInitialValue}
+                            //     eventTypes={eventTypes}
+
+                            //     postNewEvent={postNewEvent}
+                            //     editItem={this.editItem}
+                            //     resetInitValue={this.resetInitValue}
+                            //     showConfirmationMessage={this.showConfirmationMessage}
+                            // />
+                        }
                     </div>
                 </div>
 
@@ -114,6 +116,7 @@ const mapStateToProps = state => ({
     eventList: state.adminMainPageReducer.eventList,
     eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
     eventTypes: state.adminMainPageReducer.eventTypes,
+    editFormFlag: state.adminMainPageReducer.editFormFlag,
 });
 
 export default connect(mapStateToProps, actions)(AdminAddEventPage);

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -21,10 +21,14 @@
     }
 
     &__container{
-        display: grid;
-        margin: auto;  
-        grid-template-columns: 1fr 1fr; 
-        width: 100%;
+		display: flex;
+		flex-direction:column;
+		width: 50%;
+		// flex-wrap: wrap;
+        // display: grid;
+        // margin: auto;  
+        // grid-template-columns: 1fr 1fr; 
+        // width: 100%;
     }
     
     &__title{
@@ -41,7 +45,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-bottom: 10px;
+	margin-bottom: 10px;
 }
 
 .event-button{

src/reducers/adminMainPageReducer.js

@@ -6,6 +6,16 @@ export default (state = initialState, action) => {
 
     switch (action.type) {
 
+		case types.EDIT_EVENT: {
+			const eventFormInitialValue = state.eventList.find(el => el._id === action.payload);
+			console.log(eventFormInitialValue)
+			return {
+				...state,
+				eventFormInitialValue: eventFormInitialValue,
+				editFormFlag: true
+			};
+		}
+
 		//POST
         case types.POST_NEW_EVENT_REQUEST_SUCCESS: {
 			console.log('reducer add event success', action.payload)

src/state/addEventInitialValue.js

@@ -24,6 +24,7 @@ eventFormInitialValue: {
 },
 
 eventList: null,
+editFormFlag: false,
 
 eventTypes: [
     { optionName: 'Select Event Type', id: 1 },