Perfectionism

src/actions/getAllEvents.js

@@ -1,6 +1,6 @@
 import * as types from "../actionTypes/actionTypes";
 
-const eventURL = 'https://api-marathon.herokuapp.com/api/v1/event';
+const eventsURL = 'https://api-marathon.herokuapp.com/api/v1/event';
 
 export const getEvents = payload => ({
     type: types.GET_REQUEST_EVENTS,
@@ -19,7 +19,7 @@ export const getEventsError = payload => ({
 
 export const getAllEvents = (type = 'All events') => {
     return dispatch => {
-        let promise = fetch(type !== 'All events' ? `${eventURL}/?eventType=${type}` : eventURL)
+        let promise = fetch(type !== 'All events' ? `${eventsURL}/?eventType=${type}` : eventsURL)
 
         dispatch(getEvents())
 

src/actions/getRequestEvent.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const urlEvent = 'https://api-marathon.herokuapp.com/api/v1/event';
+
 export const getEventCard = payload => ({
     type: types.GET_REQUEST_EVENT_CARD,
     payload
@@ -17,7 +19,7 @@ export const getEventCardError = payload => ({
 
 export const getRequestEvent = id => {
     return dispatch => {
-        let promise = fetch(`https://api-marathon.herokuapp.com/api/v1/event?_id=${id}`)
+        let promise = fetch(`${urlEvent}?_id=${id}`)
 
         dispatch(getEventCard())
 

src/actions/getUserInfo.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const urlUser = 'https://api-marathon.herokuapp.com/api/v1/users';
+
 export const getUserInfoRequest = payload => ({
     type: types.GET_USERS_INFO,
     payload
@@ -17,7 +19,7 @@ export const getUserInfoRequestError = payload => ({
 
 export const getUserInfo = id => {
     return dispatch => {
-        let promise = fetch(`https://api-marathon.herokuapp.com/api/v1/users/${id}`)
+        let promise = fetch(`${urlUser}/${id}`)
 
         dispatch(getUserInfoRequest())
 

src/actions/logout.js

@@ -18,7 +18,6 @@ export const getLogoutUserError = payload => ({
 export const getLogoutUserSubmit = () => {
     return dispatch => {
         let promise = fetch("https://api-marathon.herokuapp.com/api/v1/auth/logout")
-        //console.log('getLogoutUserSubmit');
 
         dispatch(getLogoutUser())
 

src/components/eventInfoShort/EventInfoShort.js

@@ -6,7 +6,6 @@ import './eventInfoShort.scss';
 export class EventInfoShort extends React.Component {
     render() {
         const { title, country, city, eventDate, imgSrc, id } = this.props;
-        const dateArr = new Date(eventDate).toDateString().split(' '); //date
         return (
             <div className="event-item">
                 <Link to={`/events/${id}`}>
@@ -16,11 +15,7 @@ export class EventInfoShort extends React.Component {
                             <div className="place">{country}, {city}</div>
                         </div>
                         <div className="event-date">
-                            {
-                                dateArr.map(
-                                    (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
-                                )
-                            }
+                            { eventDate.map( (el,ind) =><span key={ind}>{el} </span>) }
                         </div>
                         <div className="bg-black"></div>
                         <div className="event-picture">

src/components/filtersEvents/FiltersEvents.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './filtersEvents.scss';
-
 import { customSelect } from "../customFields/customSelect/customSelect";
 
 let FiltersEvents = props => {

src/components/filtersEvents/filtersEvents.scss

@@ -1,13 +0,0 @@
-@import "../../styles/variables";
-
-.form-filter {
-    .form-block__select {
-        width: 100%;
-    }
-
-    .btn-group {
-        text-align: center;
-        padding-top: 1rem;
-        padding-bottom: 0;
-    }
-}

src/components/filtersReviews/filters-reviews.scss

@@ -1,13 +0,0 @@
-@import "../../styles/variables";
-
-.form-filter {
-    .form-block__select {
-        width: 100%;
-    }
-
-    .btn-group {
-        text-align: center;
-        padding-top: 1rem;
-        padding-bottom: 0;
-    }
-}

src/components/filtersReviews/filtersReviews.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './filters-reviews.scss';
-
 import { customSelect } from "../customFields/customSelect/customSelect";
 
 let FiltersReviews = props => {

src/conteiners/eventCard/EventCard.js

@@ -17,7 +17,6 @@ export class EventCard extends React.Component {
 
     render() {
         const { event, regEventSubmit } = this.props;
-        const dateArr = new Date(event.eventDate).toDateString().split(' ');//date
         return (
             <>
                 <Sidebar />
@@ -31,15 +30,11 @@ export class EventCard extends React.Component {
                                 <h2>{event.title}</h2>
                                 <p className="country">{event.country}, {event.city}</p>
                                 <p className="event-type">{event.eventType}</p>
-                                <div className="date">
-                                    <p>
-                                        {
-                                            dateArr.map(
-                                                (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
-                                            )
-                                        }
-                                    </p>
-                                </div>
+                                {
+                                    event.eventDate && <div className="date">
+                                        <p>{ event.eventDate.map((el, ind) => <span key={ind}>{el} </span>) }</p>
+                                    </div>
+                                }                                
                             </div>
                             <div className="bg-black"></div>
                         </div>

src/conteiners/home/Home.js

@@ -106,7 +106,7 @@ export class Home extends React.Component {
 
                         <div className="events-list">
                             {
-                                events.length !== 0 ? events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
+                                events.length !== 0 ? events.map( (event,ind) => ind < 6 && <EventInfoShort
                                     key={event._id}
                                     title={event.title}
                                     country={event.country}

src/conteiners/profile/profile.scss

@@ -58,52 +58,6 @@
         }
     }
 
-    /*&-tabs-wrap {
-        padding-bottom: 5rem;
-        text-align: center;
-
-        .tabs-main {
-            max-width: 100%;
-    
-            .tab-item {
-                display: none;
-                padding: 2rem;
-                border: 1px solid $color-mint;
-                border-bottom: 0;
-                text-align: left;
-            }
-    
-            .tab-label {
-                display: inline-block;
-                margin: 0 0 -1px;
-                padding: 1.5rem 5rem;
-                font-weight: $semi-bold;
-                text-align: center;
-                color: $color-grey-3;
-                border: 1px solid transparent;
-                font-size: 1.6rem;
-                width: 30%;
-    
-                &:hover {
-                    color: $color-mint;
-                    cursor: pointer;
-                }
-            }
-    
-            input:checked + .tab-label {
-                color: $color-blue;
-                border: 1px solid $color-mint;
-                border-top: 3px solid $color-mint;
-                border-bottom: 1px solid $color-white;
-            }
-    
-            #tab1:checked ~ #content1,
-            #tab2:checked ~ #content2 {
-                display: block;
-            }
-        }
-    }*/
-
     @media screen and (max-width: $medium) {
         h5 {
             text-align: center;
@@ -146,14 +100,6 @@
                     }
                 }
             }
-        }
-        /*&-tabs-wrap {
-            .tabs-main {
-                .tab-label {
-                    padding: 1.5rem;
-                    width: 50%;
-                }
-            }
-        }  */      
+        }    
     }
 }

src/conteiners/reviews/Reviews.js

@@ -37,13 +37,13 @@ export class Reviews extends React.Component {
 
                     <div className="reviews-wrap">
                         {
-                            reviews.length !== 0 ? Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
+                            reviews.length !== 0 ? reviews.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>
-                                        { new Date(reviewer.date).toDateString().slice(4) } {/*date */}
+                                            { reviewer.date }
                                         </div>
                                         <div className="reviews-text">{reviewer.text}</div>
                                     </div>

src/reducers/getAllEvents.js

@@ -13,7 +13,11 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_EVENTS: {            
-            const allEvents = action.payload.events;
+            const allEvents = action.payload.events.reverse().map( event => ({
+                    ...event,
+                    eventDate: new Date(event.eventDate).toDateString().split(' ').slice(1,4)
+                })
+            )
 
             const eventsTitles = allEvents.map(event => event.title); 
 

src/reducers/getRequestEvent.js

@@ -13,7 +13,10 @@ export default (state = initialState, action) => {
         case types.GET_REQUEST_SUCCESS_EVENT_CARD: {
             return {
                 ...state,
-                event: action.payload.events[0]
+                event: {
+                    ...action.payload.events[0],
+                    eventDate: new Date(action.payload.events[0].eventDate).toDateString().split(' ').slice(1,4)
+                }
             };
         }
 

src/reducers/reviews.js

@@ -12,9 +12,15 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_REVIEWS: {
+            const allReviews = action.payload.results.reverse().map( res => ({
+                    ...res,
+                    date: new Date(res.date).toDateString().slice(4)
+                })
+            )
+
             return {
                 ...state,
-                reviews: action.payload.results
+                reviews: allReviews
             };
         }
 

src/styles/base.scss

@@ -17,15 +17,6 @@ html {
     @media (max-width: small) {
         font-size: 50% !important;
     }
-    // @include breakpoint(lg) {
-    // 	font-size: 56.25% !important;
-    // }
-    // @include breakpoint(md) {
-    // 	font-size: 50% !important;
-    // }
-    // @include breakpoint(sm) {
-    // 	font-size: 62.5% !important;
-    // }
 }
 
 body,

src/styles/custom.scss

@@ -101,36 +101,3 @@ i {
     width: 100%;
     color: $color-blue;
 }
-
-//for the login and registration pages
-.form-quest {
-    font-size: 1.4rem;
-    margin-top:2rem;
-
-    a {
-        color: $color-mint;
-        transition: 0.5s;
-
-        &:hover {
-            color: $color-blue;
-        }
-    }
-}
-
-//input-box error message
-.input-box {
-    &__error {
-        color: $color-error;
-    }
-}
-
-//select error message
-.form-block {
-    &__select,
-    &__text-area {
-        .error {
-            font-size: 1.3rem;
-            color: $color-error;
-        }
-    }
-}

src/styles/filters.scss

@@ -13,3 +13,15 @@
         font-size: 1.4rem;
     }
 }
+
+.form-filter {
+    .form-block__select {
+        width: 100%;
+    }
+
+    .btn-group {
+        text-align: center;
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+}

src/styles/form-field.scss

@@ -0,0 +1,17 @@
+//input-box error message
+.input-box {
+    &__error {
+        color: $color-error;
+    }
+}
+
+//select error message
+.form-block {
+    &__select,
+    &__text-area {
+        .error {
+            font-size: 1.3rem;
+            color: $color-error;
+        }
+    }
+}

src/styles/login-reg.scss

@@ -0,0 +1,14 @@
+//for the login and registration pages
+.form-quest {
+    font-size: 1.4rem;
+    margin-top:2rem;
+
+    a {
+        color: $color-mint;
+        transition: 0.5s;
+
+        &:hover {
+            color: $color-blue;
+        }
+    }
+}

src/styles/main.scss

@@ -3,6 +3,8 @@
 @import "base";
 @import "custom";
 @import "logo";
+@import "login-reg";
+@import "form-field";
 @import "filters";
 @import "reg-radio";
 @import "tabs";