Refining Details

roberto-rodriguez · Jun 11, 2019 · 4a0bff8 · 4a0bff8
1 parent cc4e0d7
commit 4a0bff8
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 168 deletions.
diff --git a/src/actions/deal.actions_creator.js b/src/actions/deal.actions_creator.js
@@ -7,3 +7,8 @@ export const loadPostAction = post => ({
   type: "LOAD_POST",
   data: { post }
 });
+
+export const setSelectedPostId = (selectedPostId) => ({
+  type: "SET_SELECTED_POST",
+  data: selectedPostId 
+});
diff --git a/src/actions/post.actions_creator.js b/src/actions/post.actions_creator.js
@@ -12,4 +12,4 @@ export const addPostListAction = (response, currentPage) => ({
 
 export const cleanPostListAction = () => ({
   type: "CLEAN_POST_LIST" 
-});
+}); 
diff --git a/src/cmp/header/cmp/Logo.js b/src/cmp/header/cmp/Logo.js
@@ -8,6 +8,7 @@ class Logo extends React.Component {
     var { navSolidBackground } = this.props; 
 
     var darkerColor = navSolidBackground ? 'white-text': 'blue-text';
+    var lighterColor = navSolidBackground ? 'yellow-text': 'pink-text';
 
     return (
       <NavLink exact to="/">
@@ -20,7 +21,7 @@ class Logo extends React.Component {
         }}
       >
         <span 
-          className='pink-text' 
+          className={lighterColor} 
           style={{ 
             fontWeight: "bold",
             fontFamily: "Courgette, serif",
@@ -30,7 +31,7 @@ class Logo extends React.Component {
           Fly
         </span>
         Super Cheap
-        <i className={`icon fa fa-paper-plane pink-text`} style={{marginLeft: 10 }}/>
+        <i className={`icon fa fa-paper-plane ${lighterColor}`} style={{marginLeft: 10 }}/>
       </h5>
     </NavLink>
     );

diff --git a/src/pages/details/Deal.js b/src/pages/details/Deal.js
@@ -7,6 +7,14 @@ import PropTypes from "prop-types";
 import { DealHeader, ToolBar, SampleSearchSection, NearbyCities } from "./cmp";
 
 class Deal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      sortBy: "price"
+    };
+  }
+
   componentDidMount() {
     var {
       post,
@@ -21,11 +29,13 @@ class Deal extends React.Component {
       loadPost(postId, sampleSearchCityId);
     } else {
       //if the post exist, then is comming from home, then store the post id, to scroll to that post when go back home
-      setSelectedPostId(post.id);
+      // setTimeout(() => setSelectedPostId(post.id), 2000);
 
       var sampleSearchCity = post.cityList && post.cityList[sampleSearchCityId];
       if (!sampleSearchCity || !sampleSearchCity.loaded) {
         loadCityIfNotExist(postId, sampleSearchCityId);
+      }else{
+        setSelectedPostId(post.postId);
       }
     }
   }
@@ -44,17 +54,19 @@ class Deal extends React.Component {
     var data = sampleSearchCityId == post.cityCode ? post : sampleSearchCity;
 
     var country = queryData.country || data.country;
-    var originCity = post.originCity;
+    var originCity = queryData.originCity || data.originCity;
     var originCode = queryData.originCode || data.originCode;
     var city = queryData.city || data.city;
     var cityCode = queryData.cityCode || data.cityCode;
     var avg = queryData.avg || data.avg;
-    var price = queryData.price || data.price;
+    var price = queryData.price || data.price; 
 
     var sampleSearchCityData = sampleSearchCity.data || {};
     var sampleSearchList = sampleSearchCityData.sampleSearchList || [];
 
-    var { departureDate, arrivalDate } = sampleSearchCity;
+    var { startDate, endDate } = sampleSearchCity; 
+
+    var hasNearbyCities = Object.keys(cityList).length > 1;
 
     return (
       <div>
@@ -65,35 +77,41 @@ class Deal extends React.Component {
           country={country}
         />
         <section className="section-80 section-lg-30 bg-gray-lighter">
-          <div className="container container-wide details-container">
-            <div className="row row-50 text-xl-left">
+          <div className='container container-wide details-container'>
+            <div className={`row row-50 text-xl-left ${hasNearbyCities ? '' : 'centered'}`}>
               <div className="col-xl-9">
                 <div className="inset-xxl-right-80">
                   <ToolBar
                     avg={avg}
                     price={price}
-                    departureDate={departureDate}
-                    arrivalDate={arrivalDate}
+                    startDate={startDate}
+                    endDate={endDate}
+                    onSortChange={this.onSortChange}
                   />
                   <SampleSearchSection
                     sampleSearchList={sampleSearchList}
                     originCode={originCode}
                     cityCode={cityCode}
+                    sortBy={this.state.sortBy}
                   />
                 </div>
               </div>
               <div className="col-xl-3 tickets-aside">
-                <NearbyCities
-                  postId={postId}
-                  sampleSearchCityId={sampleSearchCityId}
-                />
+                {hasNearbyCities && (
+                  <NearbyCities
+                    postId={postId}
+                    sampleSearchCityId={sampleSearchCityId}
+                  />
+                )}
               </div>
             </div>
           </div>
         </section>
       </div>
     );
   }
+
+  onSortChange = sortBy => this.setState({ sortBy });
 }
 
 Deal.propTypes = {

diff --git a/src/pages/details/actions/DealActions.js b/src/pages/details/actions/DealActions.js
@@ -1,5 +1,4 @@
-import * as dealActionsCreator from "../../../actions/deal.actions_creator";
-import * as viewStateActionsCreator from "../../../actions/viewState.actions_creator"; 
+import * as dealActionsCreator from "../../../actions/deal.actions_creator"; 
 import * as Proxy from "../../../actions/Proxy"; 
 
 
@@ -33,9 +32,9 @@ export function loadCityIfNotExist(postIdx, cityCode) {
   };
 }
 
-export function setSelectedPostId(id) {
+export function setSelectedPostId(postId) {
   return function(dispatch) {
-    dispatch(viewStateActionsCreator.setViewStateAction("selectedPostId", id));
+    dispatch(dealActionsCreator.setSelectedPostId(postId));
   };
 }
 
diff --git a/src/pages/details/cmp/index.js b/src/pages/details/cmp/index.js
@@ -1,5 +1,4 @@
-export { default as DealHeader } from './header/DealHeader' 
-export { default as TitleBar } from './titleBar/TitleBar' 
+export { default as DealHeader } from './header/DealHeader'  
 export { default as ToolBar } from './toolBar/ToolBar' 
 export { default as SampleSearchSection } from './sampleSearch/SampleSearchSection'
 export { default as NearbyCities } from './nearbyCities/NearbyCities' 
diff --git a/src/pages/details/cmp/sampleSearch/SampleSearchSection.js b/src/pages/details/cmp/sampleSearch/SampleSearchSection.js
@@ -1,8 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import SampleSearch from "./SampleSearch";
-import { connect } from "react-redux";
-import * as dealActions from "../../actions/DealActions";
 
 class SampleSearchSection extends React.Component {
   providers = {
@@ -14,14 +12,26 @@ class SampleSearchSection extends React.Component {
   };
 
   render() {
-    var { originCode, cityCode, sampleSearchList } = this.props;
+    var { originCode, cityCode, sampleSearchList, sortBy } = this.props;
+
+    var sortedList = [...sampleSearchList].sort((a, b) => {
+      if (a[sortBy] == b[sortBy]) {
+        if (a.provider) {
+          return -1;
+        } else {
+          return 1;
+        }
+      } else {
+        return a[sortBy] > b[sortBy] ? 1 : -1;
+      }
+    });
 
     var assignedProvider = false;
 
     return (
       <ul className="list-tickets">
-        {sampleSearchList &&
-          sampleSearchList.map((sampleSearch, i) => {
+        {sortedList &&
+          sortedList.map((sampleSearch, i) => {
             var { provider } = sampleSearch;
 
             if (!provider && !assignedProvider) {
@@ -51,23 +61,11 @@ class SampleSearchSection extends React.Component {
 
 SampleSearchSection.propTypes = {
   sampleSearchCityId: PropTypes.string,
+  sortBy: PropTypes.string,
   originCode: PropTypes.string,
   cityCode: PropTypes.string,
   postId: PropTypes.any,
-  sampleSearchList: PropTypes.any,
-  loadCityIfNotExist: PropTypes.func
+  sampleSearchList: PropTypes.any
 };
 
-// function mapStateToProps({ postReducer }, props) {
-//   var { postId, sampleSearchCityId } = props;
-//   var post = postReducer.postList[postId];
-//   var city = (post && post.cityList && post.cityList[sampleSearchCityId]) || {};
-//   var sampleSearchList = city.sampleSearchList;
-
-//   return { sampleSearchList };
-// }
-
-export default connect(
-  null, // mapStateToProps,
-  dealActions
-)(SampleSearchSection);
+export default SampleSearchSection;
diff --git a/src/pages/details/cmp/titleBar/TitleBar.js b/src/pages/details/cmp/titleBar/TitleBar.js
diff --git a/src/pages/details/cmp/toolBar/ToolBar.js b/src/pages/details/cmp/toolBar/ToolBar.js
@@ -1,9 +1,12 @@
-import React from "react"; 
+import React from "react";
 import PropTypes from "prop-types";
-
+import moment from "moment";
 class ToolBar extends React.Component {
   render() {
-    var { avg, price, departureDate, arrivalDate } = this.props;
+    var { avg, price, startDate, endDate, onSortChange } = this.props;
+
+    var formattedStartDate = startDate ? moment(startDate).format("MMM YYYY") : '';
+    var formattedEndDate = endDate ? moment(endDate).format("MMM YYYY") : '';
 
     return (
       <table style={{ width: "100%" }}>
@@ -21,7 +24,7 @@ class ToolBar extends React.Component {
             </td>
             <td style={{ textAlign: "center" }}>
               <h6>
-                {departureDate} — {arrivalDate}
+                {`${formattedStartDate} — ${formattedEndDate}`} 
               </h6>
             </td>
             <td>
@@ -31,10 +34,11 @@ class ToolBar extends React.Component {
                   data-placeholder="Select an option"
                   data-minimum-results-for-search="Infinity"
                   data-constraints="@Required"
+                  onChange={e => onSortChange(e.target.value)}
                 >
-                  <option>Sort by Price</option>
-                  <option value="2">Sort by Date</option>
-                  <option value="3">Sort by Nights</option>
+                  <option value="price">Sort by Price</option>
+                  <option value="departureDate">Sort by Date</option>
+                  <option value="nights">Sort by Nights</option>
                 </select>
               </div>
 
@@ -64,8 +68,9 @@ class ToolBar extends React.Component {
 ToolBar.propTypes = {
   avg: PropTypes.number,
   price: PropTypes.number,
-  departureDate: PropTypes.string,
-  arrivalDate: PropTypes.string
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
+  onSortChange: PropTypes.func
 };
 
 export default ToolBar;
diff --git a/src/pages/details/dealStyles.scss b/src/pages/details/dealStyles.scss
@@ -1,3 +1,11 @@
+
+.details-container .centered,
+.details-container .centered .col-xl-9{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 @media (max-width: 900px) {
   .list-tickets .list-item .button {
     font-size: 10px !important;

diff --git a/src/pages/home/cmp/post/Post.js b/src/pages/home/cmp/post/Post.js
@@ -9,8 +9,8 @@ import moment from "moment";
 class Post extends React.Component {
   render() {
     var { post, plan } = this.props;
-    var {
-      id,
+    var { 
+      postId,
       originCity,
       city,
       country,
@@ -25,7 +25,7 @@ class Post extends React.Component {
 
     return (
       <div
-        id={id}
+        id={postId}
         className={`${
           plan > 1
             ? "col-12 col-md-6 col-lg-4 col-xl-4 col-x1400-4 "
@@ -101,7 +101,7 @@ class Post extends React.Component {
     var { scrollToMe, post } = this.props;
 
     if (scrollToMe) {
-      document.getElementById("" + post.id).scrollIntoView();
+      document.getElementById("" + post.postId).scrollIntoView();
       window.scrollBy(0, -window.innerHeight / 2);
     }
   }
@@ -114,9 +114,9 @@ Post.propTypes = {
   scrollToMe: PropTypes.bool
 };
 
-const mapStateToProps = ({ authReducer, viewStateReducer }, props) => ({
+const mapStateToProps = ({ authReducer, postReducer }, props) => ({
   plan: authReducer.plan,
-  scrollToMe: props.post.id == viewStateReducer.selectedPostId
+  scrollToMe: props.post.postId == postReducer.selectedPostId
 });
 
 export default connect(mapStateToProps)(Post);
-Original file line number
+Diff line change
@@ Expand Up @@
     export const cleanPostListAction = () => ({
       type: "CLEAN_POST_LIST"
-    });
+    });