Prechádzať zdrojové kódy

added the pages eventCard, Gallery, Result, Reviews

Tanya Sashyna 5 rokov pred
rodič
commit
e4e1c3e5a3

+ 42 - 0
src/conteiners/eventCard/EventCard.js

@@ -0,0 +1,42 @@
+import React from 'react';
+//import { connect } from "react-redux";
+//import { Link } from "react-router-dom";
+
+//import { getAllEvents } from "../../actions/getAllEvents";
+
+import './eventCard.scss';
+
+import Sidebar from '../../components/sidebar/Sidebar';
+
+export class EventCard extends React.Component {
+    componentDidMount() {
+        //this.props.getAllEvents();
+    }
+
+    render() {
+        console.log( this.props);
+        return (
+            <>
+                <Sidebar />
+                <div className="container-wrap">
+                    <div className="caption-page">
+                        <h2>Event card</h2>
+                    </div>                 
+                </div>
+            </>
+        )
+    }
+}
+
+export default EventCard;
+
+/*const mapStateToProps = state => {
+    return {
+        events: state.getEvents.events
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getAllEvents }
+)(Events);*/

+ 2 - 0
src/conteiners/eventCard/eventCard.scss

@@ -0,0 +1,2 @@
+@import "../../styles/variables";
+

+ 1 - 2
src/conteiners/events/Events.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from "react-redux";
-//import { Link } from "react-router-dom";
 
 import { getAllEvents } from "../../actions/getAllEvents";
 
@@ -17,7 +16,7 @@ export class Events extends React.Component {
 
     render() {
         const { events } = this.props;
-        console.log("events", events , this.props);
+        //console.log("events", events , this.props);
         return (
             <>
                 <Sidebar />

+ 2 - 1
src/conteiners/events/events.scss

@@ -6,6 +6,7 @@
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
+    padding-bottom: 50px;
 
     h4 {
         margin-bottom: 15px;
@@ -21,7 +22,7 @@
 
     &-content {
         background: $color-white;
-        padding: 30px 16px 50px 16px;
+        padding: 30px 16px;
     }
 
     &-list {

+ 20 - 0
src/conteiners/gallery/Gallery.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import './gallery.scss';
+
+import Sidebar from '../../components/sidebar/Sidebar';
+
+export default class Gallery extends React.Component {
+    render() {
+        return (
+            <>
+                <Sidebar/>
+                <div className="container-wrap events">
+                    <div className="caption-page">
+                        <h2>Gallery page</h2>
+                    </div>
+                </div>
+            </>
+        )
+    }
+}

+ 1 - 0
src/conteiners/gallery/gallery.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

+ 20 - 0
src/conteiners/result/Result.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import './result.scss';
+
+import Sidebar from '../../components/sidebar/Sidebar';
+
+export default class Result extends React.Component {
+    render() {
+        return (
+            <>
+                <Sidebar/>
+                <div className="container-wrap events">
+                    <div className="caption-page">
+                        <h2>Result page</h2>
+                    </div>
+                </div>
+            </>
+        )
+    }
+}

+ 1 - 0
src/conteiners/result/result.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

+ 20 - 0
src/conteiners/reviews/Reviews.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import './reviews.scss';
+
+import Sidebar from '../../components/sidebar/Sidebar';
+
+export default class Reviews extends React.Component {
+    render() {
+        return (
+            <>
+                <Sidebar/>
+                <div className="container-wrap events">
+                    <div className="caption-page">
+                        <h2>Reviews page</h2>
+                    </div>
+                </div>
+            </>
+        )
+    }
+}

+ 1 - 0
src/conteiners/reviews/reviews.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

+ 31 - 32
src/router.js

@@ -1,52 +1,41 @@
 import React from 'react'
 import { Switch, Route } from "react-router-dom";
+import { connect } from "react-redux";
 
 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 Result from './conteiners/result/Result';
+import Gallery from './conteiners/gallery/Gallery';
+import Reviews from './conteiners/reviews/Reviews';
 import Login from './conteiners/login/Login';
 import RegistrationPage from './conteiners/registrationPage/RegistrationPage';
 import Events from './conteiners/events/Events';
+import EventCard from './conteiners/eventCard/EventCard';
 
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
-import Sidebar from './components/sidebar/Sidebar';
 
-export default class Router extends React.Component {
-	render() {
+export class Router extends React.Component {
+    render() {
+        const { events } = this.props;
 		return(
 			<div className="container">
 			    <Switch>
                     <Route exact path="/" component={Home} />
-
                     <Route exact path="/events" component={Events} />
-
-	                <Route exact path="/result" render={() => (
-						<>
-							<Sidebar />
-                            <div className="container-wrap">
-								Result
-							</div>
-						</>
-	                )} />
-
-	                <Route exact path="/gallery" render={() => (
-						<>
-							<Sidebar />
-                            <div className= "container-wrap">
-								Gallery
-							</div>
-						</>
-	                )} />
-
-	                <Route exact path="/reviews" render={() => (
-						<>
-							<Sidebar />
-                            <div className="container-wrap">
-								Reviews
-							</div>
-						</>
-	                )} />
+                    <Route exact path="/result" component={Result} />
+                    <Route exact path="/gallery" component={Gallery} />
+                    <Route exact path="/reviews" component={Reviews} />
+
+                    {
+                        events.map(event =>
+                            <Route exact path={`/events/${event._id}`} key={event._id} render={ props => (
+                                <EventCard event={event}/>
+                            )} />                            
+                        )
+                    }
 
                     <Route exact path="/login" component={Login} />
                     <Route exact path="/registration" component={RegistrationPage} />
@@ -61,4 +50,14 @@ export default class Router extends React.Component {
 			</div>
 		)
 	}
-}
+}
+
+const mapStateToProps = state => {
+    return {
+        events: state.getEvents.events
+    };
+};
+
+export default connect(
+    mapStateToProps
+)(Router);