diff --git a/client/components/HistoryWrap/HistoryCard/HistoryCard.jsx b/client/components/HistoryWrap/HistoryCard/HistoryCard.jsx index 9dc5109..54b5b8b 100644 --- a/client/components/HistoryWrap/HistoryCard/HistoryCard.jsx +++ b/client/components/HistoryWrap/HistoryCard/HistoryCard.jsx @@ -1,20 +1,76 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { getDateFromTimestamp } from '../../../helpers'; - +import Modal from 'react-modal'; import './HistoryCard.scss'; -const HistoryCard = ({ routeName, routeDate, isActive, routeColor }) => ( -
-

- {routeName}   - {getDateFromTimestamp(routeDate)} - - {isActive && Active} -

- -
-); +const customStyles = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + background: 'lightblue', + textAlign: 'center', + width: '20%' + } +}; +class HistoryCard extends React.Component { + constructor() { + super(); + + this.state = { + modalIsOpen: false + }; + + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + } + + componentDidMount() { + Modal.setAppElement(document.getElementById('app')); + } + + openModal = () => { + this.setState({ modalIsOpen: true }); + } + + closeModal() { + this.setState({ modalIsOpen: false }); + } + + render() { + const { modalIsOpen } = this.state; + const { routeName, routeDate, isActive, rating, feedback } = this.props; + return ( +
+

+ {routeName}   + {routeDate} + {isActive && Active} +

+ + +

Trip details

+

Route name: {routeName}

+

Route date: {routeDate}

+

Rating : {rating}

+

Feedback : {feedback}

+ + +
+ ); + } +} + HistoryCard.defaultProps = { isActive: false @@ -24,7 +80,8 @@ HistoryCard.propTypes = { routeName: PropTypes.string.isRequired, routeDate: PropTypes.string.isRequired, isActive: PropTypes.bool, - routeColor: PropTypes.string.isRequired + rating: PropTypes.number.isRequired, + feedback: PropTypes.string.isRequired }; export default HistoryCard; diff --git a/client/components/HistoryWrap/HistoryCard/HistoryCard.scss b/client/components/HistoryWrap/HistoryCard/HistoryCard.scss index 2e16bf9..381a7c6 100644 --- a/client/components/HistoryWrap/HistoryCard/HistoryCard.scss +++ b/client/components/HistoryWrap/HistoryCard/HistoryCard.scss @@ -48,3 +48,7 @@ background-color: #252d3a; } } + +.trip_details { + margin-top: 20px; +} diff --git a/client/components/HistoryWrap/HistoryWrap.jsx b/client/components/HistoryWrap/HistoryWrap.jsx index 165135c..fb38e84 100644 --- a/client/components/HistoryWrap/HistoryWrap.jsx +++ b/client/components/HistoryWrap/HistoryWrap.jsx @@ -4,9 +4,10 @@ import PropTypes from 'prop-types'; import './HistoryWrap.scss'; import HistoryCard from './HistoryCard'; + class HistoryWrap extends Component { render() { - const { allHistory } = this.props; + const { allHistory, feedbacksInfo } = this.props; return (
@@ -14,14 +15,14 @@ class HistoryWrap extends Component { History

- {allHistory.map(({ name, date, active, color }, i) => ( - ))} + {allHistory.map(({ name, date, isActive, id }, i) => ( + + ))} +
+
+ {feedbacksInfo.map(({ rating, feedback }, i) => ( + + ))}
); @@ -29,7 +30,8 @@ class HistoryWrap extends Component { } HistoryWrap.propTypes = { - allHistory: PropTypes.arrayOf(PropTypes.object).isRequired + allHistory: PropTypes.arrayOf(PropTypes.object).isRequired, + feedbacksInfo: PropTypes.arrayOf(PropTypes.object).isRequired }; export default HistoryWrap; diff --git a/client/components/HistoryWrap/HistoryWrap.scss b/client/components/HistoryWrap/HistoryWrap.scss index 8b13041..fb3f245 100644 --- a/client/components/HistoryWrap/HistoryWrap.scss +++ b/client/components/HistoryWrap/HistoryWrap.scss @@ -24,3 +24,7 @@ padding: 8px 10px 10px; text-align: center; } + +.feedbacksInfo { + display: none; +} diff --git a/client/components/TripDescriptionWrap/TripDescriptionWrap.jsx b/client/components/TripDescriptionWrap/TripDescriptionWrap.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/pages/Info/Info.scss b/client/pages/Info/Info.scss index 1b0ce62..fb7658c 100644 --- a/client/pages/Info/Info.scss +++ b/client/pages/Info/Info.scss @@ -59,4 +59,3 @@ footer { } } } - diff --git a/client/pages/Profile/Profile.jsx b/client/pages/Profile/Profile.jsx index f84598b..15e04f5 100644 --- a/client/pages/Profile/Profile.jsx +++ b/client/pages/Profile/Profile.jsx @@ -66,7 +66,7 @@ class Profile extends Component {
- +
@@ -74,5 +74,4 @@ class Profile extends Component { ); } } - export default Profile; diff --git a/package.json b/package.json index feb1bec..a651aaa 100755 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react-addons-css-transition-group": "^15.6.2", "react-dom": "^16.3.2", "react-geosuggest": "^2.8.0", + "react-modal": "^3.5.1", "react-router-dom": "^4.3.1", "uuid-v4": "^0.1.0", "react-loader-spinner": "^2.1.0" diff --git a/public/data/allHistory.json b/public/data/allHistory.json index 49d43f1..870e3e8 100644 --- a/public/data/allHistory.json +++ b/public/data/allHistory.json @@ -1,15 +1,18 @@ [ { + "id":1, "name": "Lviv - Paris", "date": "07/08/2018", "isActive": true }, { + "id":2, "name": "Lviv - Rivne", "date": "07/09/2018", "isActive": false }, { + "id":3, "name": "Rivne - Lviv", "date": "07/10/2018", "isActive": false diff --git a/public/data/feedbacksData.json b/public/data/feedbacksData.json index fb51bfa..4f421f6 100644 --- a/public/data/feedbacksData.json +++ b/public/data/feedbacksData.json @@ -1,12 +1,18 @@ [ +<<<<<<< HEAD + { "id":1, + "name": "Lviv - Paris", +======= { "name": "from trip where trip id", +>>>>>>> 276a0a0c3e59aafdc031825c862ab6e1cd6fc623 "rating": 4.7, "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.", "userName": "from user where create_by", "date": "from trip where trip id" }, { + "id":2, "name": "Lviv - Ternopil", "rating": 4.1, "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.", @@ -14,10 +20,27 @@ "date": "07/08/2018" }, { + "id":3, "name": "Lviv - Kyiv", "rating": 5, "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.", "userName": "Petro", "date": "07/08/2018" + }, + { + "id":4, + "name": "Kyiv -Lviv ", + "rating": 5, + "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.", + "userName": "Petro", + "date": "07/08/2018" + }, + { + "id":5, + "name": "Rivne -Lviv ", + "rating": 5, + "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.", + "userName": "Petro", + "date": "07/08/2018" } ]