admin-photogalary

src/actionTypes/actionTypes.js

@@ -28,4 +28,19 @@ 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 EDIT_EVENT = "EDIT_EVENT";
+export const EDIT_EVENT = "EDIT_EVENT";
+
+export const GET_PHOTOGALARY_REQUEST = "GET_PHOTOGALARY_REQUEST";
+export const GET_PHOTOGALARY_REQUEST_SUCCESS = "GET_PHOTOGALARY_REQUEST_SUCCESS";
+export const GET_PHOTOGALARY_REQUEST_FAIL = "GET_PHOTOGALARY_REQUEST_FAIL";
+
+export const POST_PHOTOGALARY_REQUEST = "POST_PHOTOGALARY_REQUEST";
+export const POST_PHOTOGALARY_REQUEST_SUCCESS = "POST_PHOTOGALARY_REQUEST_SUCCESS";
+export const POST_PHOTOGALARY_REQUEST_FAIL = "POST_PHOTOGALARY_REQUEST_FAIL";
+
+export const PUT_PHOTOGALARY_REQUEST = "PUT_PHOTOGALARY_REQUEST";
+export const PUT_PHOTOGALARY_REQUEST_SUCCESS = "PUT_PHOTOGALARY_REQUEST_SUCCESS";
+export const PUT_PHOTOGALARY_REQUEST_FAIL = "PUT_PHOTOGALARY_REQUEST_FAIL";
+
+
+// export const PHOTOGALARY_ONCHAGE = "PHOTOGALARY_ONCHAGE";

src/actions/photogalaryActions.js

@@ -0,0 +1,112 @@
+import axios from "axios";
+import * as types from "../actionTypes/actionTypes"
+
+// export const photogalaryOnchange = payload => {
+// 	return {
+// 		type: types.PHOTOGALARY_ONCHAGE,
+// 		payload
+// 	};
+// };
+
+// GET EVENTS
+const getEventsRequest = payload => ({
+	type: types.GET_EVENTS_REQUEST,
+	payload
+});
+
+const getEventsRequestSuccess = payload => ({
+	type: types.GET_EVENTS_REQUEST_SUCCESS,
+	payload
+});
+
+const getEventsRequestFail = payload => ({
+	type: types.GET_EVENTS_REQUEST_FAIL,
+	payload
+});
+
+export const getEvents = () => dispatch => {
+	dispatch(getEventsRequest());
+	return axios
+		.get("https://api-marathon.herokuapp.com/api/v1/event")
+		.then(res => dispatch(getEventsRequestSuccess(res)))
+		.catch(err => dispatch(getEventsRequestFail(err)));
+};
+
+// GET PHOTOGALARY
+const getPhotogalaryRequest = payload => ({
+	type: types.GET_PHOTOGALARY_REQUEST,
+	payload
+});
+
+const getPhotogalaryRequestSuccess = payload => ({
+	type: types.GET_PHOTOGALARY_REQUEST_SUCCESS,
+	payload
+});
+
+const getPhotogalaryRequestFail = payload => ({
+	type: types.GET_PHOTOGALARY_REQUEST_FAIL,
+	payload
+});
+
+export const getPhotogalary = () => dispatch => {
+	dispatch(getPhotogalaryRequest());
+	return axios
+		.get("https://api-marathon.herokuapp.com/api/v1/gallery")
+		.then(res => dispatch(getPhotogalaryRequestSuccess(res)))
+		.catch(err => dispatch(getPhotogalaryRequestFail(err)));
+};
+
+//POST PHOTOGALARY
+const postPhotogalaryRequest = payload => ({
+	type: types.POST_PHOTOGALARY_REQUEST,
+	payload
+});
+const postPhotogalaryRequestSuccess = payload => ({
+	type: types.POST_PHOTOGALARY_REQUEST_SUCCESS,
+	payload
+});
+const postPhotogalaryRequestFail = payload => ({
+	type: types.POST_PHOTOGALARY_REQUEST_FAIL,
+	payload
+});
+
+export const postPhotogalary = payload => {
+	return async dispatch => {
+		dispatch(postPhotogalaryRequest());
+		try {
+			const { data } = await axios.post("https://api-marathon.herokuapp.com/api/v1/gallery", payload);
+			dispatch(postPhotogalaryRequestSuccess(data));
+			console.log("Photogalary Posted", payload)
+		} catch (error) {
+			dispatch(postPhotogalaryRequestFail(error));
+		}
+	};
+};
+
+//PUT PHOTOGALARY
+const putPhotogalaryRequest = payload => ({
+	type: types.PUT_PHOTOGALARY_REQUEST,
+	payload
+});
+const putPhotogalaryRequestSuccess = payload => ({
+	type: types.PUT_PHOTOGALARY_REQUEST_SUCCESS,
+	payload
+});
+const putPhotogalaryRequestFail = payload => ({
+	type: types.PUT_PHOTOGALARY_REQUEST_FAIL,
+	payload
+});
+
+export const putPhotogalary = (payload) => {
+	return async dispatch => {
+		dispatch(putPhotogalaryRequest());
+		try {
+			await axios.put(`https://api-marathon.herokuapp.com/api/v1/gallery/:${payload._id} `, payload);
+			dispatch(putPhotogalaryRequestSuccess({payload, id: payload._id}));
+			console.log("PUT Photogalary success", payload)
+		} catch (error) {
+			console.log('PUT Photogalary err',payload)
+			dispatch(putPhotogalaryRequestFail(error));
+		}
+	};
+};

src/components/adminHeader/adminHeader.js

@@ -5,16 +5,26 @@ import "./adminHeader.scss";
 import { adminMenu } from "../../state/adminMenu";
 
 const adminHeader = props => {
+	
+	const logout = (e) => {
+        localStorage.removeItem('user');
+        document.location.reload(true);
+    }
 
 	return (
 		<header className="header" id="header">
 			<div className="header__left-wrapper">
-				<div className="header__logo-box">logo</div>
+				<div className="header__logo-box">                    
+				<div className="header__logo">
+                        <Link to="/admin">
+                            Just_<span>tri</span>_it
+                        </Link>
+                </div></div>
 				<nav className="header__nav">
 					<ul className="header__list">
 						{adminMenu.map(el =>
 							el.hideWhenAuth && props.user ? null : (
-								<li className="header__item" key={el.id}>
+								<li className="header__item" key={el.id} onClick = { el.logout ? logout : null}>
 									<Link to={el.path}>{el.text}</Link>
 								</li>
 							)

src/components/adminHeader/adminHeader.scss

@@ -1,33 +1,23 @@
+@import "../../styles/variables";
+
 a {
-	color: #0a0a0a;
+	color: $color-white;
 	text-decoration: none;
 	transition: opacity .3s ease-in-out;
 	font-weight: 500;
 
 	&:hover {
-		color: #eee;
+		color: $color-mint;
 	}
 }
-// a:hover: {
-// 	font-weight: 600;
-// }
 
 .header {
-	// position: fixed;
-	// top:0;
-	// left: 0;
 	position: relative;
 	width: 100%;
-	background-color: #5acec2;
+	background-color: $color-blue;
 	padding: 3px 5px 0px 0px;
 	z-index: 10;
-	font-size: 1.5rem;
-	// width: 100%;
-	// padding: 5px;
-	// display: flex;
-	// justify-content: flex-start;
-	// align-items: center;
-	// background-color: #5acec2;
+	font-size: 1.6rem;
 
 	&__left-wrapper {
 		width: 100%;
@@ -38,6 +28,24 @@ a {
 
 	&__logo-box {
 		margin-right: 40px;
+		
+	}
+
+	&__logo {
+
+		margin-left: 2rem;
+	
+		a {
+			color: $color-white;
+			font-weight: $bold;
+			font-size: 2rem;
+			text-transform: uppercase;
+	
+			span {
+				color: $color-mint;
+				font-size: 3rem;
+			}
+		}
 	}
 
 	&__nav {
@@ -72,3 +80,9 @@ a {
 	}
 }
 
+@media (max-width: $small){
+	.header__list {
+		display: none;
+	}
+}
+

src/components/adminMenu/adminMenu.js

@@ -20,7 +20,13 @@ class AdminMenu extends Component {
             <div className = "menu-block">
                 {adminMenu.map(el =>
                                 el.text !== "Log out" && el.text !== "Main Page" &&
-                                <div className="menu-skew" path = {el.path}  key={el.id} id = {el.id} onClick = {this.clickEventHandler}>
+                                <div 
+                                className="menu-skew" 
+                                path = {el.path}  
+                                key={el.id} 
+                                id = {el.id} 
+                                onClick = {this.clickEventHandler}
+                                >
                                     <h2 className = "menu-text">{el.text.toUpperCase()}</h2>
                                     {/* <Link to={el.path} className = "menu-text">{el.text.toUpperCase()}</Link> */}
                                 </div>

src/components/adminMenu/adminMenu.scss

@@ -1,3 +1,5 @@
+@import "../../styles/variables";
+
 .menu-block {
   display:flex;
   justify-content: flex-start;
@@ -54,11 +56,49 @@
     }
     
     .menu-text{
-      color: #5acec2;
+      color: $color-white;
       font-size: 3rem;
       letter-spacing: 0.2;
       font-weight: 600;
       text-shadow: 3px 3px 3px #000;
     }
   }
-}
+}
+
+@media (max-width: $small){
+  .menu-block {
+    flex-direction: column;
+    margin-top: 5px;
+    
+    .menu-skew {
+      height: 150px;
+      width: 100%;
+      margin: 3px 0;
+      
+      &:first-child {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+      }
+  
+       &:nth-child(2) {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+        margin-left: 0;
+      } 
+      
+       &:nth-child(3){
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+      }
+      
+       &:last-child {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+        margin-left: 0;
+      }
+      
+      .menu-text{
+        font-size: 2rem;
+        letter-spacing: 0;
+        font-weight: 600;
+        text-shadow: 2px 2px 2px #000;
+      }
+    }
+  }
+}

src/components/adminPhotogalary/adminPhotogalary.scss

@@ -5,10 +5,10 @@
 	min-height: 100vh;
 	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);
+	background: -webkit-linear-gradient(top, #fff, $color-blue); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
+	background: -moz-linear-gradient(top, #fff, $color-blue); /* Firefox 3.6-15 */
+	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
+	background: linear-gradient(to bottom,  #fff, $color-blue);
 
 	&__content {
 		max-width: 1000px;
@@ -41,11 +41,11 @@
         // font-size: 2rem;
         // margin-bottom: 1rem;
 		// color: #5acec2;
-		color: $color-mint;
+		color: $color-blue;
 		font-size: 3rem;
 		letter-spacing: 0.2;
 		font-weight: 600;
-		text-shadow: 3px 3px 3px #000;
+		// text-shadow: 3px 3px 3px #000;
 		margin-bottom: 3%;
     }
 
@@ -108,6 +108,7 @@
 			outline: none;
 		}
 		&:hover {
+			background-color: $color-blue;
 			outline: none;
 			transform: translateY(-1px);
 			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);

src/components/adminPhotogalary/adminPhotogalaryReduxForm.js

@@ -4,29 +4,66 @@ 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";
 
 class PhotogalaryReduxForm extends Component {
 
     state = {
-        addPhotogalaryInitialValue
+        addPhotogalaryInitialValue,
+        filteredEventList: [{ _id: 0, title: 'Choose Event' }]
     }
 
+    submit = values => {
+        // console.log('submit props', this.props)
+        // console.log('submit state', this.state)
+        const pictures = this.state.addPhotogalaryInitialValue.pictures.reduce((prev, elem) => {
+            return prev.concat(elem.value);
+        }, []);
 
-    submit = e => {
-        //  this.props.submitHandler(addPhotogalaryInitialValue);
+        const eventId = this.props.eventList.find(
+            event => event.title === this.state.addPhotogalaryInitialValue.eventTitle
+        )._id
+
+        const submitValues = {
+            ...this.state.addPhotogalaryInitialValue,
+            pictures: pictures,
+            // _id: eventId
+        }
+        // console.log('submit eventId', eventId)
+        console.log('submit values', submitValues)
+        // console.log('pictures', pictures)
+
+        this.props.submitHandler(submitValues);
+        this.props.reset()
+    };
+
+    onChangeTypeHandler = e => {
+        const { name, value } = e.target;
+        console.log('eventInput', value)
+        this.setState(prevState => {
+            console.log('prevStateInput', prevState)
+            return {
+                ...prevState,
+                addPhotogalaryInitialValue: {
+                    ...prevState.addPhotogalaryInitialValue,
+                    [name]: value
+                },
+                filteredEventList: prevState.filteredEventList.concat(
+                    this.props.eventList.filter(el => el.eventType === value)
+                )
+            };
+        });
     };
 
-    onChangeHandler = e => {
+    onChangeTitleHandler = e => {
         const { name, value } = e.target;
-        // console.log('eventInput',e)
+        console.log('eventInput', value)
         this.setState(prevState => {
-            // console.log('prevStateInput', prevState)
+            console.log('prevStateInput', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
                     ...prevState.addPhotogalaryInitialValue,
-                    [ name ]: value
+                    [name]: value
                 }
             };
         });
@@ -34,9 +71,9 @@ class PhotogalaryReduxForm extends Component {
 
     onChangePicturesHandler = e => {
         const { value, id } = e.target;
-        // console.log('eventPicture',e)
+        console.log('eventPicture', e)
         this.setState(prevState => {
-            // console.log('prevStatePicture', prevState)
+            console.log('prevStatePicture', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
@@ -48,68 +85,76 @@ class PhotogalaryReduxForm extends Component {
     };
 
     addPicture = (e) => {
-        this.setState(prevState => ({
-            ...prevState,
-            addPhotogalaryInitialValue: {
-                ...prevState.addPhotogalaryInitialValue,
-                pictures: prevState.addPhotogalaryInitialValue.pictures.concat({
-                    id: Math.random()
-                        .toString()
-                        .substr(2, 100),
-                    name: `picture ${Math.random()
-                        .toString()
-                        .substr(2, 100)}`,
-                    value: ""
-                })
+        this.setState(prevState => {
+            console.log('prevStatePicture-add', prevState)
+            return {
+                ...prevState,
+                addPhotogalaryInitialValue: {
+                    ...prevState.addPhotogalaryInitialValue,
+                    pictures: prevState.addPhotogalaryInitialValue.pictures.concat({
+                        id: Math.random()
+                            .toString()
+                            .substr(2, 100),
+                        name: `picture_${Math.random()
+                            .toString()
+                            .substr(2, 100)}`,
+                        value: ""
+                    })
+                }
             }
-        }));
+        });
     };
 
     render() {
-        const { addPhotogalaryInitialValue } = this.state;
-        console.log(this.state)
+        const { filteredEventList, addPhotogalaryInitialValue } = this.state;
+        // console.log(this.state)
 
-        const { handleSubmit, eventTypes } = this.props;
+        const {
+            handleSubmit,
+            eventTypes,
+        } = this.props;
 
         return (
             <form className="event-form__event-form__main" onSubmit={handleSubmit(this.submit)}>
 
-            <Field 
-                name="eventType" 
-                label="Event Type" 
-                required 
-                component={customSelect} 
-                onChange = {this.onChangeHandler} 
-            >
-                {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
-            </Field>
-           
-            <Field 
-                name="eventTytle" 
-                label="Event Title" 
-                required 
-                component={customInput}  
-                onChange = {this.onChangeHandler} 
-            />
-
-            {addPhotogalaryInitialValue.pictures.map((el, i) => (
-                <Field 
-                    key={`${el.id}/${i}`}  
-                    name={el.name}
-                    id={el.id} 
-                    label="Picture" 
-                    onChange = {this.onChangePicturesHandler} 
-                    className="input-box -wide" 
-                    placeholder='Enter picture url' 
-                    component={customInput} 
-                />
-            ))}
-            <button type="button" className="photogalary-form__picture-btn" onClick={this.addPicture} >Add Picture</button>
-            <div className="event-form__control-box">
-                <button className="event-form__submit-btn" >Add Event</button>
-            </div>
-        </form>
-           
+                <Field
+                    name="eventType"
+                    label="Event Type"
+                    required
+                    component={customSelect}
+                    onChange={this.onChangeTypeHandler}
+                >
+                    {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
+                </Field>
+
+                <Field
+                    name="eventTitle"
+                    label="Event Title"
+                    required
+                    component={customSelect}
+                    onChange={this.onChangeTitleHandler}
+                >
+                    {filteredEventList.map(elem => <option key={elem._id} value={elem.title}>{elem.title}</option>)}
+                </Field>
+
+                {addPhotogalaryInitialValue.pictures.map((el, i) => (
+                    <Field
+                        key={`${el.id}/${i}`}
+                        name={el.name}
+                        id={el.id}
+                        label="Picture"
+                        onChange={this.onChangePicturesHandler}
+                        className="input-box -wide"
+                        placeholder='Enter picture url'
+                        component={customInput}
+                    />
+                ))}
+                <button type="button" className="photogalary-form__picture-btn" onClick={this.addPicture} >Add Picture</button>
+                <div className="event-form__control-box">
+                    <button className="event-form__submit-btn" >Add Photogalary</button>
+                </div>
+            </form>
+
         );
     }
 }

src/components/eventForm/eventForm.scss

@@ -4,10 +4,10 @@
 	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);
+	background: -webkit-linear-gradient(top, #fff, $color-blue); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
+	background: -moz-linear-gradient(top, #fff, $color-blue); /* Firefox 3.6-15 */
+	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
+	background: linear-gradient(to bottom,  #fff, $color-blue);
 
 	&__content {
 		max-width: 1000px;
@@ -32,11 +32,11 @@
     }
     
     &__form-title{
-		color: $color-mint;
+		color: $color-blue;
 		font-size: 3rem;
 		letter-spacing: 0.2;
 		font-weight: 600;
-		text-shadow: 3px 3px 3px #000;
+		// text-shadow: 3px 3px 3px #000;
 		margin-bottom: 3%;
     }
 
@@ -59,7 +59,7 @@
 		margin-top: 1rem;
 		text-align: center;
 		width: 100%;
-		color: #8f240a;
+		color: #c90707;
 		font-size: 2rem;
 	}
 
@@ -74,13 +74,12 @@
 
 	&__submit-btn {
 		width: 100%;
-		// border: 1px solid $color-mint;
 		border-radius: 3px;
 		display: block;
+		border: none;
 
-		color: #fff;
+		color: $color-white;
 		background-color: $color-mint;
-		border: none;
 		cursor: pointer;
 		font-weight: 600;
 		font-size: 1.2rem;
@@ -91,6 +90,9 @@
 			outline: none;
 		}
 		&:hover {
+			background-color: $color-blue;
+			color: $color-white;
+
 			outline: none;
 			transform: translateY(-1px);
 			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
@@ -106,6 +108,18 @@
 			background-color: #eee;
 		}
 	}
-
-
+}
+
+@media (max-width: $small){
+	.event-form {
+		
+		&__form-title{
+			font-size: 2rem;
+			letter-spacing: 0;
+		}
+		
+		&__picture {
+			height: 180px;
+		}
+	}
 }

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -18,8 +18,13 @@ class AdminAddEventPage extends Component {
     
     // resetInitValue = () => this.setState({ eventFormInitialValue: {} });
 
-    showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
-    closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
+    showConfirmationMessage = () => {
+        this.setState({confirmationMessageFlag: true })
+        document.location.reload(true);
+    };
+    closeConfirmationMessage = () => {
+        this.setState({confirmationMessageFlag: false })
+    };
 
     render() {
         const {

src/conteiners/adminMainPage/adminMainPage.js

@@ -1,19 +1,11 @@
 import React, { Component } from 'react';
 import { connect } from "react-redux";
-import { showSidebar } from "../../actions/show-sidebar";
 import "./adminMainPage.scss";
 import Header from '../../components/adminHeader/adminHeader';
 import AdminMenu from '../../components/adminMenu/adminMenu';
+// import Footer from '../../components/footer/Footer';
 
 class AdminMainPage extends Component {
-
-  componentDidMount() {
-    this.props.showSidebar()
-  }
-
-  componentWillUnmount() {
-    this.props.showSidebar()
-  }
   
   render() {
     // const {
@@ -24,6 +16,7 @@ class AdminMainPage extends Component {
       <div className="admin-main-page-wrapper">
         <Header />
         <AdminMenu />
+        {/* <Footer /> */}
       </div>
     )
   }
@@ -35,6 +28,5 @@ const mapStateToProps = state => ({
 });
 
 export default connect(
-  mapStateToProps,
-  { showSidebar }
+  mapStateToProps
 )(AdminMainPage);

src/conteiners/adminMainPage/adminMainPage.scss

@@ -1,3 +1,6 @@
+
+@import "../../styles/variables";
+
 .admin-main-page-wrapper{
     position: relative;
     width: 100%;

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -6,7 +6,7 @@ import "./adminMyEventsPage.scss";
 import { Redirect } from 'react-router-dom'
 import * as actions from "../../actions/adminMainPageActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
-import Form from "../../components/eventForm/eventReduxForm";
+// 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";
@@ -15,11 +15,10 @@ import EventInfoShort from "../../components/eventInfoShort/EventInfoShort";
 class AdminAddEventPage extends Component {
 
     state = {
-        confirmationMessageFlag: false,
-        editFormFlag: false
+        // confirmationMessageFlag: false,
+        // editFormFlag: false
     };
 
-
     componentDidMount() {
         this.props.getEvents();
     }
@@ -47,13 +46,13 @@ class AdminAddEventPage extends Component {
 
     render() {
         const {
-            postNewEvent,
+            // postNewEvent,
             eventList,
             removeEvent,
             editEvent,
             eventFormInitialValue,
             editFormFlag,
-            eventTypes
+            // eventTypes
         } = this.props
 
         console.log('eventList', eventList)
@@ -81,9 +80,9 @@ class AdminAddEventPage extends Component {
                                         imgSrc={el.mainBannerPicture}
                                         values={eventFormInitialValue}
                                     />
-                                    <div className="event-buttons-conteiner">
-                                        <button className="event-button" onClick={editEvent.bind(null, el._id)} >Edit Event</button>
-                                        <button className="event-button" onClick={removeEvent.bind(null,el._id)} >Delete Event</button>
+                                    <div className="event-page__buttons-conteiner">
+                                        <button className="event-page__buttons-conteiner__button" onClick={editEvent.bind(null, el._id)} >Edit Event</button>
+                                        <button className="event-page__buttons-conteiner__button" onClick={removeEvent.bind(null,el._id)} >Delete Event</button>
                                     </div>
 
                                 </div>
@@ -104,10 +103,10 @@ class AdminAddEventPage extends Component {
                     </div>
                 </div>
 
-                {this.state.confirmationMessageFlag &&
+                {/* {this.state.confirmationMessageFlag &&
                     <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
                         <div className="text">Event has beed changed.</div>
-                    </ConfirmationMessage >}
+                    </ConfirmationMessage >} */}
             </>
         );
     }
@@ -116,7 +115,7 @@ class AdminAddEventPage extends Component {
 const mapStateToProps = state => ({
     eventList: state.adminMainPageReducer.eventList,
     eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
-    eventTypes: state.adminMainPageReducer.eventTypes,
+    // eventTypes: state.adminMainPageReducer.eventTypes,
     editFormFlag: state.adminMainPageReducer.editFormFlag,
 });
 

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -4,10 +4,10 @@
 	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);
+	background: -webkit-linear-gradient(top, #fff, $color-blue); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
+	background: -moz-linear-gradient(top, #fff, $color-blue); /* Firefox 3.6-15 */
+	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
+	background: linear-gradient(to bottom,  #fff, $color-blue);
 
 	&__content {
 		max-width: 1000px;
@@ -24,12 +24,8 @@
 		display: flex;
 		flex-direction:column;
 		width: 50%;
-		// flex-wrap: wrap;
-        // display: grid;
-        // margin: auto;  
-        // grid-template-columns: 1fr 1fr; 
-		// width: 100%;
-		@media (min-width: 768px){
+		
+		@media (min-width: $small){
 			.event-item {
 			width: 100%;
 			}
@@ -40,42 +36,64 @@
 		color: $color-blue;
 		font-size: 3rem;
 		letter-spacing: 0.2;
-		font-weight: 800;
+		font-weight: 600;
 		// text-shadow: 3px 3px 3px #000;
 		margin-bottom: 3%;
 	}
-}
 
-.event-buttons-conteiner{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-	margin-bottom: 10px;
-}
+	&__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;
+		&__button{
+			width: 45%;
+			background-color: $color-mint;
+			padding: 0.5rem;
+			border: none;
+			border-radius: 3px;
+			color: $color-white;
+			font-weight: 600;
+			font-size: 1.2rem;
+			transition: 0.2s;
+			margin-bottom: 20px;
+
+			&:first-child{
+				margin-right: 10px;
+			}
+
+			&:hover{
+				background-color: $color-blue;
+				color: $color-white;
+			
+				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;
-    }
+@media (max-width: $small){
+	.event-page {
+	
+		&__content {
+			padding: 2rem 0;
+		}
+	
+		&__container{
+			width: 100%;
+		}
+		
+		&__title{
+			padding-left: 2rem;
+			font-size: 2rem;
+			letter-spacing: 0;
+		}
+	}
 }

src/conteiners/adminPhotogalaryPage/adminPhotogalaryPage.js

@@ -1,44 +1,50 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-// import * as actions from "../../actions/adminMainPageActions";
+import * as actions from "../../actions/photogalaryActions";
+// import {getEvents} from "../../actions/adminMainPageActions";
+// import {photogalaryOnchange} from "../../actions/photogalaryActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import PhotogalaryForm from "../../components/adminPhotogalary/adminPhotogalaryReduxForm";
-import { showSidebar } from "../../actions/show-sidebar";
 // import {eventFormInitialValue} from "../../state/addEventInitialValue"
 
 class AdminAddPhotogalarytPage extends Component {
     // state = { 
-    //     eventFormInitialValue
     //  };
 
-    // componentDidMount() {
-	//     this.props.getEvents();
-    // }
-    
     componentDidMount() {
-        this.props.showSidebar()
-      }
-    
-      componentWillUnmount() {
-        this.props.showSidebar()
-      }
+        this.props.getEvents();
+        this.props.getPhotogalary()
+    }
 
     render() {
         const {
             eventTypes,
-            // eventList
+            eventList,
+            // photogalaryOnchange,
+            // addPhotogalaryInitialValue,
+            // putPhotogalary,
+            postPhotogalary,
+            // eventFormInitialValue
         } = this.props
 
-        // console.log('eventList', eventList)
+        console.log('page props', this.props)
+        console.log('eventList', eventList)
+        console.log('gallery', this.props.gallery)
 
-		// console.log("initialValues", this.state.eventFormInitialValue);
+		// console.log("eventTypes", this.state.eventTypes);
 		return (
             <>
                 <AdminHeader />
                 <div className="photogalary-form">
                     <div className="photogalary-form__content">
-                        <h2 className="photogalary-form__form-title">ADD EVENT PHOTOGALARY</h2>
-                        <PhotogalaryForm eventTypes={eventTypes}/>
+                        <h2 className="photogalary-form__form-title">ADD PHOTOGALARY</h2>
+                        <PhotogalaryForm 
+                            eventTypes={eventTypes} 
+                            eventList={eventList} 
+                            submitHandler = {postPhotogalary}
+                            // photogalaryOnchange = {photogalaryOnchange}
+                            // initialValues = {addPhotogalaryInitialValue}
+                        />
                     </div>
                 </div>
             </>
@@ -47,11 +53,15 @@ class AdminAddPhotogalarytPage extends Component {
 }
 
 const mapStateToProps = state => ({
-    // eventList: state.adminMainPageReducer.eventList,
-    eventTypes: state.adminMainPageReducer.eventTypes
+    eventList: state.adminMainPageReducer.eventList,
+    eventTypes: state.adminMainPageReducer.eventTypes,
+    // eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
+    addPhotogalaryInitialValue: state.photogalaryReducer.addPhotogalaryInitialValue,
+    gallery: state.photogalaryReducer.gallery
 });
 
 export default connect(
-    mapStateToProps, 
-    { showSidebar }
+    mapStateToProps,
+    actions
+    // {getEvents, photogalaryOnchange}
 )(AdminAddPhotogalarytPage);

src/private-router.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+export const PrivateRoute = ({ component: Component, protectedRoute, ...rest }) => (
+	<Route
+		{...rest}
+		render={props => {
+			if (protectedRoute) {
+				const user = localStorage.getItem("user");
+				if (!user) {
+					return <Redirect to="/" />;
+				}
+
+				return <Component {...props} />;
+			}
+			return <Component {...props} />;
+		}}
+	/>
+);

src/reducers/adminMainPageReducer.js

@@ -34,7 +34,9 @@ export default (state = initialState, action) => {
 			console.log('reducer edit event success', action.payload)
 			return {
 				...state,
-				addEventMessage: "Event has been changed"
+				addEventMessage: "Event has been changed",
+				// eventFormInitialValue: eventFormInitialValue,
+				// editFormFlag: false
 			}
 		}
 		case types.EDIT_EVENT_REQUEST_FAIL: {

src/reducers/combineReducers.js

@@ -6,6 +6,7 @@ import sidebar from "./show-sidebar";
 import login from "./login";
 import registration from "./registration";
 import getEvents from "./getAllEvents";
+import photogalaryReducer from "./photogalaryReducer"
 
 export default combineReducers({
 	form: formReducer,
@@ -13,5 +14,6 @@ export default combineReducers({
     login,
     registration,
     getEvents,
-    sidebar
+    sidebar,
+    photogalaryReducer
 });

src/reducers/photogalaryReducer.js

@@ -0,0 +1,75 @@
+import * as types from "../actionTypes/actionTypes"
+import initialState from "../state/addEventInitialValue";
+
+export default (state = initialState, action) => {
+
+    switch (action.type) {
+        
+        // GET ALL EVENTS
+		case types.GET_EVENTS_REQUEST: {
+			return state;
+		}
+		case types.GET_EVENTS_REQUEST_SUCCESS: {
+			const { data } = action.payload;
+			const eventList = data.events
+			return { ...state, eventList };
+		}
+		case types.GET_EVENTS_REQUEST_FAIL: {
+			return state;
+        }
+
+        // GET PHOTOGAARY
+		case types.GET_PHOTOGALARY_REQUEST: {
+			return state;
+		}
+		case types.GET_PHOTOGALARY_REQUEST_SUCCESS: {
+            console.log('GET_PHOTOGALARY reducer data', action.payload.data)
+			const { data } = action.payload;
+			const gallery = data.data.gallery
+			return { ...state, gallery };
+		}
+		case types.GET_PHOTOGALARY_REQUEST_FAIL: {
+			return state;
+        }
+        
+        //POST PHOTOGAARY
+		case types.POST_PHOTOGALARY_REQUEST_SUCCESS: {
+			console.log('reducer post photogalary success', action.payload)
+			return state
+		}
+		case types.POST_PHOTOGALARY_REQUEST_FAIL: {
+			console.log('reducer post photogalary fail', action.payload)
+			return { ...state, error: action.payload }
+		}
+
+		//PUT PHOTOGAARY
+		case types.PUT_PHOTOGALARY_REQUEST_SUCCESS: {
+			console.log('reducer PUT photogalary success', action.payload)
+			return state
+			
+		}
+		case types.PUT_PHOTOGALARY_REQUEST_FAIL: {
+			console.log('reducer PUT photogalary fail', action.payload)
+			return { ...state, error: action.payload }
+		}
+
+		// // REMOVE
+		// case types.REMOVE_EVENT_REQUEST: {
+		// 	return state;
+		// }
+		// case types.REMOVE_EVENT_REQUEST_SUCCESS: {
+		// 	const { _id } = action.payload;
+		// 	return {
+		// 		...state,
+		// 		eventList: state.eventList.filter(el => el._id !== _id)
+		// 	};
+		// }
+
+		// case types.REMOVE_EVENT_REQUEST_FAIL: {
+		// 	return state;
+		// }
+
+        default:
+			return state; 
+    }
+}

src/router.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Switch, Route } from "react-router-dom";
+import React, { useEffect } from "react";
+import { Switch, Route, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
 import { getAllEvents } from "./actions/getAllEvents";
@@ -18,9 +18,140 @@ import Events from './conteiners/events/Events';
 import EventCard from './conteiners/eventCard/EventCard';
 
 import Profile from './conteiners/profile/Profile';
-
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 
+import { PrivateRoute } from "./private-router";
+
+const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;
+
+const route = [
+	{
+		id: 1,
+		exact: true,
+		path: "/",
+		protected: false,
+        component: Home,
+	},
+	{
+		id: 2,
+		exact: true,
+		path: "/events",
+		protected: false,
+		component: Events
+	},
+	{
+		id: 3,
+		exact: true,
+		path: "/result",
+		protected: true,
+		component: Result
+	},
+	{
+		id: 4,
+		exact: true,
+		path: "/gallery",
+		protected: false,
+		component: Gallery
+    },
+    {
+		id: 5,
+		exact: true,
+		path: "/reviews",
+		protected: false,
+		component: Reviews
+    },
+    {
+		id: 6,
+		exact: true,
+		path: "/login",
+		protected: false,
+		component: Login
+    },
+    {
+		id: 7,
+		exact: true,
+		path: "/registration",
+		protected: false,
+		component: RegistrationPage
+    },
+    {
+		id: 8,
+		exact: true,
+		path: "/profile",
+        protected: true,
+        hasAccess: 'user',
+		component: Profile
+    },
+    {
+		id: 9,
+		exact: true,
+		path: "/admin",
+        protected: true,
+        hasAccess: 'admin',
+		component: AdminMainPage
+    },
+    {
+		id: 10,
+		exact: true,
+		path: "/admin/add_new_event",
+        protected: true,
+        hasAccess: 'admin',
+		component: AdminAddEventPage
+    },
+    {
+		id: 11,
+		exact: true,
+		path: "/admin/photogalary",
+        protected: true,
+        hasAccess: 'admin',
+		component: AdminAddPhotogalarytPage
+    },
+    {
+		id: 12,
+		exact: true,
+		path: "/admin/my_events",
+        protected: true,
+        hasAccess: 'admin',
+		component: AdminMyEventsPage
+	},
+	{
+		id: 4,
+		component: PAGENOTFOUND
+	}
+];
+
+// export const Router = withRouter(({ history }) => {
+// 	useEffect(() => {
+// 		const user = localStorage.getItem("user");
+// 		if (user) {
+// 			const userRole = JSON.parse(user).role;
+// 			if (userRole === 'admin') {
+// 				history.push("/admin");
+//             }
+//             if (userRole === 'user') {
+// 				history.push("/profile");
+// 			}
+// 		}
+// 	}, [history]);
+
+// 	return (
+// 		<div className="container">
+// 			<Switch>
+// 				{route.map(el => (
+// 					<PrivateRoute
+// 						protectedRoute={el.protected}
+// 						key={el.id}
+// 						exact={el.exact}
+// 						path={el.path}
+//                         component={el.component}
+//                         events={el.events}
+// 					/>
+// 				))}
+// 			</Switch>
+// 		</div>
+// 	);
+// });
+
 export class Router extends React.Component {
     componentDidMount() {
         this.props.getAllEvents();

src/state/addEventInitialValue.js

@@ -23,13 +23,71 @@ eventFormInitialValue: {
     addEventMessage: null
 },
 
-eventList: null,
+eventList: [],
 editFormFlag: false,
+gallery: [],
 
 eventTypes: [
     { optionName: 'Select Event Type', id: 1 },
     { optionName: 'Triathlon', id: 2 },
     { optionName: 'Marathon', id: 3 },
     { optionName: 'Cycling', id: 4 }
-]
+],
+
+// addPhotogalaryInitialValue: {
+//     eventType: "",
+//     eventTitle: "",
+//     pictures: [
+//         {
+//             id: '1',
+//             name: `picture_1}`,
+//             value: ""
+//         },
+//         {
+//             id: '2',
+//             name: `picture_2`,
+//             value: ""
+//         },
+//         {
+//             id: '3',
+//             name: `picture_3`,
+//             value: ""
+//         },
+//         {
+//             id: '4',
+//             name: `picture_4`,
+//             value: ""
+//         },
+//         {
+//             id: '5',
+//             name: `picture_5`,
+//             value: ""
+//         },
+//         {
+//             id: '6',
+//             name: `picture_6`,
+//             value: ""
+//         },
+//         {
+//             id: '7',
+//             name: `picture_7`,
+//             value: ""
+//         },
+//         {
+//             id: '8',
+//             name: `picture_8`,
+//             value: ""
+//         },
+//         {
+//             id: '9',
+//             name: `picture_9`,
+//             value: ""
+//         },
+//         {
+//             id: '10',
+//             name: `picture_10`,
+//             value: ""
+//         }
+//     ]
+// }
 }

src/state/adminMenu.js

@@ -1,8 +1,8 @@
 export const adminMenu = [
-	{ path: "/admin", id: 0, text: "Main Page", hideWhenAuth: false },
-	{ path: "/admin/add_new_event", id: 1, text: "Add New Event", hideWhenAuth: false },
-	{ path: "/admin/my_events", id: 2, text: "My Events", hideWhenAuth: false },
-    { path: "/admin/photogalary", id: 3, text: "Photogalery", hideWhenAuth: false },
-    { path: "/admin/feedbacks", id: 4, text: "Feedbacks", hideWhenAuth: false },
-	{ path: "/", id: 5, text: "Log out", hideWhenAuth: false }
+	{ path: "/admin", id: 0, text: "Main Page", logout: false },
+	{ path: "/admin/add_new_event", id: 1, text: "Add New Event", logout: false },
+	{ path: "/admin/my_events", id: 2, text: "My Events", logout: false },
+    { path: "/admin/photogalary", id: 3, text: "Photogalery", logout: false },
+    { path: "/admin/feedbacks", id: 4, text: "Feedbacks", logout: false },
+	{ path: "/", id: 5, text: "Log out", logout: true }
 ];

src/state/photogalaryFormData.js

@@ -1,41 +1,56 @@
-// export const form = {
-//     selects: {
-//         eventType: {
-//         id: 1,
-//         type: "select",
-//         name: "eventType",
-//         label: "Choose Event Type",
-//         options:['Select Event Type', 'Triathlon', 'Marathon','Cycling'],
-//         value: ""
-//         },
-//         eventTitle: {
-//         id: 2,
-//         type: "select",
-//         name: "eventTitle",
-//         label: "Choose Event Title",
-//         options:[],
-//         value: ""
-//         }
-//     },
-//     pictures: [
-//         {
-//             id: 3,
-//             type: "input",
-//             name: "pictures",
-//             label: "Picture",
-//             placeholder: 'Enter picture url',
-//             value: ""
-//         }
-//     ]
-// }
-
 export const addPhotogalaryInitialValue = {
     eventType: "",
-    eventTytle: "",
+    eventTitle: "",
+    gallery: [],
     pictures: [
         {
             id: '1',
-            name: 'picture',
+            name: 'picture_1',
+            value: ""
+        },
+        {
+            id: '2',
+            name: 'picture_2',
+            value: ""
+        },
+        {
+            id: '3',
+            name: 'picture_3',
+            value: ""
+        },
+        {
+            id: '4',
+            name: 'picture_4',
+            value: ""
+        },
+        {
+            id: '5',
+            name: 'picture_5',
+            value: ""
+        },
+        {
+            id: '6',
+            name: 'picture_6',
+            value: ""
+        },
+        {
+            id: '7',
+            name: 'picture_7',
+            value: ""
+        },
+        {
+            id: '8',
+            name: 'picture_8',
+            value: ""
+        },
+        {
+            id: '9',
+            name: 'picture_9',
+            value: ""
+        },
+        {
+            id: '10',
+            name: 'picture_10',
             value: ""
         }
     ]