the reviews page is continue creating

src/actionTypes/actionTypes.js

@@ -54,5 +54,13 @@ export const GET_REQUEST_EVENT_CARD = "GET_REQUEST_EVENT_CARD";
 export const GET_REQUEST_SUCCESS_EVENT_CARD = "GET_REQUEST_SUCCESS_EVENT_CARD";
 export const GET_REQUEST_ERROR_EVENT_CARD = "GET_REQUEST_ERROR_EVENT_CARD";
 
+export const GET_REQUEST_REVIEWS = "GET_REQUEST_REVIEWS";
+export const GET_REQUEST_SUCCESS_REVIEWS = "GET_REQUEST_SUCCESS_REVIEWS";
+export const GET_REQUEST_ERROR_REVIEWS = "GET_REQUEST_ERROR_REVIEWS";
+
+export const POST_REQUEST_REVIEW = "POST_REQUEST_REVIEW";
+export const POST_REQUEST_SUCCESS_REVIEW = "POST_REQUEST_SUCCESS_REVIEW";
+export const POST_REQUEST_ERROR_REVIEW = "POST_REQUEST_ERROR_REVIEW";
+
 
 // export const PHOTOGALARY_ONCHAGE = "PHOTOGALARY_ONCHAGE";

src/actions/reviews.js

@@ -0,0 +1,65 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getReviews = payload => ({
+    type: types.GET_REQUEST_REVIEWS,
+    payload
+});
+
+export const getReviewsSuccess = payload => ({
+    type: types.GET_REQUEST_SUCCESS_REVIEWS,
+    payload
+});
+
+export const getReviewsError = payload => ({
+    type: types.GET_REQUEST_ERROR_REVIEWS,
+    payload
+});
+
+export const getAllReviews = () => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/feedback")
+
+        dispatch(getReviews())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getReviewsSuccess(data))),
+            error => dispatch(getReviewsError(error))
+        )
+    }
+}
+
+export const postReview = payload => ({
+    type: types.POST_REQUEST_REVIEW,
+    payload
+});
+
+export const postReviewSuccess = payload => ({
+    type: types.POST_REQUEST_SUCCESS_REVIEW,
+    payload
+});
+
+export const postReviewError = payload => ({
+    type: types.POST_REQUEST_ERROR_REVIEW,
+    payload
+});
+
+export const postReviewSubmit = payload => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/feedback",
+            {
+                method: 'POST',
+                body: JSON.stringify(payload),
+                headers: {
+                    "Content-type": "application/json"
+                }
+            }
+        )
+
+        dispatch(postReview())
+
+        promise.then(
+            data => data.json().then(data => dispatch(postReviewSuccess(data))),
+            error => dispatch(postReviewError(error))
+        )
+    }
+}

src/components/review-form/ReviewForm.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './review-form.scss';
+
+let ReviewForm = props => {
+    //const { handleSubmit, postReviewSubmit } = props;
+    const { handleSubmit } = props;
+
+    const submit = value => {
+        value.date = new Date().toDateString().slice(4);
+        console.log(value);
+        //postReviewSubmit(value);
+    };
+
+    return (
+        <form className="form" onSubmit={handleSubmit(submit)}>
+            <div>
+                <label htmlFor="name">Fullname</label>
+                <Field name="name" component="input" type="text" id="name"/>
+            </div>
+            <div>
+                <label htmlFor="text">Your message</label>
+                <Field name="text" component="textarea" type="text" id="text"/>
+            </div>            
+            <button type="submit">Send</button>
+        </form>
+        )
+};
+
+ReviewForm = reduxForm({
+    form: 'reviewForm'
+})(ReviewForm)
+
+export default ReviewForm

src/components/review-form/review-form.scss

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

src/conteiners/events/Events.js

@@ -17,7 +17,7 @@ export class Events extends React.Component {
 
     render() {
         const { events } = this.props;
-        console.log(events);
+        //console.log(events);
         return (
             <>
                 <Sidebar />

src/conteiners/gallery/Gallery.js

@@ -15,7 +15,7 @@ class Gallery extends React.Component {
 
     render() {
         const { gallery } = this.props;
-        console.log('gallery', this.props.gallery);
+        //console.log('gallery', this.props.gallery);
         return (
             <>
                 <Sidebar/>
@@ -37,7 +37,7 @@ class Gallery extends React.Component {
                                             item.pictures.map((photo,ind) => 
                                                 <div className="photo-item" key={ind}>
                                                     <div className="photo-item-bg">
-                                                        <img src={photo} alt="photo" />
+                                                        <img src={photo} alt={item.eventType} />
                                                     </div>
                                                 </div>
                                             )

src/conteiners/reviews/Reviews.js

@@ -1,12 +1,51 @@
 import React from 'react';
+import { connect } from "react-redux";
+
+import { getAllReviews, postReviewSubmit } from "../../actions/reviews";
 
 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."
+    }
+]
+
+export class Reviews extends React.Component {
+    componentDidMount() {
+        this.props.getAllReviews()
+    }
 
-export default class Reviews extends React.Component {
     render() {
+        const { postReviewSubmit } = this.props;
+        //const { reviews, postReviewSubmit } = this.props;
+        //console.log(reviews);
         return (
             <>
                 <Sidebar/>
@@ -15,8 +54,40 @@ export default class Reviews extends React.Component {
                         <h2>Reviews page</h2>
                     </div>
                 </div>
+                <div className="container-wrap">
+                    <div className="reviews-wrap">
+                        {
+                            reviewsInitial.reverse().map((reviewer, ind) => ind < 10 &&
+                                <div className="reviews-item" key={ind}>
+                                <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}
+                                        </div>
+                                        <div className="reviews-text">{reviewer.text}</div>
+                                    </div>
+                                </div>
+                            )
+                        }
+                    </div>
+                    <div className="reviews-wrap-add">
+                        <ReviewForm postReviewSubmit={postReviewSubmit}/>
+                    </div>
+                </div>
                 <Footer/>
             </>
         )
     }
 }
+
+const mapStateToProps = state => {
+    return {
+        reviews: state.allReviews.reviews
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getAllReviews, postReviewSubmit }
+)(Reviews);

src/conteiners/reviews/reviews.scss

@@ -1 +1,66 @@
 @import "../../styles/variables";
+
+.reviews {
+    &-wrap {
+        padding: 5rem 0 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0 -1rem;
+
+        &-add {
+            padding-bottom: 5rem;
+        }
+    }
+
+    &-item {
+        width: 100%;
+        padding: 0 1rem 3rem;
+
+        .review-content {
+            height: 100%;
+            padding: 1.5rem;
+            border: 1px solid $color-mint;
+            text-align: center;
+        }
+    }
+
+    &-name {
+        position: relative;
+        font-size: 2.1rem;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 3rem;
+            height: 0.1rem;
+            background: $color-mint;
+        }
+    }
+
+    &-date {
+        font-size: 1.4rem;
+        color: $color-blue;
+        margin-bottom: 1.5rem;
+
+        i {
+            margin-right: 1rem;
+        }
+    }
+
+    &-text {
+        font-size: 1.6rem;
+    }
+
+    @media (min-width: $min-small) {
+        &-item {
+            width: 50%;
+        }
+    }
+}

src/reducers/combineReducers.js

@@ -9,6 +9,7 @@ import getEvents from "./getAllEvents";
 import getEventCard from "./getRequestEvent";
 import photogalaryReducer from "./photogalaryReducer"
 import logout from "./logout";
+import allReviews from "./reviews";
 
 export default combineReducers({
 	form: formReducer,
@@ -19,5 +20,6 @@ export default combineReducers({
     getEventCard,
     sidebar,
     photogalaryReducer,
+    allReviews,
     logout
 });

src/reducers/reviews.js

@@ -0,0 +1,42 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    reviews: []
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_REQUEST_REVIEWS: {
+            return state;
+        }
+
+        case types.GET_REQUEST_SUCCESS_REVIEWS: {
+            //console.log('reviews',action.payload.reviews);
+            return {
+                ...state,
+                reviews: action.payload.reviews
+            };
+        }
+
+        case types.GET_REQUEST_ERROR_REVIEWS: {
+            console.log('error reviews');
+            return state;
+        }
+
+        case types.POST_REQUEST_REVIEW: {
+            return state;
+        }
+
+        case types.POST_REQUEST_SUCCESS_REVIEW: {
+            return state;
+        }
+
+        case types.POST_REQUEST_ERROR_REVIEW: {
+            console.log('error reviews');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}