admin-my-events

src/components/adminEventElement/adminEventElement.js

@@ -0,0 +1,14 @@
+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>
+        <img className = "event-image" src = {img} alt = "event"/>
+        <div className ="event-buttons-conteiner">
+            <button className="event-button" onClick = {onClickEdit}>Edit Event</button>
+            <button className="event-button" onClick = {onClickDelete}>Delete Event</button>
+        </div>
+        {/* <div className = "event-title">{title}</div> */}
+    </div>
+)

src/components/adminEventElement/adminEventElement.scss

@@ -0,0 +1,67 @@
+@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-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: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;
+    font-weight: 800;
+}
+@media (max-width: 600px) {
+    .event-tank {
+        padding: 10px;
+        margin: 0;	
+    }
+    .event-title {
+        font-size: 1rem;
+        font-weight: 600;
+    }
+}

src/components/adminPhotogalary/adminPhotogalaryReduxForm.js

@@ -4,7 +4,7 @@ import "./adminPhotogalary.scss";
 import { addPhotogalaryInitialValue } from "../../state/photogalaryFormData";
 import { customInput } from "../customFields/customInput/customInput";
 import { customSelect } from "../customFields/customSelect/customSelect";
-import { eventTypes } from "../../state/addEventInitialValue";
+// import { eventTypes } from "../../state/addEventInitialValue";
 
 class PhotogalaryReduxForm extends Component {
 
@@ -69,7 +69,7 @@ class PhotogalaryReduxForm extends Component {
         const { addPhotogalaryInitialValue } = this.state;
         console.log(this.state)
 
-        const { handleSubmit } = this.props;
+        const { handleSubmit, eventTypes } = this.props;
 
         return (
             <form className="event-form__event-form__main" onSubmit={handleSubmit(this.submit)}>

src/components/confirmationMessage/confirmationMessage.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import "./confirmationMessage.scss";
+
+export default class ConfirmationMessage extends Component {
+    
+    state = {messageTimer: null}
+
+    componentDidMount() {
+        const {closeMessage} = this.props
+        const messageTimer = setTimeout( closeMessage, 3000);
+        this.setState({ messageTimer });
+        document.body.classList.remove("stop-scroling")
+    }
+    
+    componentWillUnmoumt() {
+        clearTimeout(this.state.messageTimer)
+    }
+
+    render () {
+        return ( 
+            <div className = "background">
+                <div id = "confirmation-wrapper">
+                    children
+                </div>
+            </div>
+        )
+    }
+};

src/components/confirmationMessage/confirmationMessage.scss

@@ -0,0 +1,38 @@
+    
+.background {
+    position: fixed;
+    width: 100%;
+    background-color: #00000075;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+}
+#confirmation-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content:center;
+    align-items: center;
+    width: 100%;
+    max-width: 600px;
+    background-color: #5acec2;
+    color: #33313b;
+    font: 16px/18px "Raleway", "Arial", "Helvetica Neue", sans-serif;
+    text-align: center;
+    font-weight: 600;
+    text-shadow: 1px 1px 1px #797875;
+    margin: 20px;
+    padding: 50px 20px;
+}
+.text{
+    margin-bottom: 20px;
+}
+
+@media (max-width: 600px) {
+    #confirmation-wrapper{
+        font: 14px/16px "Raleway", "Arial", "Helvetica Neue", sans-serif;
+    }
+}

src/components/customFields/customSearchSelect/customSearchSelect.js

@@ -0,0 +1,104 @@
+import React from "react";
+import "./customSearchSelect.scss";
+
+const mock = [{ id: 1, optionName: "ONE" }, { id: 2, optionName: "TWO" }, { id: 3, optionName: "THREE" }];
+
+export const CustomSearchSelect = ({ label, options = mock, emptyLine = false, searchInput = true, reset }) => {
+	const [copyOption, setCopyOption] = React.useState([]);
+	const [show, toggleShow] = React.useState(false);
+	const [value, toggleValue] = React.useState("");
+	const [inputValue, toggleInputValue] = React.useState("");
+	const list = React.createRef();
+
+	React.useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutSide);
+		return () => document.removeEventListener("mousedown", handleClickOutSide);
+	});
+
+	React.useEffect(() => {
+		if (reset) {
+			toggleValue("");
+			toggleInputValue("");
+			setCopyOption(options);
+
+			toggleShow(false);
+		}
+	}, [options, reset]);
+
+	React.useEffect(() => {
+		setCopyOption(options);
+	}, [options]);
+
+	const handleClickOutSide = e => {
+		if (!show) return;
+
+		if (list.current && !list.current.contains(e.target)) {
+			toggleShow(false);
+		}
+	};
+
+	const toggleEvent = optionName => {
+		toggleValue(optionName);
+		toggleInputValue(optionName);
+        toggleShow(false);
+        console.log('toggleValue', optionName)
+	};
+
+	const clickOnEptyLine = () => {
+		toggleValue("");
+		toggleInputValue("");
+
+		toggleShow(false);
+	};
+
+	const chahgeValueEvent = e => {
+		const { value } = e.target;
+		toggleInputValue(e.target.value);
+
+		if (!value) {
+			setCopyOption(options);
+			toggleInputValue(value);
+		} else {
+			const filtered = copyOption.filter(el => el.optionName.toLowerCase().indexOf(value.toLowerCase()) >= 0);
+
+			setCopyOption(filtered);
+			toggleInputValue(value);
+        }
+        console.log('selectValue', value)
+	};
+
+	return (
+		<div className="select">
+			{label && (
+				<label htmlFor="select" className="select__lable">
+					{label}
+				</label>
+			)}
+			<div className="select__value-box" onClick={() => toggleShow(true)}>
+				{searchInput ? null : <span>{value} &nbsp;</span>}
+				<input
+					value={inputValue}
+					autoComplete="off"
+					type={searchInput ? "text" : "hidden"}
+					onChange={chahgeValueEvent}
+					id="select"
+					className="select__input"
+				/>
+			</div>
+			{show && (
+				<ul className="select__list" ref={list}>
+					{emptyLine && (
+						<li className="select__item" onClick={clickOnEptyLine}>
+							&nbsp;
+						</li>
+					)}
+					{copyOption.map(el => (
+						<li className="select__item" key={el.id} onClick={toggleEvent.bind(null, el.optionName)}>
+							{el.optionName}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};

src/components/customFields/customSearchSelect/customSearchSelect.scss

@@ -0,0 +1,42 @@
+.select {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	&__list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		background-color: #fff;
+
+		position: absolute;
+		left: 0;
+		top: 100%;
+		z-index: 10;
+	}
+
+	&__value-box {
+		border: 1px solid #eee;
+		border-radius: 3px;
+		padding: 0.5rem;
+	}
+
+	&__item {
+		display: flex;
+		padding: 0.5rem;
+		cursor: pointer;
+		&:hover {
+			background-color: #eee;
+		}
+	}
+
+	&__input {
+		border: none;
+		width: 100%;
+		&:focus {
+			outline: none;
+		}
+	}
+}

src/components/eventForm/eventForm.scss

@@ -74,7 +74,7 @@
 
 	&__submit-btn {
 		width: 100%;
-		border: 1px solid $color-mint;
+		// border: 1px solid $color-mint;
 		border-radius: 3px;
 		display: block;
 

src/components/eventForm/eventReduxForm.js

@@ -4,19 +4,32 @@ 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 { eventFormInitialValue, eventTypes } from "../../state/addEventInitialValue";
 import { eventFormValidation } from "../../utils/eventFormValidation";
 
 const EventReduxForm = ({
     handleSubmit,
-    postNewEvent
+    postNewEvent,
+    resetInitValue,
+    showConfirmationMessage,
+    reset,
+    eventTypes,
+    eventFormInitialValue
 }) => {
 
     const submit = value => {
         console.log('submit values', value)
         postNewEvent(value)
+        resetForm();
+        showConfirmationMessage()
     };
 
+    
+	const resetForm = () => {
+		reset();
+		resetInitValue();
+	};
+
     // const resetForm = () => {
     // 	reset();
     // 	resetInitValue();

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -3,26 +3,33 @@ import { connect } from "react-redux";
 import * as actions from "../../actions/adminMainPageActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import Form from "../../components/eventForm/eventReduxForm";
-import {eventFormInitialValue} from "../../state/addEventInitialValue"
+import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
+// import eventFormInitialValue from "../../state/addEventInitialValue"
 
 class AdminAddEventPage extends Component {
     state = { 
-        eventFormInitialValue
+        // eventFormInitialValue: eventFormInitialValue.eventFormInitialValue,
+        confirmationMessageFlag: false
      };
 
     componentDidMount() {
 	    this.props.getEvents();
-	}
+    }
+    
+    resetInitValue = () => this.setState({ eventFormInitialValue: {} });
+
+    showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
+    closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
 
     render() {
         const {
             postNewEvent,
-            eventList
+            // eventList,
+            eventFormInitialValue,
+            eventTypes
         } = this.props
 
-        console.log('eventList', eventList)
 
-		console.log("initialValues", this.state.eventFormInitialValue);
 		return (
             <>
             <AdminHeader/>
@@ -30,16 +37,29 @@ class AdminAddEventPage extends Component {
                 <div className="event-form__content">
                     <h2 className="event-form__form-title">ADD NEW EVENT</h2>
         
-                    <Form postNewEvent = {postNewEvent}/>
+                    <Form 
+                        postNewEvent = {postNewEvent}
+                        resetInitValue = {this.resetInitValue}
+                        showConfirmationMessage = {this.showConfirmationMessage}
+                        eventFormInitialValue = {eventFormInitialValue}
+                        eventTypes = {eventTypes}
+                    />
                 </div>
             </div>
+
+            {this.state.confirmationMessageFlag && 
+                <ConfirmationMessage closeMessage = {this.closeConfirmationMessage}>
+                    <div className = "text">New event has beed added.</div>
+                </ConfirmationMessage >}
             </>
 		);
 	}
 }
 
 const mapStateToProps = state => ({
-	eventList: state.adminMainPageReducer.eventList,
+    // eventList: state.adminMainPageReducer.eventList,
+    eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
+    eventTypes: state.adminMainPageReducer.eventTypes
 });
 
 export default connect(mapStateToProps, actions)(AdminAddEventPage);

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+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 ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
+import {customSelect} from "../../components/customFields/customSelect/customSelect";
+
+class AdminAddEventPage extends Component {
+    state = { 
+        confirmationMessageFlag: false
+     };
+
+    componentDidMount() {
+	    this.props.getEvents();
+    }
+    
+    resetInitValue = () => this.setState({ eventFormInitialValue: {} });
+
+    showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
+    closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
+
+    render() {
+        const {
+            postNewEvent,
+            eventList,
+            eventFormInitialValue,
+            eventTypes
+        } = this.props
+
+        console.log('eventList', eventList)
+        console.log('confirmationMessageFlag', this.state.confirmationMessageFlag)
+
+		console.log("eventFormInitialValue", eventFormInitialValue);
+        return (
+            <>
+                <AdminHeader />
+                <div className="event-page">
+                    <div className="event-page__content">
+                        <h2 className="event-page__title">MY EVENTS</h2>
+ 
+                        {/* <CustomSearchSelect label = "Event Type" options = {eventTypes} value ={value}/> */}
+                        <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)}
+                            />
+                        )}
+                        </div>
+
+                        {/* <Form 
+                        postNewEvent = {postNewEvent}
+                        resetInitValue = {this.resetInitValue}
+                        showConfirmationMessage = {this.showConfirmationMessage}
+                    /> */}
+                    </div>
+                </div>
+
+                {this.state.confirmationMessageFlag &&
+                    <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
+                        <div className="text">Event has beed changed.</div>
+                    </ConfirmationMessage >}
+            </>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    eventList: state.adminMainPageReducer.eventList,
+    eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
+    eventTypes: state.adminMainPageReducer.eventTypes,
+});
+
+export default connect(mapStateToProps, actions)(AdminAddEventPage);

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -0,0 +1,38 @@
+@import "../../styles/variables";
+
+.event-page {
+	width: 100%;
+	height: 100%;
+	margin: auto;
+	background: -webkit-linear-gradient(top, #fff, $color-mint); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
+	background: -moz-linear-gradient(top, #fff, $color-mint); /* Firefox 3.6-15 */
+	background: -o-linear-gradient(top,  #fff, $color-mint); /* Opera 11.1-12 */
+	background: linear-gradient(to bottom,  #fff, $color-mint);
+
+	&__content {
+		max-width: 1000px;
+		position: relative;
+		margin: auto;
+		padding: 2rem;
+		border-left: 1px solid $color-mint;
+		border-right: 1px solid $color-mint;
+		background-color: #eee;
+		padding-bottom: 3%;
+    }
+
+    &__container{
+        display: grid;
+        margin: auto;  
+        grid-template-columns: 1fr 1fr; 
+        width: 90%;
+    }
+    
+    &__title{
+		color: $color-mint;
+		font-size: 3rem;
+		letter-spacing: 0.2;
+		font-weight: 600;
+		text-shadow: 3px 3px 3px #000;
+		margin-bottom: 3%;
+    }
+}

src/conteiners/adminPhotogalaryPage/adminPhotogalaryPage.js

@@ -24,10 +24,10 @@ class AdminAddPhotogalarytPage extends Component {
       }
 
     render() {
-        // const {
-        //     postNewEvent,
-        //     eventList
-        // } = this.props
+        const {
+            eventTypes,
+            // eventList
+        } = this.props
 
         // console.log('eventList', eventList)
 
@@ -38,7 +38,7 @@ class AdminAddPhotogalarytPage extends Component {
                 <div className="photogalary-form">
                     <div className="photogalary-form__content">
                         <h2 className="photogalary-form__form-title">ADD EVENT PHOTOGALARY</h2>
-                        <PhotogalaryForm />
+                        <PhotogalaryForm eventTypes={eventTypes}/>
                     </div>
                 </div>
             </>
@@ -47,7 +47,8 @@ class AdminAddPhotogalarytPage extends Component {
 }
 
 const mapStateToProps = state => ({
-	eventList: state.adminMainPageReducer.eventList,
+    // eventList: state.adminMainPageReducer.eventList,
+    eventTypes: state.adminMainPageReducer.eventTypes
 });
 
 export default connect(

src/reducers/adminMainPageReducer.js

@@ -1,8 +1,8 @@
 import * as types from "../actionTypes/actionTypes"
-import {eventFormInitialValue} from "../state/addEventInitialValue"
+import initialState from "../state/addEventInitialValue";
 
 
-export default (state = eventFormInitialValue, action) => {
+export default (state = initialState, action) => {
 
     switch (action.type) {
 
@@ -25,12 +25,7 @@ export default (state = eventFormInitialValue, action) => {
 		}
 		case types.GET_EVENTS_REQUEST_SUCCESS: {
 			const { data } = action.payload;
-			const eventList = Object.keys(data).reduce((prev, elem) => {
-				return prev.concat({
-					...data[elem],
-					// id: elem
-				});
-			}, []);
+			const eventList = data.events
 			return { ...state, eventList };
 		}
 		case types.GET_EVENTS_REQUEST_FAIL: {

src/router.js

@@ -3,6 +3,7 @@ import { Switch, Route } from "react-router-dom";
 
 import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
 import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
+import AdminMyEventsPage from './conteiners/adminMyEventsPage/adminMyEventsPage';
 import Home from './conteiners/home/Home';
 import Login from './conteiners/login/Login';
 
@@ -57,6 +58,7 @@ export default class Router extends React.Component {
 			        <Route exact path = '/admin' component = {AdminMainPage} />
 			        <Route exact path = '/admin/add_new_event' component = {AdminAddEventPage} />
 			        <Route exact path = '/admin/photogalary' component = {AdminAddPhotogalarytPage} />
+					<Route exact path = '/admin/my_events' component = {AdminMyEventsPage} />
 			            
 			    </Switch>
 			</div>

src/state/addEventInitialValue.js

@@ -1,4 +1,6 @@
-export const eventFormInitialValue = {
+export default{
+
+eventFormInitialValue: {
     mainBannerPicture: "https://tokyo2020.org/assets/img/pages/news/20180802-01-photo-main.jpg",
     title: "",
     eventType: "",
@@ -19,11 +21,14 @@ export const eventFormInitialValue = {
     refreshments: "",
     map: "",
     addEventMessage: null
-}
+},
+
+eventList: null,
 
-export const eventTypes = [
+eventTypes: [
     { optionName: 'Select Event Type', id: 1 },
     { optionName: 'Triathlon', id: 2 },
     { optionName: 'Marathon', id: 3 },
     { optionName: 'Cycling', id: 4 }
-]
+]
+}

src/styles/base.scss

@@ -121,4 +121,8 @@ button {
     transform: translate(0% -50%);
 	transform: translateX(-50%);
 	z-index: 1;
+}
+
+.stop-scroling {
+	overflow: hidden;
 }