admin-my-events

src/components/adminEventElement/adminEventElement.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import "./adminEventElement.scss";
 
+
 export default ({img, title, id, onClick, onClickEdit, onClickDelete,  ...rest}) => (
     <div id = {id} className = "event-tank" color = "#f6f1bf" onClick = {onClick} > 
         <div className = "event-title">{title}</div>

src/components/adminEventElement/adminEventElement.scss

@@ -21,35 +21,35 @@
     background: $color-mint;
 }
 
-.event-buttons-conteiner{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 10px;
-}
+// .event-buttons-conteiner{
+//     display: flex;
+//     flex-direction: row;
+//     justify-content: space-between;
+//     margin: 10px;
+// }
 
-.event-button{
-    width: 45%;
-    background-color: $color-mint;
-    padding: 1rem;
-    border: none;
-    border-radius: 3px;
-    color: #fff;
-    font-weight: 600;
-	font-size: 1.2rem;
-	transition: 0.2s;
-	// padding: 1rem 5rem;
-}
+// .event-button{
+//     width: 45%;
+//     background-color: $color-mint;
+//     padding: 1rem;
+//     border: none;
+//     border-radius: 3px;
+//     color: #fff;
+//     font-weight: 600;
+// 	font-size: 1.2rem;
+// 	transition: 0.2s;
+// 	// padding: 1rem 5rem;
+// }
 
-.event-button:hover{
-    outline: none;
-    transform: translateY(-1px);
-    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
-    &:after {
-        transform: scaleX(1.4) scaleY(1.6);
-        opacity: 0;
-    }
-}
+// .event-button:hover{
+//     outline: none;
+//     transform: translateY(-1px);
+//     box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
+//     &:after {
+//         transform: scaleX(1.4) scaleY(1.6);
+//         opacity: 0;
+//     }
+// }
 .event-title {
     color: $color-black;
     font-size: 1.3rem;

src/components/eventInfoShort/eventInfoShort.scss

@@ -3,7 +3,7 @@
 .event {
     &-item {
         padding: 0 5px 20px 5px;
-
+     
         a {
             display: block;
             height: 100%;

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -1,64 +1,103 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { reduxForm, Field } from "redux-form";
+// import { reduxForm, Field } from "redux-form";
 import "./adminMyEventsPage.scss";
 import * as actions from "../../actions/adminMainPageActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import Form from "../../components/eventForm/eventReduxForm";
-import AdminEventElement from "../../components/adminEventElement/adminEventElement";
+// import AdminEventElement from "../../components/adminEventElement/adminEventElement";
 import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
-import {customSelect} from "../../components/customFields/customSelect/customSelect";
+// import {customSelect} from "../../components/customFields/customSelect/customSelect";
+import EventInfoShort from "../../components/eventInfoShort/EventInfoShort";
 
 class AdminAddEventPage extends Component {
-    state = { 
-        confirmationMessageFlag: false
-     };
+
+    state = {
+        confirmationMessageFlag: false,
+        // initialValues: this.props.eventFormInitialValue,
+        // eventList: this.props.eventList,
+        showFormFlag: false
+    };
+
 
     componentDidMount() {
-	    this.props.getEvents();
+        this.props.getEvents();
     }
-    
-    resetInitValue = () => this.setState({ eventFormInitialValue: {} });
 
-    showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
-    closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
+    // resetInitValue = () => this.setState({ eventFormInitialValue: {} });
+
+    // showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
+    // closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
+
+
+    // editItem = item =>
+    // this.setState(prevState => ({
+    //     ...prevState,
+    //     showFormFlag: true,
+    //     eventList: prevState.eventList.map(el => (el.id === item.id ? item : el))
+    // }));
+
+    // setInitialValues = id =>
+    // this.setState(prevState => {
+    //     console.log('prevState', prevState)
+    //     return {
+    //     ...prevState,
+    //     eventFormInitialValue: prevState.eventList.find(el => el._id === id)
+    // }});
 
     render() {
         const {
             postNewEvent,
             eventList,
-            eventFormInitialValue,
-            eventTypes
+            // eventFormInitialValue,
+            // eventTypes
         } = this.props
 
         console.log('eventList', eventList)
-        console.log('confirmationMessageFlag', this.state.confirmationMessageFlag)
+        // console.log('confirmationMessageFlag', this.state.confirmationMessageFlag)
 
-		console.log("eventFormInitialValue", eventFormInitialValue);
+        // console.log("eventFormInitialValue", eventFormInitialValue);
         return (
             <>
                 <AdminHeader />
                 <div className="event-page">
                     <div className="event-page__content">
                         <h2 className="event-page__title">MY EVENTS</h2>
- 
+
                         <div className="event-page__container">
-                         {eventList && eventList.map(elem =>
-                            <AdminEventElement
-                                key={elem._id}
-                                img={elem.mainBannerPicture}
-                                title={elem.title}
-                                id={elem._id}
-                                // onClick={showCarElement.bind(null, elem.id)}
-                            />
-                        )}
+                            {eventList && eventList.map(el =>
+                                <div key={el._id}>
+                                    <EventInfoShort
+                                        key={el._id}
+                                        title={el.title}
+                                        country={el.country}
+                                        city={el.city}
+                                        id={el._id}
+                                        eventDate={el.eventDate}
+                                        imgSrc={el.mainBannerPicture}
+                                    />
+                                    <div className="event-buttons-conteiner">
+                                        <button className="event-button" >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>
 
-                        {/* <Form 
-                        postNewEvent = {postNewEvent}
-                        resetInitValue = {this.resetInitValue}
-                        showConfirmationMessage = {this.showConfirmationMessage}
-                    /> */}
+                        {this.showFormFlag && <Form
+                            initialValues={this.state.initialValues}
+                            postNewEvent={postNewEvent}
+                            editItem={this.editItem}
+                            resetInitValue={this.resetInitValue}
+                            showConfirmationMessage={this.showConfirmationMessage}
+                        />}
                     </div>
                 </div>
 

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -24,15 +24,49 @@
         display: grid;
         margin: auto;  
         grid-template-columns: 1fr 1fr; 
-        width: 90%;
+        width: 100%;
     }
     
     &__title{
-		color: $color-mint;
+		color: $color-blue;
 		font-size: 3rem;
 		letter-spacing: 0.2;
-		font-weight: 600;
-		text-shadow: 3px 3px 3px #000;
+		font-weight: 800;
+		// text-shadow: 3px 3px 3px #000;
 		margin-bottom: 3%;
-    }
+	}
+}
+
+.event-buttons-conteiner{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+
+.event-button{
+    width: 45%;
+    background-color: $color-mint;
+    padding: 0.5rem;
+    border: none;
+    border-radius: 3px;
+    color: #fff;
+    font-weight: 600;
+	font-size: 1.2rem;
+	transition: 0.2s;
+	// padding: 1rem 5rem;
+	margin-bottom: 20px;
+}
+.event-button:first-child{
+	margin-right: 10px;
 }
+
+.event-button:hover{
+    outline: none;
+    transform: translateY(-1px);
+    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
+    &:after {
+        transform: scaleX(1.4) scaleY(1.6);
+        opacity: 0;
+    }
+}