Trip description

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 }) => (
-  <div className={`historyCard lighten-5 ${routeColor} ${isActive ? 'is-active' : ''}`}>
-    <p className="historyCard__p">
-      {routeName} &nbsp;
-      <span className="historyCard__p--date">{getDateFromTimestamp(routeDate)}
-      </span>
-      {isActive && <span className="historyCard__p--is-active">Active</span>}
-    </p>
-    <button type="button" href="#" className="historyCard__btn">VIEW</button>
-  </div>
-);
+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 (
+      <div className={`historyCard ${isActive ? 'is-active' : ''}`}>
+        <p className="historyCard__p">
+          {routeName} &nbsp;
+          <span className="historyCard__p--date">{routeDate}</span>
+          {isActive && <span className="historyCard__p--is-active">Active</span>}
+        </p>
+        <button type="submit" onClick={this.openModal} className="historyCard__btn">VIEW</button>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={this.closeModal}
+          closeTimeoutMS={200}
+          ariaHideApp={false}
+          contentLabel="Trip details"
+          style={customStyles}
+        >
+          <h4>Trip details</h4>
+          <p>Route name:  {routeName}</p>
+          <p>Route date:  {routeDate}</p>
+          <p>Rating :  {rating}</p>
+          <p>Feedback :  {feedback}</p>
+          <button type="submit" onClick={this.closeModal} className="historyCard__btn trip_details">close!</button>
+        </Modal>
+      </div>
+    );
+  }
+}
+
 
 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;

client/components/HistoryWrap/HistoryCard/HistoryCard.scss

@@ -48,3 +48,7 @@
     background-color: #252d3a;
   }
 }
+
+.trip_details {
+  margin-top: 20px;
+}

client/components/HistoryWrap/HistoryWrap.jsx

@@ -4,32 +4,34 @@ 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 (
       <div className="all-history__wrap">
         <p className="all-history__heading">
           History
         </p>
         <div className="feedbacks__body">
-          {allHistory.map(({ name, date, active, color }, i) => (
-            <HistoryCard
-              key={i}
-              routeName={name}
-              routeColor={color}
-              routeDate={date}
-              isActive={active}
-            />))}
+          {allHistory.map(({ name, date, isActive, id }, i) => (
+            <HistoryCard key={i} routeName={name} routeDate={date} isActive={isActive} id={id} />
+          ))}
+        </div>
+        <div className="feedbacksInfo">
+          {feedbacksInfo.map(({ rating, feedback }, i) => (
+            <HistoryCard key={i} rating={rating} feedback={feedback} />
+          ))}
         </div>
       </div>
     );
   }
 }
 
 HistoryWrap.propTypes = {
-  allHistory: PropTypes.arrayOf(PropTypes.object).isRequired
+  allHistory: PropTypes.arrayOf(PropTypes.object).isRequired,
+  feedbacksInfo: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
 export default HistoryWrap;

client/components/HistoryWrap/HistoryWrap.scss

@@ -24,3 +24,7 @@
   padding: 8px 10px 10px;
   text-align: center;
 }
+
+.feedbacksInfo {
+  display: none;
+}

client/pages/Info/Info.scss

@@ -59,4 +59,3 @@ footer {
     }
   }
 }
-

client/pages/Profile/Profile.jsx

@@ -66,13 +66,12 @@ class Profile extends Component {
             </div>
             <div className="col-12 col-md-6">
               <CarsCard carsInfo={carsInfo} updateCarData={this.updateCarData} />
-              <HistoryWrap allHistory={allHistory} />
+              <HistoryWrap allHistory={allHistory} feedbacksInfo={feedbacksInfo} />
             </div>
           </div>
         </div>
       </div>
     );
   }
 }
-
 export default Profile;

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"

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

public/data/feedbacksData.json

@@ -1,23 +1,46 @@
 [  
+<<<<<<< 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.",
     "userName": "Petro",
     "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"
   }
 ]