admin-menu

src/components/adminMenu/adminMenu.js

@@ -7,7 +7,7 @@ class AdminMenu extends Component {
     constructor(props) {
         super(props);
 
-        this.state = {adminMenu};
+        this.state = { adminMenu };
     }
 
     clickEventHandler = (e) => {
@@ -15,23 +15,22 @@ class AdminMenu extends Component {
         this.props.history.push(elem.path)
     }
 
-    render(){
-        return(
-            <div className = "menu-block">
+    render() {
+        return (
+            <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}
-                                >
-                                    <h2 className = "menu-text">{el.text.toUpperCase()}</h2>
-                                    {/* <Link to={el.path} className = "menu-text">{el.text.toUpperCase()}</Link> */}
-                                </div>
-							)
-						}
+                    el.text !== "Log out" && el.text !== "Main Page" &&
+                    <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>
+                )}
             </div>
         )
     }

src/components/adminMenu/adminMenu.scss

@@ -10,7 +10,7 @@
     position: relative;
     top: 0px;
     left: 0;
-    height: 350px;
+    height: 220px;
     width: 40%;
     overflow: hidden;
     transition: 0.3s;
@@ -26,7 +26,7 @@
     &:first-child {
       clip-path: polygon(0 0,100% 0,80% 100%,0% 100%);
        background-image: 
-    url(https://43nnuk1fz4a72826eo14gwfb-wpengine.netdna-ssl.com/wp-content/uploads/2016/09/Jens-Group-Ride_Blog.jpg);
+    url(https://i2-prod.mirror.co.uk/incoming/article12948642.ece/ALTERNATES/s615/0_xxxxxxx.jpg);
     }
 
      &:nth-child(2) {
@@ -34,23 +34,40 @@
       clip-path: polygon(12% 0,100% 0,100% 100%,0% 100%);
       margin-left: -7%;
       flex-grow: 2;
-      
-      background-image: url(https://www.getthegloss.com/media/image/marathon.jpg);
+      // https://cdn.pixabay.com/photo/2014/01/24/13/32/marathon-250987_1280.jpg
+      background-image: url(https://cdn.pixabay.com/photo/2014/01/24/13/32/marathon-250987_1280.jpg);
     } 
     
      &:nth-child(3){
       flex-grow: 2;
       clip-path: polygon(0 0,100% 0,86% 100%,0% 100%);
-      background-image: url(https://images.fitnessmagazine.mdpcdn.com/sites/fitnessmagazine.com/files/styles/slide/public/800_triathletes-swimming.jpg?itok=vEUQ17sh);
+      //https://cdn.pixabay.com/photo/2016/07/07/22/58/cycling-1503365_1280.jpg
+      background-image: url(https://cdn.pixabay.com/photo/2016/07/07/22/58/cycling-1503365_1280.jpg);
     }
+
     
-     &:last-child {
+     &:nth-child(4) {
       flex-grow: 0;
       clip-path: polygon(24% 0,100% 0,100% 100%,0% 100%);
       margin-left: -8.5%;
-      background-image: url(https://cdn.shopify.com/s/files/1/0235/4757/articles/CMP-201903-SinchBikes_KGorge-Highres-6214_600x300_crop_center.jpg?v=1561970623);
+      background-image: url(https://cdn.pixabay.com/photo/2017/06/06/18/06/jogging-2377983_1280.jpg);
+    }
+
+    &:nth-child(5) {
+      clip-path: polygon(0 0,100% 0,80% 100%,0% 100%);
+       background-image: 
+    url(https://cdn.pixabay.com/photo/2018/08/09/02/50/person-3593664_1280.jpg);
     }
 
+     &:nth-child(6) {
+      right: -100px;
+      clip-path: polygon(12% 0,100% 0,100% 100%,0% 100%);
+      margin-left: -7%;
+      flex-grow: 2;
+      // https://cdn.pixabay.com/photo/2018/08/12/11/02/swim-3600519_1280.jpg
+      background-image: url(https://cdn.pixabay.com/photo/2018/08/12/11/02/swim-3600519_1280.jpg);
+    } 
+
     &:hover {
       opacity: 0.5;
     }
@@ -88,10 +105,20 @@
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       }
       
-       &:last-child {
+      &:nth-child(4) {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
         margin-left: 0;
       }
+  
+      &:nth-child(5) {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+      }
+  
+       &:nth-child(6) {
+        right: 0;
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+        margin-left: 0;
+      } 
       
       .menu-text{
         font-size: 2rem;

src/router.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, {useState, useEffect } from "react";
 import { Switch, Route, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
@@ -7,6 +7,7 @@ import { getAllEvents } from "./actions/getAllEvents";
 import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
 import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
 import AdminMyEventsPage from './conteiners/adminMyEventsPage/adminMyEventsPage';
+import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 
 import Home from './conteiners/home/Home';
 import Result from './conteiners/result/Result';
@@ -18,7 +19,6 @@ 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";
 
@@ -30,7 +30,8 @@ const route = [
 		exact: true,
 		path: "/",
 		protected: false,
-        component: Home,
+		component: Home,
+		events: true
 	},
 	{
 		id: 2,
@@ -121,6 +122,17 @@ const route = [
 ];
 
 // export const Router = withRouter(({ history }) => {
+
+// 	const [events, setEvents] = useState([]);
+
+// 	useEffect(() => {
+// 		fetch("https://api-marathon.herokuapp.com/api/v1/event")
+// 			.then(response => response.json())
+// 			.then(json => setEvents(json));
+// 	}, []);
+
+// 	console.log('events', events)
+
 // 	useEffect(() => {
 // 		const user = localStorage.getItem("user");
 // 		if (user) {
@@ -136,6 +148,7 @@ const route = [
 
 // 	return (
 // 		<div className="container">
+// 			{console.log('events', events)}
 // 			<Switch>
 // 				{route.map(el => (
 // 					<PrivateRoute
@@ -144,9 +157,19 @@ const route = [
 // 						exact={el.exact}
 // 						path={el.path}
 //                         component={el.component}
-//                         events={el.events}
+//                         events = {el.events && events}
 // 					/>
 // 				))}
+				
+// 				{
+// 					events.map(event =>
+// 						<Route exact
+// 							path={`/events/${event._id}`}
+// 							key={event._id}
+// 							render={ props => (<EventCard event={event} />) }
+// 						/>                            
+// 					)
+// 				}
 // 			</Switch>
 // 		</div>
 // 	);

src/state/adminMenu.js

@@ -2,7 +2,9 @@ export const adminMenu = [
 	{ 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 }
+	{ path: "/admin/feedbacks", id: 3, text: "Feedbacks", logout: false },
+    { path: "/admin/photogalary", id: 4, text: "Add Photogalery", logout: false },
+	{ path: "/admin/results", id: 5, text: "Add Results", logout: false },
+	{ path: "/", id: 6, text: "Go to WebSite", logout: false },
+	{ path: "/", id: 7, text: "Log out", logout: true }
 ];