created results page

src/actionTypes/actionTypes.js

@@ -80,4 +80,8 @@ export const POST_RESULTS_REQUEST_FAIL = "POST_RESULTS_REQUEST_FAIL";
 
 export const GET_PHOTOGALARU_EVENTS_REQUEST = "GET_PHOTOGALARU_EVENTS_REQUEST";
 export const GET_PHOTOGALARU_EVENTS_REQUEST_SUCCESS = "GET_PHOTOGALARU_EVENTS_REQUEST_SUCCESS";
-export const GET_PHOTOGALARU_EVENTS_REQUEST_FAIL = "GET_PHOTOGALARU_EVENTS_REQUEST_FAIL";
+export const GET_PHOTOGALARU_EVENTS_REQUEST_FAIL = "GET_PHOTOGALARU_EVENTS_REQUEST_FAIL";
+
+export const GET_RESULT = "GET_RESULT";
+export const GET_RESULT_SUCCESS = "GET_RESULT_SUCCESS";
+export const GET_RESULT_ERROR = "GET_RESULT_ERROR";

src/actions/getResults.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getResultsSend = payload => ({
+    type: types.GET_RESULT,
+    payload
+});
+
+export const getResultsSuccess = payload => ({
+    type: types.GET_RESULT_SUCCESS,
+    payload
+});
+
+export const getResultsError = payload => ({
+    type: types.GET_RESULT_ERROR,
+    payload
+});
+
+export const getResults = () => {
+    return dispatch => {
+        let promise = fetch('https://api-marathon.herokuapp.com/api/v1/results')
+
+        dispatch(getResultsSend())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getResultsSuccess(data))),
+            error => dispatch(getResultsError(error))
+        )
+    }
+}

src/conteiners/profile/Profile.js

@@ -9,7 +9,6 @@ import manAvatar from '../../assets/img/man.svg';
 import womanAvatar from '../../assets/img/woman.svg';
 
 import Sidebar from '../../components/sidebar/Sidebar';
-//import SettingsForm from '../../components/settings-form/settingsForm';
 
 export class Profile extends React.Component {
     componentDidMount() {
@@ -98,7 +97,6 @@ export class Profile extends React.Component {
 
                             {/*<div className="tab-item" id="content2">
                                 <div className="settings">
-                                    <SettingsForm initialValues={JSON.parse(localStorage.user).user}/>
                                 </div>
                             </div>*/}
                         </div>

src/conteiners/profile/profile.scss

@@ -58,7 +58,7 @@
         }
     }
 
-    &-tabs-wrap {
+    /*&-tabs-wrap {
         padding-bottom: 5rem;
         text-align: center;
 
@@ -102,50 +102,7 @@
                 display: block;
             }
         }
-
-        .history {
-            overflow-x: auto;
-            
-
-            table {
-                min-width: 380px;
-                width: 100%;
-                border-collapse: collapse;
-                border: 0;
-
-                thead {
-                    tr {
-                        border-bottom: 1px solid $color-mint;
-                    }
-                }
-
-                tbody {
-                    tr {
-                        &:not(:last-child) {
-                            border-bottom: 1px solid $color-mint;
-                        }
-                    }
-                }
-
-                th {
-                    font-size: 1.2rem;
-                    color: $color-blue;
-                    font-weight: $bold;
-                }
-
-                td {
-                    font-size: 1.4rem;
-                }
-
-                th, td {
-                    padding: 10px;
-                    border-collapse: collapse;
-                    border: 0;
-                    //border-bottom: 1px solid $color-mint;
-                }
-            }
-        }
-    }
+    }*/
 
     @media screen and (max-width: $medium) {
         h5 {
@@ -190,13 +147,13 @@
                 }
             }
         }
-        &-tabs-wrap {
+        /*&-tabs-wrap {
             .tabs-main {
                 .tab-label {
                     padding: 1.5rem;
                     width: 50%;
                 }
             }
-        }        
+        }  */      
     }
 }

src/conteiners/result/Result.js

@@ -1,12 +1,20 @@
 import React from 'react';
+import { connect } from "react-redux";
+
+import { getResults } from "../../actions/getResults";
 
 import './result.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
 
-export default class Result extends React.Component {
+export class Result extends React.Component {
+    componentDidMount() {
+        this.props.getResults();
+    }
     render() {
+        const {marathone, halfMarathone} = this.props;
+        console.log('result page',marathone);
         return (
             <>
                 <Sidebar/>
@@ -15,8 +23,99 @@ export default class Result extends React.Component {
                         <h2>Result page</h2>
                     </div>
                 </div>
+
+                <div className="container-wrap">
+                    <div className="results-wrap">
+                        <div className="profile-tabs-wrap">
+                            <div className="tabs-main">
+                                <input id="tab1" type="radio" name="tabs" checked readOnly hidden/>
+                                <label htmlFor="tab1" className="tab-label">Marathone</label>
+
+                                <input id="tab2" type="radio" name="tabs" readOnly hidden/>
+                                <label htmlFor="tab2" className="tab-label">Half marathone</label>
+
+                                <div className="tab-item" id="content1">
+                                    <div className="history">
+                                        {/* имя, название ивента, тип ивента, время, пол, место */}
+                                        {/* фильтрация по тайтлу ивента,по типу ивента */}
+                                        <table>
+                                            <thead>
+                                                    <tr>
+                                                        <th>User name</th>
+                                                        <th>Event</th>
+                                                        <th>Event type</th>
+                                                        {/*<th>Distance</th>*/}
+                                                        {/*<th>rating</th>*/}
+                                                        <th>Time</th>
+                                                        <th>User sex</th>
+                                                    </tr>
+                                            </thead>
+                                            <tbody>
+                                                {
+                                                    marathone.map(result =><tr key={result._id}>
+                                                            <td>{result.eventUser.name}</td>
+                                                            <td>{result.event.title}</td>
+                                                            <td>{result.event.eventType}</td>
+                                                            <td>{result.time}</td>
+                                                            <td><i className={`fa fa-${result.eventUser.sex === 'female' ? 'female' : 'male'}`} aria-hidden="true"></i></td>
+                                                        </tr>
+                                                    )
+                                                }
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+
+                                <div className="tab-item" id="content2">
+                                    <div className="history">
+                                        {/* имя, название ивента, тип ивента, время, пол, место */}
+                                        {/* фильтрация по тайтлу ивента,по типу ивента */}
+                                        <table>
+                                            <thead>
+                                                    <tr>
+                                                        <th>User name</th>
+                                                        <th>Event</th>
+                                                        <th>Event type</th>
+                                                        {/*<th>Distance</th>*/}
+                                                        {/*<th>rating</th>*/}
+                                                        <th>Time</th>
+                                                        <th>User sex</th>
+                                                    </tr>
+                                            </thead>
+                                            <tbody>
+                                                {
+                                                    halfMarathone.map(result =><tr key={result._id}>
+                                                            <td>{result.eventUser.name}</td>
+                                                            <td>{result.event.title}</td>
+                                                            <td>{result.event.eventType}</td>
+                                                            <td>{result.time}</td>
+                                                            <td><i className={`fa fa-${result.eventUser.sex === 'female' ? 'female' : 'male'}`} aria-hidden="true"></i></td>
+                                                        </tr>
+                                                    )
+                                                }
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <Footer/>
             </>
         )
     }
 }
+
+const mapStateToProps = state => {
+    return {
+        results: state.results.results,
+        marathone: state.results.marathoneResults,
+        halfMarathone: state.results.halfMarathoneResults
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getResults }
+)(Result);

src/conteiners/result/result.scss

@@ -1 +1,15 @@
 @import "../../styles/variables";
+
+.results-wrap {
+    padding: 5rem 0;
+
+    .history {
+        i.fa {
+            color: $color-blue;
+        }
+
+        table {
+            min-width: 57.5rem;
+        }
+    } 
+}

src/conteiners/reviews/Reviews.js

@@ -23,7 +23,7 @@ export class Reviews extends React.Component {
             title: event.title,
             id: event._id
         }));
-        //console.log(Array.from(reviews).reverse());
+        
         return (
             <>
                 <Sidebar/>
@@ -69,8 +69,7 @@ export class Reviews extends React.Component {
 const mapStateToProps = state => {
     return {
         reviews: state.allReviews.reviews,
-        events: state.getEvents.events,
-        reloadPage: state.allReviews.reloadPage
+        events: state.getEvents.events
     };
 };
 

src/reducers/combineReducers.js

@@ -12,6 +12,7 @@ import logout from "./logout";
 import allReviews from "./reviews";
 import adminResultsReduser from "./adminResultsReduser"
 import userInfo from "./getUserInfo"
+import results from "./getResults";
 
 export default combineReducers({
 	form: formReducer,
@@ -25,5 +26,6 @@ export default combineReducers({
     allReviews,
     logout,
     adminResultsReduser,
-    userInfo
+    userInfo,
+    results
 });

src/reducers/getResults.js

@@ -0,0 +1,42 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    results: [],
+    marathoneResults: [],
+    halfMarathoneResults: [],
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_RESULT: {
+            return state;
+        }
+
+        case types.GET_RESULT_SUCCESS: {
+            //console.log('results',action.payload.results);
+            
+            //отфильтровать по рейтингу - ?
+            
+            const resultsArr = action.payload.results;
+            const marathoneResultsArr = resultsArr.filter( elem => elem.eventUser.distance === "Marathone" );
+            //console.log('marathoneResults',marathoneResultsArr);
+            const halfMarathoneResultsArr = resultsArr.filter( elem => elem.eventUser.distance === "Half marathone" );
+            //console.log('halfMarathoneResults',halfMarathoneResultsArr);
+
+            return {
+                ...state,
+                results: action.payload.results,
+                marathoneResults: marathoneResultsArr,
+                halfMarathoneResults: halfMarathoneResultsArr
+            };
+        }
+
+        case types.GET_RESULT_ERROR: {
+            console.log('error results');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/styles/custom.scss

@@ -137,4 +137,4 @@ i {
             color: $color-error;
         }
     }
-}
+}

src/styles/history-table.scss

@@ -0,0 +1,41 @@
+//table
+.history {
+    overflow-x: auto;
+    
+    table {
+        min-width: 38rem;
+        width: 100%;
+        border-collapse: collapse;
+        border: 0;
+
+        thead {
+            tr {
+                border-bottom: 1px solid $color-mint;
+            }
+        }
+
+        tbody {
+            tr {
+                &:not(:last-child) {
+                    border-bottom: 1px solid $color-mint;
+                }
+            }
+        }
+
+        th {
+            font-size: 1.2rem;
+            color: $color-blue;
+            font-weight: $bold;
+        }
+
+        td {
+            font-size: 1.4rem;
+        }
+
+        th, td {
+            padding: 10px;
+            border-collapse: collapse;
+            border: 0;
+        }
+    }
+}

src/styles/main.scss

@@ -4,4 +4,6 @@
 @import "custom";
 @import "logo";
 @import "filters";
-@import "reg-radio";
+@import "reg-radio";
+@import "tabs";
+@import "history-table";

src/styles/tabs.scss

@@ -0,0 +1,59 @@
+//tabs
+.profile {
+    &-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: $small) {
+        &-tabs-wrap {
+            .tabs-main {
+                .tab-label {
+                    padding: 1.5rem;
+                    width: 50%;
+                }
+            }
+        }        
+    }
+}