admin

src/components/filtersEvents/FiltersEvents.js

@@ -6,18 +6,17 @@ import './filtersEvents.scss';
 import { customSelect } from "../customFields/customSelect/customSelect";
 
 let FiltersEvents = props => {
-    const { handleSubmit, getAllEvents } = props;
-    const eventTypes = ['All events','Marathon','Triathlon','Cycling'];
+    const { handleSubmit, getRequest, eventTypes, labelType } = props;
 
     const submit = value => {
         console.log(value);
-        getAllEvents(value.eventType);
+        getRequest(value.eventType);
     };
 
     return (
         <form className="form-filter" onSubmit={handleSubmit(submit)}>
             <div>
-                <Field name="eventType" label="Event Type" component={customSelect}>
+                <Field name="eventType" label={labelType} component={customSelect}>
                     {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
                 </Field>
             </div>

src/components/login-form/LoginForm.js

@@ -14,12 +14,8 @@ let LoginForm = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
-            </div>
-            <div>
-                <Field name="password" component={customInput} type="password" id="password" label="Password"/>
-            </div>
+            <Field name="email" component={customInput} type="email" id="email" label="E-mail" />
+            <Field name="password" component={customInput} type="password" id="password" label="Password"/>
             <button type="submit" className="btn">Sign in</button>
         </form>
         )

src/components/reg-form-event/RegFormEvent.js

@@ -7,14 +7,14 @@ import { customSelect } from "../customFields/customSelect/customSelect";
 import { customInput } from "../customFields/customInput/customInput";
 
 let RegFormEvent = props => {
-    const { handleSubmit, regEventSubmit, eventId } = props;
+    const { handleSubmit, regEventSubmit, eventId, reset } = props;
     const eventTypes = ['Select distance', 'Half marathone','Marathone'];
 
     const submit = value => {
         value.event = eventId;
-
-        console.log('user-event', value);
+        //console.log('user-event', value);
         regEventSubmit(value);
+        reset();
     };
 
     return (

src/components/registration-form/RegistrationForm.js

@@ -9,16 +9,17 @@ let RegistrationForm = props => {
     const { handleSubmit, postCheckInSubmit } = props;
 
     const submit = value => {
-        console.log(value);        
+        //console.log(value);        
         postCheckInSubmit(value);
+        props.history.push('/login');
     };
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                <Field name="name" component={customInput} type="text" id="name" label="Full name"/>
+            <div className="form-item">
+                <Field name="name" component={customInput} type="text" id="name" label="Full name" />
             </div>
-            <div className="reg-radio">
+            <div className="reg-radio form-item">
                 <div className="radio-label">
                     <Field name="sex" component="input" type="radio" id="male" value="male" hidden/>
                     <label htmlFor="male">male</label>
@@ -29,20 +30,21 @@ let RegistrationForm = props => {
                     <label htmlFor="female">female</label>
                 </div>
             </div>
-            <div>
-                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone"/>
+            <div className="form-item">
+                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" />
             </div>
-            <div>
-                <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
+            <div className="form-item">
+                <Field name="email" component={customInput} type="email" id="email" label="E-mail" />
             </div>
-            <div>
-                <Field name="password" component={customInput} type="password" id="password" label="Password"/>
+            <div className="form-item password">
+                <Field name="password" component={customInput} type="password" id="password" label="Password" />
             </div>
-            <div>
-                <Field name="confirmPassword" component={customInput} type="password" id="confirmPassword" label="Confirm Password"/>
+            <div className="form-item password">
+                <Field name="confirmPassword" component={customInput} type="password" id="confirmPassword" label="Confirm Password" />
+            </div>
+            <div className="btn-group">
+                <button type="submit" className="btn">Check in</button>
             </div>
-            
-            <button type="submit" className="btn">Check in</button>
         </form>
         )
 };

src/components/review-form/ReviewForm.js

@@ -5,19 +5,27 @@ import './review-form.scss';
 
 import { customInput } from "../customFields/customInput/customInput";
 import { customTextarea } from "../customFields/customTextarea/customTextarea";
+import { customSelect } from "../customFields/customSelect/customSelect";
 
 let ReviewForm = props => {
-    //const { handleSubmit, postReviewSubmit } = props;
-    const { handleSubmit } = props;
+    const { handleSubmit, postReviewSubmit, eventsArr, reset } = props;
+    //console.log(props);
 
     const submit = value => {
-        value.date = new Date().toDateString().slice(4);
-        console.log(value);
-        //postReviewSubmit(value);
+        value.date = new Date();
+        //console.log(value);
+        postReviewSubmit(value);
+        reset()
     };
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
+            <div>
+                <Field name="event" label="Event Title" component={customSelect}>
+                    <option>Select Event</option>
+                    {eventsArr.map(elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
+                </Field>
+            </div>
             <Field name="name" label="Full name"  type="text" id="name" component={customInput} />
             <Field name="text" label="Your message" type="text" id="text" component={customTextarea} />
 

src/components/sidebar/sidebar.scss

@@ -32,22 +32,6 @@
         z-index: 3;
         padding: 2rem;
 
-        .logo {
-            margin-bottom: 3rem;
-
-            a {
-                color: $color-white;
-                font-weight: $bold;
-                font-size: 2rem;
-                text-transform: uppercase;
-
-                span {
-                    color: $color-mint;
-                    font-size: 3rem;
-                }
-            }
-        }
-
         ul {
             padding-left: 5rem;
             transform: translate(-5rem, 0);

src/conteiners/events/Events.js

@@ -17,6 +17,7 @@ export class Events extends React.Component {
 
     render() {
         const { events, getAllEvents } = this.props;
+        const eventTypes = ['All events', 'Marathon', 'Triathlon', 'Cycling'];
         //console.log(events);
         return (
             <>
@@ -27,7 +28,7 @@ export class Events extends React.Component {
                     </div>
                     <div className="events-filters">
                         <h4>Events filter</h4>
-                        <FiltersEvents getAllEvents={getAllEvents}/>
+                        <FiltersEvents labelType="Event Type" getRequest={getAllEvents} eventTypes={eventTypes}/>
                     </div>
                     
                     <div className="events-content">

src/conteiners/events/events.scss

@@ -12,12 +12,6 @@
         font-size: 1.4rem;
     }
 
-    &-filters {
-        background: $color-white;
-        margin: 0 0 1.5rem;
-        padding: 1.6rem;
-    }
-
     &-content {
         background: $color-white;
         padding: 3rem 1.6rem;

src/conteiners/login/Login.js

@@ -14,6 +14,11 @@ export class Login extends React.Component {
         return (
             <div className="login-page">
                 <div className="form-login">
+                    <div className="logo blue">
+                        <Link to="/">
+                            Just_<span>tri</span>_it
+                        </Link>
+                    </div>
                     {
                         message === "User already exist" && <h3>{message}!</h3>
                     }

src/conteiners/login/login.scss

@@ -20,6 +20,10 @@
         border-radius: 4px;
         box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
 
+        .logo {
+            text-align: center;
+        }
+
         h3 {
             font-size: 2.4rem;
             color: $color-error;

src/conteiners/registrationPage/RegistrationPage.js

@@ -10,15 +10,20 @@ import RegistrationForm from '../../components/registration-form/RegistrationFor
 
 export class Login extends React.Component {
     render() {
-        const { message } = this.props;
+        const { message, history } = this.props;
 
         return (
             <div className="reg-page">
                 <div className="form-reg">
+                    <div className="logo blue">
+                        <Link to="/">
+                            Just_<span>tri</span>_it
+                        </Link>
+                    </div>
                     {
                         message === "User already exist" && <h3>{message}!</h3>
                     }
-                    <RegistrationForm postCheckInSubmit={this.props.postCheckInSubmit}/>
+                    <RegistrationForm history={history} postCheckInSubmit={this.props.postCheckInSubmit}/>
                     <p className="form-quest">You have an account? <Link to="/login">Login now</Link></p>
                 </div>
             </div>

src/conteiners/registrationPage/registration-page.scss

@@ -13,13 +13,17 @@
     background: $color-grey-3;
 
     .form-reg {
-        max-width: 32rem;
+        max-width: 50rem;
         width: 100%;
         padding: 1.5rem;
         background: $color-white;
         border-radius: 4px;
         box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
 
+        .logo {
+            text-align: center;
+        }
+
         h3 {
             font-size: 2.4rem;
             color: $color-error;
@@ -29,6 +33,10 @@
         }
 
         .form {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
             label {
                 display: block;
                 width: 100%;
@@ -42,10 +50,35 @@
                     width: 100%;
                 }
             }
+
+            &-item {
+                width: 100%;
+
+                &.password {
+                    width: 48%;
+                }
+            }
+
+            .btn-group {
+                width: 100%;
+                padding: 0;
+            }
+        }
+    }
+
+    @media (max-width: $small) {
+        .form-reg {
+            .form {
+                &-item {
+                    &.password {
+                        width: 100%;
+                    }
+                }
+            }
         }
     }
 
-    @media (max-height: $height-499) {
+    @media (max-height: $height-630) {
         height: auto;
     }
 }

src/conteiners/reviews/Reviews.js

@@ -2,50 +2,28 @@ import React from 'react';
 import { connect } from "react-redux";
 
 import { getAllReviews, postReviewSubmit } from "../../actions/reviews";
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './reviews.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
 import ReviewForm from '../../components/review-form/ReviewForm';
-
-const reviewsInitial = [
-    {
-        name: "Unknown Raccoon",
-        date: new Date("07-10-2019").toDateString().slice(4),
-        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    },
-    {
-        name: "Htoto Echo",
-        date: new Date("07-29-2019").toDateString().slice(4),
-        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-        name: "Vasya Petrovich",
-        date: new Date("08-06-2019").toDateString().slice(4),
-        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    },
-    {
-        name: "Petya Petrov",
-        date: new Date("08-07-2019").toDateString().slice(4),
-        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-        name: "Tanya Sash",
-        date: new Date("08-08-2019").toDateString().slice(4),
-        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    }
-]
+//import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
 
 export class Reviews extends React.Component {
     componentDidMount() {
-        this.props.getAllReviews()
+        this.props.getAllReviews();
+        this.props.getAllEvents();
     }
 
     render() {
-        const { postReviewSubmit } = this.props;
-        //const { reviews, postReviewSubmit } = this.props;
-        //console.log(reviews);
+        const { postReviewSubmit, events, reviews } = this.props;
+        const eventsArr = events.map(event => ({
+            title: event.title,
+            id: event._id
+        }));
+        //console.log(Array.from(reviews).reverse());
         return (
             <>
                 <Sidebar/>
@@ -55,15 +33,21 @@ export class Reviews extends React.Component {
                     </div>
                 </div>
                 <div className="container-wrap">
+
+                    {/*<div className="events-filters">
+                        <h4>Events filter</h4>
+                        <FiltersEvents labelType="Event Title" getRequest={getAllEvents} eventTypes={eventTypes} />
+                    </div>*/}
+
                     <div className="reviews-wrap">
                         {
-                            reviewsInitial.reverse().map((reviewer, ind) => ind < 10 &&
+                            Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
                                 <div className="reviews-item" key={ind}>
-                                <div className="review-content">
+                                    <div className="review-content">
                                         <div className="reviews-name">{reviewer.name}</div>
                                         <div className="reviews-date">
                                             <i className="fa fa-calendar-o" aria-hidden="true"></i>
-                                            {reviewer.date}
+                                        { new Date(reviewer.date).toDateString().slice(4) }
                                         </div>
                                         <div className="reviews-text">{reviewer.text}</div>
                                     </div>
@@ -73,7 +57,7 @@ export class Reviews extends React.Component {
                     </div>
                     <div className="reviews-wrap-add">
                         <h3>Send your reviews</h3>
-                        <ReviewForm postReviewSubmit={postReviewSubmit}/>
+                        <ReviewForm postReviewSubmit={postReviewSubmit} eventsArr={eventsArr}/>
                     </div>
                 </div>
                 <Footer/>
@@ -84,11 +68,13 @@ export class Reviews extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        reviews: state.allReviews.reviews
+        reviews: state.allReviews.reviews,
+        events: state.getEvents.events,
+        reloadPage: state.allReviews.reloadPage
     };
 };
 
 export default connect(
     mapStateToProps,
-    { getAllReviews, postReviewSubmit }
+    { getAllReviews, postReviewSubmit, getAllEvents }
 )(Reviews);

src/conteiners/reviews/reviews.scss

@@ -25,7 +25,7 @@
                 margin: 0 auto;
             }
 
-            .input-box {
+            .input-box, .form-block__select {
                 width: 100%;
                 margin-bottom: 2rem;
             }

src/reducers/reviews.js

@@ -1,7 +1,8 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    reviews: []
+    reviews: [],
+    reloadPage: false
 }
 
 export default (state = initialState, action) => {
@@ -11,15 +12,15 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_REVIEWS: {
-            //console.log('reviews',action.payload.reviews);
+            //console.log('reviews', action.payload.results);
             return {
                 ...state,
-                reviews: action.payload.reviews
+                reviews: action.payload.results
             };
         }
 
         case types.GET_REQUEST_ERROR_REVIEWS: {
-            console.log('error reviews');
+            console.log('error reviews', action.payload.message);
             return state;
         }
 
@@ -28,11 +29,16 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_REVIEW: {
+            //console.log('review', action.payload);
             return state;
+            /*return {
+                ...state,
+                reloadPage: !state.reloadPage
+            };*/
         }
 
         case types.POST_REQUEST_ERROR_REVIEW: {
-            console.log('error reviews');
+            console.log('error reviews', action.payload.message);
             return state;
         }
 

src/styles/filters.scss

@@ -0,0 +1,15 @@
+.events-filters {
+    background: $color-white;
+    margin: 0 0 1.5rem;
+    padding: 1.6rem;
+
+    label {
+        margin-bottom: 1rem;
+    }
+
+    h4 {
+        margin-bottom: 1.5rem;
+        text-align: center;
+        font-size: 1.4rem;
+    }
+}

src/styles/logo.scss

@@ -0,0 +1,32 @@
+@import "variables";
+
+.logo {
+    margin-bottom: 3rem;
+
+    &.blue {
+        a {
+            color: $color-blue;
+
+            &:hover {
+                color: $color-blue;
+            }
+        }
+    }
+
+    a {
+        color: $color-white;
+        font-weight: 700;
+        font-size: 2rem;
+        text-transform: uppercase;
+        display: inline-block;
+
+        span {
+            color: $color-mint;
+            font-size: 3rem;
+        }
+
+        &:hover {
+            color: $color-white;
+        }
+    }
+}

src/styles/main.scss

@@ -1,4 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700&display=swap');
 @import "variables";
 @import "base";
-@import "custom";
+@import "custom";
+@import "logo";
+@import "filters";

src/styles/variables.scss

@@ -32,7 +32,7 @@ $min-small: 768px;
 $min-xsmall: 576px;
 
 //max-height
-$height-499: 499px;
+$height-630: 630px;
 
 //mixins
 @mixin bg-settings {